fix: remove ReCAPTCHA and add login function

apps/storefront/src/pages/registered/RegisterComplete.tsx

@@ -64,13 +64,11 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     if (list && list.length) {
       const emailFileds = list.find((item: RegisterFileds) => item.name === emailName) || {}
       emailItem = { ...emailFileds }
+      emailItem.label = 'email'
+      emailItem.name = 'email'
+      emailItem.disabled = true
+      newPasswordInformation.push(emailItem)
     }
-    emailItem.label = 'email'
-    emailItem.name = 'email'
-    emailItem.disabled = true
-    newPasswordInformation.push(emailItem)
-
-    emailItem.accepts_product_review_abandoned_cart_emails = emailMarketingNewsletter
 
     if (passwordInformation?.length) newPasswordInformation.push(passwordInformation[0])
     newPasswordInformation.push({
@@ -94,6 +92,9 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
       force_password_reset: false,
       new_password: data.password,
     }
+
+    bcFields.accepts_product_review_abandoned_cart_emails = emailMarketingNewsletter
+
     if (list) {
       list.forEach((item: any) => {
         if (item.name === 'lastName') {

apps/storefront/src/pages/registered/RegisteredAccount.tsx

@@ -1,5 +1,5 @@
 import {
-  useContext, ChangeEvent, useCallback, useState, MouseEvent, useRef,
+  useContext, ChangeEvent, useCallback, useState, MouseEvent,
 } from 'react'
 import {
   Box,
@@ -10,8 +10,6 @@ import {
   Alert,
 } from '@mui/material'
 
-import ReCAPTCHA from 'react-google-recaptcha'
-
 import { useForm } from 'react-hook-form'
 
 import styled from '@emotion/styled'
@@ -40,6 +38,12 @@ const TipContent = styled('div')(() => ({
   alignItems: 'center',
 }))
 
+const TipLogin = styled('div')(() => ({
+  cursor: 'pointer',
+  color: '#1976d2',
+  borderBottom: '1px solid #1976d2',
+}))
+
 interface RegisteredAccountProps {
   handleBack: () => void,
   handleNext: () => void,
@@ -53,8 +57,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
 
   const [emailStateType, setEmailStateType] = useState<number>(0)
 
-  const captchaRef = useRef<any>(null)
-
   const {
     contactInformation, accountType, additionalInformation, bcContactInformationFields,
     emailMarketingNewsletter,
@@ -122,6 +124,10 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
     })(event)
   }
 
+  const gotoLigin = () => {
+    (window as Window).location.href = '/login.php?action=create_account'
+  }
+
   const handleEmailSletterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     dispatch({ type: 'emailSletter', payload: { emailMarketingNewsletter: event.target.checked } })
   }, [])
@@ -147,7 +153,11 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
                 mr: 1,
               }}
             >
-              login
+              <TipLogin
+                onClick={gotoLigin}
+              >
+                login
+              </TipLogin>
             </Box>
             {
                 emailStateType === 1 ? 'to apply for a business account' : ''
@@ -211,17 +221,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
           setValue={setValue}
         />
       </Box>
-      <Box
-        sx={{
-          mt: 4,
-        }}
-      >
-        <ReCAPTCHA
-          sitekey="6Lcct_sgAAAAACfgXLKQxiOvHwBQ0JZOqcX9A6-F"
-          ref={captchaRef}
-          size="invisible"
-        />
-      </Box>
       <RegisteredStepButton
         activeStep={activeStep}
         handleBack={handleBack}

apps/storefront/src/pages/registered/component/RegisteredStepButton.tsx

@@ -32,7 +32,7 @@ function RegisteredStepButton(props: any) {
           }
           <Box sx={{ flex: '1 1 auto' }} />
           <Button onClick={handleNext}>
-            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+            {activeStep === steps.length - 1 ? 'Submit' : 'Next'}
           </Button>
         </Box>
       )}

apps/storefront/src/pages/registered/config.ts

@@ -92,11 +92,6 @@ const classificationType = (item: RegisterFileds) => {
       optionItems.validate = (v: string) => validatorRules(v, ['password'])
     }
   }
-  if (fieldsType.checkbox.includes(item.fieldType)) {
-    optionItems = {
-      options: item.options?.items || null,
-    }
-  }
   if (fieldsType.checkbox.includes(item.fieldType)) {
     optionItems = {
       default: item.default || [],

apps/storefront/src/shared/service/b2b/graphql/register.ts

@@ -1,5 +1,9 @@
 import { B3Request } from '../../request/b3Fetch'
 
+import {
+  convertArrayToGraphql,
+} from '../../../../utils'
+
 interface CustomFieldItems {
   [key: string]: any
 }
@@ -59,50 +63,6 @@ const storeBasicInfo = () => `{
   }
 }`
 
-const conversionData = (data: CustomFieldItems) => {
-  if (typeof data === 'string' || typeof data === 'number') {
-    return data
-  }
-  let str = '{'
-  Object.keys(data).forEach((item: any, index) => {
-    if (typeof data[item] === 'string' || typeof data[item] === 'number') {
-      if (index === Object.keys(data).length - 1) {
-        str += `${item}: `
-        str += `${JSON.stringify(`${data[item]}`)}`
-      } else {
-        str += `${item}: `
-        str += `${JSON.stringify(`${data[item]}`)}, `
-      }
-    }
-
-    if (Object.prototype.toString.call(data[item]) === '[object Object]') {
-      str += `${item}: `
-      str += conversionData(data[item])
-    }
-
-    if (Object.prototype.toString.call(data[item]) === '[object Array]') {
-      str += `${item}: [`
-      data[item].forEach((list: any) => {
-        str += conversionData(list)
-      })
-      str += '],'
-    }
-  })
-  str += '},'
-
-  return str
-}
-
-const conversionArr = (data: CustomFieldItems) => {
-  let str = '['
-  data.forEach((list: any) => {
-    str += conversionData(list)
-  })
-  str += ']'
-
-  return str
-}
-
 const createCompanyUser = (data: any) => `mutation{
   companyCreate(companyData: {
     customerId: "${data.customerId || 2945}",
@@ -116,8 +76,8 @@ const createCompanyUser = (data: any) => `mutation{
     city: "${data.city}",
     state: "${data.state}",
     zipCode: "${data.zipCode}",
-    extraFields: ${conversionArr(data.extraFields)}
-    fileList: ${conversionArr(data.fileList)}
+    extraFields: ${convertArrayToGraphql(data.extraFields)}
+    fileList: ${convertArrayToGraphql(data.fileList)}
   }) {
     company {
       id,

apps/storefront/src/utils/graphqlDataConvert.ts

@@ -0,0 +1,47 @@
+interface CustomFieldItems {
+  [key: string]: any
+}
+
+export const convertObjectToGraphql = (data: CustomFieldItems) => {
+  if (typeof data === 'string' || typeof data === 'number') {
+    return data
+  }
+  let str = '{'
+  Object.keys(data).forEach((item: any, index) => {
+    if (typeof data[item] === 'string' || typeof data[item] === 'number') {
+      if (index === Object.keys(data).length - 1) {
+        str += `${item}: `
+        str += `${JSON.stringify(`${data[item]}`)}`
+      } else {
+        str += `${item}: `
+        str += `${JSON.stringify(`${data[item]}`)}, `
+      }
+    }
+
+    if (Object.prototype.toString.call(data[item]) === '[object Object]') {
+      str += `${item}: `
+      str += convertObjectToGraphql(data[item])
+    }
+
+    if (Object.prototype.toString.call(data[item]) === '[object Array]') {
+      str += `${item}: [`
+      data[item].forEach((list: any) => {
+        str += convertObjectToGraphql(list)
+      })
+      str += '],'
+    }
+  })
+  str += '},'
+
+  return str
+}
+
+export const convertArrayToGraphql = (data: CustomFieldItems) => {
+  let str = '['
+  data.forEach((list: any) => {
+    str += convertObjectToGraphql(list)
+  })
+  str += ']'
+
+  return str
+}

apps/storefront/src/utils/index.ts

@@ -0,0 +1,9 @@
+import {
+  convertArrayToGraphql,
+  convertObjectToGraphql,
+} from './graphqlDataConvert'
+
+export {
+  convertArrayToGraphql,
+  convertObjectToGraphql,
+}