From db140cdd1c26f72d474178415b5fcaa02c62f2d5 Mon Sep 17 00:00:00 2001
From: BrianJiang2021 <80307788+BrianJiang2021@users.noreply.github.com>
Date: Mon, 24 Jul 2023 10:59:32 +0800
Subject: [PATCH] fix: show tpa by setting (#591)

* fix: show tpa by setting
https://bigc-b2b.atlassian.net/browse/BUN-1281
---
 apps/storefront/src/App.tsx                    |  2 +-
 .../src/components/HeadlessController.tsx      |  2 ++
 apps/storefront/src/hooks/dom/useOpenPDP.ts    | 18 ++++++++++++++----
 apps/storefront/src/pages/login/Login.tsx      | 12 +++++++++++-
 apps/storefront/src/utils/b3HideRegister.ts    |  4 ++--
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
index d66762ce..8c0e5a64 100644
--- a/apps/storefront/src/App.tsx
+++ b/apps/storefront/src/App.tsx
@@ -236,7 +236,7 @@ export default function App() {
 
   useEffect(() => {
     handleHideRegisterPage(registerEnabled)
-  }, [registerEnabled, storefrontConfig])
+  }, [registerEnabled, storefrontConfig, window.location.pathname])
 
   useEffect(() => {
     if (isOpen) {
diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx
index 2fc7a1d7..1908ecf2 100644
--- a/apps/storefront/src/components/HeadlessController.tsx
+++ b/apps/storefront/src/components/HeadlessController.tsx
@@ -59,6 +59,7 @@ export default function HeadlessController({
       salesRepCompanyId = 0,
       isB2BUser,
       currentChannelId,
+      registerEnabled,
     },
   } = useContext(GlobaledContext)
   const { addToQuote: addProductFromPageToQuote } =
@@ -170,6 +171,7 @@ export default function HeadlessController({
               storeDispatch,
               saveFn,
               setOpenPage,
+              registerEnabled,
             })
           },
           addProducts: (shoppingListId, items) =>
diff --git a/apps/storefront/src/hooks/dom/useOpenPDP.ts b/apps/storefront/src/hooks/dom/useOpenPDP.ts
index 8d6021d8..9bfc9a65 100644
--- a/apps/storefront/src/hooks/dom/useOpenPDP.ts
+++ b/apps/storefront/src/hooks/dom/useOpenPDP.ts
@@ -36,6 +36,7 @@ interface AddProductFromPageParams {
   storeDispatch: DispatchRedux<AnyAction>
   saveFn: () => void
   setOpenPage: (value: SetStateAction<OpenPageState>) => void
+  registerEnabled: boolean
 }
 
 export const addProductFromPage = ({
@@ -43,6 +44,7 @@ export const addProductFromPage = ({
   storeDispatch,
   saveFn,
   setOpenPage,
+  registerEnabled,
 }: AddProductFromPageParams) => {
   if (role === 100) {
     storeDispatch(
@@ -53,7 +55,7 @@ export const addProductFromPage = ({
           message:
             'Please create an account, or login to create a shopping list.',
           cancelText: 'Cancel',
-          saveText: 'Register',
+          saveText: registerEnabled ? 'Register' : '',
           saveFn,
         },
       })
@@ -76,7 +78,7 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
   const storeDispatch = useDispatch()
   const {
     dispatch,
-    state: { isB2BUser, shoppingListEnabled },
+    state: { isB2BUser, shoppingListEnabled, registerEnabled },
   } = useContext(GlobaledContext)
 
   const [roleText] = useRole()
@@ -102,9 +104,10 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
         storeDispatch,
         saveFn: jumpRegister,
         setOpenPage,
+        registerEnabled,
       })
     },
-    [role]
+    [role, registerEnabled]
   )
 
   const [openQuickView] = useDomVariation(
@@ -217,5 +220,12 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
         item.removeEventListener('click', pdpCallBack)
       })
     }
-  }, [isB2BUser, shoppingListEnabled, openQuickView, shoppingListBtn, roleText])
+  }, [
+    isB2BUser,
+    shoppingListEnabled,
+    openQuickView,
+    shoppingListBtn,
+    roleText,
+    registerEnabled,
+  ])
 }
diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
index f627e3b8..5f397189 100644
--- a/apps/storefront/src/pages/login/Login.tsx
+++ b/apps/storefront/src/pages/login/Login.tsx
@@ -246,6 +246,9 @@ export default function Login(props: RegisteredProps) {
     navigate('/forgotpassword')
   }
 
+  const loginAndRegisterContainerWidth = registerEnabled ? '100%' : '50%'
+  const loginContainerWidth = registerEnabled ? '50%' : 'auto'
+
   return (
     <B3Card setOpenPage={setOpenPage}>
       <LoginContainer paddings={isMobile ? '0' : '20px 20px'}>
@@ -304,6 +307,10 @@ export default function Login(props: RegisteredProps) {
                 <Box
                   sx={{
                     padding: isMobile ? 0 : '0 5%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    flexDirection: 'column',
                   }}
                 >
                   {loginInfo.widgetHeadText && (
@@ -311,6 +318,7 @@ export default function Login(props: RegisteredProps) {
                       sx={{
                         mt: isMobile ? '20px' : '32px',
                         minHeight: '48px',
+                        width: registerEnabled || isMobile ? '100%' : '50%',
                       }}
                       isVisible={loginInfo.isShowWidgetHead}
                       html={loginInfo.widgetHeadText}
@@ -324,11 +332,12 @@ export default function Login(props: RegisteredProps) {
                       display: 'flex',
                       flexDirection: isMobile ? 'column' : 'row',
                       justifyContent: 'center',
+                      width: isMobile ? 'auto' : loginAndRegisterContainerWidth,
                     }}
                   >
                     <Box
                       sx={{
-                        width: isMobile ? 'auto' : '50%',
+                        width: isMobile ? 'auto' : loginContainerWidth,
                         paddingRight: isMobile ? 0 : '2%',
                         ml: '16px',
                         mr: isMobile ? '16px' : '',
@@ -363,6 +372,7 @@ export default function Login(props: RegisteredProps) {
                       sx={{
                         mt: '20px',
                         minHeight: '48px',
+                        width: registerEnabled || isMobile ? '100%' : '50%',
                       }}
                       isVisible={loginInfo.isShowWidgetFooter}
                       html={loginInfo.widgetFooterText}
diff --git a/apps/storefront/src/utils/b3HideRegister.ts b/apps/storefront/src/utils/b3HideRegister.ts
index cb033550..30d79f5e 100644
--- a/apps/storefront/src/utils/b3HideRegister.ts
+++ b/apps/storefront/src/utils/b3HideRegister.ts
@@ -7,13 +7,13 @@ const handleHideRegisterPage = (registerEnabled: boolean) => {
 
   if (registerPageAll.length > 0) {
     registerPageAll.forEach((page: CustomFieldItems) => {
-      page.style.display = registerEnabled ? 'block' : 'none'
+      page.style.display = registerEnabled ? 'inline-block' : 'none'
     })
   }
 
   if (navUserOrText.length > 0) {
     navUserOrText.forEach((text: CustomFieldItems) => {
-      text.style.display = registerEnabled ? 'block' : 'none'
+      text.style.display = registerEnabled ? 'inline-block' : 'none'
     })
   }
 }