@graphcommerce/magento-cart-payment-method 9.0.1 → 9.0.2-canary.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.2-canary.0
+
+### Patch Changes
+
+- [`7d5e75e`](https://github.com/graphcommerce-org/graphcommerce/commit/7d5e75ebfe93194237b8f6b6511d2bd1549d121e) - Solve issue where the Component prop would we forwarded tot the DOM element of the PaymentMethodActionCard ([@paales](https://github.com/paales))
+
+- [`058b7bf`](https://github.com/graphcommerce-org/graphcommerce/commit/058b7bf64be29e1bc3d16551abcc1cd55b5413bd) - Support Magento 2.4.7 placeOrder.errors field to handle possible errors while placing the order. An `assertOrderPlaced` method was created to assert a valid placed order. ([@paales](https://github.com/paales))
+
 ## 9.0.1
 
 ## 9.0.1-canary.1

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -9,15 +9,15 @@ import { Trans } from '@lingui/react'
 import type { SxProps, Theme } from '@mui/material'
 import { useEffect } from 'react'
 import type { PaymentOptionsProps } from '../Api/PaymentMethod'
-import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 import { useCartLock } from '../hooks'
+import { usePaymentMethodContext } from '../PaymentMethodContext/paymentMethodContextType'
 
 function PaymentMethodActionCard(
   props: ActionCardItemRenderProps<PaymentOptionsProps> & {
     sx?: SxProps<Theme>
   },
 ) {
-  const { onReset, code, step, child, Container, sx = [] } = props
+  const { onReset, code, step, child, Container, sx = [], ...rest } = props
   const { selectedMethod, selectedModule, modules } = usePaymentMethodContext()
 
   const selectedAndOptions =
@@ -29,6 +29,8 @@ function PaymentMethodActionCard(
 
   return (
     <Card
+      code={code}
+      child={child}
       sx={[
         {
           '& .ActionCard-title': { typography: 'h6' },
@@ -52,7 +54,7 @@ function PaymentMethodActionCard(
           <selectedModule.PaymentOptions {...selectedMethod} step={step} Container={Container} />
         )
       }
-      {...props}
+      {...rest}
     />
   )
 }

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.graphql

@@ -1,5 +1,10 @@
 mutation PaymentMethodPlaceOrderNoop($cartId: String!) {
   placeOrder(input: { cart_id: $cartId }) {
+    errors {
+      code
+      message
+    }
+
     order {
       order_number
     }

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

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

package/PaymentMethodPlaceOrderNoop/assertOrderPlaced.ts

@@ -0,0 +1,44 @@
+import type { FetchResult } from '@graphcommerce/graphql'
+import { ApolloError } from '@graphcommerce/graphql'
+import { t } from '@lingui/macro'
+import type { PaymentMethodPlaceOrderNoopMutation } from './PaymentMethodPlaceOrderNoop.gql'
+
+export type PlacedOrder<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>> = NonNullable<
+  NonNullable<NonNullable<T['data']>['placeOrder']>['order']
+>
+
+export type AssertedOrderPlaced<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>> = T & {
+  data: {
+    placeOrder: { order: PlacedOrder<T> }
+  }
+}
+
+export function throwGenericPlaceOrderError() {
+  throw new ApolloError({
+    graphQLErrors: [
+      {
+        message: t`An error occurred while processing your payment. Please contact the store owner`,
+      },
+    ],
+  })
+}
+
+/** Assert that the order was place successfully. */
+export function assertOrderPlaced<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>>(
+  result: T,
+): asserts result is AssertedOrderPlaced<T> {
+  if (result.errors && result.errors.length > 0) {
+    const graphQLErrors = result.errors.filter((e) => e !== null)
+    throw new ApolloError({ graphQLErrors })
+  }
+
+  if (result.data?.placeOrder?.errors && result.data.placeOrder.errors.length > 0) {
+    const graphQLErrors = result.data.placeOrder.errors.filter((e) => e !== null)
+    throw new ApolloError({ graphQLErrors })
+  }
+
+  if (!result.data?.placeOrder?.order?.order_number) {
+    console.info('Error while placing order', result)
+    throwGenericPlaceOrderError()
+  }
+}

package/index.ts

@@ -1,5 +1,6 @@
 export * from './Api/PaymentMethod'
 export * from './hooks'
+export * from './PaymentMethodActionCardList/PaymentMethodActionCardListForm'
 export * from './PaymentMethodButton/PaymentMethodButton'
 export * from './PaymentMethodContext/PaymentMethodContext'
 export * from './PaymentMethodContext/paymentMethodContextType'
@@ -7,6 +8,7 @@ export * from './PaymentMethodOptions/PaymentMethodOptions'
 export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop'
 export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql'
 export * from './PaymentMethodPlaceOrder/PaymentMethodPlaceOrder'
+export * from './PaymentMethodPlaceOrderNoop/assertOrderPlaced'
 export * from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
+export * from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.gql'
 export * from './PaymentMethodToggles/PaymentMethodToggles'
-export * from './PaymentMethodActionCardList/PaymentMethodActionCardListForm'

package/package.json

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