Merge pull request #2824 from thematters/develop

Release: v4.6.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

src/common/enums/text.ts

@@ -124,6 +124,7 @@ export const TEXT = {
       '當你獲得 15 次讚賞或積極閱讀作品，即可獲得評論相關權限',
     failureCopy: '複製失敗',
     failureLogout: '登出失敗，請重試',
+    failureDonation: '支持失敗',
     failurePublish: '發布失敗',
     failureUploadImage: '圖片上傳失敗',
     featuredComments: '社區精選',
@@ -492,6 +493,7 @@ export const TEXT = {
       '当你获得 15 次赞赏或积极阅读作品，即可获得评论相关权限',
     failureCopy: '复制失败',
     failureLogout: '登出失败，再来一次',
+    failureDonation: '支持失败',
     failurePublish: '发布失败',
     failureUploadImage: '图片上传失败',
     featuredComments: '社区精选',
@@ -866,6 +868,7 @@ export const TEXT = {
       'You can comment when you have 15 Appreciations or read more articles.',
     failureCopy: 'Failed to copy, please try again.',
     failureLogout: 'Failed to log out, please try again.',
+    failureDonation: 'Failed to Donate',
     failurePublish: 'Failed to publish, please try again.',
     failureUploadImage: 'Failed to upload, please try again.',
     featuredComments: 'Community Selected',

src/views/Me/Wallet/Balance/CurrencyFormatter/index.tsx → src/components/CurrencyFormatter/index.tsx

@@ -7,7 +7,7 @@ interface Props {
   subCurrencyCode?: string
 }
 
-const CurrencyFormatter: React.FC<Props> = ({
+export const CurrencyFormatter: React.FC<Props> = ({
   currency,
   currencyCode,
   subCurrency,
@@ -27,5 +27,3 @@ const CurrencyFormatter: React.FC<Props> = ({
     </span>
   )
 }
-
-export default CurrencyFormatter

src/components/Dialogs/DonationDialog/index.tsx

@@ -19,6 +19,7 @@ import { PayTo_payTo_transaction as PayToTx } from '~/components/GQL/mutations/_
 import { UserDonationRecipient } from './__generated__/UserDonationRecipient'
 
 type Step =
+  | 'currencyChoice'
   | 'setAmount'
   | 'addCredit'
   | 'complete'
@@ -53,6 +54,12 @@ const DynamicPayToFormConfirm = dynamic(
   () => import('~/components/Forms/PaymentForm/PayTo/Confirm'),
   { loading: Spinner }
 )
+
+const DynamicPayToFormCurrencyChoice = dynamic(
+  () => import('~/components/Forms/PaymentForm/PayTo/CurrencyChoice'),
+  { loading: Spinner }
+)
+
 const DynamicPayToFormSetAmount = dynamic(
   () => import('~/components/Forms/PaymentForm/PayTo/SetAmount'),
   { loading: Spinner }
@@ -91,7 +98,7 @@ const fragments = {
 const BaseDonationDialog = ({
   children,
   completeCallback,
-  defaultStep = 'setAmount',
+  defaultStep = 'currencyChoice',
   recipient,
   targetId,
 }: DonationDialogProps) => {
@@ -102,7 +109,7 @@ const BaseDonationDialog = ({
     openDialog: baseOpenDialog,
     closeDialog: baseCloseDialog,
   } = useDialogSwitch(true)
-  const { currStep, prevStep, forward, back } = useStep<Step>(defaultStep)
+  const { currStep, forward, back, reset } = useStep<Step>(defaultStep)
   const [windowRef, setWindowRef] = useState<Window | undefined>(undefined)
 
   const [amount, setAmount] = useState<number>(0)
@@ -136,14 +143,16 @@ const BaseDonationDialog = ({
   }
 
   const ContinueDonationButton = (
-    <Dialog.Footer.Button onClick={() => forward('confirm')}>
-      <Translate zh_hant="回到交易" zh_hans="回到交易" />
+    <Dialog.Footer.Button onClick={() => forward('setAmount')}>
+      <Translate zh_hant="回到支持" zh_hans="回到支持" />
     </Dialog.Footer.Button>
   )
 
   /**
    * Donation
    */
+
+  const isCurrencyChoice = currStep === 'currencyChoice'
   // complete dialog for donation
   const isComplete = currStep === 'complete'
   // set donation amount
@@ -164,7 +173,7 @@ const BaseDonationDialog = ({
   const isResetPassword = currStep === 'resetPassword'
   const isSetPaymentPassword = currStep === 'setPaymentPassword'
 
-  const isHKD = currency === CURRENCY.HKD
+  // const isHKD = currency === CURRENCY.HKD
 
   useEffect(() => {
     analytics.trackEvent('view_donation_dialog', { step: currStep })
@@ -180,33 +189,47 @@ const BaseDonationDialog = ({
         onDismiss={closeDialog}
         fixedHeight
       >
-        <Dialog.Header
-          closeDialog={closeDialog}
-          leftButton={
-            prevStep && !isComplete ? (
-              <Dialog.Header.BackButton onClick={back} />
-            ) : (
-              <span />
-            )
-          }
-          rightButton={
-            <Dialog.Header.CloseButton
-              closeDialog={closeDialog}
-              textId="close"
-            />
-          }
-          title={
-            isAddCredit
-              ? 'topUp'
-              : isSetPaymentPassword
-              ? 'paymentPassword'
-              : isResetPassword
-              ? 'resetPaymentPassword'
-              : isComplete
-              ? 'successDonation'
-              : 'donation'
-          }
-        />
+        {!isProcessing && (
+          <Dialog.Header
+            closeDialog={closeDialog}
+            leftButton={
+              isAddCredit ? (
+                <Dialog.Header.BackButton onClick={back} />
+              ) : (
+                <Dialog.Header.CloseButton closeDialog={closeDialog} />
+              )
+            }
+            title={
+              isAddCredit
+                ? 'topUp'
+                : isSetPaymentPassword
+                ? 'paymentPassword'
+                : isResetPassword
+                ? 'resetPaymentPassword'
+                : isComplete
+                ? 'successDonation'
+                : 'donation'
+            }
+          />
+        )}
+
+        {isCurrencyChoice && (
+          <DynamicPayToFormCurrencyChoice
+            closeDialog={() => {
+              reset(defaultStep)
+              closeDialog()
+            }}
+            defaultCurrency={currency}
+            openTabCallback={setAmountOpenTabCallback}
+            recipient={recipient}
+            submitCallback={setAmountCallback}
+            switchToSetAmount={(c: CURRENCY) => {
+              setCurrency(c)
+              forward('setAmount')
+            }}
+            targetId={targetId}
+          />
+        )}
 
         {isSetAmount && (
           <DynamicPayToFormSetAmount
@@ -215,6 +238,9 @@ const BaseDonationDialog = ({
             openTabCallback={setAmountOpenTabCallback}
             recipient={recipient}
             submitCallback={setAmountCallback}
+            switchToCurrencyChoice={() => {
+              forward('currencyChoice')
+            }}
             switchToAddCredit={() => {
               forward('addCredit')
             }}
@@ -227,14 +253,19 @@ const BaseDonationDialog = ({
             amount={amount}
             currency={currency}
             recipient={recipient}
-            submitCallback={() => forward(isHKD ? 'complete' : 'processing')}
+            switchToSetAmount={() => forward('setAmount')}
+            submitCallback={() => forward('processing')}
             switchToResetPassword={() => forward('resetPassword')}
             targetId={targetId}
           />
         )}
 
         {isProcessing && (
           <DynamicPaymentProcessingForm
+            amount={amount}
+            currency={currency}
+            recipient={recipient}
+            closeDialog={closeDialog}
             nextStep={() => forward('complete')}
             txId={payToTx?.id || ''}
             windowRef={windowRef}

src/components/Dialogs/RssFeedDialog/Content.tsx

@@ -95,7 +95,6 @@ const RssFeedDialogContent = ({
   const gateways = data?.official.gatewayUrls || []
 
   const notPushlishedLately = articlesCount !== 0 && ipnsKey === ''
-  console.log(notPushlishedLately)
 
   return (
     <section className="container">

src/components/Form/AmountRadioInput/index.tsx

@@ -2,6 +2,7 @@ import VisuallyHidden from '@reach/visually-hidden'
 import classNames from 'classnames'
 
 import { PAYMENT_CURRENCY as CURRENCY } from '~/common/enums'
+import { formatAmount } from '~/common/utils'
 
 import Field, { FieldProps } from '../Field'
 import styles from './styles.css'
@@ -63,15 +64,14 @@ const AmountOption: React.FC<AmountOptionProps> = ({
 
   const amountClasses = classNames({
     amount: true,
-    [currency === CURRENCY.LIKE ? 'like' : 'hkd']: true,
     active: value === amount,
     'u-area-disable': disabled || isBalanceInsufficient,
   })
 
   return (
     <li className={amountClasses}>
       <label htmlFor={fieldId}>
-        {amount}
+        {formatAmount(amount, 0)}
 
         <VisuallyHidden>
           <input

src/components/Form/AmountRadioInput/styles.css

@@ -9,10 +9,17 @@
   flex: 0 0 30%;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-medium);
-  color: var(--color-white);
+  color: var(--color-black);
   background: var(--color-white);
+  border: 2px solid var(--color-line-grey-light);
   border-radius: var(--spacing-xx-tight);
 
+  &.active {
+    color: var(--color-matters-green);
+    background: var(--color-green-lighter);
+    border-color: var(--color-matters-green);
+  }
+
   &:nth-child(n + 4) {
     margin-top: var(--spacing-loose);
   }
@@ -25,23 +32,3 @@
     text-align: center;
   }
 }
-
-.hkd {
-  color: var(--color-red);
-  border: 2px solid var(--color-red);
-
-  &.active {
-    color: var(--color-white);
-    background: var(--color-red);
-  }
-}
-
-.like {
-  color: var(--color-matters-green);
-  border: 2px solid var(--color-matters-green);
-
-  &.active {
-    color: var(--color-white);
-    background: var(--color-matters-green);
-  }
-}

src/components/Forms/PaymentForm/PayTo/CivicLikerButton/index.tsx

@@ -1,15 +1,7 @@
-import {
-  Button,
-  IconExternalLink16,
-  TextIcon,
-  Translate,
-  withIcon,
-} from '~/components'
+import { Button, IconExternalLink16, TextIcon, Translate } from '~/components'
 
 import { EXTERNAL_LINKS } from '~/common/enums'
 
-import { ReactComponent as IconLikeCoin } from '@/public/static/icons/likecoin.svg'
-
 import styles from './styles.css'
 
 type CivicLikerButtonProps = {
@@ -19,12 +11,9 @@ type CivicLikerButtonProps = {
 const CivicLikerButton: React.FC<CivicLikerButtonProps> = ({ likerId }) => {
   return (
     <section className="container">
-      {withIcon(IconLikeCoin)({ size: 'xl-m' })}
-
       <Button
         bgColor="white"
-        borderColor="likecoin-green"
-        size={['100%', '3rem']}
+        size={['100%', '2rem']}
         htmlHref={EXTERNAL_LINKS.CIVIC_LIKER(likerId)}
         htmlTarget="_blank"
       >
@@ -33,7 +22,7 @@ const CivicLikerButton: React.FC<CivicLikerButtonProps> = ({ likerId }) => {
           size="md"
           weight="md"
           textPlacement="left"
-          icon={<IconExternalLink16 size="xs" />}
+          icon={<IconExternalLink16 />}
         >
           <Translate
             zh_hant="成為讚賞公民支持作者"