feat: add remote form configuration to app

https://bigc-b2b.atlassian.net/browse/BUN-87
bigcommerce · Aug 5, 2022 · 0ca507c · 0ca507c
1 parent bd256a0
commit 0ca507c
Show file tree

Hide file tree

Showing 19 changed files with 520 additions and 519 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -11,15 +11,16 @@
     "coverage": "vitest --coverage"
   },
   "dependencies": {
-    "@b3/lang": "*",
     "@b3/global-b3": "*",
+    "@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/styles": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
+    "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
     "date-fns": "^2.28.0",
     "graphql": "^16.5.0",

diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -1,3 +1,6 @@
+import {
+  useEffect,
+} from 'react'
 import {
   HashRouter,
   Route,
@@ -37,9 +40,24 @@ const HeaderContainer = styled('div')(() => ({
   marginBottom: '1rem',
 }))
 
+const {
+  height: defaultHeight,
+  overflow: defaultOverflow,
+} = document.body.style
+
 export default function App() {
   const [isOpen, setIsOpen] = useB3AppOpen(false)
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.height = '100%'
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.height = defaultHeight
+      document.body.style.overflow = defaultOverflow
+    }
+  }, [isOpen])
+
   return (
     <HashRouter>
       <div className="bundle-app">

diff --git a/apps/storefront/src/components/B3CustomForm.tsx b/apps/storefront/src/components/B3CustomForm.tsx
@@ -79,7 +79,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
             )
           }
           {
-            ['file'].includes(fieldType) && (
+            ['files'].includes(fieldType) && (
               <B3FileUpload
                 {...field}
                 errors={errors}

diff --git a/apps/storefront/src/components/RegisteredCloseButton.tsx b/apps/storefront/src/components/RegisteredCloseButton.tsx
@@ -12,6 +12,11 @@ export function RegisteredCloseButton(props: any) {
   }
 
   return (
-    <Close onClick={handleCloseForm} />
+    <Close
+      sx={{
+        cursor: 'pointer',
+      }}
+      onClick={handleCloseForm}
+    />
   )
 }
diff --git a/apps/storefront/src/components/form/B3FileUpload.tsx b/apps/storefront/src/components/form/B3FileUpload.tsx
@@ -60,12 +60,12 @@ interface FileUploadProps extends B3UI.B3UIProps {
 
 const getMaxFileSizeLabel = (maxSize: number) => {
   if (maxSize / 1048576 > 1) {
-    return `${(maxSize / 1048576).toFixed(1)}M`
+    return `${(maxSize / 1048576).toFixed(1)}MB`
   }
   if (maxSize / 1024 > 1) {
-    return `${(maxSize / 1024).toFixed(1)}kb`
+    return `${(maxSize / 1024).toFixed(1)}KB`
   }
-  return `${maxSize}b`
+  return `${maxSize}B`
 }
 
 export const B3FileUpload = (props: FileUploadProps) => {
@@ -128,7 +128,7 @@ export const B3FileUpload = (props: FileUploadProps) => {
   return (
     <>
       {
-       ['file'].includes(fieldType) && (
+       ['files'].includes(fieldType) && (
        <DropzoneBox>
          <DropzoneArea
            Icon={CloudUploadOutlinedIcon}

diff --git a/apps/storefront/src/components/form/styled.ts b/apps/storefront/src/components/form/styled.ts
@@ -10,6 +10,7 @@ export const DropzoneBox = styled('div')(() => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    cursor: 'default',
     '& .MuiTypography-root': {
       fontSize: '1rem',
       color: '#767676',

diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts
@@ -3,6 +3,7 @@ export default {
   'intl.user.register.title.accountCreated': 'Your personal account has been created.',
   'intl.user.register.title.accountRegister': 'Account Registration',
   'intl.user.register.title.attachments': 'Attachments',
+  'intl.user.register.title.bcToB2B.businessAccountApplication': 'Business Account Application',
   'intl.user.register.title.address': 'Address',
   'intl.user.register.title.businessDetails': 'Business Details',
 

diff --git a/apps/storefront/src/locales/zh-CN/users.ts b/apps/storefront/src/locales/zh-CN/users.ts
@@ -2,6 +2,7 @@ export default {
   'intl.user.register.title.registerComplete': '注册完成。欢迎！',
   'intl.user.register.title.accountCreated': '您的个人帐户已被创建。',
   'intl.user.register.title.accountRegister': '账户注册',
+  'intl.user.register.title.bcToB2B.businessAccountApplication': '商业账户申请',
   'intl.user.register.title.attachments': '附件',
   'intl.user.register.title.address': '地址',
   'intl.user.register.title.businessDetails': '公司信息',