@graphcommerce/magento-product 4.7.2 → 4.8.0

package/Api/ProductListItem.graphql

@@ -4,8 +4,7 @@ fragment ProductListItem on ProductInterface @injectable {
   sku
   name
   small_image {
-    url
-    label
+    ...ProductImage
   }
   price_range {
     minimum_price {

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Change Log
 
+## 4.8.0
+
+### Minor Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`2b5451395`](https://github.com/graphcommerce-org/graphcommerce/commit/2b5451395dc1173de55d18d08968866e561f90ab) Thanks [@paales](https://github.com/paales)! - Move AddProductsToCartSnackbar to inside AddProductsToCartForm and make AddProductsToCartForm configrable via theme.ts
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855) Thanks [@paales](https://github.com/paales)! - Added AddProductsToCartFab for a smaller add to cart button
+
+- [#1678](https://github.com/graphcommerce-org/graphcommerce/pull/1678) [`78d7d51cb`](https://github.com/graphcommerce-org/graphcommerce/commit/78d7d51cb1551601d3a4756cd1f2157a49ff93b9) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Changed styling and forwarded breadcrumbprops
+
+### Patch Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`c4ed376e2`](https://github.com/graphcommerce-org/graphcommerce/commit/c4ed376e2c72b16b34704d7d1ca69c074de172ba) Thanks [@paales](https://github.com/paales)! - Support passing children to AddProductsToCartButton instead of Add To Cart
+
+- Updated dependencies [[`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855), [`0bd9ea582`](https://github.com/graphcommerce-org/graphcommerce/commit/0bd9ea58230dde79c5fe2cdb07e9860151460270)]:
+  - @graphcommerce/next-ui@4.29.0
+  - @graphcommerce/ecommerce-ui@1.5.5
+  - @graphcommerce/framer-scroller@2.1.42
+  - @graphcommerce/magento-cart@4.9.1
+  - @graphcommerce/magento-store@4.3.3
+
+## 4.7.3
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`cf3518499`](https://github.com/graphcommerce-org/graphcommerce/commit/cf351849999ad6fe73ce2bb258098a7dd301d517), [`81f31d1e5`](https://github.com/graphcommerce-org/graphcommerce/commit/81f31d1e54397368088a4289aaddd29facfceeef), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`a8905d263`](https://github.com/graphcommerce-org/graphcommerce/commit/a8905d263273cb9322583d5759a5fdc66eceb8e4), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd), [`3dde492ad`](https://github.com/graphcommerce-org/graphcommerce/commit/3dde492ad3a49d96481eeb7453fb305d0017b1a5)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/graphql@3.5.0
+  - @graphcommerce/framer-scroller@2.1.41
+  - @graphcommerce/magento-cart@4.9.0
+  - @graphcommerce/ecommerce-ui@1.5.4
+  - @graphcommerce/magento-store@4.3.2
+  - @graphcommerce/framer-next-pages@3.3.2
+  - @graphcommerce/image@3.1.10
+
 ## 4.7.2
 
 ### Patch Changes

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,48 +1,31 @@
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme, useEventCallback } from '@mui/material'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import {
+  useAddProductsToCartAction,
+  UseAddProductsToCartActionProps,
+} from './useAddProductsToCartAction'
 
-export type AddProductsToCartButtonProps = {
-  sx?: SxProps<Theme>
-  sku: string
-  index?: number
-} & Pick<
-  ButtonProps<'button'>,
-  | 'variant'
-  | 'color'
-  | 'size'
-  | 'disabled'
-  | 'fullWidth'
-  | 'startIcon'
-  | 'endIcon'
-  | 'onClick'
-  | 'loading'
->
+export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
+  Pick<
+    ButtonProps<'button'>,
+    | 'variant'
+    | 'color'
+    | 'size'
+    | 'fullWidth'
+    | 'startIcon'
+    | 'endIcon'
+    | 'onClick'
+    | 'sx'
+    | 'children'
+  >
 
 export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
-  const { formState, setValue } = useFormAddProductsToCart()
-  const { loading, sku, index = 0, disabled, onClick } = props
-
-  const clickHandler: NonNullable<AddProductsToCartButtonProps['onClick']> = useEventCallback(
-    (e) => {
-      setValue(`cartItems.${index}.sku`, sku)
-      onClick?.(e)
-    },
-  )
+  const { children } = props
+  const action = useAddProductsToCartAction(props)
 
   return (
-    <Button
-      type='submit'
-      color='primary'
-      variant='pill'
-      size='large'
-      {...props}
-      disabled={Boolean(formState.errors.cartItems?.[index].sku?.message) || disabled}
-      loading={formState.isSubmitting || loading}
-      onClick={clickHandler}
-    >
-      <Trans id='Add to Cart' />
+    <Button type='submit' color='primary' variant='pill' size='large' {...props} {...action}>
+      {children || <Trans id='Add to Cart' />}
     </Button>
   )
 }

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -1,5 +1,5 @@
 import { FormHelperText } from '@mui/material'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddProductsToCartErrorProps = {
   children?: React.ReactNode

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -0,0 +1,18 @@
+import { Fab, FabProps, iconShoppingBag } from '@graphcommerce/next-ui'
+import { SxProps, Theme } from '@mui/material'
+import {
+  useAddProductsToCartAction,
+  UseAddProductsToCartActionProps,
+} from './useAddProductsToCartAction'
+
+export type AddProductsToCartFabProps = {
+  sx?: SxProps<Theme>
+  icon?: FabProps['icon']
+} & Pick<FabProps, 'color' | 'size'> &
+  UseAddProductsToCartActionProps
+
+export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
+  const { icon = iconShoppingBag } = props
+  const action = useAddProductsToCartAction(props)
+  return <Fab type='submit' {...props} {...action} icon={icon} />
+}

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,69 +1,111 @@
-import { UseFormGqlMutationReturn, UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
+import { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Box, SxProps, Theme } from '@mui/material'
-import { createContext, useContext, useMemo } from 'react'
+import { ExtendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
 import {
   AddProductsToCartDocument,
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
-
-type AddProductsToCartContextType = UseFormGqlMutationReturn<
-  AddProductsToCartMutation,
-  AddProductsToCartMutationVariables
->
-
-export const addProductsToCartContext = createContext(
-  undefined as AddProductsToCartContextType | undefined,
-)
+import {
+  AddProductsToCartSnackbar,
+  AddProductsToCartSnackbarProps,
+} from './AddProductsToCartSnackbar'
+import { AddProductsToCartContext, RedirectType } from './useFormAddProductsToCart'
 
 type AddProductsToCartFormProps = {
+  // The props are actually used, but are passed through useThemeProps and that breaks react/no-unused-prop-types
+  // eslint-disable-next-line react/no-unused-prop-types
   children: React.ReactNode
+  // eslint-disable-next-line react/no-unused-prop-types
   sx?: SxProps<Theme>
-} & Omit<
-  UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartMutationVariables>,
-  'onBeforeSubmit'
->
+  // eslint-disable-next-line react/no-unused-prop-types
+  redirect?: RedirectType
+} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartMutationVariables> &
+  AddProductsToCartSnackbarProps
+
+const name = 'AddProductsToCartForm'
 
+/** Expose the component to be exendable in your theme.components */
+declare module '@mui/material/styles/components' {
+  interface Components {
+    AddProductsToCartForm?: Pick<
+      ExtendableComponent<Omit<AddProductsToCartFormProps, 'children'>>,
+      'defaultProps'
+    >
+  }
+}
+
+/**
+ * Component that handles adding products to the cart. Used on the product page, but can be used for
+ * any product listing.
+ *
+ * Can be configured globally in your theme.ts;
+ *
+ * - Uses react-hook-form's useForm hook under the hood and exposes the form as a context which can be
+ *   consumed with `useFormAddProductsToCart` hook.
+ * - Cleans up the submitted data.
+ * - Redirects the user to the cart/checkout/added page after successful submission.
+ */
 export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
-  const { children, defaultValues, sx, ...formProps } = props
-  const form = useFormGqlMutationCart(AddProductsToCartDocument, {
-    defaultValues,
+  const {
+    children,
+    redirect = 'cart',
+    onComplete,
+    sx,
+    errorSnackbar,
+    successSnackbar,
+    ...formProps
+  } = useThemeProps({ name, props })
+  const router = useRouter()
 
-    // We're stripping out incomplete entered options.
-    onBeforeSubmit: ({ cartId, cartItems }) => ({
-      cartId,
-      cartItems: cartItems
-        .filter((cartItem) => cartItem.sku)
-        .map((cartItem) => ({
-          ...cartItem,
-          selected_options: cartItem.selected_options?.filter(Boolean),
-          entered_options: cartItem.entered_options?.filter((option) => option?.value),
-        })),
-    }),
+  const form = useFormGqlMutationCart<
+    AddProductsToCartMutation,
+    AddProductsToCartMutationVariables
+  >(AddProductsToCartDocument, {
     ...formProps,
+    // We're stripping out incomplete entered options.
+    onBeforeSubmit: async (variables) => {
+      const variables2 = (await formProps.onBeforeSubmit?.(variables)) ?? variables
+      if (variables2 === false) return false
+
+      const { cartId, cartItems } = variables2
+      return {
+        cartId,
+        cartItems: cartItems
+          .filter((cartItem) => cartItem.sku)
+          .map((cartItem) => ({
+            ...cartItem,
+            quantity: cartItem.quantity || 1,
+            selected_options: cartItem.selected_options?.filter(Boolean),
+            entered_options: cartItem.entered_options?.filter((option) => option?.value),
+          })),
+      }
+    },
+    onComplete: async (result, variables) => {
+      await onComplete?.(result, variables)
+
+      if (result.data?.addProductsToCart?.user_errors?.length || result.errors?.length || !redirect)
+        return
+
+      if (redirect === 'checkout') await router.push('/checkout')
+      if (redirect === 'added') await router.push({ pathname: '/checkout/added' })
+      if (redirect === 'cart') await router.push({ pathname: '/cart' })
+    },
   })
 
   const submit = form.handleSubmit(() => {})
 
   return (
-    <addProductsToCartContext.Provider value={form}>
-      <Box component='form' onSubmit={submit} noValidate sx={sx}>
+    <AddProductsToCartContext.Provider
+      value={useMemo(() => ({ ...form, redirect }), [form, redirect])}
+    >
+      <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-    </addProductsToCartContext.Provider>
+      <AddProductsToCartSnackbar errorSnackbar={errorSnackbar} successSnackbar={successSnackbar} />
+    </AddProductsToCartContext.Provider>
   )
 }
-
-export function useFormAddProductsToCart(optional: true): AddProductsToCartContextType | undefined
-export function useFormAddProductsToCart(optional?: false): AddProductsToCartContextType
-export function useFormAddProductsToCart(optional = false) {
-  const context = useContext(addProductsToCartContext)
-
-  if (!optional && typeof context === 'undefined') {
-    throw Error(
-      'useFormAddProductsToCart must be used within a AddProductsToCartForm or provide the optional=true argument',
-    )
-  }
-  return context
-}

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -1,5 +1,5 @@
 import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddToCartQuantityProps = Omit<
   NumberFieldElementProps,

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -1,67 +1,84 @@
 import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
 import {
   Button,
+  ErrorSnackbar,
+  ErrorSnackbarProps,
+  filterNonNullableKeys,
   iconChevronRight,
   IconSvg,
   MessageSnackbar,
-  ErrorSnackbar,
+  MessageSnackbarProps,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import PageLink from 'next/link'
-import { useFormAddProductsToCart } from './AddProductsToCartForm'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+
+export type AddProductsToCartSnackbarProps = {
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+}
 
-type AddToCartMessageProps = { name?: string | null }
+export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
+  const { errorSnackbar, successSnackbar } = props
+  const { formState, error, data, redirect } = useFormAddProductsToCart()
 
-export function AddProductsToCartSnackbar(props: AddToCartMessageProps) {
-  const { name } = props
-  const { formState, error, data } = useFormAddProductsToCart()
+  const showSuccess =
+    !formState.isSubmitting &&
+    formState.isSubmitSuccessful &&
+    !error?.message &&
+    !data?.addProductsToCart?.user_errors?.length &&
+    !redirect
 
+  const items = filterNonNullableKeys(data?.addProductsToCart?.cart.items)
+
+  const showErrorSnackbar = (data?.addProductsToCart?.user_errors?.length ?? 0) > 0
   return (
     <>
-      <ApolloCartErrorSnackbar error={error} />
-
-      <ErrorSnackbar
-        variant='pill'
-        severity='error'
-        open={(data?.addProductsToCart?.user_errors?.length ?? 0) > 0}
-        action={
-          <Button size='medium' variant='pill' color='secondary'>
-            <Trans id='Ok' />
-          </Button>
-        }
-      >
-        <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
-      </ErrorSnackbar>
+      {error && <ApolloCartErrorSnackbar error={error} />}
 
-      <MessageSnackbar
-        open={
-          !formState.isSubmitting &&
-          formState.isSubmitSuccessful &&
-          !error?.message &&
-          !data?.addProductsToCart?.user_errors?.length
-        }
-        variant='pill'
-        action={
-          <PageLink href='/cart' passHref>
-            <Button
-              id='view-shopping-cart-button'
-              size='medium'
-              variant='pill'
-              color='secondary'
-              endIcon={<IconSvg src={iconChevronRight} />}
-              sx={{ display: 'flex' }}
-            >
-              <Trans id='View shopping cart' />
+      {showErrorSnackbar && (
+        <ErrorSnackbar
+          variant='pill'
+          severity='error'
+          action={
+            <Button size='medium' variant='pill' color='secondary'>
+              <Trans id='Ok' />
             </Button>
-          </PageLink>
-        }
-      >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
-      </MessageSnackbar>
+          }
+          {...errorSnackbar}
+          open={showErrorSnackbar}
+        >
+          <>{data?.addProductsToCart?.user_errors?.map((e) => e?.message).join(', ')}</>
+        </ErrorSnackbar>
+      )}
+
+      {showSuccess && (
+        <MessageSnackbar
+          variant='pill'
+          {...successSnackbar}
+          open={showSuccess}
+          action={
+            <PageLink href='/cart' passHref>
+              <Button
+                id='view-shopping-cart-button'
+                size='medium'
+                variant='pill'
+                color='secondary'
+                endIcon={<IconSvg src={iconChevronRight} />}
+                sx={{ display: 'flex' }}
+              >
+                <Trans id='View shopping cart' />
+              </Button>
+            </PageLink>
+          }
+        >
+          <Trans
+            id='<0>{name}</0> has been added to your shopping cart!'
+            components={{ 0: <strong /> }}
+            values={{ name: items[items.length - 1]?.product.name }}
+          />
+        </MessageSnackbar>
+      )}
     </>
   )
 }

package/components/AddProductsToCart/index.ts

@@ -3,4 +3,5 @@ export * from './AddProductsToCartButton'
 export * from './AddProductsToCartError'
 export * from './AddProductsToCartForm'
 export * from './AddProductsToCartQuantity'
-export * from './AddProductsToCartSnackbar'
+export * from './useFormAddProductsToCart'
+export * from './AddProductsToCartFab'

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -0,0 +1,40 @@
+import { useEventCallback } from '@mui/material'
+import { useMemo } from 'react'
+import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+
+export type UseAddProductsToCartActionProps = {
+  sku: string | null | undefined
+  index?: number
+  disabled?: boolean
+  loading?: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export type UseAddProductsToCartActionReturn = {
+  disabled: boolean
+  loading: boolean
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  onMouseDown: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export function useAddProductsToCartAction(
+  props: UseAddProductsToCartActionProps,
+): UseAddProductsToCartActionReturn {
+  const { formState, setValue, getValues } = useFormAddProductsToCart()
+  const { sku, index = 0, onClick: onClickIncomming, disabled, loading } = props
+
+  return {
+    disabled: Boolean(formState.errors.cartItems?.[index].sku?.message || disabled),
+    loading: loading || (formState.isSubmitting && getValues(`cartItems.${index}.sku`) === sku),
+    onClick: useEventCallback((e) => {
+      e.stopPropagation()
+      if (formState.isSubmitting) return
+      if (process.env.NODE_ENV !== 'production') {
+        if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
+      }
+      setValue(`cartItems.${index}.sku`, sku ?? '')
+      onClickIncomming?.(e)
+    }),
+    onMouseDown: useEventCallback((e) => e.stopPropagation()),
+  }
+}

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -0,0 +1,30 @@
+import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
+import { createContext, useContext } from 'react'
+import {
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables,
+} from './AddProductsToCart.gql'
+
+export type RedirectType = 'added' | 'cart' | 'checkout' | undefined
+
+export type AddProductsToCartContextType = { redirect: RedirectType } & UseFormGqlMutationReturn<
+  AddProductsToCartMutation,
+  AddProductsToCartMutationVariables
+>
+
+export const AddProductsToCartContext = createContext(
+  undefined as AddProductsToCartContextType | undefined,
+)
+
+export function useFormAddProductsToCart(optional: true): AddProductsToCartContextType | undefined
+export function useFormAddProductsToCart(optional?: false): AddProductsToCartContextType
+export function useFormAddProductsToCart(optional = false) {
+  const context = useContext(AddProductsToCartContext)
+
+  if (!optional && typeof context === 'undefined') {
+    throw Error(
+      'useFormAddProductsToCart must be used within a AddProductsToCartForm or provide the optional=true argument',
+    )
+  }
+  return context
+}

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,5 +1,6 @@
 import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { filterNonNullableKeys, RenderType, TypeRenderer } from '@graphcommerce/next-ui'
+import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductCustomizableFragment } from './ProductCustomizable.gql'
 
@@ -10,7 +11,9 @@ type OptionTypeRenderer = TypeRenderer<
   }
 >
 
-const CustomizableAreaOption: OptionTypeRenderer['CustomizableAreaOption'] = (props) => {
+const CustomizableAreaOption = React.memo<
+  React.ComponentProps<OptionTypeRenderer['CustomizableAreaOption']>
+>((props) => {
   const { uid, areaValue, required, optionIndex, index, title } = props
   const maxLength = areaValue?.max_characters ?? undefined
   const { control, register } = useFormAddProductsToCart()
@@ -34,9 +37,11 @@ const CustomizableAreaOption: OptionTypeRenderer['CustomizableAreaOption'] = (pr
       />
     </>
   )
-}
+})
 
-const CustomizableDropDownOption: OptionTypeRenderer['CustomizableDropDownOption'] = (props) => {
+const CustomizableDropDownOption = React.memo<
+  React.ComponentProps<OptionTypeRenderer['CustomizableDropDownOption']>
+>((props) => {
   const { uid, required, optionIndex, index, title, dropdownValue } = props
   const { control, register } = useFormAddProductsToCart()
 
@@ -52,6 +57,7 @@ const CustomizableDropDownOption: OptionTypeRenderer['CustomizableDropDownOption
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
         label={title}
         required={Boolean(required)}
+        defaultValue=''
         options={filterNonNullableKeys(dropdownValue, ['title']).map((option) => ({
           id: option.uid,
           label: option.title,
@@ -59,7 +65,7 @@ const CustomizableDropDownOption: OptionTypeRenderer['CustomizableDropDownOption
       />
     </>
   )
-}
+})
 
 const renderer: OptionTypeRenderer = {
   CustomizableAreaOption,
@@ -84,7 +90,7 @@ export function ProductCustomizable(props: ProductCustomizableProps) {
           key={option.uid}
           renderer={renderer}
           {...option}
-          optionIndex={option.sort_order - 1}
+          optionIndex={option.sort_order + 100}
           index={index}
         />
       ))}

package/components/ProductListItem/ProductListItem.tsx

@@ -6,7 +6,16 @@ import {
   breakpointVal,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { ButtonBase, Typography, Box, styled, SxProps, Theme } from '@mui/material'
+import {
+  ButtonBase,
+  Typography,
+  Box,
+  styled,
+  SxProps,
+  Theme,
+  ButtonBaseProps,
+  useEventCallback,
+} from '@mui/material'
 import PageLink from 'next/link'
 import React, { PropsWithChildren } from 'react'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
@@ -40,16 +49,15 @@ type StyleProps = {
   imageOnly?: boolean
 }
 
-type BaseProps = PropsWithChildren<
-  { subTitle?: React.ReactNode } & StyleProps &
-    OverlayAreas &
-    ProductListItemFragment &
-    Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
->
+type BaseProps = { subTitle?: React.ReactNode; children?: React.ReactNode } & StyleProps &
+  OverlayAreas &
+  ProductListItemFragment &
+  Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 
 export type ProductListItemProps = BaseProps & {
   sx?: SxProps<Theme>
   titleComponent?: React.ElementType
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, item: ProductListItemFragment) => void
 }
 
 const StyledImage = styled(Image)({})
@@ -72,8 +80,13 @@ export function ProductListItem(props: ProductListItemProps) {
     aspectRatio = [4, 3],
     titleComponent = 'h2',
     sx = [],
+    onClick,
   } = props
 
+  const handleClick = useEventCallback((e: React.MouseEvent<HTMLAnchorElement>) =>
+    onClick?.(e, props),
+  )
+
   const productLink = useProductLink(props)
   const discount = Math.floor(price_range.minimum_price.discount?.percent_off ?? 0)
 
@@ -98,6 +111,7 @@ export function ProductListItem(props: ProductListItemProps) {
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
         className={classes.root}
+        onClick={onClick ? handleClick : undefined}
       >
         <Box
           sx={(theme) => ({

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -12,12 +12,19 @@ export type ProductItemsGridProps = {
   renderers: ProductListItemRenderer
   loadingEager?: number
   size?: 'normal' | 'small'
-  titleComponent?: React.ElementType
   sx?: BoxProps['sx']
-}
+} & Pick<ProductListItemProps, 'onClick' | 'titleComponent'>
 
 export function ProductListItemsBase(props: ProductItemsGridProps) {
-  const { items, sx = [], renderers, loadingEager = 0, size = 'normal', titleComponent } = props
+  const {
+    items,
+    sx = [],
+    renderers,
+    loadingEager = 0,
+    size = 'normal',
+    titleComponent,
+    onClick,
+  } = props
 
   return (
     <Box
@@ -41,14 +48,15 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
           <RenderType
             key={item.uid ?? ''}
             renderer={renderers}
-            {...item}
-            loading={loadingEager > idx ? 'eager' : 'lazy'}
             sizes={
               size === 'small'
                 ? { 0: '100vw', 354: '50vw', 675: '30vw', 1255: '23vw', 1500: '337px' }
                 : { 0: '100vw', 367: '48vw', 994: '30vw', 1590: '23vw', 1920: '443px' }
             }
+            {...item}
+            loading={loadingEager > idx ? 'eager' : 'lazy'}
             titleComponent={titleComponent}
+            onClick={onClick}
             noReport
           />
         ) : null,

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -5,38 +5,36 @@ import PageLink from 'next/link'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
 import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
-type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & BreadcrumbsProps
+type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & Omit<BreadcrumbsProps, 'children'>
 
 export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
-  const { categories, name } = props
+  const { categories, name, ...breadcrumbProps } = 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}
+    <Breadcrumbs {...breadcrumbProps}>
+      <PageLink href='/' passHref>
+        <Link underline='hover' color='inherit'>
+          <Trans id='Home' />
         </Link>
-        <Typography color='text.primary'>{name}</Typography>
-      </Breadcrumbs>
-    </Container>
+      </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>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.3",
-    "@graphcommerce/framer-scroller": "2.1.40",
-    "@graphcommerce/framer-next-pages": "3.3.1",
-    "@graphcommerce/graphql": "3.4.8",
+    "@graphcommerce/ecommerce-ui": "1.5.5",
+    "@graphcommerce/framer-scroller": "2.1.42",
+    "@graphcommerce/framer-next-pages": "3.3.2",
+    "@graphcommerce/graphql": "3.5.0",
     "@graphcommerce/graphql-mesh": "4.2.0",
-    "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.7",
-    "@graphcommerce/magento-store": "4.3.1",
-    "@graphcommerce/next-ui": "4.28.0",
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/magento-cart": "4.9.1",
+    "@graphcommerce/magento-store": "4.3.3",
+    "@graphcommerce/next-ui": "4.29.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {