From 57e703e0cc7ebac6c7c12a9d0256f4d5672674a3 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Tue, 5 Mar 2024 16:57:03 +0800
Subject: [PATCH] feat(ArticleDetail): revise <SetAmount />

---
 lang/default.json                             | 10 +++--
 lang/en.json                                  | 10 +++--
 lang/zh-Hans.json                             | 10 +++--
 lang/zh-Hant.json                             | 10 +++--
 .../Form/ComposedAmountInput/index.tsx        | 40 ++++++++++--------
 .../ComposedAmountInput/styles.module.css     | 42 +++++++++++++++----
 .../SetAmount/SetAmountBalance/index.tsx      | 22 ++++++++--
 .../PaymentForm/PayTo/SetAmount/index.tsx     |  8 ++--
 8 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/lang/default.json b/lang/default.json
index 754c9f0b3a..51f90899b8 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -1270,6 +1270,10 @@
     "defaultMessage": "Subscribers",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
+  "TX5UzL": {
+    "defaultMessage": "Payment will be processed by Stripe, allowing your support to be unrestricted by region.",
+    "description": "src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx"
+  },
   "TjWWxF": {
     "defaultMessage": "Broadcast sent",
     "description": "src/views/Circle/Broadcast/Broadcast.tsx"
@@ -1690,6 +1694,9 @@
   "eY3YIa": {
     "defaultMessage": "Copy comment"
   },
+  "eZ0m39": {
+    "defaultMessage": "Enter the amount"
+  },
   "enMIYK": {
     "defaultMessage": "My Page"
   },
@@ -2348,9 +2355,6 @@
     "defaultMessage": "Pay",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "y1AhBH": {
-    "defaultMessage": "Enter a custom amount"
-  },
   "y4Lyf1": {
     "defaultMessage": "This name is already taken.",
     "description": "NAME_EXISTS"
diff --git a/lang/en.json b/lang/en.json
index c242be465c..c67a451065 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -1270,6 +1270,10 @@
     "defaultMessage": "Subscribers",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
+  "TX5UzL": {
+    "defaultMessage": "Payment will be processed by Stripe, allowing your support to be unrestricted by region.",
+    "description": "src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx"
+  },
   "TjWWxF": {
     "defaultMessage": "Broadcast sent",
     "description": "src/views/Circle/Broadcast/Broadcast.tsx"
@@ -1690,6 +1694,9 @@
   "eY3YIa": {
     "defaultMessage": "Copy comment"
   },
+  "eZ0m39": {
+    "defaultMessage": "Enter the amount"
+  },
   "enMIYK": {
     "defaultMessage": "My Page"
   },
@@ -2348,9 +2355,6 @@
     "defaultMessage": "Pay",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "y1AhBH": {
-    "defaultMessage": "Enter a custom amount"
-  },
   "y4Lyf1": {
     "defaultMessage": "This name is already taken.",
     "description": "NAME_EXISTS"
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 49d1a35847..5634c9f725 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -1270,6 +1270,10 @@
     "defaultMessage": "付费人数",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
+  "TX5UzL": {
+    "defaultMessage": "付款将由 Stripe 处理，让你的支持不受地域限制",
+    "description": "src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx"
+  },
   "TjWWxF": {
     "defaultMessage": "广播已送出",
     "description": "src/views/Circle/Broadcast/Broadcast.tsx"
@@ -1690,6 +1694,9 @@
   "eY3YIa": {
     "defaultMessage": "复制评论"
   },
+  "eZ0m39": {
+    "defaultMessage": "请输入金额"
+  },
   "enMIYK": {
     "defaultMessage": "我的"
   },
@@ -2348,9 +2355,6 @@
     "defaultMessage": "付费",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "y1AhBH": {
-    "defaultMessage": "输入金额"
-  },
   "y4Lyf1": {
     "defaultMessage": "该名称已被其他用户使用",
     "description": "NAME_EXISTS"
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index b3f615250c..916b90bab0 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -1270,6 +1270,10 @@
     "defaultMessage": "付費人數",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
+  "TX5UzL": {
+    "defaultMessage": "付款將由 Stripe 處理，讓你的支持不受地域限制",
+    "description": "src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx"
+  },
   "TjWWxF": {
     "defaultMessage": "廣播已送出",
     "description": "src/views/Circle/Broadcast/Broadcast.tsx"
@@ -1690,6 +1694,9 @@
   "eY3YIa": {
     "defaultMessage": "複製評論"
   },
+  "eZ0m39": {
+    "defaultMessage": "請輸入金額"
+  },
   "enMIYK": {
     "defaultMessage": "我的"
   },
@@ -2348,9 +2355,6 @@
     "defaultMessage": "付費",
     "description": "src/views/Circle/Analytics/SubscriberAnalytics/index.tsx"
   },
-  "y1AhBH": {
-    "defaultMessage": "輸入金額"
-  },
   "y4Lyf1": {
     "defaultMessage": "該名稱已被其他使用者使用",
     "description": "NAME_EXISTS"
diff --git a/src/components/Form/ComposedAmountInput/index.tsx b/src/components/Form/ComposedAmountInput/index.tsx
index 3ffb0f48b5..8c27c4d23a 100644
--- a/src/components/Form/ComposedAmountInput/index.tsx
+++ b/src/components/Form/ComposedAmountInput/index.tsx
@@ -101,7 +101,8 @@ const AmountOption: React.FC<AmountOptionProps> = ({
   return (
     <li className={amountClasses}>
       <label htmlFor={fieldId}>
-        {formatAmount(amount, decimals)}
+        <span className={styles.currency}>{currency}</span>
+        <span className={styles.amount}>{formatAmount(amount, decimals)}</span>
 
         <VisuallyHidden>
           <input
@@ -169,23 +170,26 @@ const ComposedAmountInput: React.FC<ComposedAmountInputProps> = ({
 
         {customAmount && (
           <section className={styles.customInput}>
-            <input
-              className={
-                customAmountError ? `error ${styles.input}` : styles.input
-              }
-              type="number"
-              name="customAmount"
-              placeholder={intl.formatMessage({
-                defaultMessage: 'Enter a custom amount',
-                id: 'y1AhBH',
-              })}
-              value={undefined}
-              autoComplete="nope"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              {...customAmountInputProps}
-            />
+            <section className={styles.inputWrapper}>
+              <span className={styles.unit}>{currency}</span>
+              <input
+                className={
+                  customAmountError ? `error ${styles.input}` : styles.input
+                }
+                type="number"
+                name="customAmount"
+                placeholder={intl.formatMessage({
+                  defaultMessage: 'Enter the amount',
+                  id: 'eZ0m39',
+                })}
+                value={undefined}
+                autoComplete="nope"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                {...customAmountInputProps}
+              />
+            </section>
 
             {customAmountHint && (
               <div className={styles.hint}>{customAmountHint}</div>
diff --git a/src/components/Form/ComposedAmountInput/styles.module.css b/src/components/Form/ComposedAmountInput/styles.module.css
index 85cd0c75f5..ef16d6bace 100644
--- a/src/components/Form/ComposedAmountInput/styles.module.css
+++ b/src/components/Form/ComposedAmountInput/styles.module.css
@@ -12,8 +12,8 @@
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-medium);
   color: var(--color-black);
-  background: var(--color-white);
-  border: 1px solid var(--color-line-grey-light);
+  background: var(--color-grey-lighter);
+  border: 1px solid var(--color-grey-lighter);
   border-radius: var(--spacing-x-tight);
   transition-property: color, border-color, background-color;
 
@@ -28,22 +28,50 @@
   }
 
   & label {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    padding-top: var(--spacing-base);
-    padding-bottom: var(--spacing-base);
+    padding-top: var(--spacing-x-tight);
+    padding-bottom: var(--spacing-x-tight);
     text-align: center;
+
+    & .currency {
+      font-size: var(--font-size-xs);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-grey-darker);
+    }
+
+    & .amount {
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-black);
+    }
   }
 }
 
 .customInput {
   margin-top: var(--spacing-base);
 
-  & .input {
+  & .inputWrapper {
     @mixin form-input;
-    @mixin form-input-number;
 
-    text-align: center;
+    display: flex;
+    gap: var(--spacing-base);
+    text-align: left;
+
+    & .unit {
+      color: var(--color-grey-darker);
+      word-break: keep-all;
+    }
+
+    & .input {
+      @mixin form-input-number;
+    }
+
+    &:has(> .input:focus, > .input.focus) {
+      border-color: var(--color-grey);
+    }
   }
 
   & .hint {
diff --git a/src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx b/src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx
index 94fb89d51c..32ac613841 100644
--- a/src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx
+++ b/src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx
@@ -42,13 +42,22 @@ const SetAmountBalance: React.FC<SetAmountBalanceProps> = ({
   return (
     <section className={styles.setAmountBalance}>
       <span className={styles.left}>
-        <FormattedMessage defaultMessage="Select amount" id="Z6Z1aN" />
+        <FormattedMessage
+          defaultMessage="Select amount"
+          description="src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx"
+          id="7VSfs3"
+        />
       </span>
 
       <span className={styles.right}>
         {!isBalanceInsufficient && (
           <>
-            <FormattedMessage defaultMessage="Balance:&nbsp;" id="y2IqUi" />
+            <FormattedMessage
+              defaultMessage="Balance:"
+              description="src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx"
+              id="FKHNZb"
+            />
+            {lang === 'en' && <>&nbsp;</>}
           </>
         )}
         <span className={styles.balance}>
@@ -60,7 +69,8 @@ const SetAmountBalance: React.FC<SetAmountBalanceProps> = ({
           {isHKD && isBalanceInsufficient && (
             <FormattedMessage
               defaultMessage="Insufficient balance"
-              id="kaPKOB"
+              description="src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx"
+              id="wv08Xt"
             />
           )}
         </span>
@@ -76,7 +86,11 @@ const SetAmountBalance: React.FC<SetAmountBalanceProps> = ({
                       color="gold"
                       weight="md"
                     >
-                      <FormattedMessage defaultMessage="Top up" id="Y47aYU" />
+                      <FormattedMessage
+                        defaultMessage="Top up"
+                        description="src/components/Forms/PaymentForm/PayTo/SetAmount/SetAmountBalance/index.tsx"
+                        id="JGLi9Y"
+                      />
                     </TextIcon>
                   </Button>
                 </section>
diff --git a/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx b/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
index 4cd3d81d26..a68de9c401 100644
--- a/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
+++ b/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
@@ -235,10 +235,10 @@ const SetAmount: React.FC<FormProps> = ({
     const hkdHint = isHKD ? (
       <section>
         <Spacer size="base" />
-        <Translate
-          zh_hant="付款將由 Stripe 處理，讓你的支持不受地域限制"
-          zh_hans="付款将由 Stripe 处理，让你的支持不受地域限制"
-          en="Stripe will process your payment, so you can support the author wherever you are."
+        <FormattedMessage
+          defaultMessage="Payment will be processed by Stripe, allowing your support to be unrestricted by region."
+          id="TX5UzL"
+          description="src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx"
         />
       </section>
     ) : null