feat: get allowed routes on headless controller (#204)

* fix: if a B2BToken is already set up, skip verification * feat: get allowed routes on headless controller * fix: refactor out the component from getAllowedRoutes (#205) * fix: refactor out the component from getAllowedRoutes * fix: also export isMenuItem for catalyst * fix: the file location of B3MainHeader * fix: react types --------- Co-authored-by: Micah Thomas <[email protected]>
bigcommerce · Jan 9, 2025 · 4b8ab61 · 4b8ab61
1 parent 61310b4
commit 4b8ab61
Show file tree

Hide file tree

Showing 16 changed files with 384 additions and 351 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -6,17 +6,18 @@
   // words - list of words to be always considered correct
   // cspell:disable
   "words": [
+    "accountincorrect",
     "Agenting",
     "bigcommerce",
+    "clickaway",
     "Enduser",
     "extrafields",
+    "forgotpassword",
     "gql.tada",
     "msword",
-    "Turborepo",
-    "registeredbctob2b",
     "purchasability",
-    "forgotpassword",
-    "accountincorrect"
+    "registeredbctob2b",
+    "Turborepo"
   ],
   // flagWords - list of words to be always considered incorrect
   // This is useful for offensive words and common spelling errors.

diff --git a/apps/storefront/src/components/B3GlobalTip.tsx b/apps/storefront/src/components/B3GlobalTip.tsx
@@ -1,7 +1,7 @@
 import { lazy, useContext, useEffect } from 'react';
 import { flushSync } from 'react-dom';
 
-import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable';
+import { DynamicallyVariableContext } from '@/shared/dynamicallyVariable';
 import { MsgsProps } from '@/shared/dynamicallyVariable/context/config';
 
 const B3Tip = lazy(() => import('./B3Tip'));
@@ -10,7 +10,7 @@ export default function B3GlobalTip() {
   const {
     state: { globalTipMessage },
     dispatch,
-  } = useContext(DynamicallyVariableedContext);
+  } = useContext(DynamicallyVariableContext);
 
   useEffect(() => {
     window.globalTipDispatch = dispatch;

diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx
@@ -10,6 +10,7 @@ import { addProductsToShoppingList } from '@/pages/PDP';
 import { type SetOpenPage } from '@/pages/SetOpenPage';
 import { CustomStyleContext } from '@/shared/customStyleButton';
 import { GlobalContext } from '@/shared/global';
+import { getAllowedRoutesWithoutComponent } from '@/shared/routeList';
 import { superAdminCompanies } from '@/shared/service/b2b';
 import B3Request from '@/shared/service/request/b3Fetch';
 import {
@@ -129,7 +130,8 @@ export default function HeadlessController({ setOpenPage }: HeadlessControllerPr
       ...window.b2b,
       callbacks: Manager,
       utils: {
-        getRoutes: () => [],
+        getRoutes: () => getAllowedRoutesWithoutComponent(globalState),
+        // getRoutes: () => [],
         openPage: (page) =>
           setTimeout(() => {
             if (page === 'CLOSE') {

diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
@@ -4,7 +4,7 @@ import { useB3Lang } from '@b3/lang';
 import { Box, useMediaQuery } from '@mui/material';
 
 import useMobile from '@/hooks/useMobile';
-import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable';
+import { DynamicallyVariableContext } from '@/shared/dynamicallyVariable';
 import { getIsTokenGotoPage, routes } from '@/shared/routes';
 import { useAppSelector } from '@/store';
 
@@ -13,7 +13,7 @@ import CompanyCredit from '../CompanyCredit';
 
 import B3CloseAppButton from './B3CloseAppButton';
 import B3Logo from './B3Logo';
-import B3Mainheader from './B3Mainheader';
+import B3MainHeader from './B3MainHeader';
 import B3MobileLayout from './B3MobileLayout';
 import B3Nav from './B3Nav';
 
@@ -39,7 +39,7 @@ export default function B3Layout({ children }: { children: ReactNode }) {
   const {
     state: { globalMessageDialog },
     dispatch,
-  } = useContext(DynamicallyVariableedContext);
+  } = useContext(DynamicallyVariableContext);
 
   const navigate = useNavigate();
 
@@ -146,7 +146,7 @@ export default function B3Layout({ children }: { children: ReactNode }) {
               p: '0 0px 0px 50px',
             }}
           >
-            <B3Mainheader title={title} />
+            <B3MainHeader title={title} />
             <CompanyCredit />
             <Box
               component="main"

diff --git a/apps/storefront/src/components/layout/B3LayoutTip.tsx b/apps/storefront/src/components/layout/B3LayoutTip.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { flushSync } from 'react-dom';
 
-import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable';
+import { DynamicallyVariableContext } from '@/shared/dynamicallyVariable';
 import { MsgsProps } from '@/shared/dynamicallyVariable/context/config';
 
 import B3Tip from '../B3Tip';
@@ -10,7 +10,7 @@ function B3LayoutTip() {
   const {
     state: { tipMessage },
     dispatch,
-  } = useContext(DynamicallyVariableedContext);
+  } = useContext(DynamicallyVariableContext);
 
   useEffect(() => {
     window.tipDispatch = dispatch;

diff --git a/...nt/src/components/layout/B3Mainheader.tsx → ...nt/src/components/layout/B3MainHeader.tsx b/...nt/src/components/layout/B3Mainheader.tsx → ...nt/src/components/layout/B3MainHeader.tsx
diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -4,7 +4,7 @@ import { useB3Lang } from '@b3/lang';
 import { Badge, List, ListItem, ListItemButton, ListItemText, useTheme } from '@mui/material';
 
 import { useMobile } from '@/hooks';
-import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable';
+import { DynamicallyVariableContext } from '@/shared/dynamicallyVariable';
 import { GlobalContext } from '@/shared/global';
 import { getAllowedRoutes } from '@/shared/routes';
 import { useAppSelector } from '@/store';
@@ -22,7 +22,7 @@ export default function B3Nav({ closeSidebar }: B3NavProps) {
   const location = useLocation();
   const b3Lang = useB3Lang();
 
-  const { dispatch } = useContext(DynamicallyVariableedContext);
+  const { dispatch } = useContext(DynamicallyVariableContext);
   const role = useAppSelector(({ company }) => company.customer.role);
 
   const { state: globalState } = useContext(GlobalContext);

diff --git a/apps/storefront/src/components/layout/B3RenderRouter.tsx b/apps/storefront/src/components/layout/B3RenderRouter.tsx
@@ -4,12 +4,8 @@ import { Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-do
 import { RegisteredProvider } from '@/pages/Registered/context/RegisteredContext';
 import { type SetOpenPage } from '@/pages/SetOpenPage';
 import { GlobalContext } from '@/shared/global';
-import {
-  firstLevelRouting,
-  getAllowedRoutes,
-  RouteFirstLevelItem,
-  RouteItem,
-} from '@/shared/routes';
+import { RouteFirstLevelItem, RouteItem } from '@/shared/routeList';
+import { firstLevelRouting, getAllowedRoutes } from '@/shared/routes';
 import { getPageTranslations, useAppDispatch } from '@/store';
 import { channelId } from '@/utils';
 

diff --git a/apps/storefront/src/hooks/useSetOpen.ts b/apps/storefront/src/hooks/useSetOpen.ts
@@ -1,14 +1,14 @@
 import { useContext, useEffect } from 'react';
 
-import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable';
+import { DynamicallyVariableContext } from '@/shared/dynamicallyVariable';
 import { GlobalContext } from '@/shared/global';
 
 const { height: defaultHeight, overflow: defaultOverflow } = document.body.style;
 
 const useSetOpen = (isOpen: boolean, _?: string, params?: CustomFieldItems) => {
   const { dispatch } = useContext(GlobalContext);
 
-  const { dispatch: dispatchMsg } = useContext(DynamicallyVariableedContext);
+  const { dispatch: dispatchMsg } = useContext(DynamicallyVariableContext);
   useEffect(() => {
     if (isOpen) {
       // The iframe screen is removed

diff --git a/apps/storefront/src/index.d.ts b/apps/storefront/src/index.d.ts
@@ -38,7 +38,7 @@ declare interface Window {
     callbacks: import('@/utils/b3CallbackManager').default;
     utils: {
       openPage: (page: import('./constants').HeadlessRoute) => void;
-      getRoutes: () => import('@/shared/routes').RouteItem[];
+      getRoutes: () => import('@/shared/routeList').BuyerPortalRoute[];
       quote: {
         addProductFromPage: (item: import('@/utils').LineItems) => void;
         addProductsFromCart: () => Promise<void>;

diff --git a/apps/storefront/src/shared/dynamicallyVariable/context/Provider.tsx b/apps/storefront/src/shared/dynamicallyVariable/context/Provider.tsx
@@ -1,9 +1,9 @@
 import { useMemo, useReducer } from 'react';
 
-import { DynamicallyVariableedProviderProps, initState } from './config';
-import { DynamicallyVariableedContext, reducer } from './index';
+import { DynamicallyVariableProviderProps, initState } from './config';
+import { DynamicallyVariableContext, reducer } from './index';
 
-export default function DynamicallyVariableProvider(props: DynamicallyVariableedProviderProps) {
+export default function DynamicallyVariableProvider(props: DynamicallyVariableProviderProps) {
   const [state, dispatch] = useReducer(reducer, initState);
 
   const { children } = props;
@@ -17,8 +17,8 @@ export default function DynamicallyVariableProvider(props: DynamicallyVariableed
   );
 
   return (
-    <DynamicallyVariableedContext.Provider value={DynamicallyVariableValue}>
+    <DynamicallyVariableContext.Provider value={DynamicallyVariableValue}>
       {children}
-    </DynamicallyVariableedContext.Provider>
+    </DynamicallyVariableContext.Provider>
   );
 }
diff --git a/apps/storefront/src/shared/dynamicallyVariable/context/config.ts b/apps/storefront/src/shared/dynamicallyVariable/context/config.ts
@@ -51,11 +51,11 @@ export interface DynamicallyVariableAction {
 }
 
 export type DispatchProps = Dispatch<Partial<DynamicallyVariableAction>>;
-export interface DynamicallyVariableContext {
+export interface DynamicallyVariableContextInterface {
   state: DynamicallyVariableState;
   dispatch: DispatchProps;
 }
 
-export interface DynamicallyVariableedProviderProps {
+export interface DynamicallyVariableProviderProps {
   children: ReactNode;
 }
diff --git a/apps/storefront/src/shared/dynamicallyVariable/context/index.ts b/apps/storefront/src/shared/dynamicallyVariable/context/index.ts
@@ -2,12 +2,12 @@ import { createContext } from 'react';
 
 import {
   DynamicallyVariableAction,
-  DynamicallyVariableContext,
+  DynamicallyVariableContextInterface,
   DynamicallyVariableState,
   initState,
 } from './config';
 
-export const DynamicallyVariableedContext = createContext<DynamicallyVariableContext>({
+export const DynamicallyVariableContext = createContext<DynamicallyVariableContextInterface>({
   state: initState,
   dispatch: () => {},
 });

diff --git a/apps/storefront/src/shared/dynamicallyVariable/index.ts b/apps/storefront/src/shared/dynamicallyVariable/index.ts
@@ -1,2 +1,2 @@
-export { DynamicallyVariableedContext } from './context';
+export { DynamicallyVariableContext } from './context';
 export { default as DynamicallyVariableProvider } from './context/Provider';