@graphcommerce/magento-product 9.0.0-canary.115 → 9.0.0-canary.117

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.117
+
+## 9.0.0-canary.116
+
+### Patch Changes
+
+- [#2452](https://github.com/graphcommerce-org/graphcommerce/pull/2452) [`5dfd3b2`](https://github.com/graphcommerce-org/graphcommerce/commit/5dfd3b201255ef35263485d04153d37bb7e4fe67) - Renamed useInContextQuery to usePrivateQuery ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.115
 
 ## 9.0.0-canary.114

package/components/ProductAddToCart/index.ts

@@ -1,2 +1 @@
-export * from './ProductAddToCart'
 export * from './ProductAddToCart.gql'

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -17,9 +17,7 @@ export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregati
 
 /**
  * @deprecated Not used anymore
- *
- * @param props
- * @returns
+ * @public
  */
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
   const { sort_fields, total_count, renderer, sx = [], category, params } = props

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -5,7 +5,9 @@ import {
 } from './ProductFiltersProAggregations'
 
 /**
- * @deprecated Not used anymore, use `<ProductFiltersProAggregations renderer={productFiltersProChipRenderer}/>`
+ * @deprecated Not used anymore, use `<ProductFiltersProAggregations
+ *   renderer={productFiltersProChipRenderer}/>`
+ * @public
  */
 export function ProductFiltersProFilterChips(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -1,5 +1,5 @@
 import { FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
-import { StickyBelowHeader, extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, StickyBelowHeader } from '@graphcommerce/next-ui'
 import type { Theme } from '@mui/material'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Container, useMediaQuery } from '@mui/material'
@@ -25,6 +25,10 @@ const name = 'ProductFiltersProLayoutSidebar'
 const parts = ['root', 'content'] as const
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated
+ * @public
+ */
 export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSidebarProps) {
   const {
     items,

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -33,8 +33,8 @@ export function ProductFiltersProNoResults(props: ProductFitlersProNoResultProps
     >
       {term ? (
         <>
-          <Typography variant='h5' align='center'>
-            <Trans>We couldn&apos;t find any results for {term}</Trans>
+          <Typography variant='h5'>
+            <Trans>We couldn’t find any results for ‘{term}’</Trans>
           </Typography>
           <p>
             {hasFilters ? (

package/components/ProductList/ProductList.graphql

@@ -4,8 +4,9 @@ query ProductList(
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}
   $search: String = ""
-  $context: InContextInput = { loggedIn: false }
+  $context: PrivateContext
   $onlyItems: Boolean = false
+  $quickSearch: Boolean = false
 ) {
   products(
     pageSize: $pageSize
@@ -13,10 +14,10 @@ query ProductList(
     filter: $filters
     sort: $sort
     search: $search
-  ) @inContext(context: $context) {
+  ) @privateContext(context: $context) {
     ...ProductListSuggestions @skip(if: $onlyItems)
     ...ProductListFilters @skip(if: $onlyItems)
-    ...ProductListCount @skip(if: $onlyItems)
+    ...ProductListCount @skip(if: $onlyItems) @include(if: $quickSearch)
     ...ProductListPagination @skip(if: $onlyItems)
     ...ProductListSort @skip(if: $onlyItems)
     ...ProductListItems

package/components/ProductListFilters/ProductFilters.graphql

@@ -1,11 +1,11 @@
 query ProductFilters(
   $filters: ProductAttributeFilterInput = {}
   $search: String
-  $context: InContextInput
+  $context: PrivateContext
   $pageSize: Int = 1
 ) {
   filters: products(filter: $filters, currentPage: 1, pageSize: $pageSize, search: $search)
-    @inContext(context: $context) {
+    @privateContext(context: $context) {
     page_info {
       total_pages
     }

package/components/ProductListItem/ProductListItem.tsx

@@ -14,7 +14,7 @@ import type {
   ProductListsItemImageAreaProps,
 } from './ProductListItemImageContainer'
 import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
-import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
+import { ProductListItemLinkOrDiv, ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
 import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
 import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
 
@@ -44,21 +44,29 @@ export type BaseProps = {
   imageOnly?: boolean
   children?: React.ReactNode
   sx?: SxProps<Theme>
-  // eslint-disable-next-line react/no-unused-prop-types
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, item: ProductListItemFragment) => void
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
+    item: ProductListItemFragment,
+  ) => void
+  slotProps?: {
+    root?: Partial<ProductListItemLinkOrDivProps>
+    image?: Partial<ProductListItemImageProps>
+    imageAreas?: Partial<ProductListsItemImageAreaProps>
+    titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
+  }
 } & StyleProps &
   Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
   Omit<ProductListItemImageProps, 'classes'> &
   Omit<ProductListsItemImageAreaProps, 'classes'> &
   Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 
-// eslint-disable-next-line react/no-unused-prop-types
 export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
 
 export type ProductProps = BaseProps & ProductListItemFragment
 
 export type ProductListItemProps = ProductProps | SkeletonProps
 
+/** @public */
 export function ProductListItemReal(props: ProductProps) {
   const {
     subTitle,
@@ -78,18 +86,20 @@ export function ProductListItemReal(props: ProductProps) {
     titleComponent = 'h2',
     sx = [],
     onClick,
+    slotProps = {},
   } = props
 
-  const handleClick = useEventCallback((e: React.MouseEvent<HTMLAnchorElement>) =>
-    onClick?.(e, props),
-  )
-
   return (
     <ProductListItemLinkOrDiv
       href={productLink(props)}
       className={classes.root}
-      sx={sx}
-      onClick={handleClick}
+      onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
+      {...slotProps.root}
+      sx={[
+        ...(Array.isArray(sx) ? sx : [sx]),
+        ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
+      ]}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
     >
       <ProductImageContainer className={classes.imageContainer}>
         <ProductListItemImage
@@ -100,6 +110,7 @@ export function ProductListItemReal(props: ProductProps) {
           loading={loading}
           sizes={sizes}
           dontReportWronglySizedImages={dontReportWronglySizedImages}
+          {...slotProps.image}
         />
 
         {!imageOnly && (
@@ -114,6 +125,7 @@ export function ProductListItemReal(props: ProductProps) {
                 {topLeft}
               </>
             }
+            {...slotProps.imageAreas}
           />
         )}
       </ProductImageContainer>
@@ -125,6 +137,7 @@ export function ProductListItemReal(props: ProductProps) {
             titleComponent={titleComponent}
             title={name}
             subTitle={subTitle}
+            {...slotProps.titleAndPrice}
           >
             <ProductListPrice {...price_range.minimum_price} />
           </ProductListItemTitleAndPrice>
@@ -135,13 +148,30 @@ export function ProductListItemReal(props: ProductProps) {
   )
 }
 
+/** @public */
 export function ProductListItemSkeleton(props: BaseProps) {
-  const { children, imageOnly = false, aspectRatio, titleComponent = 'h2', sx = [] } = props
+  const {
+    children,
+    imageOnly = false,
+    aspectRatio,
+    titleComponent = 'h2',
+    sx = [],
+    slotProps = {},
+  } = props
 
   return (
-    <ProductListItemLinkOrDiv sx={sx} className={classes.root}>
+    <ProductListItemLinkOrDiv
+      sx={sx}
+      className={classes.root}
+      {...slotProps.root}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
+    >
       <ProductImageContainer className={classes.imageContainer}>
-        <ProductListItemImageSkeleton classes={classes} aspectRatio={aspectRatio} />
+        <ProductListItemImageSkeleton
+          classes={classes}
+          aspectRatio={aspectRatio}
+          {...slotProps.image}
+        />
       </ProductImageContainer>
 
       {!imageOnly && (
@@ -151,6 +181,7 @@ export function ProductListItemSkeleton(props: BaseProps) {
             titleComponent={titleComponent}
             title={<Skeleton variant='text' sx={{ width: '100px' }} />}
             subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
+            {...slotProps.titleAndPrice}
           >
             <Skeleton variant='text' sx={{ width: '20px' }} />
           </ProductListItemTitleAndPrice>
@@ -164,6 +195,7 @@ export function ProductListItemSkeleton(props: BaseProps) {
 function isSkeleton(props: ProductListItemProps): props is SkeletonProps {
   return props.__typename === 'Skeleton'
 }
+
 export function ProductListItem(props: ProductListItemProps) {
   return isSkeleton(props) ? (
     <ProductListItemSkeleton {...props} />

package/components/ProductListItem/ProductListItemImage.tsx

@@ -26,7 +26,7 @@ function PlaceHolderContainer(props: BoxProps) {
 
 export type ProductListItemImageProps = {
   aspectRatio?: [number, number]
-  classes: {
+  classes?: {
     image?: string
     placeholder?: string
   }
@@ -35,7 +35,7 @@ export type ProductListItemImageProps = {
 export function ProductListItemImageSkeleton(props: ProductListItemImageProps) {
   const { aspectRatio = [4, 3], classes } = props
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Skeleton
         animation='wave'
         sx={{
@@ -66,7 +66,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
         src={src}
         alt={alt ?? ''}
         {...image}
-        className={classes.image}
+        className={classes?.image}
         sx={[
           {
             objectFit: 'contain',
@@ -80,7 +80,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
   }
 
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Box
         sx={[
           {

package/components/ProductListItem/ProductListItemLinkOrDiv.tsx

@@ -1,6 +1,7 @@
-import { NextLink, breakpointVal } from '@graphcommerce/next-ui'
+import { breakpointVal, NextLink } from '@graphcommerce/next-ui'
 import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
 import { Box, ButtonBase } from '@mui/material'
+import React from 'react'
 
 export type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
 export type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
@@ -9,7 +10,10 @@ function isLink(props: ProductListItemLinkOrDivProps): props is ProductListItemL
   return 'href' in props
 }
 
-export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
+export const ProductListItemLinkOrDiv = React.forwardRef<
+  HTMLDivElement | HTMLAnchorElement,
+  ProductListItemLinkOrDivProps
+>((props, ref) => {
   const { sx = [] } = props
 
   const sxProps: SxProps<Theme> = [
@@ -28,8 +32,8 @@ export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
   ]
 
   return isLink(props) ? (
-    <ButtonBase component={NextLink} {...props} sx={sxProps} />
+    <ButtonBase ref={ref} component={NextLink} {...props} sx={sxProps} focusRipple />
   ) : (
-    <Box {...props} sx={sxProps} />
+    <Box ref={ref} component='div' {...props} sx={sxProps} />
   )
-}
+})

package/components/ProductListItems/renderer.tsx

@@ -8,6 +8,7 @@ export type ProductListItemRenderer = TypeRenderer<ProductListItemFragment | Ske
 
 /**
  * @deprecated Please use productListRenderer from the example directory instead.
+ * @public
  */
 export const renderer: ProductListItemRenderer = {
   Skeleton: ProductListItem,

package/components/ProductListPrice/ProductListPrice.tsx

@@ -1,4 +1,4 @@
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
 import type { TypographyProps } from '@mui/material'
@@ -21,7 +21,7 @@ export function ProductListPrice(props: ProductListPriceProps) {
   return (
     <Typography component='div' variant='body1' className={classes.root} sx={sx}>
       {regular_price.value !== final_price.value && (
-        <InContextMask
+        <PrivateQueryMask
           component='span'
           sx={{
             textDecoration: 'line-through',
@@ -32,11 +32,15 @@ export function ProductListPrice(props: ProductListPriceProps) {
           className={classes.discountPrice}
         >
           <Money {...regular_price} />
-        </InContextMask>
+        </PrivateQueryMask>
       )}
-      <InContextMask className={classes.finalPrice} component='span' skeleton={{ width: '3.5em' }}>
+      <PrivateQueryMask
+        className={classes.finalPrice}
+        component='span'
+        skeleton={{ width: '3.5em' }}
+      >
         <Money {...final_price} />
-      </InContextMask>
+      </PrivateQueryMask>
     </Typography>
   )
 }

package/components/ProductListSuggestions/ProductListSearchSuggestion.graphql

@@ -0,0 +1,3 @@
+fragment ProductListSearchSuggestion on SearchSuggestion {
+  search
+}

package/components/ProductListSuggestions/ProductListSuggestions.graphql

@@ -1,5 +1,5 @@
 fragment ProductListSuggestions on Products {
   suggestions {
-    search
+    ...ProductListSearchSuggestion
   }
 }

package/components/ProductPage/ProductPageAddToCartRow.tsx

@@ -10,7 +10,7 @@ export type ProductPageAddToCartRowProps = {
   product: UseAddProductsToCartActionFragment
 }
 
-export function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
+function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
   const { sx, children, after } = props
   return (
     <>

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -11,6 +11,7 @@ export type ProductPageBreadcrumbProps = ProductPageBreadcrumbFragment &
 
 /**
  * @deprecated Please use ProductPageBreadcrumbs
+ * @public
  */
 export function ProductPageBreadcrumb(props: ProductPageBreadcrumbProps) {
   const { categories, name, ...breadcrumbProps } = props

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,11 +1,11 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
-import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
 import { useCustomizableOptionPrice } from './useCustomizableOptionPrice'
 
@@ -31,22 +31,22 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
   return (
     <>
       {regularPrice.value !== price.value && (
-        <InContextMask
+        <PrivateQueryMask
           component='span'
           className={classes.discountPrice}
           skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
           sx={[{ textDecoration: 'line-through', color: 'text.disabled', marginRight: '8px' }]}
         >
           <Money {...regularPrice} />
-        </InContextMask>
+        </PrivateQueryMask>
       )}
-      <InContextMask
+      <PrivateQueryMask
         component='span'
         skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
         className={classes.finalPrice}
       >
         <Money {...price} value={priceValue} />
-      </InContextMask>
+      </PrivateQueryMask>
     </>
   )
 }

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -1,4 +1,4 @@
-import { InContextMask } from '@graphcommerce/graphql'
+import { PrivateQueryMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
@@ -22,7 +22,7 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
   if (!priceTiers.length) return null
 
   return (
-    <InContextMask sx={sx} variant='rectangular'>
+    <PrivateQueryMask sx={sx} variant='rectangular'>
       {priceTiers.map(({ quantity, final_price, discount }) => (
         <div key={quantity}>
           <Trans
@@ -32,6 +32,6 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
           />
         </div>
       ))}
-    </InContextMask>
+    </PrivateQueryMask>
   )
 }

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -5,6 +5,7 @@ import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
 /**
  * @deprecated Not used anymore, use `getProductStaticPaths` instead.
+ * @public
  */
 export async function getSitemapPaths(
   client: ApolloClient<NormalizedCacheObject>,

package/components/ProductWeight/ProductWeight.tsx

@@ -6,6 +6,7 @@ import type { ProductWeightFragment } from './ProductWeight.gql'
 
 export type ProductWeightProps = Omit<UnitFormatProps, 'unit'> & { product: ProductWeightFragment }
 
+/** @public */
 export function ProductWeight(props: ProductWeightProps) {
   const { product, ...rest } = props
 

package/components/index.ts

@@ -8,6 +8,10 @@ export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem/ProductListItem'
+export * from './ProductListItem/ProductListItemImage'
+export * from './ProductListItem/ProductListItemTitleAndPrice'
+export * from './ProductListItem/ProductListItemImageContainer'
+export * from './ProductListItem/ProductListItemLinkOrDiv'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
@@ -43,3 +47,4 @@ export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
 export * from './ProductListSuggestions/ProductListSuggestions'
 export * from './ProductListSuggestions/ProductListSuggestions.gql'
+export * from './ProductListSuggestions/ProductListSearchSuggestion.gql'

package/hooks/useProductLink.ts

@@ -2,7 +2,7 @@ import type { ProductLinkFragment } from './ProductLink.gql'
 
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
-export const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
+const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
 
 export function productPath(urlKey: string) {
   return `${productRoute}${urlKey}`

package/hooks/useProductList.ts

@@ -1,6 +1,6 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
 import type { ApolloClient } from '@graphcommerce/graphql'
-import { getInContextInput, useInContextQuery, useQuery } from '@graphcommerce/graphql'
+import { getPrivateQueryContext, usePrivateQuery, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
@@ -41,7 +41,7 @@ export const prefetchProductList = debounce(
 
     showPageLoadIndicator.set(true)
 
-    const context = getInContextInput(client)
+    const context = getPrivateQueryContext(client)
     const productList = client.query({
       query: ProductListDocument,
       variables: { ...variables, context },
@@ -103,8 +103,8 @@ export function useProductList<
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplyCategoryDefaults(params, category)
 
-  const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
-  const filters = useInContextQuery(
+  const result = usePrivateQuery(ProductListDocument, { variables, skip: !shallow }, props)
+  const filters = usePrivateQuery(
     ProductFiltersDocument,
     { variables: categoryDefaultsToProductListFilters(variables), skip: !shallow },
     props,

package/package.json

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

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -1,142 +0,0 @@
-import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
-import type { ProductInterface } from '@graphcommerce/graphql-mesh'
-import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import type { MoneyProps } from '@graphcommerce/magento-store'
-import { Money } from '@graphcommerce/magento-store'
-import {
-  Button,
-  IconSvg,
-  MessageSnackbar,
-  extendableComponent,
-  iconChevronRight,
-} from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
-import type { ButtonProps } from '@mui/material'
-import { Alert, Box, Divider, Typography } from '@mui/material'
-import React from 'react'
-import type { ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
-import { ProductAddToCartDocument } from './ProductAddToCart.gql'
-
-const { classes, selectors } = extendableComponent('ProductAddToCart', [
-  'root',
-  'button',
-  'price',
-  'divider',
-  'buttonWrapper',
-] as const)
-
-export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
-
-/** @deprecated Please us AddProductsToCartForm and it's components */
-export function ProductAddToCart(
-  props: Pick<ProductInterface, 'name'> & {
-    variables: Omit<ProductAddToCartMutationVariables, 'cartId'>
-    name: string
-    price: MoneyProps
-    additionalButtons?: React.ReactNode
-    children?: React.ReactNode
-  } & Omit<ButtonProps, 'type' | 'name'>,
-) {
-  const { name, children, variables, price, sx, additionalButtons, ...buttonProps } = props
-
-  const form = useFormGqlMutationCart(ProductAddToCartDocument, {
-    defaultValues: { ...variables },
-  })
-
-  const { handleSubmit, formState, error, control, required, data } = form
-  const submitHandler = handleSubmit(() => {})
-
-  return (
-    <Box component='form' onSubmit={submitHandler} noValidate className={classes.root} sx={sx}>
-      <Divider className={classes.divider} sx={(theme) => ({ margin: `${theme.spacings.xs} 0` })} />
-
-      <Typography
-        variant='h4'
-        className={classes.price}
-        sx={(theme) => ({
-          fontWeight: theme.typography.fontWeightBold,
-          margin: `${theme.spacings.sm} 0`,
-        })}
-      >
-        <Money {...price} />
-      </Typography>
-
-      <NumberFieldElement
-        variant='outlined'
-        error={formState.isSubmitted && !!formState.errors.quantity}
-        required={required.quantity}
-        inputProps={{ min: 1 }}
-        name='quantity'
-        rules={{ required: required.quantity }}
-        helperText={formState.isSubmitted && formState.errors.quantity?.message}
-        disabled={formState.isSubmitting}
-        size='small'
-        control={control}
-      />
-      {children}
-      <Box
-        sx={(theme) => ({
-          display: 'flex',
-          alignItems: 'center',
-          columnGap: theme.spacings.xs,
-        })}
-        className={classes.buttonWrapper}
-      >
-        <Button
-          type='submit'
-          className={classes.button}
-          loading={formState.isSubmitting}
-          color='primary'
-          variant='pill'
-          size='large'
-          sx={(theme) => ({
-            marginTop: theme.spacings.sm,
-            marginBottom: theme.spacings.sm,
-            width: '100%',
-          })}
-          {...buttonProps}
-        >
-          <Trans>Add to Cart</Trans>
-        </Button>
-        {additionalButtons}
-      </Box>
-
-      <ApolloCartErrorAlert error={error} />
-
-      {data?.addProductsToCart?.user_errors.map((e) => (
-        <Box key={e?.code}>
-          <Alert severity='error'>{e?.message}</Alert>
-        </Box>
-      ))}
-
-      <MessageSnackbar
-        open={
-          !formState.isSubmitting &&
-          formState.isSubmitSuccessful &&
-          !error?.message &&
-          !data?.addProductsToCart?.user_errors?.length
-        }
-        variant='pill'
-        severity='success'
-        autoHide
-        action={
-          <Button
-            href='/cart'
-            id='view-shopping-cart-button'
-            size='medium'
-            variant='pill'
-            color='secondary'
-            endIcon={<IconSvg src={iconChevronRight} />}
-          >
-            <Trans>View shopping cart</Trans>
-          </Button>
-        }
-      >
-        <Trans>
-          <strong>{name}</strong> has been added to your shopping cart!
-        </Trans>
-      </MessageSnackbar>
-    </Box>
-  )
-}
-ProductAddToCart.selectors = selectors

package/components/ProductPageGallery/ProductImage.tsx

@@ -1,10 +0,0 @@
-import { Image } from '@graphcommerce/image'
-import type { ProductImageFragment } from './ProductImage.gql'
-
-export function ProductImage(props: ProductImageFragment) {
-  const { url, label } = props
-
-  if (!url) return null
-
-  return <Image src={url} width={328} height={328} alt={label ?? ''} dontReportWronglySizedImages />
-}

package/components/ProductPageGallery/ProductVideo.tsx

@@ -1,10 +0,0 @@
-import type { ProductVideoFragment } from './ProductVideo.gql'
-
-export function ProductVideo(props: ProductVideoFragment) {
-  const { video_content } = props
-
-  if (!video_content?.video_url) return null
-
-  // eslint-disable-next-line jsx-a11y/media-has-caption
-  return <video src={video_content.video_url} />
-}