@graphcommerce/magento-product 9.1.0-canary.53 → 9.1.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`21686e3`](https://github.com/graphcommerce-org/graphcommerce/commit/21686e3dd5673de7ada5e1741e4b77e00aeaef48) - Forward the cart to AddProductsToCartSnackbarMessage ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.54
+
 ## 9.1.0-canary.53
 
 ## 9.1.0-canary.52

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -8,13 +8,17 @@ import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
-import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
-import { AddProductsToCartDocument } from './AddProductsToCart.gql'
-import type { AddProductsToCartSnackbarProps } from './AddProductsToCartSnackbar'
-import { AddProductsToCartSnackbar } from './AddProductsToCartSnackbar'
+import { AddProductsToCartDocument, type AddProductsToCartMutation } from './AddProductsToCart.gql'
+import {
+  AddProductsToCartSnackbar,
+  type AddProductsToCartSnackbarProps,
+} from './AddProductsToCartSnackbar'
 import { toUserErrors } from './toUserErrors'
-import type { AddProductsToCartFields, RedirectType } from './useFormAddProductsToCart'
-import { AddProductsToCartContext } from './useFormAddProductsToCart'
+import {
+  AddProductsToCartContext,
+  type AddProductsToCartFields,
+  type RedirectType,
+} from './useFormAddProductsToCart'
 
 export type AddProductsToCartFormProps = {
   children: React.ReactNode
@@ -37,24 +41,22 @@ const name = 'AddProductsToCartForm'
  * - Redirects the user to the cart/checkout/added page after successful submission.
  */
 export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
-  let { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
+  const { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
   const router = useRouter()
   const client = useApolloClient()
   const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
 
-  if (typeof redirect !== 'undefined' && redirect !== 'added' && router.pathname === redirect)
-    redirect = undefined
-
   const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFields>(
     AddProductsToCartDocument,
     {
       ...formProps,
+      defaultValues: { redirect },
       // 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
+        const { cartId, cartItems, ...rest } = variables2
 
         const requestData = {
           cartId,
@@ -85,11 +87,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
                 ],
               }),
             ),
+          ...rest,
         }
 
         const sku = requestData.cartItems[requestData.cartItems.length - 1]?.sku
 
-        if (sku && redirect === 'added') {
+        if (sku && requestData.redirect === 'added') {
           // Preload crosssells
           crosssellsQuery.current = client.query({
             query: CrosssellsDocument,
@@ -109,9 +112,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
           if (item.sku && !item.keep_sku) form.setValue(`cartItems.${index}.sku`, '')
         })
 
-        if (toUserErrors(result.data).length || result.errors?.length || !redirect) return
+        if (toUserErrors(result.data).length || result.errors?.length || !variables.redirect) return
 
-        if (redirect === 'added') {
+        if (variables.redirect === 'added') {
           await crosssellsQuery.current
           const method = router.pathname.startsWith('/checkout/added')
             ? router.replace
@@ -120,9 +123,11 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
             pathname: '/checkout/added',
             query: { sku: variables.cartItems.map((i) => i.sku) },
           })
-        } else {
-          await router.push({ pathname: redirect })
+        } else if (variables.redirect) {
+          await router.push({ pathname: variables.redirect })
         }
+
+        form.resetField('redirect', { defaultValue: redirect })
       },
     },
   )
@@ -130,9 +135,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
   const submit = form.handleSubmit(() => {})
 
   return (
-    <AddProductsToCartContext.Provider
-      value={useMemo(() => ({ ...form, redirect }), [form, redirect])}
-    >
+    <AddProductsToCartContext.Provider value={useMemo(() => ({ ...form }), [form])}>
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -1,6 +1,7 @@
-import { useFormState } from '@graphcommerce/ecommerce-ui'
+import { useFormState, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
 import { nonNullable } from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { AddProductsToCartSnackbarMessage } from './AddProductsToCartSnackbarMessage'
 import { findAddedItems } from './findAddedItems'
@@ -15,10 +16,14 @@ export type AddProductsToCartSnackbarProps = {
 
 export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
   const { errorSnackbar, successSnackbar, disableSuccessSnackbar } = props
-  const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
+  const { error, data, control, submittedVariables } = useFormAddProductsToCart()
+  const router = useRouter()
+  let redirect = useWatch({ control, name: 'redirect' })
 
-  const formState = useFormState({ control })
+  if (typeof redirect !== 'undefined' && redirect !== 'added' && router.pathname === redirect)
+    redirect = undefined
 
+  const formState = useFormState({ control })
   const userErrors = toUserErrors(data)
 
   const showSuccess =
@@ -42,6 +47,7 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
       addedItems={addedItems.map((item) => item.itemInCart?.product.name).filter(nonNullable)}
       errorSnackbar={errorSnackbar}
       successSnackbar={successSnackbar}
+      cart={data?.addProductsToCart?.cart}
     />
   )
 }

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -1,6 +1,9 @@
 import type { ApolloError } from '@graphcommerce/graphql'
 import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
-import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
+import {
+  ApolloCartErrorSnackbar,
+  type CartItemCountChangedFragment,
+} from '@graphcommerce/magento-cart'
 import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
 import {
   Button,
@@ -19,6 +22,7 @@ export type AddProductsToCartSnackbarMessageProps = {
   userErrors?: Pick<CartUserInputError, 'message'>[]
   showSuccess: boolean
   addedItems: string[]
+  cart?: CartItemCountChangedFragment | null | undefined
 }
 
 export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackbarMessageProps) {

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,11 +1,8 @@
 import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import type { CartItemInput } from '@graphcommerce/graphql-mesh'
 import { createContext, useContext } from 'react'
-import type { LiteralUnion, Simplify } from 'type-fest'
-import type {
-  AddProductsToCartMutation,
-  AddProductsToCartMutationVariables,
-} from './AddProductsToCart.gql'
+import type { LiteralUnion } from 'type-fest'
+import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
 
 export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
 
@@ -39,12 +36,14 @@ type Item = CartItemInput & {
   keep_sku?: boolean
 }
 
-export type AddProductsToCartFields = Omit<AddProductsToCartMutationVariables, 'cartItems'> & {
+export type AddProductsToCartFields = {
+  cartId: string
   cartItems: Item[]
+  redirect: RedirectType
 }
 
 /** https://react-hook-form.com/api/useform/watch/ */
-export type AddProductsToCartContextType = { redirect: RedirectType } & Omit<
+export type AddProductsToCartContextType = Omit<
   UseFormGqlMutationReturn<AddProductsToCartMutation, AddProductsToCartFields>,
   'formState' | 'watch'
 >

package/package.json

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