Merge pull request #4394 from thematters/feat/revise-set-payment-pass…

…word

Feat/revise set payment password

lang/default.json

@@ -208,10 +208,6 @@
     "defaultMessage": "Balance:",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "Welcome to use your wallet! {br} Please set a transaction password first",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "No data yet",
     "description": "src/views/Me/History/index.tsx"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "Broadcast"
   },
-  "bhehIF": {
-    "defaultMessage": "To protect your assets,"
-  },
   "c/z318": {
     "defaultMessage": "Incorrect email or password",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "Support Again"
   },
+  "fLvbqA": {
+    "defaultMessage": "To protect the security of your assets, please set a six-digit transaction password first."
+  },
   "fPcF7H": {
     "defaultMessage": "Adding tags helps readers find your articles."
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "This operation cannot be undone, confirm archiving?"
   },
-  "yBkdMI": {
-    "defaultMessage": "please set transaction password before top-up"
-  },
   "yCTXXb": {
     "defaultMessage": "Enter content…"
   },

lang/en.json

@@ -208,10 +208,6 @@
     "defaultMessage": "Balance:",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "Welcome to use your wallet! {br} Please set a transaction password first",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "No data yet",
     "description": "src/views/Me/History/index.tsx"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "Broadcast"
   },
-  "bhehIF": {
-    "defaultMessage": "To protect your assets,"
-  },
   "c/z318": {
     "defaultMessage": "Incorrect email or password",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "Support Again"
   },
+  "fLvbqA": {
+    "defaultMessage": "To protect the security of your assets, please set a six-digit transaction password first."
+  },
   "fPcF7H": {
     "defaultMessage": "Adding tags helps readers find your articles."
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "This operation cannot be undone, confirm archiving?"
   },
-  "yBkdMI": {
-    "defaultMessage": "please set transaction password before top-up"
-  },
   "yCTXXb": {
     "defaultMessage": "Enter content…"
   },

lang/zh-Hans.json

@@ -208,10 +208,6 @@
     "defaultMessage": "余额：",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "欢迎使用钱包！请先设置交易密码",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "尚无阅读记录",
     "description": "src/views/Me/History/index.tsx"
@@ -647,7 +643,7 @@
     "description": "src/views/ArticleDetail/Comments/LatestComments/index.tsx"
   },
   "9UNFGm": {
-    "defaultMessage": "交易密码"
+    "defaultMessage": "设置交易密码"
   },
   "9Vkz9W": {
     "defaultMessage": "图片面积不得超过 1 亿像素（如 10,000 x 10,000 像素）"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "广播"
   },
-  "bhehIF": {
-    "defaultMessage": "为了保护你的资产安全"
-  },
   "c/z318": {
     "defaultMessage": "邮箱或密码错误",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "再次支持"
   },
+  "fLvbqA": {
+    "defaultMessage": "为了保护你的资产安全，请先设置六位数字交易密码"
+  },
   "fPcF7H": {
     "defaultMessage": "添加适合标签，帮助读者找到你的作品"
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "操作无法撤销，确认归档吗？"
   },
-  "yBkdMI": {
-    "defaultMessage": "在储值前请先设置交易密码"
-  },
   "yCTXXb": {
     "defaultMessage": "请输入正文…"
   },

lang/zh-Hant.json

@@ -208,10 +208,6 @@
     "defaultMessage": "餘額：",
     "description": "src/components/Balance/index.tsx"
   },
-  "1WeErK": {
-    "defaultMessage": "歡迎使用錢包！請先設置交易密碼",
-    "description": "src/components/Forms/PaymentForm/SetPassword/index.tsx"
-  },
   "1Z1M77": {
     "defaultMessage": "尚無閱讀紀錄",
     "description": "src/views/Me/History/index.tsx"
@@ -647,7 +643,7 @@
     "description": "src/views/ArticleDetail/Comments/LatestComments/index.tsx"
   },
   "9UNFGm": {
-    "defaultMessage": "交易密碼"
+    "defaultMessage": "設置交易密碼"
   },
   "9Vkz9W": {
     "defaultMessage": "圖片面積不得超過 1 億像素（如 10,000x10,000 像素）"
@@ -2108,9 +2104,6 @@
   "beLe/F": {
     "defaultMessage": "廣播"
   },
-  "bhehIF": {
-    "defaultMessage": "爲了保護你的資產安全"
-  },
   "c/z318": {
     "defaultMessage": "郵件地址或密碼錯誤",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2282,6 +2275,9 @@
   "fKkBPz": {
     "defaultMessage": "再次支持"
   },
+  "fLvbqA": {
+    "defaultMessage": "為了保護你的資產安全，請先設置六位數字交易密碼"
+  },
   "fPcF7H": {
     "defaultMessage": "添加合適標籤，讓站內外讀者找到你的作品"
   },
@@ -3200,9 +3196,6 @@
   "yBUiiy": {
     "defaultMessage": "操作無法撤銷，確認封存嗎？"
   },
-  "yBkdMI": {
-    "defaultMessage": "在儲值前請先設置交易密碼"
-  },
   "yCTXXb": {
     "defaultMessage": "請輸入正文…"
   },

src/components/Context/PaymentPassword/index.tsx

@@ -0,0 +1,27 @@
+import { createContext, useState } from 'react'
+
+export const PaymentPasswordContext = createContext(
+  {} as {
+    hasPaymentPassword: boolean
+    setHasPaymentPassword: (hasPaymentPassword: boolean) => void
+  }
+)
+
+export const PaymentPasswordProvider = ({
+  children,
+  hasPaymentPassword: _hasPaymentPassword,
+}: {
+  children: React.ReactNode
+  hasPaymentPassword: boolean
+}) => {
+  const [hasPaymentPassword, setHasPaymentPassword] =
+    useState(_hasPaymentPassword)
+
+  return (
+    <PaymentPasswordContext.Provider
+      value={{ hasPaymentPassword, setHasPaymentPassword }}
+    >
+      {children}
+    </PaymentPasswordContext.Provider>
+  )
+}

src/components/Context/index.ts

@@ -4,4 +4,5 @@ export * from './CommentDrafts'
 export * from './DraftDetailState'
 export * from './Features'
 export * from './Language'
+export * from './PaymentPassword'
 export * from './Viewer'

src/components/Dialogs/AddCreditDialog/index.tsx

@@ -4,10 +4,10 @@ import { useContext, useEffect } from 'react'
 import { analytics } from '~/common/utils'
 import {
   Dialog,
+  PaymentPasswordContext,
   SpinnerBlock,
   useDialogSwitch,
   useStep,
-  ViewerContext,
 } from '~/components'
 
 type Step = 'setPaymentPassword' | 'addCredit'
@@ -27,16 +27,14 @@ const DynamicAddCreditForm = dynamic(
 )
 
 const BaseAddCreditDialog = ({ children }: AddCreditDialogProps) => {
-  const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
   const {
     show,
     openDialog: baseOpenDialog,
     closeDialog,
   } = useDialogSwitch(true)
 
-  const initialStep = viewer.status?.hasPaymentPassword
-    ? 'addCredit'
-    : 'setPaymentPassword'
+  const initialStep = hasPaymentPassword ? 'addCredit' : 'setPaymentPassword'
   const { currStep, forward } = useStep<Step>(initialStep)
 
   const openDialog = () => {

src/components/Dialogs/SetPaymentPasswordDialog/Content.tsx

@@ -27,17 +27,12 @@ const SetPaymentPasswordContent: React.FC<FormProps> = ({
   const isInComparedPassword = currStep === 'comparedPassword'
 
   const header = (
-    <section className={styles.reason}>
+    <section className={styles.hint}>
       {isInPassword && (
         <p>
           <FormattedMessage
-            defaultMessage="To protect your assets,"
-            id="bhehIF"
-          />
-          <br />
-          <FormattedMessage
-            defaultMessage="please set transaction password before top-up"
-            id="yBkdMI"
+            defaultMessage="To protect the security of your assets, please set a six-digit transaction password first."
+            id="fLvbqA"
           />
         </p>
       )}
@@ -51,13 +46,6 @@ const SetPaymentPasswordContent: React.FC<FormProps> = ({
           />
         </p>
       )}
-
-      <p className={styles.hint}>
-        <FormattedMessage
-          defaultMessage="Enter a 6-digit payment password."
-          id="OpeFTV"
-        />
-      </p>
     </section>
   )
 

src/components/Dialogs/SetPaymentPasswordDialog/styles.module.css

@@ -1,15 +1,7 @@
-.reason {
-  padding: var(--sp24) 0;
-  margin: 0 var(--sp16);
-  font-size: var(--text16);
-  font-weight: var(--font-bold);
-  line-height: 1.5rem;
-  text-align: center;
-}
-
 .hint {
-  margin-top: var(--sp8);
+  margin-bottom: var(--sp24);
   font-size: var(--text14);
-  font-weight: var(--font-normal);
-  color: var(--color-grey);
+  line-height: 1.375rem;
+  color: var(--color-grey-darker);
+  text-align: left;
 }

src/components/Dialogs/SubscribeCircleDialog/index.tsx

@@ -5,11 +5,11 @@ import { OPEN_SUBSCRIBE_CIRCLE_DIALOG } from '~/common/enums'
 import { analytics } from '~/common/utils'
 import {
   Dialog,
+  PaymentPasswordContext,
   SpinnerBlock,
   useDialogSwitch,
   useEventListener,
   useStep,
-  ViewerContext,
 } from '~/components'
 
 import { fragments } from './gql'
@@ -27,14 +27,14 @@ const BaseSubscribeCircleDialog = ({
   children,
   ...restProps
 }: SubscribeCircleDialogProps) => {
-  const viewer = useContext(ViewerContext)
+  const { hasPaymentPassword } = useContext(PaymentPasswordContext)
   const {
     show,
     openDialog: baseOpenDialog,
     closeDialog,
   } = useDialogSwitch(true)
 
-  const initialStep = viewer.status?.hasPaymentPassword
+  const initialStep = hasPaymentPassword
     ? 'subscribeCircle'
     : 'setPaymentPassword'
   const { currStep, forward, prevStep, back } = useStep<Step>(initialStep)

src/components/Form/PinInput/styles.module.css

@@ -2,7 +2,6 @@
   @mixin flex-center-all;
 
   width: 100%;
-  padding: 0 var(--sp16);
   margin: 0 auto;
 
   & .pinInputItem {