perf: registration workflow

bigcommerce · Jul 18, 2022 · cc80d3a · cc80d3a
1 parent 4a61df1
commit cc80d3a
Show file tree

Hide file tree

Showing 24 changed files with 231 additions and 175 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -9,18 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@b3/lang": "*",
     "@emotion/cache": "^11.9.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
     "@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
@@ -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 (
-    <HashRouter>
-      <div className="bundle-app">
-        <ThemeFrame
-          className={isOpen ? 'active-frame' : undefined}
-          fontUrl={FONT_URL}
-          customStyles={CUSTOM_STYLES}
-        >
-          {isOpen ? (
-            <Layout close={() => setIsOpen(false)}>
-              bundle b2b
-              <Routes>
-                <Route
-                  path="/"
-                  element={<Home />}
-                />
-                <Route
-                  path="/form"
-                  element={<Form />}
-                />
-                <Route
-                  path="/registered"
-                  element={<Registered />}
-                />
-              </Routes>
-            </Layout>
-          ) : null}
-        </ThemeFrame>
-      </div>
-    </HashRouter>
+    <RegisteredProvider>
+      <HashRouter>
+        <div className="bundle-app">
+          <ThemeFrame
+            className={isOpen ? 'active-frame' : undefined}
+            fontUrl={FONT_URL}
+            customStyles={CUSTOM_STYLES}
+          >
+            {isOpen ? (
+              <Layout close={() => setIsOpen(false)}>
+                bundle b2b
+                <Routes>
+                  <Route
+                    path="/"
+                    element={<Home />}
+                  />
+                  <Route
+                    path="/form"
+                    element={<Form />}
+                  />
+                  <Route
+                    path="/registered"
+                    element={<Registered />}
+                  />
+                </Routes>
+              </Layout>
+            ) : null}
+          </ThemeFrame>
+        </div>
+      </HashRouter>
+    </RegisteredProvider>
   )
 }
diff --git 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 (
-    <Grid container spacing={2}>
+    <Grid
+      container
+      spacing={2}
+    >
       {
         formFields && renderFormFields(formFields)
       }

diff --git a/...efront/src/components/B3UI/B3Checkbox.tsx → ...efront/src/components/form/B3Checkbox.tsx b/...efront/src/components/B3UI/B3Checkbox.tsx → ...efront/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) && (
           <FormControl>
             {
-              label && <FormLabel error={!!errors[name]} required={required}>{label}</FormLabel>
+              label && (
+              <FormLabel
+                error={!!errors[name]}
+                required={required}
+              >
+                {label}
+              </FormLabel>
+              )
             }
             <Controller
               {...fieldsProps}

diff --git a/...orefront/src/components/B3UI/B3Picker.tsx → ...orefront/src/components/form/B3Picker.tsx b/...orefront/src/components/B3UI/B3Picker.tsx → ...orefront/src/components/form/B3Picker.tsx
@@ -7,9 +7,9 @@ import { Controller } from 'react-hook-form'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
-import B3UI from './ui'
+import Form from './ui'
 
-export const B3Picker = ({ control, errors, ...rest } : B3UI.B3UIProps) => {
+export const B3Picker = ({ control, errors, ...rest } : Form.B3UIProps) => {
   const {
     fieldType, name, default: defaultValue, required, label, validate, muiTextFieldProps,
   } = rest

diff --git a/...ront/src/components/B3UI/B3RadioGroup.tsx → ...ront/src/components/form/B3RadioGroup.tsx b/...ront/src/components/B3UI/B3RadioGroup.tsx → ...ront/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) && (
           <FormControl>
             {
-              label && <FormLabel error={!!errors[name]} required={required}>{label}</FormLabel>
+              label && (
+              <FormLabel
+                error={!!errors[name]}
+                required={required}
+              >
+                {label}
+              </FormLabel>
+              )
             }
             <Controller
               {...fieldsProps}
@@ -43,7 +50,7 @@ export const B3RadioGroup = ({ control, errors, ...rest } : B3UI.B3UIProps) => {
                 >
                   {
                     options?.length && (
-                      options.map((option: B3UI.RadopGroupListProps) => (
+                      options.map((option: Form.RadopGroupListProps) => (
                         <FormControlLabel
                           value={option.value}
                           label={option.label}

diff --git a/...orefront/src/components/B3UI/B3Select.tsx → ...orefront/src/components/form/B3Select.tsx b/...orefront/src/components/B3UI/B3Select.tsx → ...orefront/src/components/form/B3Select.tsx
@@ -9,9 +9,9 @@ import {
 } from '@mui/material'
 import { Controller } from 'react-hook-form'
 
-import B3UI from './ui'
+import Form from './ui'
 
-export const B3Select = ({ control, errors, ...rest } : B3UI.B3UIProps) => {
+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) && (
         <FormControl style={{ width: '100%' }}>
           {
-            label && <FormLabel error={!!errors[name]} required={required}>{label}</FormLabel>
+            label && (
+            <FormLabel
+              error={!!errors[name]}
+              required={required}
+            >
+              {label}
+            </FormLabel>
+            )
           }
           <Controller
             {...fieldsProps}
@@ -57,7 +64,12 @@ export const B3Select = ({ control, errors, ...rest } : B3UI.B3UIProps) => {
                 {
                   options?.length && (
                     options.map((option: any) => (
-                      <MenuItem key={option[replaceOptions?.label || 'label']} value={option[replaceOptions?.value || 'value']}>{option[replaceOptions?.label || 'label']}</MenuItem>
+                      <MenuItem
+                        key={option[replaceOptions?.label || 'label']}
+                        value={option[replaceOptions?.value || 'value']}
+                      >
+                        {option[replaceOptions?.label || 'label']}
+                      </MenuItem>
                     ))
                   )
                   }

diff --git a/...front/src/components/B3UI/B3TextField.tsx → ...front/src/components/form/B3TextField.tsx b/...front/src/components/B3UI/B3TextField.tsx → ...front/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 → apps/storefront/src/components/form/index.ts b/apps/storefront/src/components/B3UI/index.ts → apps/storefront/src/components/form/index.ts
diff --git a/apps/storefront/src/components/B3UI/ui.ts → apps/storefront/src/components/form/ui.ts b/apps/storefront/src/components/B3UI/ui.ts → 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
@@ -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 → ...torefront/src/components/spin/B3Sping.tsx b/apps/storefront/src/components/B3Sping.tsx → ...torefront/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
@@ -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
@@ -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
@@ -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)
   }