Merge pull request #2862 from thematters/develop

Release: v4.8.0
thematters · Oct 27, 2022 · c8aafd4 · c8aafd4
2 parents a057a9a + 6d240fd
commit c8aafd4
Show file tree

Hide file tree

Showing 48 changed files with 1,275 additions and 994 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

diff --git a/src/common/enums/externalLinks.ts b/src/common/enums/externalLinks.ts
@@ -63,10 +63,10 @@ export const GUIDE_LINKS = {
   },
   PWA: {
     zh_hant:
-      'https://matters.news/zh-Hant/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
+      'https://matters.news/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
     zh_hans:
-      'https://matters.news/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
-    en: 'https://matters.news/en/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m',
+      'https://matters.news/zh-Hans/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
+    en: 'https://matters.news/en/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4',
   },
   RSS: {
     zh_hant:

diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts
@@ -100,6 +100,7 @@ export const TEXT = {
     editUserProfile: '編輯資料',
     email: '電子信箱',
     emptySearchResults: '不好意思，什麼都沒搜到',
+    enterCustomAmount: '輸入自訂金額',
     enterDisplayName: '請輸入姓名',
     enterEmail: '請輸入電子信箱',
     enterNewEmail: '請輸入新電子信箱',
@@ -138,6 +139,7 @@ export const TEXT = {
     FORBIDDEN_BY_TARGET_STATE: '你無法對此對象進行該操作',
     FORBIDDEN: '你尚無權限進行該操作',
     forgetPassword: '忘記密碼',
+    forgetPaymentPassword: '忘記交易密碼',
     frequentSearch: '熱門搜尋',
     guide: '玩轉 Matters 實用指南',
     help: '說明',
@@ -469,6 +471,7 @@ export const TEXT = {
     editUserProfile: '编辑资料',
     email: '邮箱',
     emptySearchResults: '不好意思，什么都没搜到',
+    enterCustomAmount: '输入自订金额',
     enterDisplayName: '请输入姓名',
     enterEmail: '请输入邮箱',
     enterNewEmail: '请输入新邮箱',
@@ -507,6 +510,7 @@ export const TEXT = {
     FORBIDDEN_BY_TARGET_STATE: '你无法对此对象进行该操作',
     FORBIDDEN: '你尚无权限进行该操作',
     forgetPassword: '忘记密码',
+    forgetPaymentPassword: '忘记交易密码',
     frequentSearch: '热门搜索',
     guide: '玩转 Matters 实用指南',
     help: '说明',
@@ -844,6 +848,7 @@ export const TEXT = {
     editUserProfile: 'Edit',
     email: 'Email',
     emptySearchResults: 'Result not found',
+    enterCustomAmount: 'Enter a custom amount',
     enterDisplayName: 'Display Name',
     enterEmail: 'Email',
     enterNewEmail: 'New Email',
@@ -883,6 +888,7 @@ export const TEXT = {
       'You do not have permissionn to perform this operation',
     FORBIDDEN: 'You do not have permission to perform this operation',
     forgetPassword: 'Forget Password',
+    forgetPaymentPassword: 'Forget Payment Password',
     frequentSearch: 'Search trends',
     guide: 'Explore Matters',
     help: 'Help',
@@ -908,7 +914,7 @@ export const TEXT = {
       'Adding articles to a collection helps readers find your articles.',
     hintPassword:
       'Minimum 8 characters. Uppercase/lowercase letters, numbers and symbols are allowed',
-    hintPaymentPassword: 'Enter a 6-digit transaction password.',
+    hintPaymentPassword: 'Enter a 6-digit payment password.',
     hintPaymentPointer: 'The wallet address starts with "$".',
     hintTerm:
       'We have amended or modified our Terms and Privacy Policy. Agree and accept all Terms to continue using our Services.',

diff --git a/src/common/styles/mixins.css b/src/common/styles/mixins.css
@@ -167,6 +167,43 @@
   }
 }
 
+@define-mixin form-input-round {
+  @mixin all-transition;
+
+  height: var(--input-height);
+  padding: var(--spacing-base);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--spacing-x-tight);
+  caret-color: var(--color-matters-green);
+
+  &:focus,
+  &.focus {
+    background-color: var(--color-green-lighter);
+    border-color: var(--color-matters-green);
+  }
+  &.error {
+    border-color: var(--color-red);
+
+    &:focus,
+    &.focus {
+      background-color: transparent;
+      border-color: var(--color-red);
+    }
+  }
+
+  /* Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  /* Firefox */
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
+
 /* Components
    ========================================================================== */
 @define-mixin feed-footer-actions {

diff --git a/src/common/utils/form/validate.ts b/src/common/utils/form/validate.ts
@@ -343,7 +343,11 @@ export const validateAmount = (value: number, lang: Language) => {
   }
 }
 
-export const validateDonationAmount = (value: number, lang: Language) => {
+export const validateDonationAmount = (
+  value: number,
+  balance: number,
+  lang: Language
+) => {
   if (typeof value !== 'number') {
     return translate({ id: 'required', lang })
   }
@@ -352,6 +356,16 @@ export const validateDonationAmount = (value: number, lang: Language) => {
     return translate({
       zh_hant: '請選擇或輸入金額',
       zh_hans: '请选择或输入金额',
+      en: 'Please select or enter amount',
+      lang,
+    })
+  }
+
+  if (balance < value) {
+    return translate({
+      zh_hant: '自訂金額大於餘額',
+      zh_hans: '自订金额大于余额',
+      en: 'Custom amount is greater than your balance',
       lang,
     })
   }

diff --git a/src/components/Dialogs/DonationDialog/index.tsx b/src/components/Dialogs/DonationDialog/index.tsx
@@ -121,12 +121,14 @@ const BaseDonationDialog = ({
     openDialog: baseOpenDialog,
     closeDialog: baseCloseDialog,
   } = useDialogSwitch(true)
-  const { currStep, forward, back, reset } = useStep<Step>(defaultStep)
+  const { currStep, forward, back } = useStep<Step>(defaultStep)
   const [windowRef, setWindowRef] = useState<Window | undefined>(undefined)
 
   const [amount, setAmount] = useState<number>(0)
   const [currency, setCurrency] = useState<CURRENCY>(CURRENCY.HKD)
   const [payToTx, setPayToTx] = useState<Omit<PayToTx, '__typename'>>()
+  const [tabUrl, setTabUrl] = useState('')
+  const [tx, setTx] = useState<PayToTx>()
 
   const openDialog = () => {
     forward(defaultStep)
@@ -145,7 +147,7 @@ const BaseDonationDialog = ({
       forward(
         viewer.status?.hasPaymentPassword ? 'confirm' : 'setPaymentPassword'
       )
-    } else if (values.currency === CURRENCY.USDT) {
+    } else {
       forward('confirm')
     }
   }
@@ -235,22 +237,14 @@ const BaseDonationDialog = ({
 
         {isCurrencyChoice && (
           <DynamicPayToFormCurrencyChoice
-            closeDialog={() => {
-              reset(defaultStep)
-              closeDialog()
-            }}
-            defaultCurrency={currency}
-            openTabCallback={setAmountOpenTabCallback}
             recipient={recipient}
-            submitCallback={setAmountCallback}
             switchToSetAmount={(c: CURRENCY) => {
               setCurrency(c)
               forward('setAmount')
             }}
             switchToWalletSelect={() => {
               forward('walletSelect')
             }}
-            targetId={targetId}
           />
         )}
 
@@ -269,9 +263,7 @@ const BaseDonationDialog = ({
 
         {isSetAmount && (
           <DynamicPayToFormSetAmount
-            closeDialog={closeDialog}
-            defaultCurrency={currency}
-            openTabCallback={setAmountOpenTabCallback}
+            currency={currency}
             recipient={recipient}
             submitCallback={setAmountCallback}
             switchToCurrencyChoice={() => {
@@ -280,6 +272,8 @@ const BaseDonationDialog = ({
             switchToAddCredit={() => {
               forward('addCredit')
             }}
+            setTabUrl={setTabUrl}
+            setTx={setTx}
             targetId={targetId}
           />
         )}
@@ -294,6 +288,9 @@ const BaseDonationDialog = ({
             switchToResetPassword={() => forward('resetPassword')}
             switchToCurrencyChoice={() => forward('currencyChoice')}
             targetId={targetId}
+            openTabCallback={setAmountOpenTabCallback}
+            tabUrl={tabUrl}
+            tx={tx}
           />
         )}
 

diff --git a/src/components/Form/AmountInput/index.tsx b/src/components/Form/AmountInput/index.tsx
@@ -54,11 +54,12 @@ const AmountInput = forwardRef(
           extraButton={extraButton}
         />
 
-        <Field.Content>
+        <Field.Content noMargin>
           <span className="currency">{currency}</span>
 
           <input
             {...inputProps}
+            className={error ? 'error' : ''}
             id={fieldId}
             ref={ref}
             name={name}

diff --git a/src/components/Form/AmountInput/styles.css b/src/components/Form/AmountInput/styles.css
@@ -1,23 +1,7 @@
 input {
-  @mixin form-input;
+  @mixin form-input-round;
 
-  height: 3rem;
-  font-weight: var(--font-weight-medium);
   text-align: right;
-
-  @media (--sm-up) {
-    @mixin form-input-grey;
-  }
-
-  /* Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  -moz-appearance: textfield;
 }
 
 .currency {
@@ -26,14 +10,7 @@ input {
   left: var(--spacing-base);
   height: 100%;
   font-size: var(--font-size-md);
-  line-height: 3rem;
-  color: var(--color-grey);
+  line-height: var(--input-height);
+  color: var(--color-black);
   pointer-events: none;
 }
-
-.red-style {
-  &:focus {
-    background: #fcf6f5;
-    border-bottom-color: var(--color-red);
-  }
-}