@graphcommerce/magento-cart-payment-method 10.0.0-canary.67 → 10.0.0-canary.72

package/Api/PaymentMethod.ts

@@ -22,7 +22,7 @@ export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
 export type PaymentHandlerProps = { code: string }
 
 export type ExpandPaymentMethodsContext = Partial<PaymentMethodContextFragment> & {
-  client: ApolloClient<object>
+  client: ApolloClient
 }
 
 export type ExpandPaymentMethods = (

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+## 10.0.0-canary.68
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -1,7 +1,7 @@
 import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, Button, FormDiv } from '@graphcommerce/next-ui'
+import { ActionCard, Button, FormDiv, sxx } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -31,14 +31,14 @@ function PaymentMethodActionCard(
     <Card
       code={code}
       child={child}
-      sx={[
+      sx={sxx(
         {
           '& .ActionCard-title': { typography: 'h6' },
           '& .ActionCard-details': { lineHeight: 1.5 },
           '& .ActionCard-image svg, .ActionCard-image img': { width: '32px', height: '32px' },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       action={
         <Button disableRipple variant='inline' color='secondary' tabIndex={-1}>
           <Trans>Select</Trans>

package/PaymentMethodOptions/PaymentMethodOptions.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { PaymentMethodOptionsProps } from '../Api/PaymentMethod'
@@ -17,10 +17,7 @@ export function PaymentMethodOptions(props: PaymentMethodOptionsProps & { sx?: S
   const { selectedMethod, selectedModule } = usePaymentMethodContext()
 
   return (
-    <Box
-      className={classes.root}
-      sx={[(theme) => ({ marginBottom: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Box className={classes.root} sx={sxx((theme) => ({ marginBottom: theme.spacings.sm }), sx)}>
       {selectedModule && selectedMethod && (
         <Box key={selectedMethod.code}>
           <selectedModule.PaymentOptions {...selectedMethod} {...optionsProps} />

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -12,7 +12,10 @@ export function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
   const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, {
     onComplete: async (result) => {
       assertOrderPlaced(result)
-      await onSuccess(result.data.placeOrder.order.order_number)
+      // After assertOrderPlaced, result.data.placeOrder.order.order_number is guaranteed
+      const orderNumber = (result.data as { placeOrder: { order: { order_number: string } } })
+        .placeOrder.order.order_number
+      await onSuccess(orderNumber)
     },
     submitWhileLocked: true,
   })

package/PaymentMethodPlaceOrderNoop/assertOrderPlaced.ts

@@ -1,21 +1,23 @@
-import type { FetchResult } from '@graphcommerce/graphql'
-import { ApolloError } from '@graphcommerce/graphql'
+import type { ApolloLink } from '@graphcommerce/graphql'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { t } from '@lingui/core/macro'
 import type { PaymentMethodPlaceOrderNoopMutation } from './PaymentMethodPlaceOrderNoop.gql'
 
-export type PlacedOrder<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>> = NonNullable<
-  NonNullable<NonNullable<T['data']>['placeOrder']>['order']
->
+type PlaceOrderResult = ApolloLink.Result<PaymentMethodPlaceOrderNoopMutation>
 
-export type AssertedOrderPlaced<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>> = T & {
+export type PlacedOrder = {
+  order_number: string
+}
+
+export type AssertedOrderPlaced = PlaceOrderResult & {
   data: {
-    placeOrder: { order: PlacedOrder<T> }
+    placeOrder: { order: PlacedOrder }
   }
 }
 
-export function throwGenericPlaceOrderError() {
-  throw new ApolloError({
-    graphQLErrors: [
+export function throwGenericPlaceOrderError(): never {
+  throw new CombinedGraphQLErrors({
+    errors: [
       {
         message: t`An error occurred while processing your payment. Please contact the store owner`,
       },
@@ -24,20 +26,26 @@ export function throwGenericPlaceOrderError() {
 }
 
 /** Assert that the order was place successfully. */
-export function assertOrderPlaced<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>>(
-  result: T,
-): asserts result is AssertedOrderPlaced<T> {
+export function assertOrderPlaced(result: PlaceOrderResult): asserts result is AssertedOrderPlaced {
+  // Check for GraphQL errors in the result
   if (result.errors && result.errors.length > 0) {
-    const graphQLErrors = result.errors.filter((e) => e !== null)
-    throw new ApolloError({ graphQLErrors })
+    throw new CombinedGraphQLErrors(result)
   }
 
-  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 })
+  // Check for place order specific errors
+  const placeOrderData = result.data?.placeOrder as
+    | { errors?: { message: string }[] | null; order?: { order_number?: string } | null }
+    | null
+    | undefined
+
+  if (placeOrderData?.errors && placeOrderData.errors.length > 0) {
+    throw new CombinedGraphQLErrors({
+      errors: placeOrderData.errors.filter((e) => e !== null),
+    })
   }
 
-  if (!result.data?.placeOrder?.order?.order_number) {
+  const orderNumber = placeOrderData?.order?.order_number
+  if (!orderNumber) {
     console.info('Error while placing order', result)
     throwGenericPlaceOrderError()
   }

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -7,6 +7,7 @@ import {
   iconChevronRight,
   IconSvg,
   responsiveVal,
+  sxx,
   ToggleButton,
 } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
@@ -83,12 +84,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
       onSubmit={submitHandler}
       noValidate
       className={classes.formRoot}
-      sx={[
+      sx={sxx(
         {
           padding: '5px 0',
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <input type='hidden' {...register('code', { required: true })} required />
       <FormRow className={classes.root} sx={{ position: 'relative', padding: 0 }}>
@@ -101,12 +102,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
               direction='left'
               className={(classes.buttonRoot, classes.leftButtonRoot)}
               sx={(theme) => ({
-                background: theme.palette.background.paper,
+                background: theme.vars.palette.background.paper,
                 borderRadius: 0,
                 width: 30,
                 height: responsiveVal(60, 85),
                 boxShadow: 'none',
-                border: `1px solid ${theme.palette.divider}`,
+                border: `1px solid ${theme.vars.palette.divider}`,
                 '&:focus': {
                   boxShadow: 'none',
                 },
@@ -159,16 +160,16 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
                         selected={value === buttonValue}
                         sx={(theme) => ({
                           typography: 'h6',
-                          border: `1px solid ${theme.palette.divider}`,
+                          border: `1px solid ${theme.vars.palette.divider}`,
                           boxShadow: 'none',
                           transition: 'color .15s ease',
                           whiteSpace: 'nowrap',
                           '&.selected': {
-                            border: `1px solid ${theme.palette.secondary.main}`,
-                            background: `${theme.palette.secondary.main}`,
-                            color: `${theme.palette.secondary.contrastText}`,
+                            border: `1px solid ${theme.vars.palette.secondary.main}`,
+                            background: `${theme.vars.palette.secondary.main}`,
+                            color: `${theme.vars.palette.secondary.contrastText}`,
                             '&:hover': {
-                              background: `${theme.palette.secondary.main}`,
+                              background: `${theme.vars.palette.secondary.main}`,
                             },
                           },
                         })}
@@ -196,12 +197,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
               direction='right'
               className={`${classes.buttonRoot} ${classes.rightButtonRoot}`}
               sx={(theme) => ({
-                background: theme.palette.background.paper,
+                background: theme.vars.palette.background.paper,
                 borderRadius: 0,
                 width: 30,
                 height: responsiveVal(60, 85),
                 boxShadow: 'none',
-                border: `1px solid ${theme.palette.divider}`,
+                border: `1px solid ${theme.vars.palette.divider}`,
                 '&:focus': {
                   boxShadow: 'none',
                 },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,22 +18,22 @@
     "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop": "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart-shipping-address": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart-shipping-address": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^19.2.0",

package/test/goToPayment.ts

@@ -4,10 +4,7 @@ import { fillShippingAddressForm } from '@graphcommerce/magento-cart-shipping-ad
 import { fillCartAgreementsForm } from '@graphcommerce/magento-cart/test/fillCartAgreementsForm'
 import type { Page } from '@playwright/test'
 
-export const goToPayment = async (
-  page: Page,
-  apolloClient: ApolloClient<NormalizedCacheObject>,
-) => {
+export const goToPayment = async (page: Page, apolloClient: ApolloClient) => {
   await page.locator('#view-shopping-cart-button').click()
   await page.locator('#cart-start-checkout').click()