feat: add global configuration

bigcommerce · Aug 23, 2022 · 30c4d99 · 30c4d99
1 parent 40815d6
commit 30c4d99
Show file tree

Hide file tree

Showing 23 changed files with 226 additions and 107 deletions.
diff --git a/apps/storefront/index.html b/apps/storefront/index.html
@@ -14,12 +14,8 @@
             'is_local_debugging': true,
         },
         'dom.checkoutRegisterParentElement': "#b2bParent",
-        b3Context: {
-          channelId: 1,
-          customer: {
-            email: 'xxxxx.com'
-          }
-        }
+        'dom.openB3Checkout': 'childB2b',
+        'before_login_goto_page': '/'
       }
     </script>
   </head>
@@ -80,7 +76,7 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
         if ($('#b2bParent .navUser-action').length > 0) {
           $('#b2bParent .navUser-action').remove()
         } else {
-          $("#b2bParent").append('<a class="navUser-action" href="/login.php?action=create_account" aria-label="Register" onclick="inlineEvent()">testRegister</a>')
+          $("#b2bParent").append('<a id="childB2b" class="navUser-action" href="/login.php?action=create_account" aria-label="Register" onclick="inlineEvent()">testRegister</a>')
         }
       })
     </script>

diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -2,6 +2,7 @@ import {
   useEffect,
   lazy,
   Suspense,
+  useContext,
 } from 'react'
 
 import {
@@ -18,6 +19,10 @@ import {
   useB3AppOpen,
 } from '@b3/hooks'
 
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
 import {
   Layout,
   RegisteredCloseButton,
@@ -34,16 +39,6 @@ body {
   font-family: Roboto;
 };
 `
-// const HeaderContainer = styled('div')(() => ({
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'flex-end',
-//   marginBottom: '1rem',
-// }))
-
-// const PageContainer = styled('div')(() => ({
-//   padding: '40px',
-// }))
 
 const {
   height: defaultHeight,
@@ -70,6 +65,10 @@ export default function App() {
     isOpen: false,
   })
 
+  const {
+    dispatch,
+  } = useContext(GlobaledContext)
+
   useEffect(() => {
     if (isOpen) {
       document.body.style.height = '100%'
@@ -91,10 +90,23 @@ export default function App() {
   useEffect(() => {
     const {
       pathname,
-      hash,
+      href,
     } = window.location
 
-    if (/login.php/.test(pathname) || (hash === '#/login' && pathname === '/checkout')) {
+    dispatch({
+      type: 'common',
+      payload: {
+        isCheckout: pathname === '/checkout',
+      },
+    })
+
+    if (/login.php/.test(pathname) && !href.includes('change_password')) {
+      dispatch({
+        type: 'common',
+        payload: {
+          isCloseGotoBCHome: true,
+        },
+      })
       setOpenPage({
         isOpen: true,
         openUrl: '/login',

diff --git a/apps/storefront/src/components/RegisteredCloseButton.tsx b/apps/storefront/src/components/RegisteredCloseButton.tsx
@@ -5,14 +5,17 @@ import type {
 import {
   Dispatch,
   SetStateAction,
+  useContext,
 } from 'react'
 
 import {
   Box,
 } from '@mui/material'
+
+import globalB3 from '@b3/global-b3'
 import {
-  B3SStorage,
-} from '@/utils'
+  GlobaledContext,
+} from '@/shared/global'
 
 import {
   CloseButton,
@@ -27,9 +30,15 @@ export function RegisteredCloseButton(props: CloseButtonProps) {
     setOpenPage,
   } = props
 
+  const {
+    state: {
+      isCheckout,
+      isCloseGotoBCHome,
+    },
+  } = useContext(GlobaledContext)
+
   const handleCloseForm = () => {
-    const isGotoBCHome = B3SStorage.get('isGotoBCHome') || ''
-    if (isGotoBCHome) {
+    if (isCloseGotoBCHome || (isCheckout && document.getElementById(globalB3['dom.openB3Checkout']))) {
       window.location.href = '/'
     } else {
       setOpenPage({

diff --git a/apps/storefront/src/components/form/B3TextField.tsx b/apps/storefront/src/components/form/B3TextField.tsx
@@ -44,15 +44,22 @@ export const B3TextField = ({
 
   const b3Lang = useB3Lang()
 
+  let requiredText = ''
+  if (fieldType === 'password') {
+    requiredText = b3Lang('intl.global.validate.password.required')
+  } else {
+    requiredText = b3Lang('intl.global.validate.required', {
+      label: labelName || label,
+    })
+  }
+
   const fieldsProps = {
     type: fieldType,
     name,
     key: name,
     defaultValue,
     rules: {
-      required: required && b3Lang('intl.global.validate.required', {
-        label: labelName || labelName,
-      }),
+      required: required && requiredText,
       validate: validate && ((v: string) => validate(v, b3Lang)),
     },
     control,

diff --git a/apps/storefront/src/locales/en-US/global.ts b/apps/storefront/src/locales/en-US/global.ts
@@ -7,6 +7,7 @@ export default {
   'intl.global.button.finish': 'FINISH',
 
   'intl.global.validate.required': '{label} is required',
+  'intl.global.validate.password.required': 'You must enter a password.',
 
   'intl.global.fileUpload.defaultText': 'Drag & drop file here or click here browse',
   'intl.global.fileUpload.typeNotSupport': '{name} file type not support',

diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts
@@ -30,7 +30,7 @@ export default {
   'intl.user.register.registeredAccount.contactInformation': 'Contact Information',
   'intl.user.register.registeredAccount.additionalInformation': 'Additional Information',
 
-  'intl.user.register.validatorRules.email': 'Please enter a valid email address',
+  'intl.user.register.validatorRules.email': 'Please use a valid email address, such as user@example.com.',
   'intl.user.register.validatorRules.phoneNumber': 'Please enter a valid phone number',
   'intl.user.register.validatorRules.number': 'Please enter a valid integer number',
   'intl.user.register.validatorRules.max': 'Please do not exceed {max}',

diff --git a/apps/storefront/src/main.tsx b/apps/storefront/src/main.tsx
@@ -5,6 +5,10 @@ import {
   LangProvider,
 } from '@b3/lang'
 
+import {
+  GlobalProvider,
+} from '@/shared/global'
+
 import App from './App'
 import B3ThemeProvider from './theme'
 
@@ -29,8 +33,10 @@ ReactDOM.createRoot(container).render(
     locales={locales}
     supportLang={SUPPORT_LANGUAGE}
   >
-    <B3ThemeProvider>
-      <App />
-    </B3ThemeProvider>
+    <GlobalProvider>
+      <B3ThemeProvider>
+        <App />
+      </B3ThemeProvider>
+    </GlobalProvider>
   </LangProvider>,
 )
diff --git a/apps/storefront/src/pages/index.tsx b/apps/storefront/src/pages/index.tsx
@@ -1,15 +1 @@
-// export {
-//   Home,
-// } from './Home'
-// export {
-//   Form,
-// } from './Form'
-
-// export {
-//   Login,
-//   ForgotPassword,
-// } from './login'
-// export {
-//   Registered, RegisteredBCToB2B,
-// } from './registered'
 export {}
diff --git a/apps/storefront/src/pages/login/ForgotPassword.tsx b/apps/storefront/src/pages/login/ForgotPassword.tsx
@@ -116,7 +116,6 @@ const ForgotPassword = () => {
           >
             <Box sx={{
               pl: 2,
-              mt: '31px',
             }}
             >
               <B3Sping

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -2,6 +2,7 @@
 import {
   useEffect,
   useState,
+  useContext,
 } from 'react'
 
 import {
@@ -41,6 +42,10 @@ import {
   B3Sping,
 } from '@/components/spin/B3Sping'
 
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
 import {
   LoginContainer, LoginImage,
 } from './styled'
@@ -94,6 +99,14 @@ export default function Login() {
 
   const b3Lang = useB3Lang()
 
+  const {
+    state: {
+      isCheckout,
+      BcToken,
+    },
+    dispatch,
+  } = useContext(GlobaledContext)
+
   useEffect(() => {
     const init = async () => {
       try {
@@ -147,17 +160,29 @@ export default function Login() {
         if (loginFlag) setLoginFlag(loginFlag)
 
         if (loginFlag === '3') {
-          const loginTokenInfo = getloginTokenInfo(channelId)
-          const {
-            data: {
-              token,
-            },
-          } = await getBCToken(loginTokenInfo)
-          B3SStorage.set('BcToken', token)
+          if (!BcToken) {
+            const loginTokenInfo = getloginTokenInfo(channelId)
+            const {
+              data: {
+                token,
+              },
+            } = await getBCToken(loginTokenInfo)
+            B3SStorage.set('BcToken', token)
+            dispatch({
+              type: 'common',
+              payload: {
+                BcToken: token,
+              },
+            })
+          }
           await bcLogoutLogin()
-          B3SStorage.set('isGotoBCHome', true)
-        } else {
-          B3SStorage.set('isGotoBCHome', false)
+
+          dispatch({
+            type: 'common',
+            payload: {
+              isCloseGotoBCHome: true,
+            },
+          })
         }
 
         setChannelId(getChannelId)
@@ -219,7 +244,6 @@ export default function Login() {
     setLoading(true)
     setLoginAccount(data)
 
-    const isCheckout = B3SStorage.get('isCheckout')
     if (isCheckout) {
       try {
         await loginCheckout(data)
@@ -235,6 +259,12 @@ export default function Login() {
           token,
         },
       } = await getBCToken(loginTokenInfo)
+      dispatch({
+        type: 'common',
+        payload: {
+          BcToken: token,
+        },
+      })
       B3SStorage.set('BcToken', token)
 
       const getBCFieldsValue = {
@@ -247,7 +277,7 @@ export default function Login() {
       if (errors?.length || !bcData) {
         getforcePasswordReset(data.emailAddress)
       } else {
-        window.location.href = '/'
+        window.location.href = globalB3.before_login_goto_page
       }
 
       setLoading(false)
@@ -292,10 +322,9 @@ export default function Login() {
             sx={{
               mb: 2,
               mt: 2,
-              fontSize: '30px',
-              fontWeight: 'bold',
               display: 'flex',
               justifyContent: 'center',
+              fontSize: '28px',
             }}
           >
             {loginInfo.loginTitle}
@@ -312,7 +341,7 @@ export default function Login() {
               }}
             >
               <Alert severity={(flag === '1' || flag === '4') ? 'error' : 'success'}>
-                {tipInfo(flag, loginAccount?.emailAddress || globalB3?.b3Context?.customer?.email || '')}
+                {tipInfo(flag, loginAccount?.emailAddress || '')}
               </Alert>
             </Box>
 

diff --git a/apps/storefront/src/pages/login/LoginPanel.tsx b/apps/storefront/src/pages/login/LoginPanel.tsx
@@ -34,23 +34,15 @@ const LoginPanel = (props: LoginPanelProps) => {
       background: '#F5F5F5',
     }}
     >
-      {/* <Box sx={{
-        marginBottom: '20px',
-      }}
-      >
-        {loginInfo.createAccountPanelTittle}
-      </Box> */}
-
       <LoginWidget
         sx={{
           height: '250px',
-          backgroundColor: '#FFFFFF',
         }}
         isVisible
         html={widgetBodyText}
       />
       <Box sx={{
-        marginTop: '10px',
+        marginTop: '5px',
       }}
       >
         <B3Button