@graphcommerce/magento-product 8.1.0-canary.26 → 8.1.0-canary.27

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
 ## 8.1.0-canary.26
 
 ## 8.1.0-canary.25

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -13,5 +13,5 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
   props: ProductPageJsonLdProps<T, P>,
 ) {
   const { product, render } = props
-  return <JsonLd<T> item={render(product)} />
+  return <JsonLd<T> item={render(product)} keyVal='product-jsonld' />
 }

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,6 +1,6 @@
-import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import { FormAutoSubmit, useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
 import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback, useTheme } from '@mui/material'
+import { Theme, useEventCallback, useMediaQuery, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
@@ -43,12 +43,33 @@ export type FilterFormProviderProps = Omit<
 > & {
   children: React.ReactNode
   params: ProductListParams
+  /**
+   * Whether the filter should scroll to the products list and whether to submit the form on change.
+   */
+  autoSubmitMd?: boolean
 } & DataProps
 
-const isSidebar = import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR'
+function AutoSubmitSidebarDesktop() {
+  const { form, submit } = useProductFiltersPro()
+
+  // We only need to auto-submit when the layout is not sidebar and we're viewing on desktop
+  const autoSubmitDisabled = useMediaQuery<Theme>((t) => t.breakpoints.down('md'), {
+    defaultMatches: false,
+  })
+
+  return <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
+}
 
 export function ProductFiltersPro(props: FilterFormProviderProps) {
-  const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
+  const {
+    children,
+    params,
+    aggregations,
+    appliedAggregations,
+    filterTypes,
+    autoSubmitMd = false,
+    ...formProps
+  } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
@@ -58,7 +79,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
   const theme = useTheme()
   const isDesktop = useMatchMediaMotionValue('up', 'md')
   const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
-  const scroll = useTransform(() => !isSidebar || isDesktop.get())
+  const scroll = useTransform(() => !autoSubmitMd || isDesktop.get())
 
   const submit = useEventCallback(
     form.handleSubmit(async (formValues) => {
@@ -87,6 +108,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
   return (
     <FilterFormContext.Provider value={filterFormContext}>
       <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
+      {autoSubmitMd && <AutoSubmitSidebarDesktop />}
       {children}
     </FilterFormContext.Provider>
   )

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,4 +1,8 @@
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductFilterEqualChip } from './ProductFilterEqualChip'
+import { ProductFilterEqualSection } from './ProductFilterEqualSection'
+import { ProductFilterRangeChip } from './ProductFilterRangeChip'
+import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { excludeCategory } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
@@ -13,6 +17,16 @@ export type ProductFiltersProAggregationsProps = {
   renderer?: FilterRenderer
 }
 
+export const productFiltersProSectionRenderer = {
+  FilterRangeTypeInput: ProductFilterRangeSection,
+  FilterEqualTypeInput: ProductFilterEqualSection,
+}
+
+export const productFiltersProChipRenderer = {
+  FilterEqualTypeInput: ProductFilterEqualChip,
+  FilterRangeTypeInput: ProductFilterRangeChip,
+}
+
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props
   const { params, aggregations, appliedAggregations, filterTypes } = useProductFiltersPro()

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,11 +1,10 @@
 import { ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { ProductFilterEqualSection } from './ProductFilterEqualSection'
-import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
@@ -23,11 +22,6 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
-
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
   const { sort_fields, total_count, renderer, category, ...rest } = props
 
@@ -65,7 +59,9 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
             category={category}
           />
           <ProductFiltersProLimitSection />
-          <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+          <ProductFiltersProAggregations
+            renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+          />
         </>
       )}
     </ChipOverlayOrPopper>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -4,7 +4,12 @@ import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
+import {
+  ProductFiltersCategorySectionProps,
+  ProductFiltersProCategorySection,
+} from './ProductFiltersProCategorySection'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
   ProductFiltersProSortSection,
@@ -12,25 +17,30 @@ import {
 } from './ProductFiltersProSortSection'
 
 export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
-  ProductFiltersProSortSectionProps & { sx?: SxProps<Theme> }
-
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
+  ProductFiltersProSortSectionProps &
+  ProductFiltersCategorySectionProps & { sx?: SxProps<Theme> }
 
+/**
+ * @deprecated Not used anymore
+ *
+ * @param props
+ * @returns
+ */
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
-  const { sort_fields, total_count, renderer, sx = [], category } = props
+  const { sort_fields, total_count, renderer, sx = [], category, params } = props
 
   return (
     <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <ProductFiltersProCategorySection category={category} params={params} />
       <ProductFiltersProSortSection
         sort_fields={sort_fields}
         total_count={total_count}
         category={category}
       />
       <ProductFiltersProLimitSection />
-      <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+      <ProductFiltersProAggregations
+        renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+      />
     </Box>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -0,0 +1,70 @@
+import { UseCategoryTreeProps, useCategoryTree } from '@graphcommerce/magento-category'
+import {
+  ActionCard,
+  ActionCardAccordion,
+  ActionCardList,
+  IconSvg,
+  iconChevronLeft,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, SxProps, Theme } from '@mui/material'
+import { useRouter } from 'next/router'
+
+export type ProductFiltersCategorySectionProps = UseCategoryTreeProps & {
+  hideTitle?: boolean
+  sx?: SxProps<Theme>
+}
+
+export function ProductFiltersProCategorySection(props: ProductFiltersCategorySectionProps) {
+  const { hideTitle, sx } = props
+  const router = useRouter()
+  const categoryTree = useCategoryTree(props)
+
+  if (!categoryTree) return null
+
+  return (
+    <ActionCardAccordion
+      sx={[
+        hideTitle ? { '& .MuiAccordionSummary-root': { display: 'none' } } : {},
+        sx,
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      defaultExpanded
+      summary={<Trans id='Categories' />}
+      details={
+        <ActionCardList value='cat' variant='default'>
+          {categoryTree.map((item) => (
+            <ActionCard
+              {...item}
+              title={
+                item.isBack ? (
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <IconSvg src={iconChevronLeft} size='medium' />
+                    {item.title}
+                  </Box>
+                ) : (
+                  item.title
+                )
+              }
+              sx={[
+                item.isBack ? {} : {},
+                {
+                  '&.sizeSmall': { pl: responsiveVal(8 * item.indent, 12 * item.indent) },
+                  '&.sizeMedium': { pl: responsiveVal(10 * item.indent, 14 * item.indent) },
+                  '&.sizeLarge': { pl: responsiveVal(12 * item.indent, 16 * item.indent) },
+                  '&.sizeResponsive': { pl: responsiveVal(8 * item.indent, 16 * item.indent) },
+                },
+              ]}
+              value={item.href}
+              key={item.href}
+              selected={item.selected}
+              onClick={() => router.push(item.href)}
+            />
+          ))}
+        </ActionCardList>
+      }
+      right={undefined}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -1,16 +1,18 @@
-import { ProductFilterEqualChip } from './ProductFilterEqualChip'
-import { ProductFilterRangeChip } from './ProductFilterRangeChip'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProChipRenderer,
 } from './ProductFiltersProAggregations'
 
-const defaultRenderer = {
-  FilterEqualTypeInput: ProductFilterEqualChip,
-  FilterRangeTypeInput: ProductFilterRangeChip,
-}
-
+/**
+ * @deprecated Not used anymore, use `<ProductFiltersProAggregations renderer={productFiltersProChipRenderer}/>`
+ */
 export function ProductFiltersProFilterChips(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props
-  return <ProductFiltersProAggregations {...props} renderer={{ ...defaultRenderer, ...renderer }} />
+  return (
+    <ProductFiltersProAggregations
+      {...props}
+      renderer={{ ...productFiltersProChipRenderer, ...renderer }}
+    />
+  )
 }

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -12,6 +12,7 @@ export type ProductFiltersProLayoutSidebarProps = {
   count?: React.ReactNode
   pagination: React.ReactNode
   header?: React.ReactNode
+  children?: React.ReactNode
 } & Partial<OwnerProps>
 
 type OwnerProps = {
@@ -32,6 +33,7 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
     sidebarFilters,
     header,
     headerPosition = 'before',
+    children,
   } = props
 
   const { form, submit } = useProductFiltersPro()
@@ -47,8 +49,6 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
 
       <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
 
-      <StickyBelowHeader sx={{ display: { md: 'none' } }}>{horizontalFilters}</StickyBelowHeader>
-
       <Container
         maxWidth={false}
         className={classes.content}
@@ -56,12 +56,16 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
           display: 'grid',
           gridTemplate: {
             xs: `
-              "beforeContent" auto
-              "items"         auto
-              "afterContent"  auto
+              "content"           auto
+              "horizontalFilters" auto
+              "beforeContent"     auto
+              "items"             auto
+              "afterContent"      auto
             `,
-            md: `
-              "topleft beforeContent" auto
+            md: ` 
+              "topleft content"   auto
+              "sidebar content"   auto
+              "sidebar beforeContent" auto
               "sidebar items"         min-content
               "sidebar afterContent"  1fr
               /300px   auto
@@ -87,6 +91,10 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
             {sidebarFilters}
           </Box>
         )}
+        {children && <Box gridArea='content'>{children}</Box>}
+        <StickyBelowHeader sx={{ display: { md: 'none', gridArea: 'horizontalFilters' } }}>
+          {horizontalFilters}
+        </StickyBelowHeader>
 
         <Box gridArea='beforeContent' sx={{ mt: { md: 0 } }}>
           {count}

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -11,11 +11,13 @@ import {
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { SxProps, Theme } from '@mui/material'
 
-export type ProductFiltersProLimitSectionProps = Record<string, unknown>
+export type ProductFiltersProLimitSectionProps = { sx?: SxProps<Theme> }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { control } = form
   const activePageSize = useWatch({ control, name: 'pageSize' })
@@ -38,6 +40,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
 
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={!!activePageSize}
       summary={<Trans id='Per page' />}
       details={

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,16 +1,21 @@
 import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
+  sx?: SxProps<Theme>
+}
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { options, showReset, selected } = useProductFiltersProSort(props)
 
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={

package/components/ProductFiltersPro/index.ts

@@ -1,11 +1,17 @@
 export * from './ProductFilterEqualChip'
+export * from './ProductFilterEqualSection'
 export * from './ProductFilterRangeChip'
+export * from './ProductFilterRangeSection'
 export * from './ProductFiltersPro'
 export * from './ProductFiltersProAllFiltersChip'
 export * from './ProductFiltersProAllFiltersSidebar'
+export * from './ProductFiltersProCategorySection'
 export * from './ProductFiltersProChips'
 export * from './ProductFiltersProClearAll'
 export * from './ProductFiltersProLayoutSidebar'
 export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'
+export * from './ProductFiltersProSortDirectionArrow'
+export * from './ProductFiltersProAggregations'
+export * from './ProductFiltersProSortSection'

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -27,7 +27,7 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
     () =>
       filterNonNullableKeys(sort_fields?.options).map((o) =>
         !category?.uid && o.value === 'position'
-          ? { value: 'relevance', label: i18n._('Relevance') }
+          ? { value: 'relevance', label: i18n._(/* i18n*/ 'Relevance') }
           : o,
       ),
     [category?.uid, sort_fields?.options],
@@ -41,7 +41,9 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
 
   const formSort = useWatch({ control, name: 'sort' })
   const formDirection = useWatch({ control, name: 'dir' })
-  const showReset = Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
+  const showReset =
+    (formDirection !== null || formSort !== null) &&
+    Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
   const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
 
   const options = useMemo(

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -97,7 +97,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           top: theme.page.vertical,
           zIndex: 9,
           margin: '0 auto',
-          maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+
           [theme.breakpoints.down('md')]: {
             textAlign: 'center',
             maxWidth: 'unset',
@@ -136,8 +136,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
             className={classes.scroller}
             hideScrollbar
             sx={(theme) => ({
-              paddingLeft: theme.page.horizontal,
-              paddingRight: theme.page.horizontal,
+              px: theme.page.horizontal,
               paddingBottom: '1px',
               [theme.breakpoints.up('md')]: {
                 borderRadius: '99em',
@@ -145,7 +144,6 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
                 paddingRight: '8px',
               },
               py: '5px',
-
               columnGap: '6px',
               gridAutoColumns: 'min-content',
             })}

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.graphql

@@ -1,5 +1,8 @@
 fragment ProductPageBreadcrumb on ProductInterface {
+  __typename
+  uid
   name
+  url_key
   categories {
     uid
     name

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -8,6 +8,9 @@ import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment &
   Omit<BreadcrumbsProps, 'children'>
 
+/**
+ * @deprecated Please use ProductPageBreadcrumbs
+ */
 export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
   const { categories, name, ...breadcrumbProps } = props
   const prev = usePrevPageRouter()

package/components/ProductPageBreadcrumb/ProductPageBreadcrumbs.tsx

@@ -0,0 +1,40 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
+import { categoryToBreadcrumbs } from '@graphcommerce/magento-category'
+import { Breadcrumbs } from '@graphcommerce/next-ui'
+import { BreadcrumbsJsonLd } from '@graphcommerce/next-ui/Breadcrumbs/BreadcrumbsJsonLd'
+import { jsonLdBreadcrumb } from '@graphcommerce/next-ui/Breadcrumbs/jsonLdBreadcrumb'
+import { BreadcrumbsProps } from '@mui/material'
+import { useRouter } from 'next/router'
+import { BreadcrumbList } from 'schema-dts'
+import { productPageCategory } from '../ProductPageCategory/productPageCategory'
+import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+import { productLink } from '../../hooks/useProductLink'
+
+export type ProductPageBreadcrumbsProps = Omit<BreadcrumbsProps, 'children'> & {
+  breadcrumbsAmount?: number
+  product: ProductPageBreadcrumbFragment
+}
+
+export function ProductPageBreadcrumbs(props: ProductPageBreadcrumbsProps) {
+  const { product, ...breadcrumbsProps } = props
+  const { categories } = product
+  const prev = usePrevPageRouter()
+  const router = useRouter()
+
+  const category =
+    categories?.find((c) => `/${c?.url_path}` === prev?.asPath) ?? productPageCategory(product)
+
+  if (!category || !product.name || !product.url_key) return null
+
+  const breadcrumbs = categoryToBreadcrumbs(category)
+
+  return (
+    <>
+      <BreadcrumbsJsonLd<BreadcrumbList>
+        breadcrumbs={[...breadcrumbs, { name: product.name, href: productLink(product) }]}
+        render={(bc) => ({ '@context': 'https://schema.org', ...jsonLdBreadcrumb(bc, router) })}
+      />
+      <Breadcrumbs breadcrumbs={breadcrumbs} lastIsLink {...breadcrumbsProps} />
+    </>
+  )
+}

package/components/ProductPageBreadcrumb/index.ts

@@ -1,2 +1,3 @@
 export * from './ProductPageBreadcrumb.gql'
 export * from './ProductPageBreadcrumb'
+export * from './ProductPageBreadcrumbs'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.26",
+  "version": "8.1.0-canary.27",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,19 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.26",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.26",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.26",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.26",
-    "@graphcommerce/graphql": "^8.1.0-canary.26",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.26",
-    "@graphcommerce/image": "^8.1.0-canary.26",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.26",
-    "@graphcommerce/magento-store": "^8.1.0-canary.26",
-    "@graphcommerce/next-ui": "^8.1.0-canary.26",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.26",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.26",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.27",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.27",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.27",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.27",
+    "@graphcommerce/graphql": "^8.1.0-canary.27",
+    "@graphcommerce/graphql-mesh": "^8.1.0-canary.27",
+    "@graphcommerce/image": "^8.1.0-canary.27",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.27",
+    "@graphcommerce/magento-category": "^8.1.0-canary.27",
+    "@graphcommerce/magento-store": "^8.1.0-canary.27",
+    "@graphcommerce/next-ui": "^8.1.0-canary.27",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.27",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.27",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",