feat: registered page layout

https://bigc-b2b.atlassian.net/browse/BUN-1191
bigcommerce · Jun 27, 2023 · e515d18 · e515d18
1 parent a66e378
commit e515d18
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 94 deletions.
diff --git a/apps/storefront/src/components/form/B3ControlTextField.tsx b/apps/storefront/src/components/form/B3ControlTextField.tsx
@@ -32,6 +32,8 @@ export default function B3ControlTextField({
     readOnly,
     allowArrow = false,
     sx = {},
+    isTip = false,
+    tipText = '',
   } = rest
 
   const b3Lang = useB3Lang()
@@ -149,6 +151,17 @@ export default function B3ControlTextField({
           )
         }
       />
+      {isTip && (
+        <Box
+          sx={{
+            fontSize: '12px',
+            color: 'rgba(0, 0, 0, 0.6)',
+            marginTop: '0.5rem',
+          }}
+        >
+          {tipText}
+        </Box>
+      )}
     </>
   ) : null
 }
diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx
@@ -13,10 +13,7 @@ import { Alert, Box } from '@mui/material'
 //   Captcha,
 // } from '@/components/form'
 import { B3CustomForm } from '@/components'
-import {
-  b3HexToRgb,
-  getContrastColor,
-} from '@/components/outSideComponents/utils/b3CustomStyles'
+import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import {
@@ -45,6 +42,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
 
   const [personalInfo, setPersonalInfo] = useState<Array<CustomFieldItems>>([])
   const [errorMessage, setErrorMessage] = useState<string>('')
+  const [enterEmail, setEnterEmail] = useState<string>('')
   // const [captchaMessage, setCaptchaMessage] = useState<string>('')
 
   const {
@@ -98,23 +96,14 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
 
   useEffect(() => {
     if (!accountType) return
-    let newPasswordInformation: Array<CustomFieldItems> = []
-    let emailItem: CustomFieldItems = {}
     if (list && list.length) {
-      const emailFields =
+      const emailFields: CustomFieldItems =
         list.find((item: RegisterFields) => item.name === 'email') || {}
-      emailItem = {
-        ...emailFields,
-      }
-      emailItem.label = `${b3Lang('intl.user.register.RegisterComplete.email')}`
-      emailItem.name = 'email'
-      emailItem.disabled = true
-      newPasswordInformation.push(emailItem)
-    }
 
-    newPasswordInformation = [...newPasswordInformation, ...passwordInfo]
+      setEnterEmail(emailFields?.default || '')
+    }
 
-    setPersonalInfo(newPasswordInformation)
+    setPersonalInfo(passwordInfo)
   }, [contactInformation, bcContactInformation, accountType])
 
   const getBCFieldsValue = (data: CustomFieldItems) => {
@@ -445,7 +434,6 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
           color: customColor,
         },
         '& input, & .MuiFormControl-root .MuiTextField-root': {
-          bgcolor: b3HexToRgb('#FFFFFF', 0.87),
           borderRadius: '4px',
           borderBottomLeftRadius: '0',
           borderBottomRightRadius: '0',
@@ -460,11 +448,26 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
       <Box>
         <InformationFourLabels>{passwordName}</InformationFourLabels>
         {personalInfo && (
-          <B3CustomForm
-            formFields={personalInfo}
-            errors={errors}
-            control={control}
-          />
+          <>
+            {enterEmail.length > 0 && (
+              <Box
+                sx={{
+                  fontSize: '16px',
+                  fontWeight: 400,
+                  color: '#000000',
+                  marginBottom: '10px',
+                  marginTop: '-12px',
+                }}
+              >
+                {`Create password for ${enterEmail}`}
+              </Box>
+            )}
+            <B3CustomForm
+              formFields={personalInfo}
+              errors={errors}
+              control={control}
+            />
+          </>
         )}
       </Box>
 

diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx
@@ -12,7 +12,7 @@ import { useB3Lang } from '@b3/lang'
 import { Box, ImageListItem } from '@mui/material'
 
 import { B3Card, B3Sping } from '@/components'
-import { useScrollBar } from '@/hooks'
+import { useMobile, useScrollBar } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { getB2BAccountFormFields, getB2BCountries } from '@/shared/service/b2b'
@@ -49,6 +49,7 @@ function Registered(props: RegisteredProps) {
   const [activeStep, setActiveStep] = useState(0)
 
   const b3Lang = useB3Lang()
+  const [isMobile] = useMobile()
 
   const navigate = useNavigate()
 
@@ -286,7 +287,7 @@ function Registered(props: RegisteredProps) {
 
   return (
     <B3Card setOpenPage={setOpenPage}>
-      <RegisteredContainer>
+      <RegisteredContainer isMobile={isMobile}>
         <B3Sping
           isSpinning={isLoading}
           tip={b3Lang('intl.global.tips.loading')}
@@ -297,6 +298,7 @@ function Registered(props: RegisteredProps) {
               display: 'flex',
               flexDirection: 'column',
               width: '100%',
+              alignItems: 'center',
             }}
           >
             {logo && (

diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx
@@ -79,8 +79,19 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
   const additionalInfo: any =
     accountType === '1' ? additionalInformation : bcAdditionalInformation
 
+  const newContactInformation = contactInformation?.map(
+    (info: CustomFieldItems) => {
+      if (info.fieldId === 'field_email' && accountType === '1') {
+        info.isTip = true
+        info.tipText = 'This email will be used for sign in to your account'
+      }
+
+      return info
+    }
+  )
+
   const contactInfo: any =
-    accountType === '1' ? contactInformation : bcContactInformation
+    accountType === '1' ? newContactInformation : bcContactInformation
   const contactName =
     accountType === '1' ? 'contactInformation' : 'bcContactInformationFields'
 
@@ -198,7 +209,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
           {b3Lang('intl.user.register.registeredAccount.accountType')}
         </InformationFourLabels>
         <RadioGroup
-          row
           aria-labelledby="demo-row-radio-buttons-group-label"
           name="row-radio-buttons-group"
           value={accountType}
@@ -242,7 +252,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
           },
           '& input, & .MuiFormControl-root .MuiTextField-root, & .MuiTextField-root .MuiInputBase-multiline':
             {
-              bgcolor: b3HexToRgb('#FFFFFF', 0.87),
               borderRadius: '4px',
               borderBottomLeftRadius: '0',
               borderBottomRightRadius: '0',