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

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,103 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+- [#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))
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`59d91cc`](https://github.com/graphcommerce-org/graphcommerce/commit/59d91cc4b04b6d37e5fb6b09401c079de488bc29) - Solve issue where the Place order button would remain in a loading state because the back/forward cache of chrome started working for the checkout and thus React's state would not be reset, thinking we were still exiting the page. ([@paales](https://github.com/paales))
+
+## 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

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

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