@graphcommerce/magento-cart-payment-method 8.0.6-canary.0 → 8.0.6-canary.2

package/Api/PaymentMethodContext.graphql

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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 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

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -7,10 +7,10 @@ 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'
@@ -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/PaymentMethodContext/PaymentMethodContext.tsx

@@ -11,6 +11,7 @@ import {
 } from '../Api/PaymentMethod'
 import { PaymentMethodContextFragment } from '../Api/PaymentMethodContext.gql'
 import { GetPaymentMethodContextDocument } from './GetPaymentMethodContext.gql'
+import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 
 type PaymentMethodContextProps = {
   methods: PaymentMethod[]
@@ -65,17 +66,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

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -11,10 +11,10 @@ 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'
@@ -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/package.json

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