@graphcommerce/magento-cart-payment-method 3.0.5 → 3.0.6

package/Api/PaymentMethodContext.graphql

@@ -1,4 +1,5 @@
-fragment PaymentMethodContext on Cart @injectable {
+fragment PaymentMethodContext on Cart @injectable @inject(into: ["ShippingMethodSelected"]) {
+  id
   available_payment_methods {
     ...AvailablePaymentMethod
   }

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 3.0.6
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+* [#1368](https://github.com/graphcommerce-org/graphcommerce/pull/1368) [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a) Thanks [@paales](https://github.com/paales)! - Fix issue where the cart couldn't be properly restored when a payment was cancelled
+
+* Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
+  - @graphcommerce/graphql@3.0.6
+  - @graphcommerce/next-ui@4.5.0
+  - @graphcommerce/framer-scroller@2.1.3
+  - @graphcommerce/image@3.1.2
+  - @graphcommerce/magento-cart@4.2.2
+  - @graphcommerce/magento-store@4.1.4
+  - @graphcommerce/react-hook-form@3.0.6
+
 ## 3.0.5
 
 ### Patch Changes

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -1,4 +1,4 @@
-import { ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
+import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
 import { LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
 import { ComposedSubmit, ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
@@ -11,19 +11,17 @@ function PaymentMethodButtonRenderer(
   const { buttonProps, error, buttonState, submit } = props
   const { selectedMethod, selectedModule } = usePaymentMethodContext()
 
-  const btnProps = { ...buttonProps, name: 'placeOrder' }
-
   const PaymentButton = selectedModule?.PaymentButton
 
   return (
     <>
       {!PaymentButton || !selectedMethod?.code ? (
         <LinkOrButton
-          {...btnProps}
+          {...buttonProps}
           onClick={submit}
           loading={buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error)}
         >
-          {btnProps.children}
+          {buttonProps.children}
           {selectedMethod?.title && (
             <>
               {' '}
@@ -35,7 +33,7 @@ function PaymentMethodButtonRenderer(
         <PaymentButton
           {...selectedMethod}
           buttonProps={{
-            ...btnProps,
+            ...buttonProps,
             onClick: submit,
             loading: buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error),
           }}
@@ -65,7 +63,7 @@ export function PaymentMethodButton(props: PaymentMethodButtonProps) {
         ) : (
           <>
             {button}
-            <ApolloCartErrorAlert key='error' error={errorVal} />
+            <ApolloCartErrorSnackbar key='error' error={errorVal} />
           </>
         )
       }}

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -23,7 +23,7 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
     if (!data?.placeOrder?.order || error || !cartId) return
     clearCurrentCartId()
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    push({ pathname: '/checkout/success', query: { cartId } })
+    push({ pathname: '/checkout/success', query: { cart_id: cartId } })
   }, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, push])
 
   const submit = handleSubmit(() => {})

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -141,7 +141,7 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
                   }}
                 >
                   {methods?.map((pm) => {
-                    const buttonValue = `${pm.code}___${pm.child}`
+                    const buttonValue = pm.child ? `${pm.code}___${pm.child}` : pm.code
                     return (
                       <ToggleButton
                         name={name}

package/hooks/useCartLock.ts

@@ -1,7 +1,10 @@
-import { useApolloClient } from '@graphcommerce/graphql'
-import { useCartQuery, useCurrentCartId } from '@graphcommerce/magento-cart'
-import { useCallback } from 'react'
-import { UseCartLockDocument } from './UseCartLock.gql'
+import { useCurrentCartId } from '@graphcommerce/magento-cart'
+import { useUrlQuery } from '@graphcommerce/next-ui'
+
+export type CartLockState = {
+  cart_id?: string
+  locked?: string
+}
 
 /**
  * Locking a cart might is usefull in the following cases: We want to disable cart modifications
@@ -9,25 +12,15 @@ import { UseCartLockDocument } from './UseCartLock.gql'
  *
  * Todo: Block all operations on the cart while the cart is being blocked.
  */
-export function useCartLock() {
-  const { cache } = useApolloClient()
-  const cartId = useCurrentCartId()
-
-  const locked = useCartQuery(UseCartLockDocument, { allowUrl: true }).data?.cart?.locked ?? false
+export function useCartLock<E extends Record<string, string | undefined>>() {
+  const currentCartId = useCurrentCartId()
 
-  const lock = useCallback(
-    (locking: boolean) => {
-      if (!cartId) return
+  const [queryState, setRouterQuery] = useUrlQuery<CartLockState & E>((params) => params)
 
-      cache.writeQuery({
-        query: UseCartLockDocument,
-        data: { cart: { __typename: 'Cart', id: cartId, locked: locking } },
-        variables: { cartId },
-        broadcast: true,
-      })
-    },
-    [cache, cartId],
-  )
+  const lock = (params: CartLockState & E) => {
+    if (!currentCartId) return
+    setRouterQuery({ locked: '1', cart_id: currentCartId, ...params })
+  }
 
-  return { locked, lock }
+  return [queryState, lock] as const
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,20 +15,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2"
+    "@playwright/test": "^1.20.1",
+    "type-fest": "2.12.1"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "^2.0.6",
-    "@graphcommerce/graphql": "^3.0.4",
-    "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/magento-cart": "^4.1.4",
-    "@graphcommerce/magento-store": "^4.1.2",
-    "@graphcommerce/next-ui": "^4.2.4",
-    "@graphcommerce/react-hook-form": "^3.0.4",
-    "type-fest": "^2.12.0"
+    "@graphcommerce/framer-scroller": "^2.1.3",
+    "@graphcommerce/graphql": "^3.0.6",
+    "@graphcommerce/image": "^3.1.2",
+    "@graphcommerce/magento-cart": "^4.2.2",
+    "@graphcommerce/magento-store": "^4.1.4",
+    "@graphcommerce/next-ui": "^4.5.0",
+    "@graphcommerce/react-hook-form": "^3.0.6"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",

package/test/goToPayment.ts

@@ -0,0 +1,25 @@
+import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import { fillShippingAddressForm } from '@graphcommerce/magento-cart-shipping-address/test/fillShippingAddressForm'
+import { fillCartAgreementsForm } from '@graphcommerce/magento-cart/test/fillCartAgreementsForm'
+import { Page } from '@playwright/test'
+
+export const goToPayment = async (
+  page: Page,
+  apolloClient: ApolloClient<NormalizedCacheObject>,
+) => {
+  await page.locator('a:has-text("View shopping cart")').click()
+
+  await page.locator('text=Start Checkout').click()
+
+  const email = page.locator('input[name="email"]')
+  await email.click()
+  await email.fill('test@test.com')
+
+  await fillShippingAddressForm(page)
+
+  await page.click('button[value=flatrate-flatrate]')
+  await page.click('#next')
+
+  // Fill in the agreements
+  await fillCartAgreementsForm(page, apolloClient)
+}

package/hooks/UseCartLock.graphql

@@ -1,7 +0,0 @@
-query UseCartLock($cartId: String!) {
-  cart(cart_id: $cartId) @client {
-    __typename
-    id
-    locked
-  }
-}

package/hooks/UseCartLock.graphqls

@@ -1,7 +0,0 @@
-extend type Mutation {
-  lockCart(lock: Boolean): Boolean
-}
-
-extend type Cart {
-  locked: Boolean!
-}