fix: button open page

bigcommerce · Jul 28, 2023 · 3a8e9d1 · 3a8e9d1
1 parent b1a2866
commit 3a8e9d1
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 100 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -26,9 +26,9 @@ import {
   getQuoteEnabled,
   getStoreTaxZoneRates,
   getTemPlateConfig,
-  gotoPageByClick,
   handleHideRegisterPage,
   loginInfo,
+  openPageByClick,
   removeBCMenus,
   setStorefrontConfig,
 } from '@/utils'
@@ -65,33 +65,28 @@ export default function App() {
 
   const storeDispatch = useDispatch()
 
-  const { isClickEnterBtn, isPageComplete, currentClickedUrl } =
-    useSelector(globalStateSelector)
+  const {
+    isClickEnterBtn,
+    isPageComplete,
+    currentClickedUrl,
+    isRegisterAndLogin,
+  } = useSelector(globalStateSelector)
 
-  const handleAccountClick = (href: string) => {
+  const handleAccountClick = (href: string, isRegisterAndLogin: boolean) => {
     showPageMask(dispatch, true)
     storeDispatch(
       setGlabolCommonState({
         isClickEnterBtn: true,
         currentClickedUrl: href,
+        isRegisterAndLogin,
       })
     )
   }
 
-  const handleGotoPageByClick = ({
-    href,
-    isRegisterArrInclude,
-  }: CustomFieldItems) => {
-    const gotoUrl = gotoPageByClick({ href, role, isRegisterArrInclude })
-
-    return gotoUrl
-  }
-
   const [{ isOpen, openUrl, params }, setOpenPage] = useB3AppOpen({
     isOpen: false,
     isPageComplete,
     handleEnterClick: handleAccountClick,
-    gotoPageByClick: handleGotoPageByClick,
   })
 
   const {
@@ -110,7 +105,7 @@ export default function App() {
 
   useDomHooks({ setOpenPage })
 
-  // Button to open storefront
+  // open storefront
   useSetOpen(isOpen, openUrl, params)
 
   const { pathname, href, search } = window.location
@@ -250,27 +245,25 @@ export default function App() {
   }, [isOpen])
 
   useEffect(() => {
-    if (isClickEnterBtn && isPageComplete) {
-      const gotoUrl =
-        gotoPageByClick({
-          href: currentClickedUrl,
-          role,
-          isRegisterArrInclude: false,
-        }) || '/orders'
+    if (isClickEnterBtn && isPageComplete && currentClickedUrl) {
+      const gotoUrl = openPageByClick({
+        href: currentClickedUrl,
+        role,
+        isRegisterAndLogin,
+      })
 
       setOpenPage({
         isOpen: true,
         openUrl: gotoUrl,
       })
 
-      // gotoAllowedAppPage(+role, gotoPage, true)
       storeDispatch(
         setGlabolCommonState({
           isClickEnterBtn: false,
         })
       )
     }
-  }, [isPageComplete])
+  }, [isPageComplete, currentClickedUrl])
 
   useEffect(() => {
     const handleHashChange = () => {

diff --git a/apps/storefront/src/store/slices/global.ts b/apps/storefront/src/store/slices/global.ts
@@ -37,6 +37,7 @@ export interface GlabolState {
   taxZoneRates?: TaxZoneRatesProps[]
   isClickEnterBtn?: boolean
   currentClickedUrl?: string
+  isRegisterAndLogin?: boolean
   isPageComplete?: boolean
   globalMessage?: GlobalMessageDialog
   enteredInclusive?: boolean
@@ -48,6 +49,7 @@ const initialState: GlabolState = {
   taxZoneRates: [],
   isClickEnterBtn: false,
   currentClickedUrl: '',
+  isRegisterAndLogin: false,
   isPageComplete: false,
   globalMessage: {
     open: false,

diff --git a/apps/storefront/src/utils/b3AccountItem.ts b/apps/storefront/src/utils/b3AccountItem.ts
@@ -1,7 +1,7 @@
-interface GotoPageByClickProps {
+interface OpenPageByClickProps {
   href: string
   role: number | string
-  isRegisterArrInclude: boolean
+  isRegisterAndLogin: boolean
 }
 
 const hideAccountItems = [
@@ -24,6 +24,7 @@ const accountTarget = [
   },
 ]
 
+// Vault theme remove associated nav
 const removeBCMenus = () => {
   hideAccountItems.forEach((item: string) => {
     const itemNodes = document.querySelectorAll(`[href^="${item}"]`)
@@ -36,47 +37,56 @@ const removeBCMenus = () => {
   })
 }
 
-const redirectBcMenus = (key: string) => {
-  let redirectUrl = '/orders'
+const redirectBcMenus = (key: string, role: number): string => {
+  // Supermarket theme
+  if (key === '/account.php') {
+    return +role !== 3 ? '/orders' : '/dashboard'
+  }
 
+  // Vault theme
+  // superAdmin exits's url
+  const superAdminExistUrl = ['/accountSettings']
   const currentItem: CustomFieldItems =
     accountTarget.find((item) => key.includes(item.originUrl)) || {}
 
+  if (currentItem && superAdminExistUrl.includes(currentItem.newTargetUrl)) {
+    return +role !== 3 ? currentItem.newTargetUrl : '/dashboard'
+  }
+
   if (currentItem) {
-    redirectUrl = currentItem?.newTargetUrl || '/orders'
+    return currentItem.newTargetUrl
   }
 
-  return redirectUrl
+  return '/orders'
 }
 
 const getCurrentLoginUrl = (href: string): string => {
-  let url = '/login'
-  if (typeof href !== 'string') return url
+  // quit login
   if (href.includes('logout')) {
-    url = '/login?loginFlag=3'
+    return '/login?loginFlag=3'
   }
+
   if (href?.includes('create_account')) {
-    url = '/register'
+    return '/register'
   }
 
-  return url
+  return '/login'
 }
 
-const gotoPageByClick = ({
+const openPageByClick = ({
   href,
   role,
-  isRegisterArrInclude,
-}: GotoPageByClickProps) => {
-  const getUrl = redirectBcMenus(href)
-  let newUrl = role === 3 ? '/dashboard' : getUrl
+  isRegisterAndLogin,
+}: OpenPageByClickProps) => {
+  if (role === 100) return '/login'
 
-  if (getUrl === '/accountSettings') {
-    newUrl = getUrl
+  // register and login click
+  if (href.includes('/login') || isRegisterAndLogin) {
+    return getCurrentLoginUrl(href)
   }
 
-  const gotoUrl = isRegisterArrInclude ? getCurrentLoginUrl(href) : newUrl
-
-  return gotoUrl
+  // other click
+  return redirectBcMenus(href, +role)
 }
 
-export { getCurrentLoginUrl, gotoPageByClick, redirectBcMenus, removeBCMenus }
+export { getCurrentLoginUrl, openPageByClick, redirectBcMenus, removeBCMenus }
diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
@@ -1,5 +1,5 @@
 import {
-  gotoPageByClick,
+  openPageByClick,
   redirectBcMenus,
   removeBCMenus,
 } from './b3AccountItem'
@@ -81,13 +81,13 @@ export {
   getSearchVal,
   getUTCTimestamp,
   globalSnackbar,
-  gotoPageByClick,
   handleGetCurrentProductInfo,
   handleHideRegisterPage,
   isAllRequiredOptionFilled,
   isModifierNumberTextValid,
   isModifierTextValid,
   loginInfo,
+  openPageByClick,
   redirectBcMenus,
   removeBCMenus,
   removeCartPermissions,

diff --git a/packages/hooks/useB3AppOpen.ts b/packages/hooks/useB3AppOpen.ts
@@ -3,20 +3,20 @@ import globalB3 from '@b3/global-b3'
 
 import useMutationObservable from './useMutationObservable'
 
-interface GotoPageByClickProps {
-  href: string
-  isRegisterArrInclude: boolean
-}
+// interface GotoPageByClickProps {
+//   href: string
+//   isRegisterArrInclude: boolean
+// }
 export interface OpenPageState {
   isOpen: boolean
   openUrl?: string
   isPageComplete?: boolean
-  handleEnterClick?: (href: string) => void
+  handleEnterClick?: (href: string, bool: boolean) => void
   params?: { [key: string]: string }
-  gotoPageByClick?: ({
-    href,
-    isRegisterArrInclude,
-  }: GotoPageByClickProps) => string
+  // gotoPageByClick: ({
+  //   href,
+  //   isRegisterArrInclude,
+  // }: GotoPageByClickProps) => string
 }
 
 export const useB3AppOpen = (initOpenState: OpenPageState) => {
@@ -27,63 +27,48 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
     setCheckoutRegisterNumber(() => checkoutRegisterNumber + 1)
   }, [checkoutRegisterNumber])
 
-  // const {
-  //   dispatch,
-  // } = useContext(GlobaledContext)
-
   const [openPage, setOpenPage] = useState<OpenPageState>({
     isOpen: initOpenState.isOpen,
     openUrl: '',
     params: {},
   })
 
   useLayoutEffect(() => {
-    // if (globalB3['dom.openB3Checkout'] && document.getElementById(globalB3['dom.openB3Checkout'])) {
-    //   setOpenPage({
-    //     isOpen: true,
-    //     openUrl: '/login',
-    //   })
-    // }
-    // login register  orther
+    const registerArr = Array.from(
+      document.querySelectorAll(globalB3['dom.registerElement'])
+    )
+    const allOtherArr = Array.from(
+      document.querySelectorAll(globalB3['dom.allOtherElement'])
+    )
 
-    if (document.querySelectorAll(globalB3['dom.registerElement']).length) {
-      const registerArr = Array.from(
-        document.querySelectorAll(globalB3['dom.registerElement'])
-      )
-      const allOtherArr = Array.from(
-        document.querySelectorAll(globalB3['dom.allOtherElement'])
-      )
+    if (registerArr.length || allOtherArr.length) {
       const handleTriggerClick = (e: MouseEvent) => {
         if (registerArr.includes(e.target) || allOtherArr.includes(e.target)) {
           e.preventDefault()
           e.stopPropagation()
-          if (
-            !initOpenState?.isPageComplete &&
-            allOtherArr.includes(e.target) &&
-            initOpenState?.handleEnterClick
-          ) {
-            const href = (e.target as HTMLAnchorElement)?.href || ''
-            initOpenState.handleEnterClick(href)
-          } else {
-            const href = (e.target as HTMLAnchorElement)?.href || ''
-            const isRegisterArrInclude = registerArr.includes(e.target)
-            if (initOpenState?.gotoPageByClick) {
-              const gotoUrl = initOpenState.gotoPageByClick({
-                href,
-                isRegisterArrInclude,
-              })
+          const isRegisterArrInclude = registerArr.includes(e.target)
+          const href = (e.target as HTMLAnchorElement)?.href || ''
 
-              setOpenPage({
-                isOpen: true,
-                openUrl: gotoUrl,
-              })
-            } else {
-              setOpenPage({
-                isOpen: true,
-                openUrl: '/orders',
-              })
-            }
+          if (initOpenState?.handleEnterClick) {
+            initOpenState.handleEnterClick(href, isRegisterArrInclude)
           }
+          // if (
+          //   !initOpenState?.isPageComplete &&
+          //   initOpenState?.handleEnterClick
+          // ) {
+          //   initOpenState.handleLoadPageClick(href, isRegisterArrInclude)
+          // } else {
+          //   initOpenState.handleEnterClick(href, isRegisterArrInclude)
+          //   // const gotoUrl = initOpenState.gotoPageByClick({
+          //   //   href,
+          //   //   isRegisterArrInclude,
+          //   // })
+
+          //   // setOpenPage({
+          //   //   isOpen: true,
+          //   //   openUrl: gotoUrl,
+          //   // })
+          // }
         }
         return false
       }