feat: account item to page (#583) (#585)

* feat: click account item to page
https://bigc-b2b.atlassian.net/browse/BUN-1266

apps/storefront/index.html

@@ -88,6 +88,75 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
         Loyout
       </a>
     </div>
+    <div class="dropdown-menu signout-list" id="account-dropdown-signout-list">
+      <!-- <h2 class="container-header">Account Info</h2> -->
+      <nav class="navBar navBar--sub navBar--account signout-list">
+        <ul class="navBar-section signout-list">
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=order_status"
+              >Orders</a
+            >
+          </li>
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=view_returns"
+              >Returns</a
+            >
+          </li>
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=inbox"
+              >Messages (0)</a
+            >
+          </li>
+
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=address_book"
+              >Addresses</a
+            >
+          </li>
+
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=recent_items"
+              >Recently Viewed</a
+            >
+          </li>
+          <li class="navBar-item signout-list">
+            <a
+              class="navBar-action signout-list"
+              href="/account.php?action=account_details"
+              >Account Settings</a
+            >
+          </li>
+        </ul>
+      </nav>
+      <a class="navBar-action signout-list" href="/login.php?action=logout"
+        >Sign out</a
+      >
+      <!-- <hr class="left full-width" /> -->
+      <!-- { {> components / common / currency-selector-dropdown } } -->
+    </div>
+    <li class="navUser-item navUser-item--account">
+      <a class="navUser-action" href="/account.php" aria-label="Account">
+        Account
+      </a>
+
+      <a
+        class="navUser-action"
+        href="/login.php?action=logout"
+        aria-label="Sign out"
+      >
+        Sign out
+      </a>
+    </li>
     <div id="b2bRemoveOrAdd">onclick(remove/add)</div>
     <div>
       <!--

apps/storefront/src/App.tsx

@@ -26,8 +26,10 @@ import {
   getQuoteEnabled,
   getStoreTaxZoneRates,
   getTemPlateConfig,
+  gotoPageByClick,
   handleHideRegisterPage,
   loginInfo,
+  removeBCMenus,
   setStorefrontConfig,
 } from '@/utils'
 
@@ -63,21 +65,33 @@ export default function App() {
 
   const storeDispatch = useDispatch()
 
-  const { isClickEnterBtn, isPageComplete } = useSelector(globalStateSelector)
+  const { isClickEnterBtn, isPageComplete, currentClickedUrl } =
+    useSelector(globalStateSelector)
 
-  const handleAccountClick = () => {
+  const handleAccountClick = (href: string) => {
     showPageMask(dispatch, true)
     storeDispatch(
       setGlabolCommonState({
         isClickEnterBtn: true,
+        currentClickedUrl: href,
       })
     )
   }
 
+  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 {
@@ -139,6 +153,10 @@ export default function App() {
     })
   }, [])
 
+  useEffect(() => {
+    removeBCMenus()
+  }, [window.location.pathname, role])
+
   useEffect(() => {
     const isRelogin = sessionStorage.getItem('isReLogin') === 'true'
     storeDispatch(setOpenPageReducer(setOpenPage))
@@ -233,7 +251,19 @@ export default function App() {
 
   useEffect(() => {
     if (isClickEnterBtn && isPageComplete) {
-      gotoAllowedAppPage(+role, gotoPage, true)
+      const gotoUrl =
+        gotoPageByClick({
+          href: currentClickedUrl,
+          role,
+          isRegisterArrInclude: false,
+        }) || '/orders'
+
+      setOpenPage({
+        isOpen: true,
+        openUrl: gotoUrl,
+      })
+
+      // gotoAllowedAppPage(+role, gotoPage, true)
       storeDispatch(
         setGlabolCommonState({
           isClickEnterBtn: false,

apps/storefront/src/store/slices/global.ts

@@ -36,6 +36,7 @@ interface GlobalMessageDialog {
 export interface GlabolState {
   taxZoneRates?: TaxZoneRatesProps[]
   isClickEnterBtn?: boolean
+  currentClickedUrl?: string
   isPageComplete?: boolean
   globalMessage?: GlobalMessageDialog
   enteredInclusive?: boolean
@@ -46,6 +47,7 @@ export interface GlabolState {
 const initialState: GlabolState = {
   taxZoneRates: [],
   isClickEnterBtn: false,
+  currentClickedUrl: '',
   isPageComplete: false,
   globalMessage: {
     open: false,

apps/storefront/src/utils/b3AccountItem.ts

@@ -0,0 +1,82 @@
+interface GotoPageByClickProps {
+  href: string
+  role: number | string
+  isRegisterArrInclude: boolean
+}
+
+const hideAccountItems = [
+  '/account.php?action=view_returns',
+  '/account.php?action=inbox',
+  '/account.php?action=recent_items',
+]
+const accountTarget = [
+  {
+    originUrl: '/account.php?action=order_status',
+    newTargetUrl: '/orders',
+  },
+  {
+    originUrl: '/account.php?action=address_book',
+    newTargetUrl: '/addresses',
+  },
+  {
+    originUrl: '/account.php?action=account_details',
+    newTargetUrl: '/accountSettings',
+  },
+]
+
+const removeBCMenus = () => {
+  hideAccountItems.forEach((item: string) => {
+    const itemNodes = document.querySelectorAll(`[href^="${item}"]`)
+
+    if (itemNodes.length > 0) {
+      itemNodes.forEach((node: CustomFieldItems) => {
+        node.parentNode.remove()
+      })
+    }
+  })
+}
+
+const redirectBcMenus = (key: string) => {
+  let redirectUrl = '/orders'
+
+  const currentItem: CustomFieldItems =
+    accountTarget.find((item) => key.includes(item.originUrl)) || {}
+
+  if (currentItem) {
+    redirectUrl = currentItem?.newTargetUrl || '/orders'
+  }
+
+  return redirectUrl
+}
+
+const getCurrentLoginUrl = (href: string): string => {
+  let url = '/login'
+  if (typeof href !== 'string') return url
+  if (href.includes('logout')) {
+    url = '/login?loginFlag=3'
+  }
+  if (href?.includes('create_account')) {
+    url = '/register'
+  }
+
+  return url
+}
+
+const gotoPageByClick = ({
+  href,
+  role,
+  isRegisterArrInclude,
+}: GotoPageByClickProps) => {
+  const getUrl = redirectBcMenus(href)
+  let newUrl = role === 3 ? '/dashboard' : getUrl
+
+  if (getUrl === '/accountSettings') {
+    newUrl = getUrl
+  }
+
+  const gotoUrl = isRegisterArrInclude ? getCurrentLoginUrl(href) : newUrl
+
+  return gotoUrl
+}
+
+export { getCurrentLoginUrl, gotoPageByClick, redirectBcMenus, removeBCMenus }

apps/storefront/src/utils/index.ts

@@ -1,3 +1,8 @@
+import {
+  gotoPageByClick,
+  redirectBcMenus,
+  removeBCMenus,
+} from './b3AccountItem'
 import {
   getProductOptionList,
   handleGetCurrentProductInfo,
@@ -76,12 +81,15 @@ export {
   getSearchVal,
   getUTCTimestamp,
   globalSnackbar,
+  gotoPageByClick,
   handleGetCurrentProductInfo,
   handleHideRegisterPage,
   isAllRequiredOptionFilled,
   isModifierNumberTextValid,
   isModifierTextValid,
   loginInfo,
+  redirectBcMenus,
+  removeBCMenus,
   removeCartPermissions,
   serialize,
   showPageMask,

packages/global-b3/index.ts

@@ -19,7 +19,7 @@ const globalB3 = {
     '[href^="/login.php"], #checkout-customer-login, [href="/login.php"] .navUser-item-loginLabel',
   'dom.registerUrl': '/register',
   'dom.allOtherElement':
-    '[href^="/account.php"],  [href^="/account.php"] .navUser-item-accountLabel',
+    '[href^="/account.php"],  [href^="/account.php"] .navUser-item-accountLabel, [href^="/account.php?action=address_book"], [href^="/account.php?action=order_status"], [href^="/account.php?action=account_details"]',
   'dom.checkoutRegisterParentElement': '#checkout-app',
   'dom.navUserLoginElement': '.navUser-item.navUser-item--account',
   'dom.setToQuote': '#form-action-addToCart',

packages/hooks/useB3AppOpen.ts

@@ -3,12 +3,20 @@ import globalB3 from '@b3/global-b3'
 
 import useMutationObservable from './useMutationObservable'
 
+interface GotoPageByClickProps {
+  href: string
+  isRegisterArrInclude: boolean
+}
 export interface OpenPageState {
   isOpen: boolean
   openUrl?: string
   isPageComplete?: boolean
-  handleEnterClick?: () => void
+  handleEnterClick?: (href: string) => void
   params?: { [key: string]: string }
+  gotoPageByClick?: ({
+    href,
+    isRegisterArrInclude,
+  }: GotoPageByClickProps) => string
 }
 
 export const useB3AppOpen = (initOpenState: OpenPageState) => {
@@ -29,19 +37,6 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
     params: {},
   })
 
-  const getCurrentLoginUrl = (href: string): string => {
-    let url = '/login'
-    if (typeof href !== 'string') return url
-    if (href.includes('logout')) {
-      url = '/login?loginFlag=3'
-    }
-    if (href?.includes('create_account')) {
-      url = '/register'
-    }
-
-    return url
-  }
-
   useLayoutEffect(() => {
     // if (globalB3['dom.openB3Checkout'] && document.getElementById(globalB3['dom.openB3Checkout'])) {
     //   setOpenPage({
@@ -67,16 +62,27 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
             allOtherArr.includes(e.target) &&
             initOpenState?.handleEnterClick
           ) {
-            initOpenState.handleEnterClick()
+            const href = (e.target as HTMLAnchorElement)?.href || ''
+            initOpenState.handleEnterClick(href)
           } else {
             const href = (e.target as HTMLAnchorElement)?.href || ''
-            const gotoUrl = registerArr.includes(e.target)
-              ? getCurrentLoginUrl(href)
-              : '/orders'
-            setOpenPage({
-              isOpen: true,
-              openUrl: gotoUrl,
-            })
+            const isRegisterArrInclude = registerArr.includes(e.target)
+            if (initOpenState?.gotoPageByClick) {
+              const gotoUrl = initOpenState.gotoPageByClick({
+                href,
+                isRegisterArrInclude,
+              })
+
+              setOpenPage({
+                isOpen: true,
+                openUrl: gotoUrl,
+              })
+            } else {
+              setOpenPage({
+                isOpen: true,
+                openUrl: '/orders',
+              })
+            }
           }
         }
         return false