fix: optimize the code

BUN-88
bigcommerce · Jul 21, 2022 · f8dda24 · f8dda24
1 parent 06aab7b
commit f8dda24
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 94 deletions.
diff --git a/apps/storefront/src/components/B3CustomForm.tsx b/apps/storefront/src/components/B3CustomForm.tsx
@@ -77,6 +77,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
                 {...field}
                 errors={errors}
                 control={control}
+                setValue={setValue}
               />
             )
           }

diff --git a/apps/storefront/src/components/form/B3FileUpload.tsx b/apps/storefront/src/components/form/B3FileUpload.tsx
@@ -1,12 +1,9 @@
-import { FormControl } from '@mui/material'
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'
 import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded'
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded'
 import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded'
 import DescriptionRounded from '@mui/icons-material/DescriptionRounded'
 
-import { Controller } from 'react-hook-form'
-
 import { useB3Lang } from '@b3/lang'
 
 import {
@@ -50,8 +47,7 @@ interface FileUploadProps extends B3UI.B3UIProps {
   maxFileSize?: number
   dropzoneText?: string,
   previewText?: string,
-  default?: any,
-  onChange?: (files: File[]) => void
+  default?: File[],
 }
 
 const getMaxFileSizeLabel = (maxSize: number) => {
@@ -73,27 +69,12 @@ export const B3FileUpload = (props: FileUploadProps) => {
     maxFileSize = 2097152, // 2M
     dropzoneText = b3Lang('intl.global.fileUpload.defaultText'),
     previewText = ' ',
-    control,
     fieldType,
     default: defaultValue = [],
     name,
-    required,
-    label,
-    validate,
+    setValue,
   } = props
 
-  const fieldsProps = {
-    type: fieldType,
-    name,
-    key: name,
-    defaultValue,
-    rules: {
-      required: required && b3Lang('intl.global.validate.required', { label }),
-      validate: validate && ((v: string) => validate(v, b3Lang)),
-    },
-    control,
-  }
-
   const getRejectMessage = (
     rejectedFile: File,
     acceptedFiles: string[],
@@ -119,40 +100,35 @@ export const B3FileUpload = (props: FileUploadProps) => {
 
   const getFileLimitExceedMessage = () => b3Lang('intl.global.fileUpload.fileNumberExceedsLimit', { limit: filesLimit })
 
+  const handleFilesChange = (files: File[]) => {
+    if (setValue) {
+      setValue(name, files)
+    }
+  }
+
   return (
     <>
       {
        ['file'].includes(fieldType) && (
-         <FormControl
-           sx={{
-             width: '100%',
-           }}
-         >
-           <Controller
-             {...fieldsProps}
-             render={({ field: { ref, ...rest } }) => (
-               <DropzoneBox>
-                 <DropzoneArea
-                   Icon={CloudUploadOutlinedIcon}
-                   showPreviews
-                   showFileNamesInPreview
-                   showPreviewsInDropzone={false}
-                   getDropRejectMessage={getRejectMessage}
-                   getFileLimitExceedMessage={getFileLimitExceedMessage}
-                   getPreviewIcon={getPreviewIcon}
-                   showAlerts={['error']}
-                   maxFileSize={maxFileSize}
-                   initialFiles={defaultValue}
-                   acceptedFiles={acceptedFiles}
-                   filesLimit={filesLimit}
-                   dropzoneText={dropzoneText}
-                   previewText={previewText}
-                   {...rest}
-                 />
-               </DropzoneBox>
-             )}
-           />
-         </FormControl>
+       <DropzoneBox>
+         <DropzoneArea
+           Icon={CloudUploadOutlinedIcon}
+           showPreviews
+           showFileNamesInPreview
+           showPreviewsInDropzone={false}
+           getDropRejectMessage={getRejectMessage}
+           getFileLimitExceedMessage={getFileLimitExceedMessage}
+           getPreviewIcon={getPreviewIcon}
+           showAlerts={['error']}
+           maxFileSize={maxFileSize}
+           initialFiles={defaultValue}
+           acceptedFiles={acceptedFiles}
+           filesLimit={filesLimit}
+           dropzoneText={dropzoneText}
+           previewText={previewText}
+           onChange={handleFilesChange}
+         />
+       </DropzoneBox>
        )
      }
     </>

diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx
@@ -15,7 +15,7 @@ import { B3CustomForm } from '../../components'
 import { createBCCompanyUser, createB2BCompanyUser, uploadB2BFile } from '../../shared/service/b2b'
 
 import {
-  RegisterFileds, CustomFieldItems, Base64, validatorRules,
+  RegisterFields, CustomFieldItems, Base64, validatorRules,
 } from './config'
 
 import { storeHash } from '../../utils'
@@ -57,7 +57,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     const newPasswordInformation: Array<CustomFieldItems> = []
     let emailItem: CustomFieldItems = {}
     if (list && list.length) {
-      const emailFileds = list.find((item: RegisterFileds) => item.name === emailName) || {}
+      const emailFileds = list.find((item: RegisterFields) => item.name === emailName) || {}
       emailItem = { ...emailFileds }
       emailItem.label = `${b3Lang('intl.user.register.RegisterComplete.email')}`
       emailItem.name = 'email'

diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx
@@ -22,7 +22,7 @@ import { B3Sping } from '../../components/spin/B3Sping'
 import {
   conversionDataFormat,
   bcContactInformationFields,
-  RegisterFileds,
+  RegisterFields,
   contactInformationFields,
   getRegisterLogo,
   companyInformationFields,
@@ -72,14 +72,14 @@ export default function Registered(props: RegisteredProps) {
         const { storeBasicInfo: { storeName } } = await storeB2BBasicInfo()
         const registerLogo = getRegisterLogo(quoteConfig)
 
-        const newCustomerAccount = customerAccount.length ? customerAccount.filter((field: RegisterFileds) => field.custom) : []
-        const newAdditionalInformation: Array<RegisterFileds> = conversionDataFormat(newCustomerAccount)
+        const newCustomerAccount = customerAccount.length ? customerAccount.filter((field: RegisterFields) => field.custom) : []
+        const newAdditionalInformation: Array<RegisterFields> = conversionDataFormat(newCustomerAccount)
 
-        const filterCompanyExtraFields = companyExtraFields.length ? companyExtraFields.filter((field: RegisterFileds) => field?.visibleToEnduser) : []
-        const newCompanyExtraFields: Array<RegisterFileds> = conversionDataFormat(filterCompanyExtraFields)
+        const filterCompanyExtraFields = companyExtraFields.length ? companyExtraFields.filter((field: RegisterFields) => field?.visibleToEnduser) : []
+        const newCompanyExtraFields: Array<RegisterFields> = conversionDataFormat(filterCompanyExtraFields)
 
-        const customAddress = billingAddress.length ? billingAddress.filter((field: RegisterFileds) => field.custom) : []
-        const addressExtraFields: Array<RegisterFileds> = conversionDataFormat(customAddress)
+        const customAddress = billingAddress.length ? billingAddress.filter((field: RegisterFields) => field.custom) : []
+        const addressExtraFields: Array<RegisterFields> = conversionDataFormat(customAddress)
 
         const newAddressInformationFields = addressInformationFields(b3Lang).map((addressFileds) => {
           if (addressFileds.name === 'country') {
@@ -88,8 +88,8 @@ export default function Registered(props: RegisteredProps) {
           return addressFileds
         })
 
-        const filterPasswordInformation = customerAccount.length ? customerAccount.filter((field: RegisterFileds) => !field.custom && field.fieldType === 'password') : []
-        const newPasswordInformation: Array<RegisterFileds> = conversionDataFormat(filterPasswordInformation)
+        const filterPasswordInformation = customerAccount.length ? customerAccount.filter((field: RegisterFields) => !field.custom && field.fieldType === 'password') : []
+        const newPasswordInformation: Array<RegisterFields> = conversionDataFormat(filterPasswordInformation)
         if (dispatch) {
           dispatch({
             type: 'all',

diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx
@@ -20,7 +20,7 @@ import RegisteredSigleCheckBox from './component/RegisteredSigleCheckBox'
 
 import { RegisteredContext } from './context/RegisteredContext'
 
-import { RegisterFileds, CustomFieldItems } from './config'
+import { RegisterFields, CustomFieldItems } from './config'
 
 import { getB2BCompanyUserInfo } from '../../shared/service/b2b'
 
@@ -80,13 +80,13 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
         if (userType === 1) {
           const contactInfo: any = accountType === '1' ? contactInformation : bcContactInformationFields
           const contactName = accountType === '1' ? 'contactInformation' : 'bcContactInformationFields'
-          const newContactInfo = contactInfo.map((item: RegisterFileds) => {
+          const newContactInfo = contactInfo.map((item: RegisterFields) => {
             item.default = data[item.name] || item.default
             return item
           })
-          let newAdditionalInformation: Array<RegisterFileds> = []
+          let newAdditionalInformation: Array<RegisterFields> = []
           if (additionalInformation) {
-            newAdditionalInformation = (additionalInformation as Array<RegisterFileds>).map((item: RegisterFileds) => {
+            newAdditionalInformation = (additionalInformation as Array<RegisterFields>).map((item: RegisterFields) => {
               item.default = data[item.name] || item.default
               return item
             })

diff --git a/apps/storefront/src/pages/registered/RegisteredDetail.tsx b/apps/storefront/src/pages/registered/RegisteredDetail.tsx
@@ -20,7 +20,7 @@ import { RegisteredContext } from './context/RegisteredContext'
 
 import {
   CustomFieldItems,
-  RegisterFileds,
+  RegisterFields,
   Country,
   State,
   Base64,
@@ -30,7 +30,13 @@ import { InformationFourLabels, AddressBox, TipContent } from './styled'
 
 import { validateBCCompanyExtraFields } from '../../shared/service/b2b'
 
-export default function RegisteredDetail(props: any) {
+interface RegisteredDetailProps {
+  handleBack: () => void,
+  handleNext: () => void,
+  activeStep: number,
+}
+
+export default function RegisteredDetail(props: RegisteredDetailProps) {
   const { handleBack, handleNext, activeStep } = props
 
   const { state, dispatch } = useContext(RegisteredContext)
@@ -72,7 +78,7 @@ export default function RegisteredDetail(props: any) {
 
   const handleCountryChange = (countryCode: string, stateCode: string = '') => {
     const stateList = countryList.find((country: Country) => country.countryCode === countryCode)?.states || []
-    const stateFields = addressBasicFields.find((formFileds: RegisterFileds) => formFileds.name === 'state')
+    const stateFields = addressBasicFields.find((formFileds: RegisterFields) => formFileds.name === 'state')
 
     if (stateFields) {
       if (stateList.length > 0) {
@@ -135,7 +141,7 @@ export default function RegisteredDetail(props: any) {
     return data.errMsg || ''
   }
 
-  const setRegisterFiledsValue = (formFields: Array<any>, formData: CustomFieldItems) => formFields.map((field) => {
+  const setRegisterFieldsValue = (formFields: Array<RegisterFields>, formData: CustomFieldItems) => formFields.map((field) => {
     field.default = formData[field.name] || field.default
     return field
   })
@@ -145,7 +151,7 @@ export default function RegisteredDetail(props: any) {
       showLading(true)
 
       try {
-        const extraFields = companyExtraFields.map((field: any) => ({
+        const extraFields = companyExtraFields.map((field: RegisterFields) => ({
           fieldName: Base64.decode(field.name),
           fieldValue: data[field.name] || field.default,
         }))
@@ -162,11 +168,11 @@ export default function RegisteredDetail(props: any) {
 
         setErrorMessage('')
 
-        const newCompanyInformation = setRegisterFiledsValue(companyInformation, data)
-        const newCompanyExtraFields = setRegisterFiledsValue(companyExtraFields, data)
-        const newCompanyAttachment = setRegisterFiledsValue(companyAttachment, data)
-        const newAddressBasicFields = setRegisterFiledsValue(addressBasicFields, data)
-        const newAddressExtraFields = setRegisterFiledsValue(addressExtraFields, data)
+        const newCompanyInformation = setRegisterFieldsValue(companyInformation, data)
+        const newCompanyExtraFields = setRegisterFieldsValue(companyExtraFields, data)
+        const newCompanyAttachment = setRegisterFieldsValue(companyAttachment, data)
+        const newAddressBasicFields = setRegisterFieldsValue(addressBasicFields, data)
+        const newAddressExtraFields = setRegisterFieldsValue(addressExtraFields, data)
 
         dispatch({
           type: 'all',

diff --git a/apps/storefront/src/pages/registered/RegisteredFinish.tsx b/apps/storefront/src/pages/registered/RegisteredFinish.tsx
@@ -9,7 +9,7 @@ import RegisteredStepButton from './component/RegisteredStepButton'
 
 import { StyleTipContainer } from './styled'
 
-export default function RegisteredFinish(props: { activeStep: any; handleFinish: () => void}) {
+export default function RegisteredFinish(props: { activeStep: number; handleFinish: () => void}) {
   const { activeStep, handleFinish } = props
   const { state } = useContext(RegisteredContext)
   const b3Lang = useB3Lang()

diff --git a/apps/storefront/src/pages/registered/config.ts b/apps/storefront/src/pages/registered/config.ts
@@ -14,7 +14,7 @@ export interface ValidateOptions {
   min?: string | Number,
   [key: string]: any
 }
-export interface RegisterFileds {
+export interface RegisterFields {
   name: string,
   label?: string,
   required: Boolean,
@@ -29,7 +29,7 @@ interface ValidateOptionItems {
   [key: string]: any
 }
 
-export type ContactInformationItems = Array<RegisterFileds>
+export type ContactInformationItems = Array<RegisterFields>
 
 export const steps = [
   'intl.user.register.step.account',
@@ -76,7 +76,7 @@ const fieldsType = {
   date: ['date'],
 }
 
-const classificationType = (item: RegisterFileds) => {
+const classificationType = (item: RegisterFields) => {
   let optionItems: ValidateOptionItems = {}
   if (fieldsType.text.includes(item.fieldType)) {
     optionItems = {
@@ -140,8 +140,8 @@ const classificationType = (item: RegisterFileds) => {
   return optionItems
 }
 
-export const conversionDataFormat = (registerArr: Array<RegisterFileds>) => {
-  const newRegisterArr = registerArr.map((item: RegisterFileds) => {
+export const conversionDataFormat = (registerArr: Array<RegisterFields>) => {
+  const newRegisterArr = registerArr.map((item: RegisterFields) => {
     const requiredItems = {
       id: item.id || item.fieldName,
       name: item.name || Base64.encode(item.fieldName),

diff --git a/apps/storefront/src/pages/registered/context/RegisteredContext.tsx b/apps/storefront/src/pages/registered/context/RegisteredContext.tsx
@@ -2,22 +2,22 @@ import React, {
   useReducer, createContext, Dispatch, ReactNode, useMemo,
 } from 'react'
 
-import { RegisterFileds, Country, State } from '../config'
+import { RegisterFields, Country, State } from '../config'
 
 interface RegisterState {
-  contactInformation?: Array<RegisterFileds> | Array<[]>,
+  contactInformation?: Array<RegisterFields>,
   accountType?: string,
-  additionalInformation?: Array<RegisterFileds> | Array<[]>,
-  bcContactInformationFields?: Array<RegisterFileds> | Array<[]>,
+  additionalInformation?: Array<RegisterFields>,
+  bcContactInformationFields?: Array<RegisterFields>,
   emailMarketingNewsletter?: Boolean,
-  companyInformation?: Array<RegisterFileds> | Array<[]>,
-  companyExtraFields?: Array<RegisterFileds> | Array<[]>,
-  companyAttachment?: Array<RegisterFileds> | Array<[]>,
-  addressBasicFields?: Array<RegisterFileds>,
-  addressExtraFields?: Array<RegisterFileds> | Array<[]>,
+  companyInformation?: Array<RegisterFields>,
+  companyExtraFields?: Array<RegisterFields>
+  companyAttachment?: Array<RegisterFields>,
+  addressBasicFields?: Array<RegisterFields>,
+  addressExtraFields?: Array<RegisterFields>,
   countryList?: Array<Country>,
   stateList?: Array<State>,
-  passwordInformation?: Array<RegisterFileds> | Array<[]>,
+  passwordInformation?: Array<RegisterFields>,
   isLoading?: Boolean,
   submitSuccess?: Boolean,
   isAutoApproval?: Boolean,

diff --git a/apps/storefront/src/shared/service/b2b/api/global.ts b/apps/storefront/src/shared/service/b2b/api/global.ts
@@ -2,11 +2,11 @@ import { B3Request } from '../../request/b3Fetch'
 
 interface UploadFileData {
   file: File,
-  type?: string
+  type: string
 }
 
 export const uploadB2BFile = (data: UploadFileData) => {
-  const { file, type = '' } = data
+  const { file, type } = data
 
   const formData = new FormData()
   formData.append('mediaFile', file)