Use regular header menu on intermediate cart screen

HedvigInsurance · Nov 8, 2024 · 34eb7fb · 34eb7fb
1 parent fd165b1
commit 34eb7fb
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 23 deletions.
diff --git a/apps/store/src/components/Header/Header.css.ts b/apps/store/src/components/Header/Header.css.ts
@@ -2,7 +2,6 @@ import { createVar, style } from '@vanilla-extract/css'
 import { minWidth, tokens, yStack } from 'ui'
 import { zIndexes } from '@/utils/zIndex'
 import { MAX_WIDTH } from '../GridLayout/GridLayout.constants'
-import { displaySubmenus } from './HeaderMenu/HeaderMenu.css'
 import {
   HEADER_HEIGHT_MOBILE,
   MENU_BAR_HEIGHT_MOBILE,
@@ -130,7 +129,11 @@ export const navigationItem = style({
 export const navigationItemProductMenu = style({
   '@media': {
     [minWidth.lg]: {
-      display: displaySubmenus,
+      selectors: {
+        'body:has(main[data-hide-header-menu=true]) &': {
+          display: 'none',
+        },
+      },
     },
   },
 })
@@ -165,13 +168,18 @@ export const navigationItemGeneralMenu = style({
     [navigationContentMinWidth]: '16rem',
   },
 
+  selectors: {
+    'body:has(main[data-hide-header-menu=true]) &': {
+      display: 'none',
+    },
+  },
+
   '@media': {
     [minWidth.lg]: {
       // Make general menu item first in the header menu in desktop
       ':last-child': {
         order: -1,
       },
-      display: displaySubmenus,
     },
   },
 })

diff --git a/apps/store/src/components/Header/HeaderMenu/HeaderMenu.css.ts b/apps/store/src/components/Header/HeaderMenu/HeaderMenu.css.ts
@@ -1,9 +1,6 @@
-import { createVar, style } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 import { minWidth, responsiveStyles, sprinkles, tokens, xStack } from 'ui'
 
-export const displaySubmenus = createVar()
-export const displayMobileMenu = createVar()
-
 export const headerMenu = style([
   xStack({ alignItems: 'center' }),
   {
@@ -12,8 +9,12 @@ export const headerMenu = style([
 ])
 
 export const headerMenuMobile = style({
-  display: displayMobileMenu,
   lineHeight: 0,
+  selectors: {
+    'body:has(main[data-hide-header-menu=true]) &': {
+      display: 'none',
+    },
+  },
 })
 
 export const backLink = style([
@@ -26,6 +27,12 @@ export const backLink = style([
         marginLeft: 'unset',
       },
     }),
+
+    selectors: {
+      'body:has(main[data-hide-header-menu=false]) &': {
+        display: 'none',
+      },
+    },
   },
 ])
 

diff --git a/apps/store/src/components/Header/HeaderMenu/HeaderMenu.tsx b/apps/store/src/components/Header/HeaderMenu/HeaderMenu.tsx
@@ -1,6 +1,5 @@
 'use client'
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useState, useEffect, useMemo } from 'react'
@@ -17,8 +16,6 @@ import {
   backButtonText,
   backLink,
   backWrapper,
-  displayMobileMenu,
-  displaySubmenus,
   headerMenu,
   headerMenuMobile,
 } from './HeaderMenu.css'
@@ -64,13 +61,7 @@ export const HeaderMenu = ({ defaultValue, items }: HeaderMenuDesktopProps) => {
   }, [pathname])
 
   return (
-    <div
-      className={headerMenu}
-      style={assignInlineVars({
-        [displaySubmenus]: product ? 'none' : 'block',
-        [displayMobileMenu]: product ? 'none' : 'block',
-      })}
-    >
+    <div className={headerMenu}>
       {/* 'Desktop' menu is always rendered for SEO reasons so navigation links becomes accessible */}
       {/* in the markup */}
       <NavigationMenuPrimitive.Root

diff --git a/apps/store/src/components/Header/ShoppingCartMenuItem/ShoppingCartMenuItem.css.ts b/apps/store/src/components/Header/ShoppingCartMenuItem/ShoppingCartMenuItem.css.ts
@@ -1,14 +1,25 @@
 import { style } from '@vanilla-extract/css'
 import { responsiveStyles, tokens } from 'ui'
-import { displayMobileMenu } from '../HeaderMenu/HeaderMenu.css'
 
 export const wrapper = style({
-  // Hide shopping cart if mobile menu is hidden
-  display: displayMobileMenu,
   // Align to the right in the header
   marginLeft: 'auto',
   lineHeight: 0,
 
+  selectors: {
+    // Hide shopping cart if menu is hidden
+    'body:has(main[data-hide-header-menu=true]) &': {
+      display: 'none',
+
+      ...responsiveStyles({
+        lg: {
+          // Always visible in desktop
+          display: 'block',
+        },
+      }),
+    },
+  },
+
   ...responsiveStyles({
     lg: {
       // Always visible in desktop

diff --git a/...or/PriceCalculatorCmsPage/PriceCalculatorCmsPageContent/PriceCalculatorCmsPageContent.tsx b/...or/PriceCalculatorCmsPage/PriceCalculatorCmsPageContent/PriceCalculatorCmsPageContent.tsx
@@ -27,9 +27,12 @@ export function PriceCalculatorCmsPageContent() {
   useSyncPriceIntentState({ replacePriceIntentWhenCurrentIsAddedToCart: true })
 
   const showProductHero = variant === 'desktop' || !addedOfferToCart
+  // Hide some of the header menu items and show a back button
+  // to product page, except when an offer is added to cart
+  const hideHeaderMenu = !addedOfferToCart
 
   return (
-    <div className={pageGrid}>
+    <main className={pageGrid} data-hide-header-menu={hideHeaderMenu}>
       {showProductHero && (
         <section className={productHeroSection}>
           <ProductHeroV2 />
@@ -46,7 +49,7 @@ export function PriceCalculatorCmsPageContent() {
       </section>
       {/* We don't mount CartToast on mobile as we hide ShoppingCartMenuItem at that level */}
       {variant === 'desktop' && <CartToast />}
-    </div>
+    </main>
   )
 }