1013 - Update Bank Account Forms (#1160)

* update create/edit bank account -change Status and Account Type to Select Fields -comment out fingerprint ( we are hiding it for now ) add captialize util function update types * add translation * use translate method * remove import * remove import * remove capitalize util * Update public/locales/en/bankaccounts.json Co-authored-by: Ilko Kacharov <kachar136@gmail.com> * Update public/locales/bg/bankaccounts.json Co-authored-by: Ilko Kacharov <kachar136@gmail.com> * add new reusable components for Status and Account holder select * clean up comments * cleanup comments Co-authored-by: Andrey <andrey.goranov@mentormate.com> Co-authored-by: Ilko Kacharov <kachar136@gmail.com>
podkrepi-bg · Nov 23, 2022 · c1846ae · c1846ae
1 parent 84bbdac
commit c1846ae
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 47 deletions.
diff --git a/public/locales/bg/bankaccounts.json b/public/locales/bg/bankaccounts.json
@@ -3,13 +3,26 @@
     "add": "Добави нова сметка",
     "edit": "Редактирай сметка"
   },
-  "status": "Статус",
-  "ibanNumber": "IBAN",
-  "accountHolderName": "Собственик",
-  "AccountHolderType": "Вид акаунт",
-  "bankName": "Име на банка",
-  "bankIdCode": "BIC/SWIFT",
-  "fingerprint": "Е-Подпис",
+  "fields": {
+    "status": "Статус",
+    "ibanNumber": "IBAN",
+    "accountHolderName": "Собственик",
+    "accountHolderType": "Вид акаунт",
+    "bankName": "Име на банка",
+    "bankIdCode": "BIC/SWIFT",
+    "fingerprint": "Е-Подпис"
+  },
+  "status": {
+    "new": "Нов",
+    "validated": "Валидиран",
+    "verified": "Верифициран",
+    "verification_failed": "Неуспешна верификация",
+    "errored": "С грешки"
+  },
+  "accountHolderType": {
+    "individual": "Индивидуален",
+    "company": "Компания"
+  },
   "withdrawals": "Извлечения",
   "actions": "Действия",
   "alerts": {

diff --git a/public/locales/en/bankaccounts.json b/public/locales/en/bankaccounts.json
@@ -3,13 +3,26 @@
     "add": "Add new account",
     "edit": "Edit account"
   },
-  "status": "Status",
-  "ibanNumber": "IBAN",
-  "accountHolderName": "Account holder name",
-  "AccountHolderType": "Account holder type",
-  "bankName": "Bank name",
-  "bankIdCode": "BIC/SWIFT",
-  "fingerprint": "E-Sign",
+  "fields": {
+    "status": "Status",
+    "ibanNumber": "IBAN",
+    "accountHolderName": "Account holder name",
+    "AccountHolderType": "Account holder type",
+    "bankName": "Bank name",
+    "bankIdCode": "BIC/SWIFT",
+    "fingerprint": "E-Sign"
+  },
+  "status": {
+    "new": "New",
+    "validated": "Validated",
+    "verified": "Verified",
+    "verification_failed": "Verification Failed",
+    "errored": "Errored"
+  },
+  "accountHolderType": {
+    "individual": "Individual",
+    "company": "Company"
+  },
   "withdrawals": "Withdrawals",
   "actions": "Actions",
   "alerts": {

diff --git a/src/components/bankaccounts/AccountHolderSelect.tsx b/src/components/bankaccounts/AccountHolderSelect.tsx
@@ -0,0 +1,20 @@
+import { AccountHolderType } from './BankAccountTypes'
+import FormSelectField from 'components/common/form/FormSelectField'
+import { useTranslation } from 'next-i18next'
+
+export default function AccountHolderSelect() {
+  const { t } = useTranslation()
+  return (
+    <FormSelectField
+      name="accountHolderType"
+      label="bankaccounts:fields.accountHolderType"
+      options={Object.keys(AccountHolderType).map((key: string) => {
+        return {
+          key,
+          value: AccountHolderType[key as AccountHolderType],
+          name: t(`bankaccounts:accountHolderType.${key}`),
+        }
+      })}
+    />
+  )
+}
diff --git a/src/components/bankaccounts/BankAccountStatusSelect.tsx b/src/components/bankaccounts/BankAccountStatusSelect.tsx
@@ -0,0 +1,23 @@
+import { BankAccountStatus } from './BankAccountTypes'
+import FormSelectField from 'components/common/form/FormSelectField'
+import { useTranslation } from 'next-i18next'
+
+type Props = {
+  name?: string
+}
+export default function BankAccountStatusSelect({ name = 'status' }: Props) {
+  const { t } = useTranslation()
+  return (
+    <FormSelectField
+      name={name}
+      label="bankaccounts:fields.status"
+      options={Object.keys(BankAccountStatus).map((key: string) => {
+        return {
+          key,
+          value: BankAccountStatus[key as BankAccountStatus],
+          name: t(`bankaccounts:status.${key}`),
+        }
+      })}
+    />
+  )
+}
diff --git a/src/components/bankaccounts/BankAccountsEditForm.tsx b/src/components/bankaccounts/BankAccountsEditForm.tsx
@@ -15,6 +15,8 @@ import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
 import LinkButton from 'components/common/LinkButton'
 import { BankAccountInput, BankAccountResponse } from 'gql/bankaccounts'
+import BankAccountStatusSelect from './BankAccountStatusSelect'
+import AccountHolderSelect from './AccountHolderSelect'
 
 import { validationSchemaBankAccForm } from './BankAccountsForm'
 
@@ -33,7 +35,6 @@ export default function BankAccountsEditForm({ id }: Props) {
     accountHolderType: data?.accountHolderType,
     bankName: data?.bankName,
     bankIdCode: data?.bankIdCode,
-    fingerprint: data?.fingerprint,
   }
 
   const mutation = useMutation<
@@ -73,33 +74,26 @@ export default function BankAccountsEditForm({ id }: Props) {
         validationSchema={validationSchemaBankAccForm}>
         <Grid container spacing={3}>
           <Grid item xs={12}>
-            <FormTextField type="text" label="bankaccounts:status" name="status" />
+            <BankAccountStatusSelect />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="ibanNumber" label="bankaccounts:ibanNumber" />
+            <FormTextField type="text" name="ibanNumber" label="bankaccounts:fields.ibanNumber" />
           </Grid>
           <Grid item xs={12}>
             <FormTextField
               type="text"
               name="accountHolderName"
-              label="bankaccounts:accountHolderName"
+              label="bankaccounts:fields.accountHolderName"
             />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
-              type="text"
-              name="AccountHolderType"
-              label="bankaccounts:AccountHolderType"
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <FormTextField type="text" name="bankName" label="bankaccounts:bankName" />
+            <AccountHolderSelect />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="bankIdCode" label="bankaccounts:bankIdCode" />
+            <FormTextField type="text" name="bankName" label="bankaccounts:fields.bankName" />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="fingerprint" label="bankaccounts:fingerprint" />
+            <FormTextField type="text" name="bankIdCode" label="bankaccounts:fields.bankIdCode" />
           </Grid>
           <Grid item xs={6}>
             <SubmitButton fullWidth label="admin:cta.submit" loading={mutation.isLoading} />

diff --git a/src/components/bankaccounts/BankAccountsForm.tsx b/src/components/bankaccounts/BankAccountsForm.tsx
@@ -18,6 +18,8 @@ import { ApiErrors } from 'service/apiErrors'
 import { routes } from 'common/routes'
 
 import { AccountHolderType, BankAccountStatus } from './BankAccountTypes'
+import BankAccountStatusSelect from './BankAccountStatusSelect'
+import AccountHolderSelect from './AccountHolderSelect'
 
 export const validationSchemaBankAccForm: yup.SchemaOf<BankAccountsData> = yup
   .object()
@@ -26,10 +28,9 @@ export const validationSchemaBankAccForm: yup.SchemaOf<BankAccountsData> = yup
     status: yup.string().trim().min(1).max(100).required(),
     ibanNumber: yup.string().trim().min(5).max(34).required(),
     accountHolderName: yup.string().trim().min(10).max(100).required(),
-    AccountHolderType: yup.string().trim().min(1).max(100).required(),
+    accountHolderType: yup.string().trim().min(1).max(100).required(),
     bankName: yup.string().trim().min(10).max(100).required(),
     bankIdCode: yup.string().trim().min(8).max(11).required(),
-    fingerprint: yup.string().trim().min(10).max(100).required(),
   })
 
 export default function BankAccountsForm() {
@@ -42,7 +43,6 @@ export default function BankAccountsForm() {
     accountHolderType: AccountHolderType.individual,
     bankName: '',
     bankIdCode: '',
-    fingerprint: '',
   }
 
   const mutation = useMutation<
@@ -82,33 +82,26 @@ export default function BankAccountsForm() {
         validationSchema={validationSchemaBankAccForm}>
         <Grid container spacing={3}>
           <Grid item xs={12}>
-            <FormTextField type="text" label="bankaccounts:status" name="status" />
+            <BankAccountStatusSelect />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="ibanNumber" label="bankaccounts:ibanNumber" />
+            <FormTextField type="text" name="ibanNumber" label="bankaccounts:fields.ibanNumber" />
           </Grid>
           <Grid item xs={12}>
             <FormTextField
               type="text"
               name="accountHolderName"
-              label="bankaccounts:accountHolderName"
+              label="bankaccounts:fields.accountHolderName"
             />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
-              type="text"
-              name="AccountHolderType"
-              label="bankaccounts:AccountHolderType"
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <FormTextField type="text" name="bankName" label="bankaccounts:bankName" />
+            <AccountHolderSelect />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="bankIdCode" label="bankaccounts:bankIdCode" />
+            <FormTextField type="text" name="bankName" label="bankaccounts:fields.bankName" />
           </Grid>
           <Grid item xs={12}>
-            <FormTextField type="text" name="fingerprint" label="bankaccounts:fingerprint" />
+            <FormTextField type="text" name="bankIdCode" label="bankaccounts:fields.bankIdCode" />
           </Grid>
           <Grid item xs={6}>
             <SubmitButton fullWidth label="admin:cta.submit" loading={mutation.isLoading} />

diff --git a/src/gql/bankaccounts.ts b/src/gql/bankaccounts.ts
@@ -20,15 +20,13 @@ export type BankAccountInput = {
   accountHolderType: AccountHolderType | undefined
   bankName?: string | undefined
   bankIdCode?: string | undefined
-  fingerprint?: string | undefined
 }
 
 export type BankAccountsData = {
   status: string
   ibanNumber: string
   accountHolderName: string
-  AccountHolderType: string
+  accountHolderType: string
   bankName: string
   bankIdCode: string
-  fingerprint: string
 }