-
// Define the HOC function
const withChakraUI = (WrappedComponent: React.ComponentType
) => {
const WithChakraUI: React.FC
= (props: WithChakraUIProps) => {
return (
-
+
)
diff --git a/packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx b/packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx
index a6457f7fa8..7ea8dbe4c5 100644
--- a/packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx
+++ b/packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx
@@ -19,18 +19,25 @@ import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
import {useCategory, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
// Chakra
-import {Box, Center, Fade, Spinner, useDisclosure, useStyleConfig} from '@chakra-ui/react'
+import {
+ Box,
+ Center,
+ // Fade,
+ Spinner,
+ useDisclosure,
+ useSlotRecipe
+} from '@chakra-ui/react'
import {SkipNavLink, SkipNavContent} from '@chakra-ui/skip-nav'
// Local Project Components
-import {DrawerMenu} from '../drawer-menu'
+// import {DrawerMenu} from '../drawer-menu'
import {HideOnDesktop, HideOnMobile} from '../responsive'
-import {ListMenu, ListMenuContent} from '../list-menu'
+// import {ListMenu, ListMenuContent} from '../list-menu'
import {withCommerceSdkReactHookData} from '../with-commerce-sdk-react-hook-data'
import AboveHeader from '../above-header'
-import CheckoutHeader from '../../pages/checkout/partials/checkout-header'
-import CheckoutFooter from '../../pages/checkout/partials/checkout-footer'
-import Footer from '../footer'
+// import CheckoutHeader from '../../pages/checkout/partials/checkout-header'
+// import CheckoutFooter from '../../pages/checkout/partials/checkout-footer'
+// import Footer from '../footer'
import Header from '../header'
import OfflineBanner from '../offline-banner'
import OfflineBoundary from '../offline-boundary'
@@ -38,13 +45,13 @@ import Seo from '../seo'
import ScrollToTop from '../scroll-to-top'
// Local Project Hooks
-import {AuthModal, useAuthModal} from '../../hooks/use-auth-modal'
-import {AddToCartModalProvider} from '../../hooks/use-add-to-cart-modal'
+// import {AuthModal, useAuthModal} from '../../hooks/use-auth-modal'
+// import {AddToCartModalProvider} from '../../hooks/use-add-to-cart-modal'
import {useExtensionConfig, useCurrentCustomer, useCurrentBasket} from '../../hooks'
import {watchOnlineStatus, flatten} from '../../utils/utils'
import useActiveData from '../../hooks/use-active-data'
import useMultiSite from '../../hooks/use-multi-site'
-import {useTheme} from '@chakra-ui/react'
+import {useToken} from '@chakra-ui/react'
import {UserConfig} from '../../types/config'
@@ -57,46 +64,45 @@ const PlaceholderComponent: React.FC = () => (
)
-const DrawerMenuItemWithData = withCommerceSdkReactHookData(
- ({itemComponent: ItemComponent, data, ...rest}: any) => (
-
-
-
- ),
- {
- hook: useCategory,
- queryOptions: ({item}: {item: {id: string}}) => ({
- parameters: {
- id: item.id
- }
- }),
- placeholder: PlaceholderComponent
- }
-)
-
-const ListMenuContentWithData = withCommerceSdkReactHookData(
- ({data, ...rest}: any) => (
-
-
-
- ),
- {
- hook: useCategory,
- queryOptions: ({item}: {item: {id: string}}) => ({
- parameters: {
- id: item.id,
- levels: 2
- }
- }),
- placeholder: PlaceholderComponent
- }
-)
+// const DrawerMenuItemWithData = withCommerceSdkReactHookData(
+// ({itemComponent: ItemComponent, data, ...rest}: any) => (
+//
+//
+//
+// ),
+// {
+// hook: useCategory,
+// queryOptions: ({item}: {item: {id: string}}) => ({
+// parameters: {
+// id: item.id
+// }
+// }),
+// placeholder: PlaceholderComponent
+// }
+// )
+//
+// const ListMenuContentWithData = withCommerceSdkReactHookData(
+// ({data, ...rest}: any) => (
+//
+//
+//
+// ),
+// {
+// hook: useCategory,
+// queryOptions: ({item}: {item: {id: string}}) => ({
+// parameters: {
+// id: item.id,
+// levels: 2
+// }
+// }),
+// placeholder: PlaceholderComponent
+// }
+// )
// Define the HOC function
const withLayout = (WrappedComponent: React.ComponentType
) => {
const WithLayout: React.FC
= (props: WithAppLayoutProps) => {
const config = useExtensionConfig() as UserConfig
-
const CAT_MENU_DEFAULT_ROOT_CATEGORY = String(config.categoryNav.defaultRootCategory)
const CAT_MENU_DEFAULT_NAV_SSR_DEPTH = config.categoryNav.defaultNavSsrDepth
const {data: categoriesTree} = useCategory({
@@ -105,18 +111,21 @@ const withLayout =
(WrappedComponent: React.ComponentType
)
levels: CAT_MENU_DEFAULT_NAV_SSR_DEPTH
}
})
+ const [themeColor] = useToken('colors.blue', '600')
const categories = flatten(categoriesTree || {}, 'categories')
const appOrigin = getAppOrigin()
const activeData = useActiveData()
const history = useHistory()
const location = useLocation()
- const authModal = useAuthModal()
+ // const authModal = useAuthModal()
const {site, locale, buildUrl} = useMultiSite()
const [isOnline, setIsOnline] = useState(true)
- const styles = useStyleConfig('App')
- const {colors} = useTheme()
- const {isOpen, onOpen, onClose} = useDisclosure()
+ // Apply styles from the theme
+ const recipe = useSlotRecipe({key: 'app'})
+ const styles = recipe()
+
+ const {open, onOpen, onClose} = useDisclosure()
// Used to conditionally render header/footer for checkout page
const isCheckout = /\/checkout$/.test(location?.pathname)
@@ -129,7 +138,6 @@ const withLayout = (WrappedComponent: React.ComponentType
)
const {data: customer} = useCurrentCustomer()
const {data: basket} = useCurrentBasket()
const basketId = basket?.basketId || ''
-
const updateBasket = useShopperBasketsMutation('updateBasket')
const updateCustomerForBasket = useShopperBasketsMutation('updateCustomerForBasket')
@@ -185,14 +193,14 @@ const withLayout =
(WrappedComponent: React.ComponentType
)
onClose()
}
- const onCartClick = () => {
- const path = buildUrl('/cart', site.id, locale.id)
- history.push(path)
-
- // Close the drawer.
- onClose()
- }
-
+ // const onCartClick = () => {
+ // const path = buildUrl('/cart', site.id, locale.id)
+ // history.push(path)
+ //
+ // // Close the drawer.
+ // onClose()
+ // }
+ //
const onAccountClick = () => {
// Link to account page if registered; Header component will show auth modal for guest users
const path = buildUrl('/account', site.id, locale.id)
@@ -212,13 +220,8 @@ const withLayout =
(WrappedComponent: React.ComponentType
)
useEffect(() => {
trackPage()
}, [location])
-
- // Ensure styles.container is an object
- const containerStyles = (styles.container as React.CSSProperties) || {}
- const headerWrapperStyles = {display: 'flex'}
-
return (
-
+
{config.activeDataEnabled && (