@graphcommerce/magento-cart-payment-method 8.1.0-canary.5 → 8.1.0-canary.50

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,5 +1,115 @@
 # Change Log
 
+## 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))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ## 8.0.6-canary.4

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -17,7 +17,7 @@ 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(
@@ -109,7 +109,6 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
 
   return (
     <>
-      <FormPersist form={form} name='PaymentMethodActionCardList' />
       <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
         control={control}
         name='paymentMethod'
@@ -126,6 +125,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
         }))}
         render={PaymentMethodActionCard}
       />
+      <FormPersist form={form} name='PaymentMethodActionCardList' />
     </>
   )
 }

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,20 +12,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[]
-  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
@@ -55,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({
@@ -117,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

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