@graphcommerce/magento-cart-payment-method 8.0.6-canary.4 → 8.0.7

package/Api/PaymentMethodContext.graphql

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

package/CHANGELOG.md

@@ -1,25 +1,12 @@
 # Change Log
 
-## 8.0.6-canary.4
+## 8.0.7
 
-## 8.0.6-canary.3
-
-## 8.0.6-canary.2
+## 8.0.6
 
 ### 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
+- [#2248](https://github.com/graphcommerce-org/graphcommerce/pull/2248) [`e262419`](https://github.com/graphcommerce-org/graphcommerce/commit/e2624194cc1c1b9bb625892c2856900c071c936c) - Compatibility with Magento 2.4.7 ([@paales](https://github.com/paales))
 
 ## 8.0.5
 
@@ -93,8 +80,7 @@
 
 ### Patch Changes
 
-- [#2115](https://github.com/graphcommerce-org/graphcommerce/pull/2115) [`105a1af`](https://github.com/graphcommerce-org/graphcommerce/commit/105a1af8b820de8873e430ae398f1922d39a9110) - Disabled ripple animations on all ActionCard ‘Select’ and ‘Change’ so the rendering is more subtle during checkout.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2115](https://github.com/graphcommerce-org/graphcommerce/pull/2115) [`105a1af`](https://github.com/graphcommerce-org/graphcommerce/commit/105a1af8b820de8873e430ae398f1922d39a9110) - Disabled ripple animations on all ActionCard ‘Select’ and ‘Change’ so the rendering is more subtle during checkout. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.0-canary.100
 
@@ -1427,31 +1413,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from "@lingui/macro";
+  import { Trans, t } from '@lingui/macro'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    );
+    )
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from "@lingui/react";
-  import { i18n } from "@lingui/core";
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
       </div>
-    );
+    )
   }
   ```
 

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,6 +84,7 @@ 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.
@@ -108,24 +109,21 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
   if (!methods || methods.length < 1) return null
 
   return (
-    <>
-      <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}
-      />
-    </>
+    <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,7 +11,6 @@ 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[]
@@ -66,20 +65,17 @@ 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 = filterNonNullableKeys(cartContext?.available_payment_methods)
+    const allMethods = 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/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -10,7 +10,7 @@ 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)
     },
   })

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,6 +51,8 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
     defaultValues: { code: lockState.method },
   })
 
+  useFormPersist({ form, name: 'PaymentMethodToggle' })
+
   const { control, handleSubmit, watch, register, setValue, formState } = form
 
   const submitHandler = handleSubmit(() => {})
@@ -90,7 +92,6 @@ 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.4",
+  "version": "8.0.7",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.4",
-    "@graphcommerce/graphql": "^8.0.6-canary.4",
-    "@graphcommerce/image": "^8.0.6-canary.4",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.4",
-    "@graphcommerce/magento-cart-shipping-address": "^8.0.6-canary.4",
-    "@graphcommerce/magento-store": "^8.0.6-canary.4",
-    "@graphcommerce/next-ui": "^8.0.6-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.4",
+    "@graphcommerce/eslint-config-pwa": "^8.0.7",
+    "@graphcommerce/framer-scroller": "^8.0.7",
+    "@graphcommerce/graphql": "^8.0.7",
+    "@graphcommerce/image": "^8.0.7",
+    "@graphcommerce/magento-cart": "^8.0.7",
+    "@graphcommerce/magento-cart-shipping-address": "^8.0.7",
+    "@graphcommerce/magento-store": "^8.0.7",
+    "@graphcommerce/next-ui": "^8.0.7",
+    "@graphcommerce/prettier-config-pwa": "^8.0.7",
+    "@graphcommerce/react-hook-form": "^8.0.7",
+    "@graphcommerce/typescript-config-pwa": "^8.0.7",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",