From 29f6334eb8f311c1d9aa41d0eaf1f2386b0fe66d Mon Sep 17 00:00:00 2001 From: "aton.xia" Date: Tue, 19 Jul 2022 17:45:31 +0800 Subject: [PATCH] feat: add a company extra field check --- .../src/pages/registered/RegisterComplete.tsx | 57 +++++++-- .../src/pages/registered/Registered.tsx | 37 +++--- .../src/pages/registered/RegisteredDetail.tsx | 116 ++++++++++++++---- .../registered/context/RegisteredContext.tsx | 2 + .../src/shared/service/b2b/api/register.ts | 4 + .../shared/service/b2b/graphql/register.ts | 10 +- .../src/shared/service/b2b/index.ts | 2 + 7 files changed, 175 insertions(+), 53 deletions(-) diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx index 76f9b991..32d375bb 100644 --- a/apps/storefront/src/pages/registered/RegisterComplete.tsx +++ b/apps/storefront/src/pages/registered/RegisterComplete.tsx @@ -12,7 +12,7 @@ import { RegisteredContext } from './context/RegisteredContext' import RegisteredStepButton from './component/RegisteredStepButton' import { B3CustomForm } from '../../components' -import { createBCCompanyUser, createB2BCompanyUser } from '../../shared/service/b2b' +import { createBCCompanyUser, createB2BCompanyUser, uploadB2BFile } from '../../shared/service/b2b' import { RegisterFileds, CustomFieldItems, Base64, validatorRules, @@ -52,7 +52,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) { const { contactInformation, bcContactInformationFields, passwordInformation, accountType, additionalInformation, addressBasicFields, addressExtraFields, companyInformation, - emailMarketingNewsletter, + emailMarketingNewsletter, companyAttachment, companyExtraFields, } = state const emailName = accountType === '1' ? 'workEmailAddress' : 'emailAddress' @@ -182,16 +182,18 @@ export default function RegisterComplete(props: RegisterCompleteProps) { b2bFields.customerId = customerId || '' b2bFields.storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05' if (companyInformation) { - const extraFields:Array = [] companyInformation.forEach((item: any) => { - if (item.name === 'companyName' || item.name === 'companyEmail' || item.name === 'companyPhoneNumber') { - b2bFields[item.name] = item?.default || '' - } else { - const itemExtraField: CustomFieldItems = {} - itemExtraField.fieldName = Base64.decode(item.name) - itemExtraField.fieldValue = item?.default || '' - extraFields.push(itemExtraField) - } + b2bFields[item.name] = item?.default || '' + }) + } + + if (companyExtraFields) { + const extraFields:Array = [] + companyExtraFields.forEach((item: any) => { + const itemExtraField: CustomFieldItems = {} + itemExtraField.fieldName = Base64.decode(item.name) + itemExtraField.fieldValue = item?.default || '' + extraFields.push(itemExtraField) }) b2bFields.extraFields = extraFields } @@ -221,6 +223,33 @@ export default function RegisterComplete(props: RegisterCompleteProps) { }) } + let attachments: File[] = [] + if (companyAttachment) { + companyAttachment.forEach((field: any) => { + if (field.name === 'companyAttachments') { + attachments = field.default + } + }) + } + + try { + const fileResponse = await Promise.all(attachments.map( + (file: File) => uploadB2BFile({ + file, + type: 'companyAttachedFile', + }), + )) + + b2bFields.fileList = fileResponse.reduce((fileList: any, res: any) => { + if (res.code === 200) { + fileList = [...fileList, res.data] + } + return fileList + }, []) + } catch (error) { + b2bFields.fileList = [] + } + return createB2BCompanyUser(b2bFields) } @@ -268,6 +297,12 @@ export default function RegisterComplete(props: RegisterCompleteProps) { } handleNext() } catch (error) { + dispatch({ + type: 'loading', + payload: { + isLoading: false, + }, + }) console.log(error, 'error') } finally { dispatch({ diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx index b8a56d39..f3bd51a2 100644 --- a/apps/storefront/src/pages/registered/Registered.tsx +++ b/apps/storefront/src/pages/registered/Registered.tsx @@ -89,23 +89,26 @@ export default function Registered() { const filterPasswordInformation = customerAccount.length && customerAccount.filter((field: RegisterFileds) => !field.custom && field.fieldType === 'password') const newPasswordInformation: Array = conversionDataFormat(filterPasswordInformation) - dispatch({ - type: 'all', - payload: { - accountType: '1', - isLoading: false, - storeName, - contactInformation: [...contactInformationFields], - additionalInformation: [...newAdditionalInformation], - bcContactInformationFields: [...bcContactInformationFields], - companyInformation: [...companyInformationFields, ...newCompanyExtraFields], - companyAttachment: [...companyAttachmentsFields], - addressBasicFields: [...addressInformationFields], - addressExtraFields: [...addressExtraFields], - countryList: [...countries], - passwordInformation: [...newPasswordInformation], - }, - }) + if (dispatch) { + dispatch({ + type: 'all', + payload: { + accountType: '1', + isLoading: false, + storeName, + contactInformation: [...contactInformationFields], + additionalInformation: [...newAdditionalInformation], + bcContactInformationFields: [...bcContactInformationFields], + companyExtraFields: [...newCompanyExtraFields], + companyInformation: [...companyInformationFields], + companyAttachment: [...companyAttachmentsFields], + addressBasicFields: [...addressInformationFields], + addressExtraFields: [...addressExtraFields], + countryList: [...countries], + passwordInformation: [...newPasswordInformation], + }, + }) + } setLogo(registerLogo) } catch (e) { console.log(e) diff --git a/apps/storefront/src/pages/registered/RegisteredDetail.tsx b/apps/storefront/src/pages/registered/RegisteredDetail.tsx index 42da33b0..cab89318 100644 --- a/apps/storefront/src/pages/registered/RegisteredDetail.tsx +++ b/apps/storefront/src/pages/registered/RegisteredDetail.tsx @@ -7,6 +7,7 @@ import { import { Box, + Alert, } from '@mui/material' import styled from '@emotion/styled' @@ -23,8 +24,11 @@ import { addressInformationFields, Country, State, + Base64, } from './config' +import { validateBCCompanyExtraFields } from '../../shared/service/b2b' + const InformationFourLabels = styled('h4')(() => ({ marginBottom: '20px', })) @@ -36,11 +40,19 @@ const AddressBox = styled(Box)(() => ({ }, })) +const TipContent = styled('div')(() => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', +})) + export default function RegisteredDetail(props: any) { const { handleBack, handleNext, activeStep } = props const { state, dispatch } = useContext(RegisteredContext) + const [errorMessage, setErrorMessage] = useState('') + const { accountType, companyInformation = [], @@ -48,6 +60,7 @@ export default function RegisteredDetail(props: any) { addressBasicFields = [], addressExtraFields = [], countryList = [], + companyExtraFields = [], } = state const { @@ -85,7 +98,7 @@ export default function RegisteredDetail(props: any) { } } - setValue('state', stateCode && stateList.find((state: State) => state.stateCode === stateCode) ? stateCode : '') + setValue('state', stateCode && (stateList.find((state: State) => state.stateCode === stateCode) || stateList.length === 0) ? stateCode : '') dispatch({ type: 'stateList', @@ -112,40 +125,101 @@ export default function RegisteredDetail(props: any) { return () => subscription.unsubscribe() }, [countryList]) - const setRegisterFiledsValue = (formFields: Array, formData: CustomFieldItems) => formFields.map((fields) => { - fields.default = formData[fields.name] || fields.default - return fields + const showLading = (isShow = false) => { + dispatch({ + type: 'loading', + payload: { + isLoading: isShow, + }, + }) + } + + const getErrorMessage = (data: any, errorKey: string) => { + if (data[errorKey] && typeof data[errorKey] === 'object') { + const errors = data[errorKey] + + let message = '' + Object.keys(errors).forEach((error) => { + message += `${error}:${errors[error]}` + }) + + return message + } + + return data.errMsg || '' + } + + const setRegisterFiledsValue = (formFields: Array, formData: CustomFieldItems) => formFields.map((field) => { + field.default = formData[field.name] || field.default + return field }) const handleAccountToFinish = (event: MouseEvent) => { - handleSubmit((data: CustomFieldItems) => { - const newCompanyInformation = setRegisterFiledsValue(companyInformation, data) - const newCompanyAttachment = setRegisterFiledsValue(companyAttachment, data) - const newAddressBasicFields = setRegisterFiledsValue(addressBasicFields, data) - const newAddressExtraFields = setRegisterFiledsValue(addressExtraFields, data) - - dispatch({ - type: 'all', - payload: { - companyInformation: [...newCompanyInformation], - companyAttachment: [...newCompanyAttachment], - addressBasicFields: [...newAddressBasicFields], - addressExtraFields: [...newAddressExtraFields], - }, - }) - handleNext() + handleSubmit(async (data: CustomFieldItems) => { + showLading(true) + + try { + const extraFields = companyExtraFields.map((field: any) => ({ + fieldName: Base64.decode(field.name), + fieldValue: data[field.name] || field.default, + })) + + const res = await validateBCCompanyExtraFields({ + extraFields, + }) + + if (res.code !== 200) { + setErrorMessage(getErrorMessage(res.data, 'extraFields')) + showLading(false) + return + } + + 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) + + dispatch({ + type: 'all', + payload: { + companyInformation: [...newCompanyInformation], + companyExtraFields: [...newCompanyExtraFields], + companyAttachment: [...newCompanyAttachment], + addressBasicFields: [...newAddressBasicFields], + addressExtraFields: [...newAddressExtraFields], + }, + }) + showLading(false) + handleNext() + } catch (error) { + showLading(false) + } })(event) } return (
+ { + errorMessage && ( + + + { errorMessage } + + + ) + } { accountType === '1' ? ( <> Business Details | Array<[]>, emailMarketingNewsletter?: Boolean, companyInformation?: Array | Array<[]>, + companyExtraFields?: Array | Array<[]>, companyAttachment?: Array | Array<[]>, addressBasicFields?: Array | Array<[]>, addressExtraFields?: Array | Array<[]>, @@ -43,6 +44,7 @@ const initState = { accountType: '', emailMarketingNewsletter: false, companyInformation: [], + companyExtraFields: [], companyAttachment: [], addressBasicFields: [], addressExtraFields: [], diff --git a/apps/storefront/src/shared/service/b2b/api/register.ts b/apps/storefront/src/shared/service/b2b/api/register.ts index 8645532c..e739acea 100644 --- a/apps/storefront/src/shared/service/b2b/api/register.ts +++ b/apps/storefront/src/shared/service/b2b/api/register.ts @@ -5,4 +5,8 @@ interface CustomFieldItems { [key: string]: any } +const storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05' + export const createBCCompanyUser = (data: CustomFieldItems): CustomFieldItems => B3Request.post('/api/v2/proxy', RequestType.B2BRest, data) + +export const validateBCCompanyExtraFields = (data: CustomFieldItems): CustomFieldItems => B3Request.post('/api/v2/extra-fields/company/validate', RequestType.B2BRest, { ...data, storeHash }) diff --git a/apps/storefront/src/shared/service/b2b/graphql/register.ts b/apps/storefront/src/shared/service/b2b/graphql/register.ts index fcef588a..f9cf2acb 100644 --- a/apps/storefront/src/shared/service/b2b/graphql/register.ts +++ b/apps/storefront/src/shared/service/b2b/graphql/register.ts @@ -65,13 +65,13 @@ const conversionData = (data: CustomFieldItems) => { } let str = '{' Object.keys(data).forEach((item: any, index) => { - if (typeof data[item] === 'string' || typeof data[item] === 'number' || typeof data[item] === 'undefined') { + if (typeof data[item] === 'string' || typeof data[item] === 'number') { if (index === Object.keys(data).length - 1) { str += `${item}: ` - str += `${JSON.stringify(data[item])}` + str += `${JSON.stringify(`${data[item]}`)}` } else { str += `${item}: ` - str += `${JSON.stringify(data[item])}, ` + str += `${JSON.stringify(`${data[item]}`)}, ` } } @@ -116,7 +116,9 @@ const createCompanyUser = (data: any) => `mutation{ city: "${data.city}", state: "${data.state}", zipCode: "${data.zipCode}", - extraFields: ${conversionArr(data.extraFields)}}) { + extraFields: ${conversionArr(data.extraFields)} + fileList: ${conversionArr(data.fileList)} + }) { company { id, companyStatus, diff --git a/apps/storefront/src/shared/service/b2b/index.ts b/apps/storefront/src/shared/service/b2b/index.ts index 874c2389..966d076c 100644 --- a/apps/storefront/src/shared/service/b2b/index.ts +++ b/apps/storefront/src/shared/service/b2b/index.ts @@ -13,6 +13,7 @@ import { import { createBCCompanyUser, + validateBCCompanyExtraFields, } from './api/register' export { @@ -24,4 +25,5 @@ export { uploadB2BFile, createB2BCompanyUser, storeB2BBasicInfo, + validateBCCompanyExtraFields, }