diff --git a/apps/storefront/package.json b/apps/storefront/package.json index 54e33c6d..d16c36d8 100644 --- a/apps/storefront/package.json +++ b/apps/storefront/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@b3/lang": "*", "@emotion/cache": "^11.9.3", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", @@ -16,11 +17,12 @@ "@mui/material": "^5.8.7", "@mui/x-date-pickers": "^5.0.0-beta.0", "@types/babel__core": "^7.1.19", + "@types/react-google-recaptcha": "^2.1.5", "date-fns": "^2.28.0", "graphql": "^16.5.0", "react": "^18.0.0", "react-dom": "^18.0.0", - "@b3/lang": "*", + "react-google-recaptcha": "^2.1.0", "react-hook-form": "^7.33.1", "react-router-dom": "6" }, diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index acd16ff0..c4caee2d 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -4,7 +4,7 @@ import { useB3AppOpen } from '@b3/hooks' import { ThemeFrame } from './ThemeFrame' import { Home, Form, Registered } from './pages' import { Layout } from './components' -import { RegisteredProvider } from '../src/pages/Registered/context/RegisteredContext' +import { RegisteredProvider } from './pages/registered/context/RegisteredContext' const FONT_URL = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap' const CUSTOM_STYLES = ` @@ -18,34 +18,36 @@ export default function App() { const [isOpen, setIsOpen] = useB3AppOpen(false) return ( - -
- - {isOpen ? ( - setIsOpen(false)}> - bundle b2b - - } - /> - } - /> - } - /> - - - ) : null} - -
-
+ + +
+ + {isOpen ? ( + setIsOpen(false)}> + bundle b2b + + } + /> + } + /> + } + /> + + + ) : null} + +
+
+
) } diff --git a/apps/storefront/src/components/B3CustomForm.tsx b/apps/storefront/src/components/B3CustomForm.tsx index eebe0d82..bcbfd987 100644 --- a/apps/storefront/src/components/B3CustomForm.tsx +++ b/apps/storefront/src/components/B3CustomForm.tsx @@ -1,9 +1,9 @@ import { Grid } from '@mui/material' import { B3TextField, B3Checkbox, B3RadioGroup, B3Select, B3Picker, -} from './B3UI' +} from './form' -import B3UI from './B3UI/ui' +import B3UI from './form/ui' export function B3CustomForm(props: B3UI.B3CustomFormProps) { const { @@ -72,7 +72,10 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) { }))) return ( - + { formFields && renderFormFields(formFields) } diff --git a/apps/storefront/src/components/B3UI/B3Checkbox.tsx b/apps/storefront/src/components/form/B3Checkbox.tsx similarity index 87% rename from apps/storefront/src/components/B3UI/B3Checkbox.tsx rename to apps/storefront/src/components/form/B3Checkbox.tsx index b41f57f6..bf78b56c 100644 --- a/apps/storefront/src/components/B3UI/B3Checkbox.tsx +++ b/apps/storefront/src/components/form/B3Checkbox.tsx @@ -7,7 +7,7 @@ import { } from '@mui/material' import { Controller } from 'react-hook-form' -import B3UI from './ui' +import Form from './ui' interface CheckboxListProps { value: string, @@ -17,7 +17,7 @@ interface CheckboxListProps { export const B3Checkbox = ({ control, errors, getValues, ...rest -} : B3UI.B3UIProps) => { +} : Form.B3UIProps) => { const { fieldType, name, default: defaultValue, required, label, validate, options, } = rest @@ -51,7 +51,14 @@ export const B3Checkbox = ({ ['checkbox'].includes(fieldType) && ( { - label && {label} + label && ( + + {label} + + ) } { +export const B3Picker = ({ control, errors, ...rest } : Form.B3UIProps) => { const { fieldType, name, default: defaultValue, required, label, validate, muiTextFieldProps, } = rest diff --git a/apps/storefront/src/components/B3UI/B3RadioGroup.tsx b/apps/storefront/src/components/form/B3RadioGroup.tsx similarity index 80% rename from apps/storefront/src/components/B3UI/B3RadioGroup.tsx rename to apps/storefront/src/components/form/B3RadioGroup.tsx index 67655ed5..e60f1f9a 100644 --- a/apps/storefront/src/components/B3UI/B3RadioGroup.tsx +++ b/apps/storefront/src/components/form/B3RadioGroup.tsx @@ -8,9 +8,9 @@ import { } from '@mui/material' import { Controller } from 'react-hook-form' -import B3UI from './ui' +import Form from './ui' -export const B3RadioGroup = ({ control, errors, ...rest } : B3UI.B3UIProps) => { +export const B3RadioGroup = ({ control, errors, ...rest } : Form.B3UIProps) => { const { fieldType, name, default: defaultValue, required, label, validate, options, } = rest @@ -33,7 +33,14 @@ export const B3RadioGroup = ({ control, errors, ...rest } : B3UI.B3UIProps) => { ['radio'].includes(fieldType) && ( { - label && {label} + label && ( + + {label} + + ) } { > { options?.length && ( - options.map((option: B3UI.RadopGroupListProps) => ( + options.map((option: Form.RadopGroupListProps) => ( { +export const B3Select = ({ control, errors, ...rest } : Form.B3UIProps) => { const { fieldType, name, default: defaultValue, required, label, validate, options, muiSelectProps, setValue, onChange, replaceOptions, @@ -44,7 +44,14 @@ export const B3Select = ({ control, errors, ...rest } : B3UI.B3UIProps) => { ['dropdown'].includes(fieldType) && ( { - label && {label} + label && ( + + {label} + + ) } { { options?.length && ( options.map((option: any) => ( - {option[replaceOptions?.label || 'label']} + + {option[replaceOptions?.label || 'label']} + )) ) } diff --git a/apps/storefront/src/components/B3UI/B3TextField.tsx b/apps/storefront/src/components/form/B3TextField.tsx similarity index 93% rename from apps/storefront/src/components/B3UI/B3TextField.tsx rename to apps/storefront/src/components/form/B3TextField.tsx index 9596f2ff..0a373a65 100644 --- a/apps/storefront/src/components/B3UI/B3TextField.tsx +++ b/apps/storefront/src/components/form/B3TextField.tsx @@ -2,9 +2,9 @@ import { TextField, } from '@mui/material' import { Controller } from 'react-hook-form' -import B3UI from './ui' +import Form from './ui' -export const B3TextField = ({ control, errors, ...rest } : B3UI.B3UIProps) => { +export const B3TextField = ({ control, errors, ...rest } : Form.B3UIProps) => { const { fieldType, name, default: defaultValue, required, label, validate, variant, rows, min, max, minLength, maxLength, fullWidth, muiTextFieldProps, diff --git a/apps/storefront/src/components/B3UI/index.ts b/apps/storefront/src/components/form/index.ts similarity index 100% rename from apps/storefront/src/components/B3UI/index.ts rename to apps/storefront/src/components/form/index.ts diff --git a/apps/storefront/src/components/B3UI/ui.ts b/apps/storefront/src/components/form/ui.ts similarity index 93% rename from apps/storefront/src/components/B3UI/ui.ts rename to apps/storefront/src/components/form/ui.ts index f24acfa7..a6903c3c 100644 --- a/apps/storefront/src/components/B3UI/ui.ts +++ b/apps/storefront/src/components/form/ui.ts @@ -1,6 +1,6 @@ import { Control } from 'react-hook-form' -namespace B3UI { +namespace Form { export interface B3CustomFormValue { name: string, @@ -26,4 +26,4 @@ namespace B3UI { } } -export default B3UI +export default Form diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts index 80613b01..9739dfb1 100644 --- a/apps/storefront/src/components/index.ts +++ b/apps/storefront/src/components/index.ts @@ -1,3 +1,3 @@ export { Layout } from './Layout' export { B3CustomForm } from './B3CustomForm' -export { B3Sping } from './B3Sping' +export { B3Sping } from './spin/B3Sping' diff --git a/apps/storefront/src/components/B3Sping.tsx b/apps/storefront/src/components/spin/B3Sping.tsx similarity index 65% rename from apps/storefront/src/components/B3Sping.tsx rename to apps/storefront/src/components/spin/B3Sping.tsx index c4a7f348..61c2eca6 100644 --- a/apps/storefront/src/components/B3Sping.tsx +++ b/apps/storefront/src/components/spin/B3Sping.tsx @@ -3,30 +3,11 @@ import { CircularProgress, } from '@mui/material' -import styled from '@emotion/styled' - -const SpinCenter = styled.div({ - position: 'absolute', - zIndex: 100, - left: 0, - right: 0, - top: 0, - bottom: 0, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: 'rgba(255, 255, 255, .75)', -}) - -const SpinTip = styled.div({ - color: '#0072E5', - marginTop: '12px', -}) - -const SpinContext = styled.div({ - position: 'relative', -}) +import { + SpinCenter, + SpinTip, + SpinContext, +} from './style' interface B3SpingProps { isSpinning: Boolean, diff --git a/apps/storefront/src/components/spin/style.ts b/apps/storefront/src/components/spin/style.ts new file mode 100644 index 00000000..a71f0f24 --- /dev/null +++ b/apps/storefront/src/components/spin/style.ts @@ -0,0 +1,30 @@ +import styled from '@emotion/styled' + +const SpinCenter = styled.div({ + position: 'absolute', + zIndex: 100, + left: 0, + right: 0, + top: 0, + bottom: 0, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(255, 255, 255, .75)', +}) + +const SpinTip = styled.div({ + color: '#0072E5', + marginTop: '12px', +}) + +const SpinContext = styled.div({ + position: 'relative', +}) + +export { + SpinCenter, + SpinTip, + SpinContext, +} diff --git a/apps/storefront/src/pages/Registered/RegisterContent.tsx b/apps/storefront/src/pages/Registered/RegisterContent.tsx index 4394d16c..70cfdaac 100644 --- a/apps/storefront/src/pages/Registered/RegisterContent.tsx +++ b/apps/storefront/src/pages/Registered/RegisterContent.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, ChangeEvent } from 'react' +import { ReactNode } from 'react' import { Box, } from '@mui/material' diff --git a/apps/storefront/src/pages/Registered/Registered.tsx b/apps/storefront/src/pages/Registered/Registered.tsx index 152913a0..6c0793d2 100644 --- a/apps/storefront/src/pages/Registered/Registered.tsx +++ b/apps/storefront/src/pages/Registered/Registered.tsx @@ -5,15 +5,15 @@ import { import styled from '@emotion/styled' import { ImageListItem } from '@mui/material' -import { getBCRegisterCustomFields } from '@/shared/service/bc' -import { getB2BRegisterCustomFields, getB2BRegisterLogo } from '@/shared/service/b2b' +import { getBCRegisterCustomFields } from '../../shared/service/bc' +import { getB2BRegisterCustomFields, getB2BRegisterLogo } from '../../shared/service/b2b' import RegisteredStep from './RegisteredStep' import RegisterContent from './RegisterContent' import { RegisteredContext } from './context/RegisteredContext' -import { B3Sping } from '@/components/B3Sping' +import { B3Sping } from '../../components/spin/B3Sping' import { conversionDataFormat, bcContactInformationFields, RegisterFileds, contactInformationFields, getRegisterLogo, @@ -76,7 +76,7 @@ export default function Registered() { const isStepOptional = (step: number) => step === 1 - const handleNext = () => { + const handleNext = async () => { setActiveStep((prevActiveStep: number) => prevActiveStep + 1) } diff --git a/apps/storefront/src/pages/Registered/RegisteredAccount.tsx b/apps/storefront/src/pages/Registered/RegisteredAccount.tsx index b863c3ea..6b02ccba 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, + useContext, ChangeEvent, useCallback, useState, MouseEvent, useRef, } from 'react' import { Box, @@ -10,11 +10,13 @@ import { Alert, } from '@mui/material' +import ReCAPTCHA from 'react-google-recaptcha' + import { useForm } from 'react-hook-form' import styled from '@emotion/styled' -import { B3CustomForm } from '@/components' +import { B3CustomForm } from '../../components' import RegisteredStepButton from './component/RegisteredStepButton' import RegisteredSigleCheckBox from './component/RegisteredSigleCheckBox' @@ -22,7 +24,7 @@ import { RegisteredContext } from './context/RegisteredContext' import { RegisterFileds, CustomFieldItems } from './config' -import { getB2BCompanyUserInfo } from '@/shared/service/b2b' +import { getB2BCompanyUserInfo } from '../../shared/service/b2b' const InformationLabels = styled('h3')(() => ({ marginBottom: '20px', @@ -49,7 +51,11 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { const { state, dispatch } = useContext(RegisteredContext) - const [emailStateType, setEmailStateType] = useState(1) + const [emailStateType, setEmailStateType] = useState(0) + + const captchaRef = useRef(null) + + console.log(activeStep, 'activeStep') const { contactInformation, accountType, additionalInformation, bcContactInformationFields, @@ -66,11 +72,27 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { dispatch({ type: 'accountType', payload: { accountType: event.target.value } }) } - const handleAccountToDetail = (event: MouseEvent) => { + const judgeEmailExist = (userType: Number) => { + if (accountType === '1' && userType === 2) { + setEmailStateType(1) + } else if (accountType === '1' && userType === 3) { + setEmailStateType(2) + } else if (accountType === '2' && userType === 2) { + setEmailStateType(1) + } + } + + const handleAccountToDetail = async (event: MouseEvent) => { + try { + const token = await captchaRef.current.executeAsync() + console.log(token, 'token') + } catch (error) { + console.log(error, 'error') + } handleSubmit((data: CustomFieldItems) => { const email = accountType === '1' ? data.email : data.workEmailAddress getB2BCompanyUserInfo(email).then(({ companyUserInfo: { userType } }: any) => { - if (userType === 1) { + if (userType === 1 || (userType === 3 && accountType === '2')) { const contactInfo: any = accountType === '1' ? contactInformation : bcContactInformationFields const contactName = accountType === '1' ? 'contactInformation' : 'bcContactInformationFields' const newContactInfo = contactInfo.map((item: RegisterFileds) => { @@ -93,7 +115,7 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { }) handleNext() } else { - setEmailStateType(userType) + judgeEmailExist(userType) } }) })(event) @@ -127,7 +149,7 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { login { - emailStateType === 1 ? '(link to login) to apply for a business account' : '' + emailStateType === 1 ? 'to apply for a business account' : '' } @@ -143,8 +165,16 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { value={accountType} onChange={handleChange} > - } label="Business Account" /> - } label="Personal Account" /> + } + label="Business Account" + /> + } + label="Personal Account" + /> @@ -180,6 +210,17 @@ export default function RegisteredAccount(props: RegisteredAccountProps) { setValue={setValue} /> + + + Optional ) } - // if (isStepSkipped(index)) { - // stepProps.completed = false - // } return ( - + {label} ) diff --git a/apps/storefront/src/pages/Registered/component/RegisteredStepButton.tsx b/apps/storefront/src/pages/Registered/component/RegisteredStepButton.tsx index 6360f83d..23234c67 100644 --- a/apps/storefront/src/pages/Registered/component/RegisteredStepButton.tsx +++ b/apps/storefront/src/pages/Registered/component/RegisteredStepButton.tsx @@ -1,5 +1,3 @@ -import { MouseEvent } from 'react' - import { Box, Button, @@ -7,14 +5,7 @@ import { import { steps } from '../config' -interface RegisteredStepButtonProps { - handleBack?: () => void - handleNext: (event: MouseEvent) => void - activeStep: number - handleReset?: () => void, -} - -function RegisteredStepButton(props: RegisteredStepButtonProps) { +function RegisteredStepButton(props: any) { const { activeStep, handleReset, handleBack, handleNext, } = props @@ -28,14 +19,17 @@ function RegisteredStepButton(props: RegisteredStepButtonProps) { ) : ( - + { + activeStep !== 0 && ( + + ) + }