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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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/ProductList/ProductList.graphql

@@ -4,7 +4,7 @@ query ProductList(
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}
   $search: String = ""
-  $context: InContextInput = { loggedIn: false }
+  $context: PrivateContext
   $onlyItems: Boolean = false
 ) {
   products(
@@ -13,7 +13,7 @@ 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)

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

@@ -59,6 +59,7 @@ export type ProductProps = BaseProps & ProductListItemFragment
 
 export type ProductListItemProps = ProductProps | SkeletonProps
 
+/** @public */
 export function ProductListItemReal(props: ProductProps) {
   const {
     subTitle,
@@ -135,6 +136,7 @@ export function ProductListItemReal(props: ProductProps) {
   )
 }
 
+/** @public */
 export function ProductListItemSkeleton(props: BaseProps) {
   const { children, imageOnly = false, aspectRatio, titleComponent = 'h2', sx = [] } = props
 

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/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/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.116",
   "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.116",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.116",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.116",
+    "@graphcommerce/graphql": "^9.0.0-canary.116",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.116",
+    "@graphcommerce/image": "^9.0.0-canary.116",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.116",
+    "@graphcommerce/magento-store": "^9.0.0-canary.116",
+    "@graphcommerce/next-ui": "^9.0.0-canary.116",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.116",
     "@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} />
-}