feat: bun1943 register verify (#946)

* fix: register verify bun1943-s48 https://bigc-b2b.atlassian.net/browse/BUN-1943 * fix: register verify
bigcommerce · Mar 5, 2024 · fb2fe30 · fb2fe30
1 parent 6129f7e
commit fb2fe30
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 6 deletions.
diff --git a/apps/storefront/src/components/B3CustomForm.tsx b/apps/storefront/src/components/B3CustomForm.tsx
@@ -14,7 +14,7 @@ import {
 } from './form'
 
 export default function B3CustomForm(props: B3UI.B3CustomFormProps) {
-  const { formFields, errors, control, getValues, setValue } = props
+  const { formFields, errors, control, getValues, setValue, setError } = props
 
   const renderFormFields = (fields: any) =>
     fields.map((field: B3UI.B3CustomFormValue) => {
@@ -75,6 +75,7 @@ export default function B3CustomForm(props: B3UI.B3CustomFormProps) {
                 errors={errors}
                 control={control}
                 setValue={setValue}
+                setError={setError}
               />
             )}
             {['rectangle'].includes(fieldType) && (

diff --git a/apps/storefront/src/components/form/B3ControlFileUpload.tsx b/apps/storefront/src/components/form/B3ControlFileUpload.tsx
@@ -1,11 +1,13 @@
+import { useState } from 'react'
 import { DropzoneArea, FileObject, PreviewIconProps } from 'react-mui-dropzone'
 import { useB3Lang } from '@b3/lang'
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'
 import DescriptionRounded from '@mui/icons-material/DescriptionRounded'
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded'
 import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded'
 import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded'
-import { FormLabel } from '@mui/material'
+import { FormLabel, Typography } from '@mui/material'
+import isEmpty from 'lodash-es/isEmpty'
 
 import { FILE_UPLOAD_ACCEPT_TYPE } from '../../constants'
 
@@ -43,6 +45,8 @@ interface FileUploadProps extends B3UI.B3UIProps {
   previewText?: string
   default?: File[]
   labelColor?: string
+  errors?: CustomFieldItems
+  required?: boolean
 }
 
 const getMaxFileSizeLabel = (maxSize: number) => {
@@ -70,7 +74,12 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     setValue,
     label,
     labelColor = 'text.primary',
+    required,
+    errors = {},
+    setError,
+    control,
   } = props
+  const [deleteCount, setDeleteCount] = useState(0)
 
   const getRejectMessage = (
     rejectedFile: File,
@@ -107,6 +116,23 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     })
 
   const handleFilesChange = (files: File[]) => {
+    if (deleteCount > 0 && files.length === 0 && required) {
+      setError(name, {
+        type: 'required',
+        message: b3Lang('global.validate.required', {
+          label,
+        }),
+      })
+      setDeleteCount(0)
+    }
+    if (files.length > 0 && !isEmpty(errors)) {
+      const cError = errors[name]
+      if (!isEmpty(cError)) {
+        delete errors[name]
+        // eslint-disable-next-line no-underscore-dangle
+        control?._setErrors(errors)
+      }
+    }
     if (setValue) {
       setValue(name, files)
     }
@@ -119,10 +145,10 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
           sx={{
             marginBottom: '5px',
             display: 'block',
-            color: labelColor,
+            color: (errors as any)[name] ? '#d32f2f' : labelColor,
           }}
         >
-          {label}
+          {`${label} ${required ? '*' : ''}`}
         </FormLabel>
       )}
       <DropzoneBox>
@@ -142,8 +168,22 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
           dropzoneText={dropzoneText}
           previewText={previewText}
           onChange={handleFilesChange}
+          onDelete={() => setDeleteCount(deleteCount + 1)}
         />
       </DropzoneBox>
+      {(errors as any)[name] ? (
+        <Typography
+          sx={{
+            color: '#d32f2f',
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: 1.66,
+            margin: '3px 14px 0 14px',
+          }}
+        >
+          {(errors as any)[name].message}
+        </Typography>
+      ) : null}
     </>
   ) : null
 }
diff --git a/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx b/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx
@@ -12,6 +12,7 @@ import type { OpenPageState } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 import styled from '@emotion/styled'
 import { Alert, Box, ImageListItem } from '@mui/material'
+import isEmpty from 'lodash-es/isEmpty'
 
 import { B3Card, B3CustomForm, B3Sping, CustomButton } from '@/components'
 import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
@@ -209,6 +210,13 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                   deCodeField(contactInformationField.name as string)
                 ] || contactInformationField.default
 
+              if (
+                contactInformationField.required &&
+                !contactInformationField?.default
+              ) {
+                contactInformationField.disabled = false
+              }
+
               return contactInformationField
             }
           )
@@ -320,7 +328,11 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
 
       const fileList = fileResponse.reduce((fileList: any, res: any) => {
         if (res.code === 200) {
-          fileList = [...fileList, res.data]
+          const newData = {
+            ...res.data,
+          }
+          newData.fileSize = newData.fileSize ? `${newData.fileSize}` : ''
+          fileList = [...fileList, newData]
         } else {
           throw (
             res.data.errMsg ||
@@ -457,8 +469,35 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
     }
   }
 
+  const handleValidateAttachmentFiles = () => {
+    const formData = getValues()
+    const attachmentsFilesFiled = bcTob2bCompanyInformation.find(
+      (info) => info.fieldId === 'field_attachments'
+    )
+    if (
+      !isEmpty(attachmentsFilesFiled) &&
+      attachmentsFilesFiled.required &&
+      formData[attachmentsFilesFiled.name].length === 0
+    ) {
+      setError(attachmentsFilesFiled.name, {
+        type: 'required',
+        message: b3Lang('global.validate.required', {
+          label: attachmentsFilesFiled.label,
+        }),
+      })
+
+      showLoading(false)
+      return true
+    }
+
+    return false
+  }
+
   const handleNext = (event: MouseEvent) => {
+    const hasAttachmentsFilesError = handleValidateAttachmentFiles()
+
     handleSubmit(async (data: CustomFieldItems) => {
+      if (hasAttachmentsFilesError) return
       showLoading(true)
 
       try {
@@ -471,7 +510,6 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
           (list) => list.fieldType === 'files'
         )
         const fileList = await getFileUrl(attachmentsList || [], data)
-
         await getB2BFieldsValue(data, customerId, fileList)
 
         const isAuto = companyAutoApproval.enabled
@@ -621,6 +659,7 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                     control={control}
                     getValues={getValues}
                     setValue={setValue}
+                    setError={setError}
                   />
                 </Box>
 

diff --git a/apps/storefront/src/pages/registered/RegisteredDetail.tsx b/apps/storefront/src/pages/registered/RegisteredDetail.tsx
@@ -1,6 +1,8 @@
 import { MouseEvent, useContext, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { useB3Lang } from '@b3/lang'
 import { Alert, Box } from '@mui/material'
+import isEmpty from 'lodash-es/isEmpty'
 
 import { B3CustomForm } from '@/components'
 import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
@@ -19,6 +21,7 @@ interface RegisteredDetailProps {
 }
 
 export default function RegisteredDetail(props: RegisteredDetailProps) {
+  const b3Lang = useB3Lang()
   const { handleBack, handleNext, activeStep } = props
 
   const { state, dispatch } = useContext(RegisteredContext)
@@ -172,8 +175,37 @@ export default function RegisteredDetail(props: RegisteredDetailProps) {
     })
   }
 
+  const handleValidateAttachmentFiles = () => {
+    if (accountType === '1') {
+      const formData = getValues()
+      const attachmentsFilesFiled = companyInformation.find(
+        (info) => info.fieldId === 'field_attachments'
+      )
+      if (
+        !isEmpty(attachmentsFilesFiled) &&
+        attachmentsFilesFiled.required &&
+        formData[attachmentsFilesFiled.name].length === 0
+      ) {
+        setError(attachmentsFilesFiled.name, {
+          type: 'required',
+          message: b3Lang('global.validate.required', {
+            label: attachmentsFilesFiled.label,
+          }),
+        })
+
+        showLoading(false)
+        return true
+      }
+    }
+
+    return false
+  }
+
   const handleAccountToFinish = (event: MouseEvent) => {
+    const hasAttachmentsFilesError = handleValidateAttachmentFiles()
+
     handleSubmit(async (data: CustomFieldItems) => {
+      if (hasAttachmentsFilesError) return
       showLoading(true)
 
       try {
@@ -266,6 +298,7 @@ export default function RegisteredDetail(props: RegisteredDetailProps) {
             control={control}
             getValues={getValues}
             setValue={setValue}
+            setError={setError}
           />
         </Box>
       ) : null}