@graphcommerce/magento-product 4.6.0 → 4.7.0

package/Api/ProductPageItem.graphql

@@ -2,6 +2,7 @@ fragment ProductPageItem on ProductInterface @injectable {
   __typename
   uid
   ...ProductPageCategory
+  ...ProductPageBreadcrumb
   ...ProductPageDescription
   ...ProductPageGallery
   ...ProductPageMeta

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 4.7.0
+
+### Minor Changes
+
+- [#1659](https://github.com/graphcommerce-org/graphcommerce/pull/1659) [`6987ec7d2`](https://github.com/graphcommerce-org/graphcommerce/commit/6987ec7d21ce2d481fabbd6eda039702fcf5242b) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added product and category breadcrumbs
+
+## 4.6.1
+
+### Patch Changes
+
+- [#1660](https://github.com/graphcommerce-org/graphcommerce/pull/1660) [`48e6522bb`](https://github.com/graphcommerce-org/graphcommerce/commit/48e6522bb9424d4bd77fd77c68065f5625f3ec8d) Thanks [@paales](https://github.com/paales)! - Forward onChange handler for AddProductsToCartButton
+
+* [#1660](https://github.com/graphcommerce-org/graphcommerce/pull/1660) [`37b1980a0`](https://github.com/graphcommerce-org/graphcommerce/commit/37b1980a04a4a3d77663b404ae83539620cf65b9) Thanks [@paales](https://github.com/paales)! - Do not static build old product pages when the new product page is used an vice versa
+
+* Updated dependencies [[`e5048c5ec`](https://github.com/graphcommerce-org/graphcommerce/commit/e5048c5ec52b83dbe70a246ffdcea65b55a884c6)]:
+  - @graphcommerce/ecommerce-ui@1.5.1
+  - @graphcommerce/magento-cart@4.8.5
+
 ## 4.6.0
 
 ### Minor Changes

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import { SxProps, Theme, useEventCallback } from '@mui/material'
 import { useFormAddProductsToCart } from './AddProductsToCartForm'
 
 export type AddProductsToCartButtonProps = {
@@ -22,7 +22,14 @@ export type AddProductsToCartButtonProps = {
 
 export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
   const { formState, setValue } = useFormAddProductsToCart()
-  const { loading, sku, index = 0 } = props
+  const { loading, sku, index = 0, disabled, onClick } = props
+
+  const clickHandler: NonNullable<AddProductsToCartButtonProps['onClick']> = useEventCallback(
+    (e) => {
+      setValue(`cartItems.${index}.sku`, sku)
+      onClick?.(e)
+    },
+  )
 
   return (
     <Button
@@ -31,9 +38,9 @@ export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
       variant='pill'
       size='large'
       {...props}
-      disabled={Boolean(formState.errors.cartItems?.[index].sku?.message)}
+      disabled={Boolean(formState.errors.cartItems?.[index].sku?.message) || disabled}
       loading={formState.isSubmitting || loading}
-      onClick={() => setValue(`cartItems.${index}.sku`, sku)}
+      onClick={clickHandler}
     >
       <Trans id='Add to Cart' />
     </Button>

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -3,12 +3,12 @@ import { useFormAddProductsToCart } from './AddProductsToCartForm'
 
 type AddToCartQuantityProps = Omit<
   NumberFieldElementProps,
-  'error' | 'required' | 'inputProps' | 'inputRef' | 'helperText' | 'name'
+  'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control' | 'name'
 > & { index?: number }
 
 export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
   const { index = 0 } = props
-  const { formState, control } = useFormAddProductsToCart()
+  const { control } = useFormAddProductsToCart()
 
   return (
     <NumberFieldElement
@@ -17,10 +17,9 @@ export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
       {...props}
       required
       inputProps={{ min: 1 }}
-      defaultValue='1'
+      defaultValue={1}
       control={control}
       name={`cartItems.${index}.quantity`}
-      helperText={formState.isSubmitted && formState.errors.cartItems?.[index].quantity?.message}
     />
   )
 }

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.graphql

@@ -0,0 +1,14 @@
+fragment ProductPageBreadcrumb on ProductInterface {
+  name
+  categories {
+    uid
+    name
+    url_path
+    include_in_menu
+    breadcrumbs {
+      category_name
+      category_uid
+      category_url_path
+    }
+  }
+}

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -0,0 +1,42 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
+import { Trans } from '@lingui/react'
+import { Breadcrumbs, BreadcrumbsProps, Container, Link, Typography } from '@mui/material'
+import PageLink from 'next/link'
+import { productPageCategory } from '../ProductPageCategory/productPageCategory'
+import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+
+type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & BreadcrumbsProps
+
+export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
+  const { categories, name } = props
+  const prev = usePrevPageRouter()
+
+  const category =
+    categories?.find((c) => `/${c?.url_path}` === prev?.asPath) ?? productPageCategory(props)
+
+  return (
+    <Container maxWidth={false}>
+      <Breadcrumbs>
+        <PageLink href='/' passHref>
+          <Link underline='hover' color='inherit'>
+            <Trans id='Home' />
+          </Link>
+        </PageLink>
+        {category?.breadcrumbs?.map((mapped_category, i) => (
+          <Link
+            underline='hover'
+            key={mapped_category?.category_uid}
+            color='inherit'
+            href={`/${mapped_category?.category_url_path}`}
+          >
+            {mapped_category?.category_name}
+          </Link>
+        ))}
+        <Link underline='hover' color='inherit' href={`/${category?.url_path}`}>
+          {category?.name}
+        </Link>
+        <Typography color='text.primary'>{name}</Typography>
+      </Breadcrumbs>
+    </Container>
+  )
+}

package/components/ProductPageBreadcrumb/index.ts

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

package/components/ProductPageCategory/productPageCategory.ts

@@ -6,7 +6,9 @@ import { ProductPageCategoryFragment } from './ProductPageCategory.gql'
  * - Prefers categories that are included in the menu
  * - Prefers categories that have a longer path than shorter ones.
  */
-export function productPageCategory(product?: ProductPageCategoryFragment | null) {
+export function productPageCategory<Product extends ProductPageCategoryFragment>(
+  product?: Product | null,
+): NonNullable<Product['categories']>[number] | undefined {
   if (!product?.categories?.length) return undefined
   return product?.categories?.reduce((carry, value) => {
     if (!value?.include_in_menu) return carry

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -11,7 +11,7 @@ export type ProductTypenames = NonNullable<
 export async function getProductStaticPaths(
   client: ApolloClient<NormalizedCacheObject>,
   locale: string,
-  typename: ProductTypenames,
+  typename?: ProductTypenames,
 ) {
   const query = client.query({
     query: ProductStaticPathsDocument,
@@ -25,7 +25,7 @@ export async function getProductStaticPaths(
   const paths: Return['paths'] = (await Promise.all(pages))
     .map((q) => q.data.products?.items)
     .flat(1)
-    .filter((item) => item?.__typename === typename)
+    .filter((item) => (typename ? item?.__typename === typename : true))
     .map((p) => ({ params: { url: `${p?.url_key}` }, locale }))
 
   return process.env.VERCEL_ENV !== 'production' ? paths.slice(0, 1) : paths

package/components/index.ts

@@ -1,6 +1,7 @@
 export * from './AddProductsToCart'
 export * from './JsonLdProduct/jsonLdProduct'
 export * from './ProductAddToCart'
+export * from './ProductCustomizable'
 export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters/ProductFilters.gql'
@@ -18,6 +19,7 @@ export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'
 export * from './ProductListPagination/ProductListPagination'
 export * from './ProductListSort/ProductListSort'
+export * from './ProductPageBreadcrumb'
 export * from './ProductPageCategory/productPageCategory'
 export * from './ProductPageDescription/ProductPageDescription'
 export * from './ProductPageGallery/ProductPageGallery'
@@ -31,4 +33,3 @@ export * from './ProductSpecs/ProductSpecs'
 export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
-export * from './ProductCustomizable'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,12 +19,13 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.0",
+    "@graphcommerce/ecommerce-ui": "1.5.1",
     "@graphcommerce/framer-scroller": "2.1.39",
+    "@graphcommerce/framer-next-pages": "3.3.0",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.4",
+    "@graphcommerce/magento-cart": "4.8.5",
     "@graphcommerce/magento-store": "4.3.0",
     "@graphcommerce/next-ui": "4.27.0",
     "schema-dts": "^1.1.0"