@graphcommerce/magento-cart-payment-method 8.1.0-canary.2 → 8.1.0-canary.20

package/Api/PaymentMethodContext.graphql

@@ -9,7 +9,7 @@ fragment PaymentMethodContext on Cart @injectable {
   prices {
     applied_taxes {
       amount {
-        value
+        ...Money
       }
     }
   }

package/CHANGELOG.md

@@ -1,6 +1,114 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+### Patch Changes
+
+- [#2277](https://github.com/graphcommerce-org/graphcommerce/pull/2277) [`f9199f7`](https://github.com/graphcommerce-org/graphcommerce/commit/f9199f798583138a68dd641ea6637375c487f29b) - Solve issue where Braintree wouldn't place the order after successfully validating a Credit Card.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+### Patch Changes
+
+- [`831d7cd`](https://github.com/graphcommerce-org/graphcommerce/commit/831d7cd64a40b7b58748fd9637199b88938e75b7) - Compatibility with Magento 2.4.7
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+### Patch Changes
+
+- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`d345474`](https://github.com/graphcommerce-org/graphcommerce/commit/d345474fb190d158629cd5fd5e68a78724fa2fb6) - Due to a cyclic dependency the actual PaymentMethodPlaceOrder button would sometimes be undefined.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Use the non resolved payment methods as a placeholder for the actual payment methods
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -7,17 +7,17 @@ import {
   ActionCardProps,
 } from '@graphcommerce/next-ui'
 import {
+  FormPersist,
   useForm,
   useFormCompose,
   UseFormComposeOptions,
-  useFormPersist,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
 import { useEffect } from 'react'
 import { PaymentOptionsProps } from '../Api/PaymentMethod'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { useCartLock } from '../hooks'
 
 function PaymentMethodActionCard(
@@ -84,7 +84,6 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
 
   const paymentMethod = watch('paymentMethod')
 
-  useFormPersist({ form, name: 'PaymentMethodActionCardList' })
   useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
 
   // todo: Do not useEffect to set value, usePaymentMethodContext should calculate these values.
@@ -109,21 +108,24 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
   if (!methods || methods.length < 1) return null
 
   return (
-    <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
-      control={control}
-      name='paymentMethod'
-      errorMessage={i18n._(/* i18n */ 'Please select a payment method')}
-      collapse
-      size='large'
-      color='secondary'
-      items={methods.map((method) => ({
-        ...method,
-        value: `${method.code}___${method.child}`,
-        step,
-        Container: FormDiv,
-        disabled: !modules?.[method.code ?? ''],
-      }))}
-      render={PaymentMethodActionCard}
-    />
+    <>
+      <FormPersist form={form} name='PaymentMethodActionCardList' />
+      <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
+        control={control}
+        name='paymentMethod'
+        errorMessage={i18n._(/* i18n */ 'Please select a payment method')}
+        collapse
+        size='large'
+        color='secondary'
+        items={methods.map((method) => ({
+          ...method,
+          value: `${method.code}___${method.child}`,
+          step,
+          Container: FormDiv,
+          disabled: !modules?.[method.code ?? ''],
+        }))}
+        render={PaymentMethodActionCard}
+      />
+    </>
   )
 }

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -5,7 +5,7 @@ import {
   ComposedSubmitProps,
   ComposedSubmitRenderComponentProps,
 } from '@graphcommerce/react-hook-form'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 
 export type PaymentMethodButtonProps = LinkOrButtonProps & { display?: 'inline' | 'block' } & Pick<
     ComposedSubmitProps,

package/PaymentMethodContext/PaymentMethodContext.tsx

@@ -1,8 +1,9 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { useCartQuery, useClearCurrentCartId } from '@graphcommerce/magento-cart'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
 import { useRouter } from 'next/router'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
   ExpandPaymentMethodsContext,
   PaymentMethod,
@@ -11,19 +12,7 @@ import {
 } from '../Api/PaymentMethod'
 import { PaymentMethodContextFragment } from '../Api/PaymentMethodContext.gql'
 import { GetPaymentMethodContextDocument } from './GetPaymentMethodContext.gql'
-
-type PaymentMethodContextProps = {
-  methods: PaymentMethod[]
-  selectedMethod?: PaymentMethod
-  setSelectedMethod: (method: PaymentMethod | undefined) => void
-  modules: PaymentMethodModules
-  selectedModule?: PaymentModule
-  setSelectedModule: (module: PaymentModule | undefined) => void
-  onSuccess: (orderNumber: string) => Promise<void>
-}
-
-const paymentMethodContext = React.createContext<PaymentMethodContextProps | undefined>(undefined)
-paymentMethodContext.displayName = 'PaymentMethodContext'
+import { PaymentMethodContextType, paymentMethodContext } from './paymentMethodContextType'
 
 export type PaymentMethodContextProviderProps = {
   modules?: PaymentMethodModules
@@ -54,7 +43,7 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
     [client, context?.data?.cart],
   )
 
-  const onSuccessCb: NonNullable<PaymentMethodContextProps['onSuccess']> = useEventCallback(
+  const onSuccessCb: NonNullable<PaymentMethodContextType['onSuccess']> = useEventCallback(
     async (orderNumber) => {
       await onSuccess?.(orderNumber, context.data?.cart)
       await push({
@@ -65,17 +54,20 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
     },
   )
 
-  const [methods, setMethods] = useState<PaymentMethod[]>([])
   const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>()
   const [selectedModule, setSelectedModule] = useState<PaymentModule>()
 
   const availableMethods = useMemo(() => {
-    const allMethods = cartContext?.available_payment_methods ?? []
+    const allMethods = filterNonNullableKeys(cartContext?.available_payment_methods)
     const free = allMethods.find((method) => method?.code === 'free')
 
     return free ? [free] : allMethods
   }, [cartContext?.available_payment_methods])
 
+  const [methods, setMethods] = useState<PaymentMethod[]>(
+    availableMethods.map((m) => ({ ...m, code: `${m.code}_placeholder`, child: '' })),
+  )
+
   // Expand the payment methods
   useEffect(() => {
     if (!cartContext) return // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -113,16 +105,3 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
     </paymentMethodContext.Provider>
   )
 }
-
-export function usePaymentMethodContext(optional: true): PaymentMethodContextProps | undefined
-export function usePaymentMethodContext(optional?: false): PaymentMethodContextProps
-export function usePaymentMethodContext(optional = false) {
-  const context = useContext(paymentMethodContext)
-  if (!optional && typeof context === 'undefined') {
-    throw Error(
-      'usePaymentMethodContext must be used within a PaymentMethodContextProvider or provide the optional=true argument',
-    )
-  }
-
-  return useContext(paymentMethodContext)
-}

package/PaymentMethodContext/paymentMethodContextType.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react'
+import type { PaymentMethod, PaymentMethodModules, PaymentModule } from '../Api/PaymentMethod'
+
+export type PaymentMethodContextType = {
+  methods: PaymentMethod[]
+  selectedMethod?: PaymentMethod
+  setSelectedMethod: (method: PaymentMethod | undefined) => void
+  modules: PaymentMethodModules
+  selectedModule?: PaymentModule
+  setSelectedModule: (module: PaymentModule | undefined) => void
+  onSuccess: (orderNumber: string) => Promise<void>
+}
+
+export const paymentMethodContext = createContext<PaymentMethodContextType | undefined>(undefined)
+paymentMethodContext.displayName = 'PaymentMethodContext'
+
+export function usePaymentMethodContext(optional: true): PaymentMethodContextType | undefined
+export function usePaymentMethodContext(optional?: false): PaymentMethodContextType
+export function usePaymentMethodContext(optional = false) {
+  const context = useContext(paymentMethodContext)
+  if (!optional && typeof context === 'undefined') {
+    throw Error(
+      'usePaymentMethodContext must be used within a PaymentMethodContextProvider or provide the optional=true argument',
+    )
+  }
+
+  return useContext(paymentMethodContext)
+}

package/PaymentMethodOptions/PaymentMethodOptions.tsx

@@ -1,7 +1,7 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { PaymentMethodOptionsProps } from '../Api/PaymentMethod'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 
 const name = 'PaymentMethodOptions' as const
 const parts = ['root'] as const

package/PaymentMethodPlaceOrder/PaymentMethodPlaceOrder.tsx

@@ -1,5 +1,5 @@
 import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 
 export type PaymentMethodPlaceOrderProps = Pick<UseFormComposeOptions, 'step'>
 
@@ -7,6 +7,7 @@ export function PaymentMethodPlaceOrder(props: PaymentMethodPlaceOrderProps) {
   const { step } = props
   const { selectedMethod, selectedModule } = usePaymentMethodContext()
 
-  if (!selectedModule || !selectedMethod?.code) return null
+  if (!selectedModule || !selectedMethod?.code || !selectedModule.PaymentPlaceOrder) return null
+
   return <selectedModule.PaymentPlaceOrder {...selectedMethod} step={step} />
 }

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -1,7 +1,7 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
 import { PaymentPlaceOrderProps } from '../Api/PaymentMethod'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { PaymentMethodPlaceOrderNoopDocument } from './PaymentMethodPlaceOrderNoop.gql'
 
 export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
@@ -10,9 +10,10 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
 
   const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, {
     onComplete: async (result) => {
-      if (!result.data?.placeOrder) return
+      if (!result.data?.placeOrder?.order) return
       await onSuccess(result.data.placeOrder.order.order_number)
     },
+    submitWhileLocked: true,
   })
 
   const { handleSubmit } = form

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -11,15 +11,15 @@ import {
 } from '@graphcommerce/next-ui'
 import {
   Controller,
+  FormPersist,
   useForm,
   useFormCompose,
   UseFormComposeOptions,
-  useFormPersist,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Box, FormControl, FormHelperText, SxProps, Theme } from '@mui/material'
 import { useEffect } from 'react'
-import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { useCartLock } from '../hooks/useCartLock'
 
 export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'> & {
@@ -51,8 +51,6 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
     defaultValues: { code: lockState.method },
   })
 
-  useFormPersist({ form, name: 'PaymentMethodToggle' })
-
   const { control, handleSubmit, watch, register, setValue, formState } = form
 
   const submitHandler = handleSubmit(() => {})
@@ -92,6 +90,7 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
+      <FormPersist form={form} name='PaymentMethodToggles' />
       <input type='hidden' {...register('code', { required: true })} required />
       <FormRow className={classes.root} sx={{ position: 'relative', padding: 0 }}>
         <ScrollerProvider scrollSnapAlign='center'>

package/hooks/useCartLock.ts

@@ -1,4 +1,5 @@
-import { useCurrentCartId } from '@graphcommerce/magento-cart'
+import { useApolloClient } from '@graphcommerce/graphql'
+import { cartLock, useCurrentCartId } from '@graphcommerce/magento-cart'
 import { useUrlQuery } from '@graphcommerce/next-ui'
 import { useEffect, useState } from 'react'
 
@@ -19,9 +20,10 @@ let justLocked = false
  * Todo: Block all operations on the cart while the cart is being blocked.
  */
 export function useCartLock<E extends CartLockState>() {
-  const { currentCartId } = useCurrentCartId()
+  const { currentCartId, locked } = useCurrentCartId()
   const [queryState, setRouterQuery] = useUrlQuery<E>()
   const [, setForceRender] = useState(0)
+  const client = useApolloClient()
 
   useEffect(() => {
     const pageshow = (e: PageTransitionEvent) => {
@@ -38,6 +40,7 @@ export function useCartLock<E extends CartLockState>() {
   const lock = (params: Omit<E, 'locked' | 'cart_id'>) => {
     if (!currentCartId) return undefined
     justLocked = true
+    cartLock(client.cache, true)
     return setRouterQuery({
       locked: '1',
       cart_id: currentCartId,
@@ -46,13 +49,14 @@ export function useCartLock<E extends CartLockState>() {
   }
 
   const unlock = async (params: Omit<E, 'locked' | 'cart_id' | 'method'>) => {
+    cartLock(client.cache, false)
     await 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' || Boolean(queryState.PayerID),
+    locked: locked || queryState.locked === '1' || Boolean(queryState.PayerID),
     justLocked,
   }
 

package/index.ts

@@ -2,6 +2,7 @@ export * from './Api/PaymentMethod'
 export * from './hooks'
 export * from './PaymentMethodButton/PaymentMethodButton'
 export * from './PaymentMethodContext/PaymentMethodContext'
+export * from './PaymentMethodContext/paymentMethodContextType'
 export * from './PaymentMethodOptions/PaymentMethodOptions'
 export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop'
 export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.2",
+  "version": "8.1.0-canary.20",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.2",
-    "@graphcommerce/graphql": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.2",
-    "@graphcommerce/magento-store": "^8.1.0-canary.2",
-    "@graphcommerce/next-ui": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.20",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.20",
+    "@graphcommerce/graphql": "^8.1.0-canary.20",
+    "@graphcommerce/image": "^8.1.0-canary.20",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.20",
+    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.20",
+    "@graphcommerce/magento-store": "^8.1.0-canary.20",
+    "@graphcommerce/next-ui": "^8.1.0-canary.20",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.20",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.20",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.20",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",