fix: login and registered page layout

https://bigc-b2b.atlassian.net/browse/BUN-1191
bigcommerce · Jun 27, 2023 · 0fa280e · 0fa280e
1 parent 46fa204
commit 0fa280e
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 29 deletions.
diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts
@@ -1,8 +1,8 @@
 export default {
-  'intl.user.register.title.registerComplete':
-    'Registration Complete. Thank You!',
-  'intl.user.register.title.accountCreated':
-    'Your personal account has been created.',
+  'intl.user.register.title.registerComplete': 'Application submitted',
+  'intl.user.register.title.registerComplete.warning':
+    'Application has been submitted',
+  'intl.user.register.title.accountCreated': 'Registration complete!',
   'intl.user.register.title.accountRegister': 'Account Registration',
   'intl.user.register.title.attachments': 'Attachments',
   'intl.user.register.title.bcToB2B.businessAccountApplication':
@@ -72,7 +72,9 @@ export default {
   'intl.user.register.RegisterFinish.autoApproved.tip':
     'Thank you for creating your account at {storeName}. Your company account application has been approved.',
   'intl.user.register.RegisterFinish.notAutoApproved.tip':
-    'Your company account application has been received. Please allow 24 hours for account approval and activation.',
+    'Some account and purchase functionality may not be available until your account is approved. We look forward to serving you.',
+  'intl.user.register.RegisterFinish.notAutoApproved.warningTip':
+    'Your business account application has been submitted. Please allow 24 hours for account approval and activation. But part of the functionality is already available to you, please review your account.',
   'intl.user.register.RegisterFinish.bcSuccess.tip':
     'Thank you for creating your account at {storeName}.',
   'intl.user.register.RegisterFinish.blockPendingAccountOrderCreation.tip':

diff --git a/apps/storefront/src/locales/zh-CN/users.ts b/apps/storefront/src/locales/zh-CN/users.ts
@@ -1,6 +1,7 @@
 export default {
-  'intl.user.register.title.registerComplete': '注册完成。欢迎！',
-  'intl.user.register.title.accountCreated': '您的个人帐户已被创建。',
+  'intl.user.register.title.registerComplete': '已提交申请',
+  'intl.user.register.title.registerComplete.warning': '申请已提交',
+  'intl.user.register.title.accountCreated': '注册完成！',
   'intl.user.register.title.accountRegister': '账户注册',
   'intl.user.register.title.bcToB2B.businessAccountApplication': '商业账户申请',
   'intl.user.register.title.attachments': '附件',
@@ -62,7 +63,9 @@ export default {
   'intl.user.register.RegisterFinish.autoApproved.tip':
     '感谢您在 {storeName} 创建帐户。 您的公司帐户申请已获批准。',
   'intl.user.register.RegisterFinish.notAutoApproved.tip':
-    '您的公司账户申请已收到。 请等待 24 小时来批准和激活帐户。',
+    '在您的帐户获得批准之前，某些帐户和购买功能可能不可用。 我们期待您的光临。',
+  'intl.user.register.RegisterFinish.notAutoApproved.warningTip':
+    '您的企业账户申请已提交。 帐户批准和激活需要 24 小时。 但是您已经可以使用部分功能，请检查您的帐户。',
   'intl.user.register.RegisterFinish.bcSuccess.tip':
     '感谢您在 {storeName} 创建帐户。',
   'intl.user.register.RegisterFinish.blockPendingAccountOrderCreation.tip':

diff --git a/apps/storefront/src/pages/login/ForgotPassword.tsx b/apps/storefront/src/pages/login/ForgotPassword.tsx
@@ -75,7 +75,6 @@ function ForgotPassword(props: ForgotPasswordProps) {
             <ImageListItem
               sx={{
                 maxWidth: isMobile ? '175px' : '250px',
-                maxHeight: isMobile ? '175px' : '250px',
               }}
               onClick={() => {
                 window.location.href = '/'

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -257,7 +257,6 @@ export default function Login(props: RegisteredProps) {
                     <ImageListItem
                       sx={{
                         maxWidth: isMobile ? '70%' : '250px',
-                        maxHeight: isMobile ? '70%' : '250px',
                       }}
                       onClick={() => {
                         window.location.href = '/'

diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx
@@ -291,7 +291,7 @@ function Registered(props: RegisteredProps) {
         <B3Sping
           isSpinning={isLoading}
           tip={b3Lang('intl.global.tips.loading')}
-          transparency=".75"
+          transparency="0"
         >
           <Box
             sx={{
@@ -306,7 +306,6 @@ function Registered(props: RegisteredProps) {
                 <ImageListItem
                   sx={{
                     maxWidth: '250px',
-                    maxHeight: '250px',
                   }}
                   onClick={() => {
                     window.location.href = '/'

diff --git a/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx b/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx
@@ -472,7 +472,7 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
         <B3Sping
           isSpinning={isLoading}
           tip={b3Lang('intl.global.tips.loading')}
-          transparency=".75"
+          transparency="0"
         >
           <Box
             sx={{
@@ -496,7 +496,6 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                 <ImageListItem
                   sx={{
                     maxWidth: '250px',
-                    maxHeight: '250px',
                   }}
                   onClick={() => {
                     window.location.href = '/'

diff --git a/apps/storefront/src/pages/registered/RegisteredFinish.tsx b/apps/storefront/src/pages/registered/RegisteredFinish.tsx
@@ -44,9 +44,6 @@ export default function RegisteredFinish(props: {
         </StyleTipContainer>
       ) : (
         <>
-          <StyleTipContainer>
-            {b3Lang('intl.user.register.RegisterFinish.notAutoApproved.tip')}
-          </StyleTipContainer>
           {blockPendingAccountOrderCreation && (
             <Alert
               severity="warning"
@@ -63,6 +60,13 @@ export default function RegisteredFinish(props: {
               )}
             </Alert>
           )}
+          <StyleTipContainer>
+            {blockPendingAccountOrderCreation
+              ? b3Lang(
+                  'intl.user.register.RegisterFinish.notAutoApproved.warningTip'
+                )
+              : b3Lang('intl.user.register.RegisterFinish.notAutoApproved.tip')}
+          </StyleTipContainer>
         </>
       )
     }

diff --git a/apps/storefront/src/pages/registered/RegisteredStep.tsx b/apps/storefront/src/pages/registered/RegisteredStep.tsx
@@ -9,11 +9,9 @@ import {
   useTheme,
 } from '@mui/material'
 
-import {
-  b3HexToRgb,
-  getContrastColor,
-} from '@/components/outSideComponents/utils/b3CustomStyles'
+import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
 import { useMobile } from '@/hooks'
+import { B3SStorage } from '@/utils'
 
 import { RegisteredContext } from './context/RegisteredContext'
 import { steps } from './config'
@@ -33,10 +31,16 @@ export default function RegisteredStep(props: RegisteredStepProps) {
   const theme = useTheme()
 
   const { state } = useContext(RegisteredContext)
-  const { accountType, submitSuccess } = state
+  const { accountType, submitSuccess, isAutoApproval } = state
+  const blockPendingAccountOrderCreation =
+    B3SStorage.get('blockPendingAccountOrderCreation') && !isAutoApproval
+  const registerCompleteText = blockPendingAccountOrderCreation
+    ? b3Lang('intl.user.register.title.registerComplete.warning')
+    : b3Lang('intl.user.register.title.registerComplete')
+
   const newPageTitle =
     accountType === '1'
-      ? b3Lang('intl.user.register.title.registerComplete')
+      ? registerCompleteText
       : b3Lang('intl.user.register.title.accountCreated')
 
   const customColor = getContrastColor(backgroundColor)
@@ -74,10 +78,6 @@ export default function RegisteredStep(props: RegisteredStepProps) {
         <Stepper
           activeStep={activeStep}
           sx={{
-            '& .MuiSvgIcon-root:not(.Mui-active), & .MuiStepLabel-label, & .MuiStepLabel-label.Mui-active, & .MuiStepLabel-label.Mui-completed':
-              {
-                color: b3HexToRgb(customColor, 0.87),
-              },
             '& .MuiSvgIcon-root:not(.Mui-active) .MuiStepIcon-text': {
               fill: getContrastColor(customColor),
             },

diff --git a/apps/storefront/src/pages/registered/styled.ts b/apps/storefront/src/pages/registered/styled.ts
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
 
 export const StyleTipContainer = styled('p')(() => ({
-  textAlign: 'center',
   margin: '2rem auto',
 }))
 

diff --git a/apps/storefront/vite.config.ts b/apps/storefront/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
     port: 3001,
     proxy: {
       '/bigcommerce': {
-        target: 'https://storefront-staging.mybigcommerce.com/',
+        target: 'https://msfremote-frontend-demo.mybigcommerce.com/',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/bigcommerce/, ''),
       },