@graphcommerce/magento-cart 9.1.0-canary.54 → 9.1.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`cf44b1f`](https://github.com/graphcommerce-org/graphcommerce/commit/cf44b1f723b7f2073a21abd6821768427cb95315) - Added hideTotals to MultiCartStartCheckout ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`af4463d`](https://github.com/graphcommerce-org/graphcommerce/commit/af4463dcbc6903241c8804ffba2f43b2b8e1a00b) - When running a cart mutation and the cartId is already passed to the form we use that value instead of retrieving the current cart again. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`415f9fb`](https://github.com/graphcommerce-org/graphcommerce/commit/415f9fb50454fb20cb533235969dd9ab4ffc134b) - Allow setting the cartId in the form for useFormGqlMutationCart by setting the cartId in the form AND allow setting the cartId for a whole context by wrapping with CartIdProvider ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`4e3f3f2`](https://github.com/graphcommerce-org/graphcommerce/commit/4e3f3f2df58638ba8ffc68ee9f274cdd6c45d6d4) - Allow setting the redirect value in the AddProductsToCartForm as a form value. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`af4463d`](https://github.com/graphcommerce-org/graphcommerce/commit/af4463dcbc6903241c8804ffba2f43b2b8e1a00b) - Solve issue where if the onBeforeSubmit would return false, it would still error if submitted while the cart is locked. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`1a06135`](https://github.com/graphcommerce-org/graphcommerce/commit/1a061357f4ccb430dd13194f755815474e140520) - Allow awaitable async requests for onStart on checkout button ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/components/CartIdContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+export const CartIdContext = createContext<string | null>(null)
+
+/**
+ * By default we use the currently selected cartId.
+ *
+ * However in a MultiCart scenario we need to be able to switch the cartId in certain contexts.
+ */
+export function CartIdProvider(props: {
+  children: React.ReactNode
+  cartId: string | null | undefined
+}) {
+  const { children, cartId } = props
+  return <CartIdContext.Provider value={cartId ?? null}>{children}</CartIdContext.Provider>
+}
+
+export function useCartIdContext() {
+  return useContext(CartIdContext)
+}

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,8 +1,9 @@
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import type { ButtonProps, SxProps, Theme } from '@mui/material'
-import { Box, Button, Link } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
@@ -12,11 +13,12 @@ export type CartStartCheckoutProps = {
   sx?: SxProps<Theme>
   buttonProps?: ButtonProps<'button'>
   disabled?: boolean
+  hideTotal?: boolean
   cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
-    e: React.MouseEvent<HTMLButtonElement>,
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     cart: CartStartCheckoutFragment | null | undefined,
-  ) => void
+  ) => Promise<void>
 }
 
 const name = 'CartStartCheckout'
@@ -35,6 +37,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     onStart,
     buttonProps: { onClick, ...buttonProps } = {},
     disabled,
+    hideTotal = false,
     sx = [],
     cart,
   } = props
@@ -70,10 +73,9 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         size='large'
         className={classes.checkoutButton}
         endIcon={<IconSvg src={iconChevronRight} />}
-        onClick={(e) => {
+        onClick={async (e) => {
           onClick?.(e)
-          onStart?.(e, cart)
-          return onClick?.(e)
+          await onStart?.(e, cart)
         }}
         disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
         {...buttonProps}
@@ -88,7 +90,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         >
           <Trans>Start Checkout</Trans>
         </Box>{' '}
-        {hasTotals && (
+        {hasTotals && !hideTotal && (
           <span className={classes.checkoutMoney}>
             <Money {...cart?.prices?.grand_total} />
           </span>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -1,5 +1,5 @@
 import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
-import { iconChevronRight, IconSvg, LinkOrButton } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, LinkOrButton, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
@@ -8,13 +8,12 @@ import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode
-  sx?: SxProps<Theme>
   disabled?: boolean
   cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
     e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement>,
     cart: CartStartCheckoutFragment | null | undefined,
-  ) => void
+  ) => Promise<void>
   linkOrButtonProps?: LinkOrButtonProps
 }
 
@@ -24,6 +23,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
     cart,
+    children,
   } = props
 
   const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
@@ -34,11 +34,11 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
   return (
     <LinkOrButton
       href='/checkout'
-      onClick={(
+      onClick={async (
         e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement, MouseEvent>,
       ) => {
         onClick?.(e)
-        onStart?.(e, cart)
+        await onStart?.(e, cart)
       }}
       button={{ variant: 'pill', ...button }}
       disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
@@ -46,7 +46,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
       endIcon={<IconSvg src={iconChevronRight} />}
       {...linkOrButtonProps}
     >
-      <Trans id='Next' />
+      {children ?? <Trans id='Next' />}
     </LinkOrButton>
   )
 }

package/components/EmptyCart/EmptyCart.tsx

@@ -1,8 +1,12 @@
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
-import { FullPageMessage, iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
+import {
+  FullPageMessage,
+  iconShoppingBag,
+  IconSvg,
+  OverlayCloseButton,
+} from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
-import { Button } from '@mui/material'
 import React from 'react'
 
 export type EmptyCartProps = {
@@ -19,9 +23,9 @@ export function EmptyCart(props: EmptyCartProps) {
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         button || (
-          <Button href='/' variant='pill' color='secondary' size='large'>
-            <Trans id='Continue shopping' />
-          </Button>
+          <OverlayCloseButton variant='pill' color='secondary' size='large'>
+            <Trans id='Continue shopping'>Continue shopping</Trans>
+          </OverlayCloseButton>
         )
       }
       {...rest}

package/components/index.ts

@@ -5,11 +5,12 @@ export * from './CartAddressSingleLine/CartAddressSingleLine'
 export * from './CartAgreementsForm/CartAgreements.gql'
 export * from './CartAgreementsForm/CartAgreementsForm'
 export * from './CartFab/CartFab'
+export * from './CartIdContext'
 export * from './CartItemSummary/CartItemSummary'
 export * from './CartStartCheckout'
 export * from './CartSummary/CartSummary'
 export * from './CartSummary/CartSummary.gql'
 export * from './CartTotals/CartTotals'
+export * from './EditBillingAddressForm/EditBillingAddressForm'
 export * from './EmptyCart/EmptyCart'
 export * from './InlineAccount/InlineAccount'
-export * from './EditBillingAddressForm/EditBillingAddressForm'

package/hooks/useFormGqlMutationCart.ts

@@ -6,6 +6,7 @@ import type {
 } from '@graphcommerce/react-hook-form'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { GraphQLError, Kind } from 'graphql'
+import { useCartIdContext } from '../components/CartIdContext'
 import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useCartIdCreate } from './useCartIdCreate'
@@ -19,7 +20,8 @@ export function useFormGqlMutationCart<
   options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
   operationOptions?: MutationHookOptions<Q, V>,
 ): UseFormGqlMutationReturn<Q, V> {
-  const cartId = useCartIdCreate()
+  const cartIdCreate = useCartIdCreate()
+  const cartIdFromContext = useCartIdContext()
   const client = useApolloClient()
   const shouldLoginToContinue = useCartShouldLoginToContinue()
 
@@ -34,20 +36,25 @@ export function useFormGqlMutationCart<
     document,
     {
       ...options,
-      onBeforeSubmit: async (variables) => {
-        if (shouldLoginToContinue && shouldBlockOperation) {
-          return false
-        }
-        const vars = { ...variables, cartId: await cartId() }
+      onBeforeSubmit: async (incoming) => {
+        const variables = options.onBeforeSubmit ? await options.onBeforeSubmit(incoming) : incoming
+        if (variables === false) return false
+        if (shouldLoginToContinue && shouldBlockOperation) return false
 
         const res = client.cache.readQuery({ query: CurrentCartIdDocument })
-        if (!options.submitWhileLocked && res?.currentCartId?.locked) {
-          throw Error('Could not submit form, cart is locked')
-          // console.log('Could not submit form, cart is locked', res.currentCartId.locked)
-          // return false
+        const cartId = cartIdFromContext ?? incoming.cartId ?? (await cartIdCreate())
+
+        if (
+          cartId === res?.currentCartId?.id &&
+          res?.currentCartId?.locked &&
+          !options.submitWhileLocked
+        ) {
+          throw Error(
+            'Could not submit form, cart is locked. This is a bug. You may never submit a form while the cart is locked.',
+          )
         }
 
-        return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
+        return { ...variables, cartId }
       },
     },
     { errorPolicy: 'all', ...operationOptions },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "9.1.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.54",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.54",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.54",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.54",
-    "@graphcommerce/graphql": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.54",
-    "@graphcommerce/magento-graphql": "^9.1.0-canary.54",
-    "@graphcommerce/magento-store": "^9.1.0-canary.54",
-    "@graphcommerce/next-ui": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
+    "@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/framer-utils": "^9.1.0-canary.55",
+    "@graphcommerce/graphql": "^9.1.0-canary.55",
+    "@graphcommerce/image": "^9.1.0-canary.55",
+    "@graphcommerce/magento-customer": "^9.1.0-canary.55",
+    "@graphcommerce/magento-graphql": "^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/react-hook-form": "^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",