@graphcommerce/magento-product 4.7.1 → 4.7.3

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,29 @@
 # Change Log
 
+## 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
+
+- Updated dependencies [[`fc32b9ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/fc32b9ab3818eb99c546a89e7f42045a6fbfba81)]:
+  - @graphcommerce/ecommerce-ui@1.5.3
+  - @graphcommerce/magento-cart@4.8.7
+
 ## 4.7.1
 
 ### Patch Changes

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,16 +1,23 @@
 import { UseFormGqlMutationReturn, 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 { useRouter } from 'next/router'
+import { createContext, useContext, useEffect } from 'react'
 import {
   AddProductsToCartDocument,
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
 
+type RedirectType = 'added' | 'cart' | 'checkout' | undefined
+
+type AddProductsToCartFormState = AddProductsToCartMutationVariables & {
+  redirect?: RedirectType
+}
+
 type AddProductsToCartContextType = UseFormGqlMutationReturn<
   AddProductsToCartMutation,
-  AddProductsToCartMutationVariables
+  AddProductsToCartFormState
 >
 
 export const addProductsToCartContext = createContext(
@@ -20,29 +27,57 @@ export const addProductsToCartContext = createContext(
 type AddProductsToCartFormProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
+  redirect?: RedirectType
 } & Omit<
-  UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartMutationVariables>,
+  UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFormState>,
   'onBeforeSubmit'
 >
 
 export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
-  const { children, defaultValues, sx, ...formProps } = props
-  const form = useFormGqlMutationCart(AddProductsToCartDocument, {
-    defaultValues,
+  const { children, defaultValues, redirect, onComplete, sx, ...formProps } = props
+  const router = useRouter()
+
+  const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFormState>(
+    AddProductsToCartDocument,
+    {
+      defaultValues: {
+        ...defaultValues,
+        redirect,
+      },
+
+      // 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),
+          })),
+      }),
+      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' })
+      },
+      ...formProps,
+    },
+  )
 
-    // 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),
-        })),
-    }),
-    ...formProps,
-  })
+  // When the value changes, update the value in the form
+  useEffect(() => {
+    if (form.getValues('redirect') !== redirect) form.setValue('redirect', redirect)
+  }, [form, redirect])
 
   const submit = form.handleSubmit(() => {})
 

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -14,7 +14,14 @@ type AddToCartMessageProps = { name?: string | null }
 
 export function AddProductsToCartSnackbar(props: AddToCartMessageProps) {
   const { name } = props
-  const { formState, error, data } = useFormAddProductsToCart()
+  const { formState, error, data, getValues } = useFormAddProductsToCart()
+
+  const showSuccess =
+    !formState.isSubmitting &&
+    formState.isSubmitSuccessful &&
+    !error?.message &&
+    !data?.addProductsToCart?.user_errors?.length &&
+    !getValues('redirect')
 
   return (
     <>
@@ -34,12 +41,7 @@ export function AddProductsToCartSnackbar(props: AddToCartMessageProps) {
       </ErrorSnackbar>
 
       <MessageSnackbar
-        open={
-          !formState.isSubmitting &&
-          formState.isSubmitSuccessful &&
-          !error?.message &&
-          !data?.addProductsToCart?.user_errors?.length
-        }
+        open={showSuccess}
         variant='pill'
         action={
           <PageLink href='/cart' passHref>

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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.2",
-    "@graphcommerce/framer-scroller": "2.1.40",
-    "@graphcommerce/framer-next-pages": "3.3.1",
-    "@graphcommerce/graphql": "3.4.8",
+    "@graphcommerce/ecommerce-ui": "1.5.4",
+    "@graphcommerce/framer-scroller": "2.1.41",
+    "@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.6",
-    "@graphcommerce/magento-store": "4.3.1",
-    "@graphcommerce/next-ui": "4.28.0",
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/magento-cart": "4.9.0",
+    "@graphcommerce/magento-store": "4.3.2",
+    "@graphcommerce/next-ui": "4.28.1",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {