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

package/CHANGELOG.md

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

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(

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) {

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'> & {

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