@graphcommerce/magento-cart-payment-method 3.0.7 → 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/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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

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()

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('___') ?? ['']
@@ -142,6 +148,9 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
                 >
                   {methods?.map((pm) => {
                     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,9 +1,11 @@
 import { useCurrentCartId } from '@graphcommerce/magento-cart'
 import { useUrlQuery } from '@graphcommerce/next-ui'
+import { useState } from 'react'
 
 export type CartLockState = {
-  cart_id?: string
-  locked?: string
+  cart_id: string | null
+  locked: string | null
+  method: string | null
 }
 
 /**
@@ -12,15 +14,31 @@ export type CartLockState = {
  *
  * Todo: Block all operations on the cart while the cart is being blocked.
  */
-export function useCartLock<E extends Record<string, string | undefined>>() {
+export function useCartLock<E extends CartLockState>() {
   const currentCartId = useCurrentCartId()
+  const [justLocked, setJustLocked] = useState(false)
+  const [queryState, setRouterQuery] = useUrlQuery<E>()
 
-  const [queryState, setRouterQuery] = useUrlQuery<CartLockState & E>((params) => params)
-
-  const lock = (params: CartLockState & E) => {
+  const lock = (params: Omit<E, 'locked' | 'cart_id'>) => {
     if (!currentCartId) return
-    setRouterQuery({ locked: '1', cart_id: currentCartId, ...params })
+    setJustLocked(true)
+    setRouterQuery({
+      locked: '1',
+      cart_id: currentCartId,
+      ...params,
+    } as E)
+  }
+
+  const unlock = (params: Omit<E, 'locked' | 'cart_id' | 'method'>) => {
+    setRouterQuery({ cart_id: null, locked: null, method: null, ...params } as E)
+    return queryState
+  }
+
+  const resulting: Omit<E, 'locked'> & { locked: boolean; justLocked: boolean } = {
+    ...queryState,
+    locked: queryState.locked === '1',
+    justLocked,
   }
 
-  return [queryState, lock] as const
+  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.7",
+  "version": "3.1.0",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -22,13 +22,13 @@
     "type-fest": "2.12.1"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.4",
+    "@graphcommerce/framer-scroller": "2.1.5",
     "@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"
+    "@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",

package/test/goToPayment.ts

@@ -7,9 +7,8 @@ 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()
+  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()

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