feat: initial setup for headless (#385)

* feat: define headless setup

* fix: define expected param

* fix: use import for type in index.d.ts (#399)

Co-authored-by: Micah Thomas <micah.thomas@bigcommerce.com>

---------

Co-authored-by: Micah Thomas <micah.thomas@bigcommerce.com>

apps/storefront/package.json

@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@b3/global-b3": "*",
+    "@b3/hooks": "*",
     "@b3/lang": "*",
     "@b3/store": "*",
     "@b3/utils": "*",
-    "@b3/hooks": "*",
     "@emotion/cache": "^11.9.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
@@ -53,9 +53,9 @@
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-react": "^2.0.0",
+    "c8": "^7.11.3",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-b2b": "*",
-    "c8": "^7.11.3",
     "jsdom": "^20.0.0",
     "terser": "^5.14.2",
     "typescript": "^4.7.4",

apps/storefront/src/App.tsx

@@ -9,6 +9,7 @@ import {
   B3MasquradeGobalTip,
   B3RenderRouter,
   GlobalDialog,
+  HeadlessController,
   showPageMask,
   ThemeFrame,
 } from '@/components'
@@ -270,6 +271,7 @@ export default function App() {
         productQuoteEnabled={productQuoteEnabled}
         setOpenPage={setOpenPage}
       />
+      <HeadlessController setOpenPage={setOpenPage} />
       <B3GlobalTip />
       <GlobalDialog />
     </>

apps/storefront/src/components/HeadlessController.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import type { OpenPageState } from '@b3/hooks'
+
+import { HeadlessRoutes } from '@/constants'
+
+interface HeadlessControllerProps {
+  setOpenPage: Dispatch<SetStateAction<OpenPageState>>
+}
+
+export default function HeadlessController({
+  setOpenPage,
+}: HeadlessControllerProps) {
+  useEffect(() => {
+    window.b2b = {
+      utils: {
+        openPage: (page) => {
+          setOpenPage({ isOpen: false })
+          setTimeout(
+            () => setOpenPage({ isOpen: true, openUrl: HeadlessRoutes[page] }),
+            0
+          )
+        },
+      },
+    }
+  }, [])
+  return null
+}

apps/storefront/src/components/index.ts

@@ -12,6 +12,7 @@ export { default as B3Tip } from './B3Tip'
 export { default as CustomButton } from './button/CustomButton'
 export { default as CheckoutTip } from './extraTip/CheckoutTip'
 export { default as GlobalDialog } from './extraTip/GlobalDialog'
+export { default as HeadlessController } from './HeadlessController'
 export * from './layout'
 export { B3PageMask, Loading, showPageMask } from './loadding'
 export { default as HomePageLoadding } from './loadding/B3HomePageLoadding'

apps/storefront/src/constants/index.ts

@@ -24,3 +24,14 @@ export const PRODUCT_DEFAULT_IMAGE =
 
 export const STORE_DEFAULT_LOGO =
   'https://cdn.bundleb2b.net/b2blogo/b2be-logo.png'
+
+export enum HeadlessRoutes {
+  SIGN_IN = '/login',
+  LOG_OUT = '/login?loginFlag=3',
+  FORGOT_PASSWORD = '/forgotpassword',
+  REGISTER_ACCOUNT = '/registered',
+  DRAFT_QUOTE = '/quoteDraft',
+  SHOPPING_LISTS = '/shoppingLists',
+}
+
+export type HeadlessRoute = keyof typeof HeadlessRoutes

apps/storefront/src/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="./shared/global/context/config.ts" />
 declare interface CustomFieldItems {
   [key: string]: any
 }
@@ -8,9 +7,14 @@ declare interface CustomFieldStringItems {
 }
 
 declare interface Window {
-  tipDispatch: DispatchProps
+  tipDispatch: import('./shared/global/context/config.ts').DispatchProps
   b3Tipmessage: any
   b2bStorefrontApp: any
   globalTipDispatch: any
   B3Local: any
+  b2b: {
+    utils: {
+      openPage: (page: import('./constants').HeadlessRoute) => void
+    }
+  }
 }

apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx

@@ -14,10 +14,7 @@ import {
 import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
 import { snackbar } from '@/utils'
 
-import {
-  EditableProductItem,
-  OrderProductItem,
-} from '../../../types'
+import { EditableProductItem, OrderProductItem } from '../../../types'
 import getReturnFormFields from '../shared/config'
 
 import CreateShoppingList from './CreateShoppingList'

apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx

@@ -3,7 +3,7 @@ import { Box } from '@mui/material'
 
 import { B3Dialog, B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
-import { useCardListColumn, useMobile , useTableRef } from '@/hooks'
+import { useCardListColumn, useMobile, useTableRef } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   deleteB2BShoppingList,

apps/storefront/src/shared/service/b2b/api/proxy.ts

@@ -4,4 +4,4 @@ import { RequestType } from '../../request/base'
 const getProxyInfo = (data: CustomFieldItems): CustomFieldItems =>
   B3Request.post('/api/v2/proxy', RequestType.B2BRest, data)
 
-export default getProxyInfo
+export default getProxyInfo

apps/storefront/src/utils/b3CurrencyFormat.ts

@@ -12,7 +12,9 @@ interface MoneyFormat {
 }
 
 const currencyFormat = (price: string | number, showCurrencyToken = true) => {
-  const currentCurrency = globalB3?.setting?.is_local_debugging ? getDefaultCurrencyInfo() : getActiveCurrencyInfo()
+  const currentCurrency = globalB3?.setting?.is_local_debugging
+    ? getDefaultCurrencyInfo()
+    : getActiveCurrencyInfo()
 
   const moneyFormat: MoneyFormat = {
     currency_location: currentCurrency.token_location || 'left',

packages/store/reducer.ts

@@ -1,8 +1,10 @@
 import {
   combineReducers,
   configureStore,
+  ImmutableStateInvariantMiddlewareOptions,
   PreloadedState,
   Reducer,
+  SerializableStateInvariantMiddlewareOptions,
 } from '@reduxjs/toolkit'
 import { ToolkitStore } from '@reduxjs/toolkit/dist/configureStore'
 
@@ -18,7 +20,11 @@ interface SetupStoreParams<Type> {
           | undefined
       }
     | undefined
-  middlewareOptions?: Record<string, any>
+  middlewareOptions?: Record<
+    string,
+    | ImmutableStateInvariantMiddlewareOptions
+    | SerializableStateInvariantMiddlewareOptions
+  >
 }
 export interface CustomToolkitStore<Type> extends ToolkitStore {
   asyncReducers?: Reducers<Type>