fix: update with sprint 49 the feature branch (#975)

* feat: bun1943 register verify (#946)

* fix: register verify bun1943-s48
https://bigc-b2b.atlassian.net/browse/BUN-1943

* fix: register verify

* feat: country add default value
https://bigc-b2b.atlassian.net/browse/BUN-1955

* fix: modify the login page design layout bun1916
https://bigc-b2b.atlassian.net/browse/BUN-1916

* fix: design top line of side menu should be alligned with top line of page header (#950)

* fix: design top line of side menu should be alligned with top line of page header
https://bigc-b2b.atlassian.net/browse/BUN-2063

* feat: add BUN-2070,BUN-2064,BUN-2066,BUN-2065 (#951)

* feat: add "x" to close the buyer portal
add Quote Title entry to the Buyer Quote Form in the Buyer Portal
https://bigc-b2b.atlassian.net/browse/BUN-2070
https://bigc-b2b.atlassian.net/browse/BUN-2064

* feat: allow Password AutoFill
https://bigc-b2b.atlassian.net/browse/BUN-2066

* feat: add a setting that determines where shoppers land when the login to they store
https://bigc-b2b.atlassian.net/browse/BUN-2065

* fix: quick order pad page crashes hotfix about sup1506
https://bigc-b2b.atlassian.net/browse/SUP-1506

* fix: optimized login loadding BUN-2065

* ci: change the CODEOWNER to the buyer-portal team

* fix: refix the CODEOWNERS

* fix: missing address label
https://bigc-b2b.atlassian.net/browse/BUN-2122

* fix/BUN-2084: clean no param rule in pages (#958)

* fix: cleaning rules

* fix: cherry picking changes

* fix: clean code merge

* fix: adding missing lines

* fix/BUN-2083 clean up no params reassign rule (#962)

* feat(BUN-2087): refactoring hooks eslint rule (#947)

* fix(BUN-2085): nit in variable definition (#954)

* fix: clean no param reassign rule in components (#953)

* fix: clean no param reassign rule in components

* fix: deleting clean directory

* feat(BUN-2085): utils directory eslint cleanup (#952)

---------

Co-authored-by: bc-victor <140021227+bc-victor@users.noreply.github.com>

* brian/fix/sprint49 (#959)

* fix: invoice link leads to a blank unresponsive buyer portal page
https://bigc-b2b.atlassian.net/jira/software/c/projects/BUN/issues/BUN-2015

* fix: reordering For Product with Modifier Text Field
https://bigc-b2b.atlassian.net/browse/BUN-2075

* fix: quick order pad change tip text (#964)

* fix: quick order pad change tip text
https://bigc-b2b.atlassian.net/browse/BUN-2141

* fix: translation issues

* fix: quick order pad qty error
https://bigc-b2b.atlassian.net/browse/BUN-2207

* fix: the cart counter is showing on the X icon on the mobile cart in the Buyer Portal (#2255)

* chore: documentation efforts into connecting to production stores (#972)

* ci: change the CODEOWNER to the buyer-portal team

* fix: refix the CODEOWNERS

* chore: documentation efforts into connecting to production stores

---------

Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com>

* fix: invoice,shoppingList,quote detail page link

---------

Co-authored-by: BrianJiang2021 <80307788+BrianJiang2021@users.noreply.github.com>
Co-authored-by: Brian.Jiang2021 <brian.jiang@bundleb2b.net>
Co-authored-by: Micah Thomas <95306190+bc-micah@users.noreply.github.com>
Co-authored-by: bc-victor <140021227+bc-victor@users.noreply.github.com>

CODEOWNERS

@@ -1 +1 @@
-* @bc-micah @LeoChowChina @libruce
+* @B3BC/buyer-portal

README.md

@@ -1,23 +1,27 @@
-
 A monorepo frontend application designed for the BigCommerce B2B Edition Buyer portal. It's built using Turborepo, TypeScript, and React.
 
 ## Index
 
-- [Prerequisites](#-prerequisites)
-- [Core Technologies](#-core-technologies)
-- [Workspaces](#-workspaces)
-- [Tools and Libraries](#-tools-and-libraries)
-- [System Setup](#-system-setup)
-- [Local Development](#-local-development)
+- [Index](#index)
+- [☑ Prerequisites](#-prerequisites)
+  - [Step 1: Access the Storefronts Manager](#step-1-access-the-storefronts-manager)
+  - [Step 2: Enable B2B on Your Channel](#step-2-enable-b2b-on-your-channel)
+  - [Step 3: Contact Us for Additional Support](#step-3-contact-us-for-additional-support)
+- [🚀 Core Technologies](#-core-technologies)
+- [📦 Workspaces](#-workspaces)
+- [🛠 Tools and Libraries](#-tools-and-libraries)
+- [🛠 System Setup](#-system-setup)
+- [⚙ Local Development](#-local-development)
 - [Running Project Locally](#running-project-locally)
-- [Contribution](#-contribution)
-- [Contact & Support](#-contact--support)
+- [🤝 Contribution](#-contribution)
+- [📞 Contact \& Support](#-contact--support)
 
 ## ☑ Prerequisites
 
 Before you begin, ensure you have the BigCommerce B2B Edition App installed. To set up your storefront with B2B capabilities, follow the steps below:
 
 ### Step 1: Access the Storefronts Manager
+
 After installing the B2B Edition App, go to the app's dashboard and select the 'Storefronts' section.
 
 <img width="200" alt="image" src="https://github.com/B3BC/b2b-buyer-portal/assets/140021227/0d733ddb-e59c-4e5a-8801-4a744940d66b">
@@ -28,6 +32,7 @@ Choose the channel where you wish to enable B2B functionality. Initially, B2B fe
 <img width="480" alt="image" src="https://github.com/B3BC/b2b-buyer-portal/assets/140021227/b425115c-54d9-4382-9371-4e81888eb0af">
 
 ### Step 3: Contact Us for Additional Support
+
 For assistance with activating the remote buyer portal or to inquire about multi-storefront support, which allows you to utilize B2B features across multiple channels, please reach out to our team at b2b@bigcommerce.com, or raise an issue right here in this repository.
 
 ## 🚀 Core Technologies
@@ -80,6 +85,8 @@ For assistance with activating the remote buyer portal or to inquire about multi
 - `VITE_B2B_CLIENT_ID`: The client ID of the BigCommerce App from the [developer portal](https://devtools.bigcommerce.com/).
 - `VITE_LOCAL_DEBUG`: Set to "FALSE". This is for connecting our local development with the B2B Edition GraphQL API.
 
+Environment variables have been updated so you can run your UI directly into production storefronts.
+
 6. Start the development server: `yarn RUN dev`.
 
 ## Running Project Locally

apps/storefront/.env-example

@@ -1,9 +1,26 @@
-VITE_B2B_URL=http://localhost:9000
-VITE_B2B_SOCKET_URL=http://localhost:9000
-VITE_TRANSLATION_SERVICE_URL=http://localhost:5000
+# URL of the B2B API, if doing local development, this should be the URL of the local B2B API with its own port
+VITE_B2B_URL=https://api.bundleb2b.net
+
+# URL of the B2B Socket - this should be the same as the B2B API URL
+VITE_B2B_SOCKET_URL=https://api.bundleb2b.net
+
+# URL of the B2B Translation Service - if doing local development, try with localhost:5000 or check the service URL
+VITE_TRANSLATION_SERVICE_URL=https://api.bundleb2b.net
+
+# CHANNEL ID of the storefront, if your store is multi-storefront, you can use this to specify the storefront - otherwise leave as 1
 VITE_CHANNEL_ID=1
+
+# Store hash of the storefront, this is the unique identifier of the storefront
 VITE_STORE_HASH=store_hash
+
+# Captcha Site Key for the storefront 
 VITE_CATPCHA_SETKEY=captcha_setkey
+
+# Client ID issued by B2B Edition for the storefront
 VITE_B2B_CLIENT_ID=client_id
-VITE_LOCAL_DEBUG="FALSE"
-VITE_LOCAL_GRAPHQL_ORIGIN="https://b2b-tunnel-<port>.bundleb2b.net"
+
+# Set this to TRUE to debug in your default storefront
+VITE_LOCAL_DEBUG=FALSE
+
+# URL where the GraphQL is hosted, usually the same one as B2B_URL_API. If the GraphQL API is hosted locally, set this to the local URL
+VITE_LOCAL_GRAPHQL_ORIGIN=https://api.bundleb2b.net

apps/storefront/src/App.tsx

@@ -316,6 +316,15 @@ export default function App() {
   useEffect(() => {
     const { hash } = window.location
 
+    if (!hash.includes('login') && !hash.includes('register')) {
+      const recordOpenHash = isOpen ? hash : ''
+      storeDispatch(
+        setGlabolCommonState({
+          recordOpenHash,
+        })
+      )
+    }
+
     if (isOpen && hash === '#/') {
       setOpenPage({
         isOpen: false,

apps/storefront/src/components/B3CustomForm.tsx

@@ -14,7 +14,7 @@ import {
 } from './form'
 
 export default function B3CustomForm(props: B3UI.B3CustomFormProps) {
-  const { formFields, errors, control, getValues, setValue } = props
+  const { formFields, errors, control, getValues, setValue, setError } = props
 
   const renderFormFields = (fields: any) =>
     fields.map((field: B3UI.B3CustomFormValue) => {
@@ -75,6 +75,7 @@ export default function B3CustomForm(props: B3UI.B3CustomFormProps) {
                 errors={errors}
                 control={control}
                 setValue={setValue}
+                setError={setError}
               />
             )}
             {['rectangle'].includes(fieldType) && (

apps/storefront/src/components/B3StoreContainer.tsx

@@ -39,7 +39,7 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
     const getStoreBasicInfo = async () => {
       if (
         window.location.pathname.includes('account.php') ||
-        window.location.hash
+        (window.location.hash && window.location.hash !== '#/')
       ) {
         showPageMask(dispatch, true)
       }

apps/storefront/src/components/form/B3ControlFileUpload.tsx

@@ -1,11 +1,13 @@
+import { useState } from 'react'
 import { DropzoneArea, FileObject, PreviewIconProps } from 'react-mui-dropzone'
 import { useB3Lang } from '@b3/lang'
 import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'
 import DescriptionRounded from '@mui/icons-material/DescriptionRounded'
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded'
 import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded'
 import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded'
-import { FormLabel } from '@mui/material'
+import { FormLabel, Typography } from '@mui/material'
+import isEmpty from 'lodash-es/isEmpty'
 
 import { FILE_UPLOAD_ACCEPT_TYPE } from '../../constants'
 
@@ -43,6 +45,8 @@ interface FileUploadProps extends B3UI.B3UIProps {
   previewText?: string
   default?: File[]
   labelColor?: string
+  errors?: CustomFieldItems
+  required?: boolean
 }
 
 const getMaxFileSizeLabel = (maxSize: number) => {
@@ -70,7 +74,12 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     setValue,
     label,
     labelColor = 'text.primary',
+    required,
+    errors = {},
+    setError,
+    control,
   } = props
+  const [deleteCount, setDeleteCount] = useState(0)
 
   const getRejectMessage = (
     rejectedFile: File,
@@ -107,6 +116,23 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
     })
 
   const handleFilesChange = (files: File[]) => {
+    if (deleteCount > 0 && files.length === 0 && required) {
+      setError(name, {
+        type: 'required',
+        message: b3Lang('global.validate.required', {
+          label,
+        }),
+      })
+      setDeleteCount(0)
+    }
+    if (files.length > 0 && !isEmpty(errors)) {
+      const cError = errors[name]
+      if (!isEmpty(cError)) {
+        delete errors[name]
+        // eslint-disable-next-line no-underscore-dangle
+        control?._setErrors(errors)
+      }
+    }
     if (setValue) {
       setValue(name, files)
     }
@@ -119,10 +145,10 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
           sx={{
             marginBottom: '5px',
             display: 'block',
-            color: labelColor,
+            color: (errors as any)[name] ? '#d32f2f' : labelColor,
           }}
         >
-          {label}
+          {`${label} ${required ? '*' : ''}`}
         </FormLabel>
       )}
       <DropzoneBox>
@@ -142,8 +168,22 @@ export default function B3ControlFileUpload(props: FileUploadProps) {
           dropzoneText={dropzoneText}
           previewText={previewText}
           onChange={handleFilesChange}
+          onDelete={() => setDeleteCount(deleteCount + 1)}
         />
       </DropzoneBox>
+      {(errors as any)[name] ? (
+        <Typography
+          sx={{
+            color: '#d32f2f',
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: 1.66,
+            margin: '3px 14px 0 14px',
+          }}
+        >
+          {(errors as any)[name].message}
+        </Typography>
+      ) : null}
     </>
   ) : null
 }

apps/storefront/src/components/form/B3ControlTextField.tsx

@@ -14,6 +14,7 @@ export default function B3ControlTextField({
 }: Form.B3UIProps) {
   const {
     fieldType,
+    isAutoComplete = false,
     name,
     default: defaultValue,
     required,
@@ -115,7 +116,14 @@ export default function B3ControlTextField({
   const handleNumberInputWheel = (event: WheelEvent<HTMLInputElement>) => {
     ;(event.target as HTMLElement).blur()
   }
-
+  const autoCompleteFn = () => {
+    if (!isAutoComplete) {
+      return {
+        autoComplete: 'off',
+      }
+    }
+    return {}
+  }
   const newExtraPadding =
     fieldId === 'field_state' && extraPadding.paddingTop === '0px'
       ? {}
@@ -174,7 +182,8 @@ export default function B3ControlTextField({
                 (errors as any)[name] ? (errors as any)[name].message : null
               }
               onKeyDown={isEnterTrigger ? handleKeyDown : () => {}}
-              autoComplete={fieldType === 'password' ? 'new-password' : 'off'}
+              {...autoCompleteFn()}
+              // autoComplete={fieldType === 'password' ? 'current-password' : 'email'}
             />
           )
         }

apps/storefront/src/components/layout/B3CloseAppButton.tsx

@@ -0,0 +1,46 @@
+import { useContext } from 'react'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+
+import useMobile from '@/hooks/useMobile'
+import { GlobaledContext } from '@/shared/global'
+import { globalStateSelector } from '@/store'
+
+import { CloseBox, CloseBoxMobile, CloseButton } from '../styled'
+
+export default function B3CloseAppButton() {
+  const [isMobile] = useMobile()
+
+  const { setOpenPageFn } = useSelector(globalStateSelector)
+
+  const {
+    state: { isCloseGotoBCHome },
+  } = useContext(GlobaledContext)
+  const navigate = useNavigate()
+
+  const handleCloseForm = () => {
+    if (isCloseGotoBCHome) {
+      window.location.href = '/'
+    } else {
+      navigate('/')
+      setOpenPageFn({
+        isOpen: false,
+        openUrl: '',
+      })
+    }
+    window.history.replaceState(null, '', window.location.pathname || '/')
+  }
+
+  const Box = isMobile ? CloseBoxMobile : CloseBox
+
+  return (
+    <Box>
+      <CloseButton
+        sx={{
+          color: '#757371',
+        }}
+        onClick={handleCloseForm}
+      />
+    </Box>
+  )
+}

apps/storefront/src/components/layout/B3Layout.tsx

@@ -12,6 +12,7 @@ import { getIsTokenGotoPage, RouteItem } from '@/shared/routes/routes'
 import B3Dialog from '../B3Dialog'
 import CompanyCredit from '../CompanyCredit'
 
+import B3CloseAppButton from './B3CloseAppButton'
 import B3Logo from './B3Logo'
 import B3Mainheader from './B3Mainheader'
 import B3MobileLayout from './B3MobileLayout'
@@ -124,6 +125,7 @@ export default function B3Layout({ children }: { children: ReactNode }) {
             p: '32px 63px 70px 63px',
           }}
         >
+          <B3CloseAppButton />
           <Box
             sx={{
               display: 'flex',
@@ -156,11 +158,9 @@ export default function B3Layout({ children }: { children: ReactNode }) {
             <CompanyCredit />
             <Box
               component="main"
-              sx={
-                {
-                  // flexGrow: 1,
-                }
-              }
+              sx={{
+                mt: !isMobile && !title ? '24px' : '0',
+              }}
             >
               {children}
             </Box>

apps/storefront/src/components/layout/B3Logo.tsx

@@ -31,17 +31,29 @@ export default function B3Logo() {
 
   return (
     <Box
-      sx={{
-        flexShrink: '0',
-        height: 'auto',
-        width: `${isMobile ? '45%' : '100%'}`,
-        '& img': {
-          width: '100%',
-          height: '100%',
-          objectFit: 'contain',
-        },
-        display: 'contents',
-      }}
+      sx={
+        isMobile
+          ? {
+              flexShrink: '0',
+              height: 'auto',
+              width: '45%',
+              display: 'contents',
+              '& img': {
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+              },
+            }
+          : {
+              width: '100%',
+              height: '64px',
+              '& img': {
+                width: '100%',
+                maxHeight: '64px',
+                objectFit: 'contain',
+              },
+            }
+      }
     >
       <ImageListItem
         sx={{