From f42d458c07fa849973d5bba916ab092337c167df Mon Sep 17 00:00:00 2001 From: kris liu Date: Wed, 20 Jul 2022 09:11:41 +0800 Subject: [PATCH] fix: remove ReCAPTCHA and add login function --- .../src/pages/registered/RegisterComplete.tsx | 13 ++--- .../pages/registered/RegisteredAccount.tsx | 33 ++++++------ .../component/RegisteredStepButton.tsx | 2 +- .../storefront/src/pages/registered/config.ts | 5 -- .../shared/service/b2b/graphql/register.ts | 52 +++---------------- .../src/utils/graphqlDataConvert.ts | 47 +++++++++++++++++ apps/storefront/src/utils/index.ts | 9 ++++ 7 files changed, 86 insertions(+), 75 deletions(-) create mode 100644 apps/storefront/src/utils/graphqlDataConvert.ts create mode 100644 apps/storefront/src/utils/index.ts diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx index 32d375bb..8ee8df69 100644 --- a/apps/storefront/src/pages/registered/RegisterComplete.tsx +++ b/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') { diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx index efadfb61..806073da 100644 --- a/apps/storefront/src/pages/registered/RegisteredAccount.tsx +++ b/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(0) - const captchaRef = useRef(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) => { dispatch({ type: 'emailSletter', payload: { emailMarketingNewsletter: event.target.checked } }) }, []) @@ -147,7 +153,11 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { mr: 1, }} > - login + + login + { emailStateType === 1 ? 'to apply for a business account' : '' @@ -211,17 +221,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { setValue={setValue} /> - - - )} diff --git a/apps/storefront/src/pages/registered/config.ts b/apps/storefront/src/pages/registered/config.ts index 092f4537..6cb1a43e 100644 --- a/apps/storefront/src/pages/registered/config.ts +++ b/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 || [], diff --git a/apps/storefront/src/shared/service/b2b/graphql/register.ts b/apps/storefront/src/shared/service/b2b/graphql/register.ts index f9cf2acb..ac6891c4 100644 --- a/apps/storefront/src/shared/service/b2b/graphql/register.ts +++ b/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, diff --git a/apps/storefront/src/utils/graphqlDataConvert.ts b/apps/storefront/src/utils/graphqlDataConvert.ts new file mode 100644 index 00000000..b8f05930 --- /dev/null +++ b/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 +} diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts new file mode 100644 index 00000000..3ce0f22a --- /dev/null +++ b/apps/storefront/src/utils/index.ts @@ -0,0 +1,9 @@ +import { + convertArrayToGraphql, + convertObjectToGraphql, +} from './graphqlDataConvert' + +export { + convertArrayToGraphql, + convertObjectToGraphql, +}