@graphcommerce/magento-cart 4.13.3 → 4.14.0-canary.10

package/CHANGELOG.md

@@ -1,8 +1,32 @@
 # Change Log
 
-## 4.13.3
+## 4.14.0-canary.10
 
-## 4.13.2
+## 4.14.0-canary.9
+
+## 4.14.0-canary.8
+
+## 4.14.0-canary.7
+
+## 4.14.0-canary.6
+
+## 4.14.0-canary.5
+
+## 4.14.0-canary.4
+
+### Minor Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`761bd2832`](https://github.com/graphcommerce-org/graphcommerce/commit/761bd2832f115afc8b95bedbf479266309dd5acc) - ApolloLinks, typePolicies and migration scripts are now handled with plugins on the new library component `<GraphQLProvider/>`. Hygraph's, Magento Cart, Customer, Store, Wishlist and Magento GraphQL are all migrated to be using plugins.
+
+  If you are using custom `links` / `policies` / `migrations` you can pass them as props to the `<GraphQLProvider/>` or create your own local plugin. ([@paales](https://github.com/paales))
+
+## 4.14.0-canary.3
+
+## 4.14.0-canary.2
+
+## 4.13.2-canary.1
+
+## 4.13.2-canary.0
 
 ## 4.13.1
 

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -3,12 +3,14 @@ import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/n
 import { Trans } from '@lingui/react'
 import { Box, Button, ButtonProps, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
+import React from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutProps = CartStartCheckoutFragment & {
   children?: React.ReactNode
   sx?: SxProps<Theme>
   buttonProps?: ButtonProps<'button'>
+  onStart?: (e: React.MouseEvent<HTMLButtonElement>, cart: CartStartCheckoutFragment) => void
 }
 
 const name = 'CartStartCheckout' as const
@@ -21,17 +23,20 @@ const parts = [
 const { classes } = extendableComponent(name, parts)
 
 export function CartStartCheckout(props: CartStartCheckoutProps) {
-  const { prices, children,  buttonProps, sx = [] } = props
+  const {
+    children,
+    onStart,
+    buttonProps: { onClick, ...buttonProps } = {},
+    sx = [],
+    ...cart
+  } = props
 
-  const hasTotals = (prices?.grand_total?.value ?? 0) > 0
+  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
   return (
     <Box
       className={classes.checkoutButtonContainer}
       sx={[
-        (theme) => ({
-          textAlign: 'center',
-          my: theme.spacings.md,
-        }),
+        (theme) => ({ textAlign: 'center', my: theme.spacings.md }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
@@ -45,6 +50,11 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
           className={classes.checkoutButton}
           endIcon={<IconSvg src={iconChevronRight} />}
           {...buttonProps}
+          onClick={(e) => {
+            onClick?.(e)
+            onStart?.(e, cart)
+            return onClick?.(e)
+          }}
           disabled={!hasTotals || buttonProps?.disabled}
         >
           <Box
@@ -59,7 +69,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
           </Box>{' '}
           {hasTotals && (
             <span className={classes.checkoutMoney}>
-              <Money {...prices?.grand_total} />
+              <Money {...cart.prices?.grand_total} />
             </span>
           )}
         </Button>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -0,0 +1,45 @@
+import { iconChevronRight, IconSvg, LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
+import PageLink from 'next/link'
+import React from 'react'
+import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+
+export type CartStartCheckoutLinkOrButtonProps = CartStartCheckoutFragment & {
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+  onStart?: (
+    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    cart: CartStartCheckoutFragment,
+  ) => void
+  linkOrButtonProps?: LinkOrButtonProps
+}
+
+export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButtonProps) {
+  const {
+    children,
+    onStart,
+    linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
+    ...cart
+  } = props
+
+  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
+
+  return (
+    <PageLink href='/checkout' passHref>
+      <LinkOrButton
+        onClick={(e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+          onClick?.(e)
+          onStart?.(e, cart)
+        }}
+        button={{ variant: 'pill', ...button }}
+        disabled={!hasTotals}
+        color='secondary'
+        endIcon={<IconSvg src={iconChevronRight} />}
+        {...linkOrButtonProps}
+      >
+        <Trans id='Next' />
+      </LinkOrButton>
+    </PageLink>
+  )
+}

package/components/CartStartCheckout/index.ts

@@ -0,0 +1,2 @@
+export * from './CartStartCheckout'
+export * from './CartStartCheckoutLinkOrButton'

package/components/index.ts

@@ -6,7 +6,7 @@ export * from './CartAgreementsForm/CartAgreements.gql'
 export * from './CartAgreementsForm/CartAgreementsForm'
 export * from './CartFab/CartFab'
 export * from './CartItemSummary/CartItemSummary'
-export * from './CartStartCheckout/CartStartCheckout'
+export * from './CartStartCheckout'
 export * from './CartSummary/CartSummary'
 export * from './CartSummary/CartSummary.gql'
 export * from './CartTotals/CartTotals'

package/link/createCartErrorLink.ts

@@ -1,6 +1,7 @@
 import {
   ApolloClient,
   fromPromise,
+  globalApolloClient,
   NormalizedCacheObject,
   onError,
   Operation,
@@ -19,50 +20,51 @@ function errorIsIncluded(errorPath: readonly (string | number)[] | undefined, ke
   return keys.some((value) => value === error)
 }
 
-export const createCartErrorLink = (clientRef: RefObject<ApolloClient<NormalizedCacheObject>>) =>
-  onError(({ graphQLErrors, operation, forward }) => {
-    if (!clientRef.current) return undefined
+export const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
+  if (!globalApolloClient.current) return undefined
 
-    const client = clientRef.current
-    const { cache } = client
+  const client = globalApolloClient.current
+  const { cache } = client
 
-    if (!isCartOperation(operation) || !graphQLErrors) return undefined
+  if (!isCartOperation(operation) || !graphQLErrors) return undefined
 
-    const cartErr = graphQLErrors.find(
-      (err) =>
-        err.extensions?.category === 'graphql-no-such-entity' &&
-        errorIsIncluded(err.path, [
-          'cart',
-          'addProductsToCart',
+  const cartErr = graphQLErrors.find(
+    (err) =>
+      err.extensions?.category === 'graphql-no-such-entity' &&
+      errorIsIncluded(err.path, [
+        'cart',
+        'addProductsToCart',
 
-          /**
-           * These mutations can also throw the graphql-no-such-entity exception, however, we're not
-           * sure if it also throws for other types of entities.
-           */
-          // 'removeItemFromCart',
-          // 'setBillingAddressOnCart',
-          // 'setGuestEmailOnCart',
-          // 'setPaymentMethodOnCart',
-          // 'setShippingAddressesOnCart',
-          // 'setShippingMethodsOnCart',
-          // 'updateCartItems',
-          // 'applyCouponToCart',
-          // 'removeCouponFromCart'
-        ]),
-    )
+        /**
+         * These mutations can also throw the graphql-no-such-entity exception, however, we're not
+         * sure if it also throws for other types of entities.
+         */
+        // 'removeItemFromCart',
+        // 'setBillingAddressOnCart',
+        // 'setGuestEmailOnCart',
+        // 'setPaymentMethodOnCart',
+        // 'setShippingAddressesOnCart',
+        // 'setShippingMethodsOnCart',
+        // 'updateCartItems',
+        // 'applyCouponToCart',
+        // 'removeCouponFromCart'
+      ]),
+  )
 
-    if (!cartErr) return undefined
+  if (!cartErr) return undefined
 
-    return fromPromise(client?.mutate({ mutation: CreateEmptyCartDocument }))
-      .filter((value) => Boolean(value))
-      .flatMap((cartData) => {
-        const cartId = cartData.data?.createEmptyCart
-        if (!cartId) return forward(operation)
+  return fromPromise(client?.mutate({ mutation: CreateEmptyCartDocument }))
+    .filter((value) => Boolean(value))
+    .flatMap((cartData) => {
+      const cartId = cartData.data?.createEmptyCart
+      if (!cartId) return forward(operation)
 
-        writeCartId(cache, cartId)
-        operation.variables = { ...operation.variables, cartId }
+      writeCartId(cache, cartId)
+      operation.variables = { ...operation.variables, cartId }
 
-        // retry the request, returning the new observable
-        return forward(operation)
-      })
-  })
+      // retry the request, returning the new observable
+      return forward(operation)
+    })
+})
+
+export const createCartErrorLink = () => cartErrorLink

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.13.3",
+  "version": "4.14.0-canary.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,17 +18,17 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "4.30.2",
-    "@graphcommerce/framer-utils": "4.30.2",
-    "@graphcommerce/framer-next-pages": "4.30.2",
-    "@graphcommerce/framer-scroller": "4.30.2",
-    "@graphcommerce/graphql": "4.30.2",
-    "@graphcommerce/image": "4.30.2",
-    "@graphcommerce/magento-customer": "4.13.3",
-    "@graphcommerce/magento-graphql": "4.13.3",
-    "@graphcommerce/magento-store": "4.13.3",
-    "@graphcommerce/next-ui": "4.30.2",
-    "@graphcommerce/react-hook-form": "4.30.2"
+    "@graphcommerce/ecommerce-ui": "4.31.0-canary.6",
+    "@graphcommerce/framer-utils": "4.31.0-canary.6",
+    "@graphcommerce/framer-next-pages": "4.31.0-canary.6",
+    "@graphcommerce/framer-scroller": "4.31.0-canary.6",
+    "@graphcommerce/graphql": "4.31.0-canary.6",
+    "@graphcommerce/image": "4.31.0-canary.6",
+    "@graphcommerce/magento-customer": "4.14.0-canary.10",
+    "@graphcommerce/magento-graphql": "4.14.0-canary.10",
+    "@graphcommerce/magento-store": "4.14.0-canary.10",
+    "@graphcommerce/next-ui": "4.31.0-canary.6",
+    "@graphcommerce/react-hook-form": "4.31.0-canary.6"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -0,0 +1,21 @@
+import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { cartErrorLink } from '../link/createCartErrorLink'
+import { cartTypePolicies, migrateCart } from '../typePolicies'
+
+export const component = 'GraphQLProvider'
+export const exported = '@graphcommerce/graphql'
+
+function MagentoCartGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
+  const { Prev, links = [], policies = [], migrations = [], ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      links={[...links, cartErrorLink]}
+      policies={[...policies, cartTypePolicies]}
+      migrations={[...migrations, migrateCart]}
+    />
+  )
+}
+
+export const Plugin = MagentoCartGraphqlProvider