@graphcommerce/magento-cart-payment-method 8.1.0-canary.8 → 9.0.0-canary.100

package/Api/AvailablePaymentMethod/AvailablePaymentMethod.graphql

@@ -1,4 +1,4 @@
-fragment AvailablePaymentMethod on AvailablePaymentMethod @injectable {
+fragment AvailablePaymentMethod on AvailablePaymentMethod {
   code
   title
 }

package/Api/PaymentMethodContext.graphql

@@ -1,4 +1,4 @@
-fragment PaymentMethodContext on Cart @injectable {
+fragment PaymentMethodContext on Cart {
   id
   available_payment_methods {
     ...AvailablePaymentMethod

package/Api/PaymentMethodUpdated.graphql

@@ -1,4 +1,4 @@
-fragment PaymentMethodUpdated on Cart @injectable {
+fragment PaymentMethodUpdated on Cart {
   id
   selected_payment_method {
     ...SelectedPaymentMethod

package/Api/SelectedPaymentMethod/SelectedPaymentMethod.graphql

@@ -1,4 +1,4 @@
-fragment SelectedPaymentMethod on SelectedPaymentMethod @injectable {
+fragment SelectedPaymentMethod on SelectedPaymentMethod {
   code
   title
 }

package/CHANGELOG.md

@@ -1,11 +1,206 @@
 # Change Log
 
+## 9.0.0-canary.100
+
+## 9.0.0-canary.99
+
+## 9.0.0-canary.98
+
+## 9.0.0-canary.97
+
+## 9.0.0-canary.96
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+## 9.0.0-canary.89
+
+## 9.0.0-canary.88
+
+## 9.0.0-canary.87
+
+## 9.0.0-canary.86
+
+## 9.0.0-canary.85
+
+## 9.0.0-canary.84
+
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
+## 9.0.0-canary.81
+
+## 9.0.0-canary.80
+
+## 9.0.0-canary.79
+
+## 9.0.0-canary.78
+
+## 9.0.0-canary.77
+
+## 9.0.0-canary.76
+
+## 9.0.0-canary.75
+
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+## 9.0.0-canary.72
+
+## 9.0.0-canary.71
+
+## 9.0.0-canary.70
+
+## 9.0.0-canary.69
+
+## 9.0.0-canary.68
+
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+## 9.0.0-canary.65
+
+## 9.0.0-canary.64
+
+## 9.0.0-canary.63
+
+## 9.0.0-canary.62
+
+## 9.0.0-canary.61
+
+## 9.0.0-canary.60
+
+## 9.0.0-canary.59
+
+## 9.0.0-canary.58
+
+## 9.0.0-canary.57
+
+## 9.0.0-canary.56
+
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+### Patch Changes
+
+- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 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))
+- [#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
 
@@ -21,14 +216,11 @@
 
 ### 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) [`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) [`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))
+- [#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
 
@@ -106,8 +298,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
 
@@ -1440,31 +1631,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

@@ -1,11 +1,5 @@
-import {
-  ActionCard,
-  Button,
-  FormDiv,
-  ActionCardItemRenderProps,
-  ActionCardListForm,
-  ActionCardProps,
-} from '@graphcommerce/next-ui'
+import { ActionCardItemRenderProps, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardProps, Button, FormDiv } from '@graphcommerce/next-ui'
 import {
   FormPersist,
   useForm,
@@ -75,15 +69,17 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
   const [lockState] = useCartLock()
 
   type FormFields = { code: string | null; paymentMethod?: string }
-  const form = useForm<FormFields>({
-    defaultValues: { code: lockState.method },
-  })
+  const form = useForm<FormFields>({})
 
   const { control, handleSubmit, watch, setValue } = form
   const submit = handleSubmit(() => {})
 
   const paymentMethod = watch('paymentMethod')
 
+  useEffect(() => {
+    if (lockState.method) setValue('code', lockState.method)
+  }, [lockState.method, setValue])
+
   useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
 
   // todo: Do not useEffect to set value, usePaymentMethodContext should calculate these values.
@@ -109,7 +105,6 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
 
   return (
     <>
-      <FormPersist form={form} name='PaymentMethodActionCardList' />
       <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
         control={control}
         name='paymentMethod'
@@ -117,6 +112,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
         collapse
         size='large'
         color='secondary'
+        required
         items={methods.map((method) => ({
           ...method,
           value: `${method.code}___${method.child}`,
@@ -126,6 +122,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
         }))}
         render={PaymentMethodActionCard}
       />
+      <FormPersist form={form} name='PaymentMethodActionCardList' />
     </>
   )
 }

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -52,6 +52,7 @@ export function PaymentMethodButton(props: PaymentMethodButtonProps) {
       onSubmitSuccessful={onSubmitSuccessful}
       render={({ submit, buttonState, error }) => {
         const errorVal = buttonState.isSubmitting ? undefined : error
+
         const button = (
           <PaymentMethodButtonRenderer
             buttonProps={buttonProps}

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -1,5 +1,6 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
 import { PaymentPlaceOrderProps } from '../Api/PaymentMethod'
 import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { PaymentMethodPlaceOrderNoopDocument } from './PaymentMethodPlaceOrderNoop.gql'
@@ -10,9 +11,14 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
 
   const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, {
     onComplete: async (result) => {
-      if (!result.data?.placeOrder) return
+      if (!result.data?.placeOrder?.order)
+        throw Error(
+          t`An error occurred while processing your payment. Please contact the store owner`,
+        )
+
       await onSuccess(result.data.placeOrder.order.order_number)
     },
+    submitWhileLocked: true,
   })
 
   const { handleSubmit } = form

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -90,7 +90,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'>
@@ -215,6 +214,7 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
           </Box>
         </ScrollerProvider>
       </FormRow>
+      <FormPersist form={form} name='PaymentMethodToggles' />
     </Form>
   )
 }

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.8",
+  "version": "9.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,18 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.8",
-    "@graphcommerce/graphql": "^8.1.0-canary.8",
-    "@graphcommerce/image": "^8.1.0-canary.8",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.8",
-    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.8",
-    "@graphcommerce/magento-store": "^8.1.0-canary.8",
-    "@graphcommerce/next-ui": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.100",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.100",
+    "@graphcommerce/graphql": "^9.0.0-canary.100",
+    "@graphcommerce/image": "^9.0.0-canary.100",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.100",
+    "@graphcommerce/magento-cart-shipping-address": "^9.0.0-canary.100",
+    "@graphcommerce/magento-store": "^9.0.0-canary.100",
+    "@graphcommerce/next-ui": "^9.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",