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

package/Api/PaymentMethod.ts

@@ -19,6 +19,8 @@ export type PaymentButtonProps = PaymentMethod & { buttonProps: LinkOrButtonProp
 export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
 
 export type PaymentToggleProps = PaymentMethod
+export type PaymentHandlerProps = { code: string }
+
 export type ExpandPaymentMethods = (
   available: AvailablePaymentMethodFragment,
   context: PaymentMethodContextFragment,
@@ -32,7 +34,7 @@ export interface PaymentModule {
   PaymentButton?: React.VFC<PaymentButtonProps>
   PaymentToggle?: React.VFC<PaymentToggleProps>
   expandMethods?: ExpandPaymentMethods
-  PaymentHandler?: React.VFC
+  PaymentHandler?: React.VFC<PaymentHandlerProps>
 }
 
 export type PaymentMethodModules = { [code: string]: PaymentModule }

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,55 @@
 # Change Log
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`6ebe9d12d`](https://github.com/graphcommerce-org/graphcommerce/commit/6ebe9d12db9fcaa2af67a475e64a08d63e232b46) Thanks [@paales](https://github.com/paales)! - Added a `code` prop to the PaymentHandler so the handler can be reused by multiple methods without interfering.
+
+### Patch Changes
+
+- [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465) Thanks [@paales](https://github.com/paales)! - Removed unused trigger: onChange for useForm handler
+
+- Updated dependencies [[`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480), [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465), [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8), [`104abd14e`](https://github.com/graphcommerce-org/graphcommerce/commit/104abd14e1585ef0d8de77937d25156b8fa1e201), [`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823), [`2a125b1f9`](https://github.com/graphcommerce-org/graphcommerce/commit/2a125b1f98bb9272d96c3577f21d6c984caad892), [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b)]:
+  - @graphcommerce/next-ui@4.6.0
+  - @graphcommerce/magento-cart@4.2.4
+  - @graphcommerce/react-hook-form@3.1.0
+  - @graphcommerce/image@3.1.4
+  - @graphcommerce/framer-scroller@2.1.5
+  - @graphcommerce/magento-store@4.1.6
+
+## 3.0.7
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
+
+- Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5), [`22ff9df16`](https://github.com/graphcommerce-org/graphcommerce/commit/22ff9df1677742ae8e07d9b7e5b12fbb487580dc)]:
+  - @graphcommerce/framer-scroller@2.1.4
+  - @graphcommerce/graphql@3.0.7
+  - @graphcommerce/image@3.1.3
+  - @graphcommerce/magento-cart@4.2.3
+  - @graphcommerce/magento-store@4.1.5
+  - @graphcommerce/next-ui@4.5.1
+  - @graphcommerce/react-hook-form@3.0.7
+
+## 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/PaymentMethodContext/PaymentMethodContext.tsx

@@ -20,7 +20,7 @@ const paymentMethodContext = React.createContext<PaymentMethodContextProps>({
 })
 paymentMethodContext.displayName = 'PaymentMethodContext'
 
-type PaymentMethodContextProviderProps = PropsWithChildren<{ modules: PaymentMethodModules }>
+export type PaymentMethodContextProviderProps = PropsWithChildren<{ modules: PaymentMethodModules }>
 
 export function PaymentMethodContextProvider(props: PaymentMethodContextProviderProps) {
   const { modules, children } = props
@@ -32,36 +32,28 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
   const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>()
   const [selectedModule, setSelectedModule] = useState<PaymentModule>()
 
+  const availableMethods = useMemo(() => {
+    const allMethods = cartContext?.available_payment_methods ?? []
+    const free = allMethods.find((method) => method?.code === 'free')
+
+    return free ? [free] : allMethods
+  }, [cartContext?.available_payment_methods])
+
   // Expand the payment methods
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    if (!cartContext) return // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      if (!cartContext) return
-
-      const freeMethod = cartContext.available_payment_methods?.find(
-        (method) => method?.code === 'free',
+      const promises = availableMethods.map(async (method) =>
+        method
+          ? modules[method.code]?.expandMethods?.(method, cartContext) ?? [{ ...method, child: '' }]
+          : Promise.resolve([]),
       )
 
-      const promises =
-        [...(freeMethod ? [freeMethod] : cartContext.available_payment_methods ?? [])].map(
-          async (method) =>
-            method
-              ? modules?.[method.code]?.expandMethods?.(method, cartContext) ?? [
-                  { ...method, child: '' },
-                ]
-              : Promise.resolve([]),
-        ) ?? []
-
       const loaded = (await Promise.all(promises)).flat(1).sort((a) => (a.preferred ? 1 : 0))
-      const sortedMethods = loaded.sort((a, b) => {
-        if (!modules?.[a?.code]) return 0
-        if (!modules?.[b?.code]) return -1
-        return 1
-      })
 
-      setMethods(sortedMethods)
+      setMethods(loaded)
     })()
-  }, [cartContext, modules])
+  }, [availableMethods, cartContext, modules])
 
   const value = useMemo(
     () => ({
@@ -77,11 +69,9 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
 
   return (
     <paymentMethodContext.Provider value={value}>
-      {Object.entries(modules).map(([method, module]) => {
-        const { PaymentHandler } = module
-        if (!PaymentHandler) return null
-        return <PaymentHandler key={method} />
-      })}
+      {Object.entries(modules).map(([code, module]) =>
+        module.PaymentHandler ? <module.PaymentHandler key={code} code={code} /> : null,
+      )}
       {children}
     </paymentMethodContext.Provider>
   )

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -14,7 +14,7 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
   const clearCurrentCartId = useClearCurrentCartId()
 
   const cartId = useCurrentCartId()
-  const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, { mode: 'onChange' })
+  const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument)
 
   const { handleSubmit, data, error } = form
   const { push } = useRouter()
@@ -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

@@ -16,10 +16,11 @@ import {
   UseFormComposeOptions,
   useFormPersist,
 } from '@graphcommerce/react-hook-form'
-import { t } from '@lingui/macro'
+import { select, t } from '@lingui/macro'
 import { Box, FormControl, FormHelperText, SxProps, Theme } from '@mui/material'
 import { useEffect } from 'react'
 import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { useCartLock } from '../hooks/useCartLock'
 
 export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'> & {
   sx?: SxProps<Theme>
@@ -52,10 +53,11 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
   const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
     usePaymentMethodContext()
 
-  const form = useForm<{ code: string; paymentMethod?: string }>({
-    mode: 'onChange',
-    defaultValues: { code: selectedMethod?.code },
+  const [lockState] = useCartLock()
+  const form = useForm<{ code: string | null; paymentMethod?: string }>({
+    defaultValues: { code: lockState.method },
   })
+
   useFormPersist({ form, name: 'PaymentMethodToggle' })
 
   const { control, handleSubmit, watch, register, setValue, formState } = form
@@ -64,6 +66,10 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
 
   useFormCompose({ form, step, submit: submitHandler, key: 'PaymentMethodToggles' })
 
+  useEffect(() => {
+    if (selectedMethod?.code) setValue('code', selectedMethod.code)
+  }, [selectedMethod?.code, setValue])
+
   const paymentMethod = watch('paymentMethod')
   useEffect(() => {
     const [code, child] = paymentMethod?.split('___') ?? ['']
@@ -141,7 +147,10 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
                   }}
                 >
                   {methods?.map((pm) => {
-                    const buttonValue = `${pm.code}___${pm.child}`
+                    const buttonValue = pm.child ? `${pm.code}___${pm.child}` : pm.code
+
+                    if (process.env.NODE_ENV === 'production' && !modules?.[pm.code]) return null
+
                     return (
                       <ToggleButton
                         name={name}

package/hooks/useCartLock.ts

@@ -1,7 +1,12 @@
-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'
+import { useState } from 'react'
+
+export type CartLockState = {
+  cart_id: string | null
+  locked: string | null
+  method: string | null
+}
 
 /**
  * Locking a cart might is usefull in the following cases: We want to disable cart modifications
@@ -9,25 +14,31 @@ 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()
+export function useCartLock<E extends CartLockState>() {
+  const currentCartId = useCurrentCartId()
+  const [justLocked, setJustLocked] = useState(false)
+  const [queryState, setRouterQuery] = useUrlQuery<E>()
 
-  const locked = useCartQuery(UseCartLockDocument, { allowUrl: true }).data?.cart?.locked ?? false
+  const lock = (params: Omit<E, 'locked' | 'cart_id'>) => {
+    if (!currentCartId) return
+    setJustLocked(true)
+    setRouterQuery({
+      locked: '1',
+      cart_id: currentCartId,
+      ...params,
+    } as E)
+  }
 
-  const lock = useCallback(
-    (locking: boolean) => {
-      if (!cartId) return
+  const unlock = (params: Omit<E, 'locked' | 'cart_id' | 'method'>) => {
+    setRouterQuery({ cart_id: null, locked: null, method: null, ...params } as E)
+    return queryState
+  }
 
-      cache.writeQuery({
-        query: UseCartLockDocument,
-        data: { cart: { __typename: 'Cart', id: cartId, locked: locking } },
-        variables: { cartId },
-        broadcast: true,
-      })
-    },
-    [cache, cartId],
-  )
+  const resulting: Omit<E, 'locked'> & { locked: boolean; justLocked: boolean } = {
+    ...queryState,
+    locked: queryState.locked === '1',
+    justLocked,
+  }
 
-  return { locked, lock }
+  return [resulting, lock, unlock] 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.1.0",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,26 +15,26 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.4",
+    "@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.5",
+    "@graphcommerce/graphql": "3.0.7",
+    "@graphcommerce/image": "3.1.4",
+    "@graphcommerce/magento-cart": "4.2.4",
+    "@graphcommerce/magento-store": "4.1.6",
+    "@graphcommerce/next-ui": "4.6.0",
+    "@graphcommerce/react-hook-form": "3.1.0"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",
-    "@mui/material": "^5.4.1",
+    "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
-    "next": "^12.0.10",
+    "next": "12.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

package/test/goToPayment.ts

@@ -0,0 +1,24 @@
+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('#view-shopping-cart-button').click()
+  await page.locator('#cart-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/test/index.ts

@@ -0,0 +1,2 @@
+export * from './goToPayment'
+export * from './selectPaymentMethod'

package/test/selectPaymentMethod.ts

@@ -0,0 +1,8 @@
+import { Page } from '@playwright/test'
+
+export const selectPaymentMethod = async (page: Page, method: string) => {
+  const locator = page.locator(`button[value=${method}]`)
+  await locator.click()
+
+  return locator
+}

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!
-}