@graphcommerce/magento-cart 3.0.1

package/components/CartTotals/CartTotals.tsx

@@ -0,0 +1,187 @@
+import { Divider, makeStyles, Theme } from '@material-ui/core'
+import { Money, MoneyProps } from '@graphcommerce/magento-store'
+import { AnimatedRow, UseStyles } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import { AnimatePresence } from 'framer-motion'
+import React from 'react'
+import { useCartQuery, useDisplayInclTax } from '../../hooks'
+import { GetCartTotalsDocument } from './GetCartTotals.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    costsContainer: {
+      borderRadius: 4,
+      background: '#FFFADD',
+      padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
+    },
+    containerMarginTop: {
+      marginTop: theme.spacings.md,
+    },
+    costsDivider: {
+      margin: `1em 0`,
+    },
+    costsRow: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      ...theme.typography.subtitle1,
+    },
+    costsGrandTotal: {
+      fontWeight: theme.typography.fontWeightBold,
+      color: theme.palette.primary.main,
+    },
+    costsDiscount: {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    costsDiscountSub: {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    costsTax: {
+      color: theme.palette.primary.mutedText,
+      paddingTop: 0,
+    },
+    money: {
+      whiteSpace: 'nowrap',
+    },
+  }),
+  { name: 'CartTotals' },
+)
+
+export type CartTotalsProps = { containerMargin?: boolean } & UseStyles<typeof useStyles>
+
+/**
+ * ⚠️ WARNING: The current CartTotals rely heavily on how Magento is configured. It kinda works for
+ * the demo, but we need additional fields from the API to get this working as expected:
+ *
+ * @see https://github.com/magento/magento2/issues/33848
+ * @see https://github.com/magento/magento2/issues?q=is%3Aopen+is%3Aissue+label%3A%22Project%3A+GraphQL%22+tax
+ */
+export default function CartTotals(props: CartTotalsProps) {
+  const { data } = useCartQuery(GetCartTotalsDocument, { allowUrl: true })
+  const classes = useStyles(props)
+  const inclTax = useDisplayInclTax()
+
+  if (!data?.cart) return null
+
+  const { containerMargin } = props
+  const { shipping_addresses, prices } = data.cart
+  const shippingMethod = shipping_addresses?.[0]?.selected_shipping_method
+  const shippingMethodPrices = shipping_addresses?.[0]?.available_shipping_methods?.find(
+    (avail) =>
+      (shippingMethod?.amount.value ?? 0) > 0 &&
+      avail?.carrier_code === shippingMethod?.carrier_code &&
+      avail?.method_code === shippingMethod?.method_code,
+  )
+
+  return (
+    <AnimatedRow
+      className={clsx(
+        containerMargin ? classes.containerMarginTop : undefined,
+        classes.costsContainer,
+      )}
+      key='total-costs'
+    >
+      <AnimatePresence initial={false}>
+        {prices?.subtotal_including_tax && (
+          <AnimatedRow className={classes.costsRow} key='subtotal'>
+            <div>Products</div>
+            <div className={classes.money}>
+              <Money
+                {...(inclTax ? prices.subtotal_including_tax : prices.subtotal_excluding_tax)}
+              />
+            </div>
+          </AnimatedRow>
+        )}
+
+        {/* {prices?.discounts && prices.discounts.length > 1 && (
+          <AnimatedRow className={clsx(classes.costsRow, classes.costsDiscount)} key='discount'>
+            <div>Product discount</div>
+            <div className={classes.money}>
+              <Money
+                currency={prices.subtotal_with_discount_excluding_tax?.currency}
+                value={
+                  (prices.subtotal_excluding_tax?.value ?? 0) * -1 -
+                  (prices.subtotal_with_discount_excluding_tax?.value ?? 0) * -1
+                }
+              />
+            </div>
+          </AnimatedRow>
+        )} */}
+
+        {prices?.discounts?.map((discount) => {
+          const value = inclTax
+            ? (discount?.amount.value ?? 0) * -1
+            : (discount?.amount.value ?? 0) *
+              ((prices.subtotal_excluding_tax?.value ?? 1) /
+                (prices.subtotal_including_tax?.value ?? 1)) *
+              -1
+
+          return (
+            <AnimatedRow
+              className={clsx(classes.costsRow, classes.costsDiscountSub)}
+              key={discount?.label}
+            >
+              <div>{discount?.label}</div>
+              <div className={classes.money}>
+                {discount?.amount && <Money {...discount} value={value} />}
+              </div>
+            </AnimatedRow>
+          )
+        })}
+
+        {shippingMethod && (
+          <AnimatedRow className={classes.costsRow} key='shippingMethod'>
+            <div>
+              Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
+            </div>
+            <div className={classes.money}>
+              <Money
+                {...(inclTax
+                  ? shippingMethodPrices?.price_incl_tax
+                  : shippingMethodPrices?.price_excl_tax)}
+              />
+            </div>
+          </AnimatedRow>
+        )}
+
+        {!inclTax &&
+          prices?.applied_taxes?.map((tax) => (
+            <AnimatedRow className={clsx(classes.costsRow)} key={`excl${tax?.label}`}>
+              <div>{tax?.label}</div>
+              <div className={classes.money}>
+                <Money {...tax?.amount} />
+              </div>
+            </AnimatedRow>
+          ))}
+
+        <AnimatedRow key='divider'>
+          <Divider className={classes.costsDivider} />
+        </AnimatedRow>
+
+        {prices?.grand_total && (
+          <AnimatedRow
+            className={clsx(classes.costsRow, classes.costsGrandTotal)}
+            key='grand_total'
+          >
+            <div>Grand total</div>
+            <div className={classes.money}>
+              <Money {...prices.grand_total} />
+            </div>
+          </AnimatedRow>
+        )}
+
+        {inclTax &&
+          prices?.applied_taxes?.map((tax) => (
+            <AnimatedRow
+              className={clsx(classes.costsRow, classes.costsTax)}
+              key={`incl${tax?.label}`}
+            >
+              <div>Including {tax?.label}</div>
+              <div className={classes.money}>
+                <Money {...tax?.amount} />
+              </div>
+            </AnimatedRow>
+          ))}
+      </AnimatePresence>
+    </AnimatedRow>
+  )
+}

package/components/CartTotals/GetCartTotals.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const GetCartTotalsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCartTotals"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"price_incl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_excl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"applied_taxes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_with_discount_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetCartTotalsQuery, GetCartTotalsQueryVariables>;
+export type GetCartTotalsQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type GetCartTotalsQuery = { cart?: Types.Maybe<{ shipping_addresses: Array<Types.Maybe<{ selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, method_title: string, carrier_title: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ carrier_code: string, method_code?: Types.Maybe<string>, price_incl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, price_excl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>>, prices?: Types.Maybe<{ __typename: 'CartPrices', applied_taxes?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_including_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_with_discount_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }> };

package/components/CartTotals/GetCartTotals.graphql

@@ -0,0 +1,5 @@
+query GetCartTotals($cartId: String!) {
+  cart(cart_id: $cartId) {
+    ...CartTotals
+  }
+}

package/components/EmptyCart/EmptyCart.tsx

@@ -0,0 +1,56 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { responsiveVal, SvgImage, iconSadShoppingBag } from '@graphcommerce/next-ui'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      textAlign: 'center',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      [theme.breakpoints.down('sm')]: {
+        minHeight: '70vh',
+      },
+      [theme.breakpoints.up('md')]: {
+        minHeight: '60vh',
+      },
+    },
+    img: {
+      display: 'block',
+      margin: `0 auto ${theme.spacings.xxs} auto`,
+      width: responsiveVal(120, 180),
+      height: responsiveVal(120, 180),
+    },
+  }),
+  { name: 'EmptyCart' },
+)
+
+type EmptyCartProps = { children?: React.ReactNode }
+export default function EmptyCart(props: EmptyCartProps) {
+  const { children } = props
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div>
+        <SvgImage
+          src={iconSadShoppingBag}
+          alt='Empty Cart'
+          className={classes.img}
+          loading='eager'
+          size='large'
+        />
+
+        {children ?? (
+          <>
+            <Typography variant='h3' gutterBottom component='h1'>
+              Your cart is empty
+            </Typography>
+            <Typography>Discover our collection and add items to your basket!</Typography>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/index.ts

@@ -0,0 +1,24 @@
+export * from './AddToCartButton/AddToCartButton'
+export { default as AddToCartButton } from './AddToCartButton/AddToCartButton'
+
+export * from './CartFab/CartFab'
+export { default as CartFab } from './CartFab/CartFab'
+
+export * from './CartStartCheckout/CartStartCheckout'
+export { default as CartStartCheckout } from './CartStartCheckout/CartStartCheckout'
+
+export * from './CartTotals/CartTotals'
+export { default as CartTotals } from './CartTotals/CartTotals'
+
+export { default as EmptyCart } from './EmptyCart/EmptyCart'
+
+export { default as ApolloCartErrorAlert } from './ApolloCartError/ApolloCartErrorAlert'
+export * from './ApolloCartError/ApolloCartErrorAlert'
+
+// export { default as ApolloCartErrorFullPage } from './ApolloCartError/ApolloCartErrorFullPage'
+// export * from './ApolloCartError/ApolloCartErrorFullPage'
+
+export * from './CartSummary'
+export { default as CartSummary } from './CartSummary'
+
+export { default as CartItemSummary } from './CartItemSummary'

package/hooks/CreateEmptyCart.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CreateEmptyCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateEmptyCart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createEmptyCart"}}]}}]} as unknown as DocumentNode<CreateEmptyCartMutation, CreateEmptyCartMutationVariables>;
+export type CreateEmptyCartMutationVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CreateEmptyCartMutation = { createEmptyCart?: Types.Maybe<string> };

package/hooks/CreateEmptyCart.graphql

@@ -0,0 +1,3 @@
+mutation CreateEmptyCart {
+  createEmptyCart
+}

package/hooks/CurrentCartId.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CurrentCartIdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CurrentCartId"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currentCartId"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<CurrentCartIdQuery, CurrentCartIdQueryVariables>;
+export type CurrentCartIdQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CurrentCartIdQuery = { currentCartId?: Types.Maybe<{ __typename: 'CurrentCartId', id?: Types.Maybe<string> }> };

package/hooks/CurrentCartId.graphql

@@ -0,0 +1,6 @@
+query CurrentCartId {
+  currentCartId @client {
+    __typename
+    id
+  }
+}

package/hooks/CurrentCartId.graphqls

@@ -0,0 +1,11 @@
+extend type Query {
+  currentCartId: CurrentCartId
+}
+
+type CurrentCartId {
+  id: String
+}
+
+input RegisterCartIdInput {
+  cart_id: String!
+}

package/hooks/CustomerCart.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CustomerCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CustomerCart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customerCart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}}]}},{"kind":"Field","name":{"kind":"Name","value":"total_quantity"}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"applied_taxes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_including_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"subtotal_with_discount_excluding_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"price_incl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_excl_tax"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<CustomerCartQuery, CustomerCartQueryVariables>;
+export type CustomerCartQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CustomerCartQuery = { customerCart: { __typename: 'Cart', id: string, total_quantity: number, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number } | { __typename: 'DownloadableCartItem', uid: string, quantity: number } | { __typename: 'SimpleCartItem', uid: string, quantity: number } | { __typename: 'VirtualCartItem', uid: string, quantity: number }>>>, prices?: Types.Maybe<{ __typename: 'CartPrices', grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, applied_taxes?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, subtotal_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_including_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }>, subtotal_with_discount_excluding_tax?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }>, shipping_addresses: Array<Types.Maybe<{ selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, method_title: string, carrier_title: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ carrier_code: string, method_code?: Types.Maybe<string>, price_incl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, price_excl_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>> } };

package/hooks/CustomerCart.graphql

@@ -0,0 +1,7 @@
+query CustomerCart {
+  customerCart {
+    id
+    __typename
+    ...CartItemCountChanged
+  }
+}

package/hooks/UseCartRedirect.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UseCartRedirectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"UseCartRedirect"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<UseCartRedirectQuery, UseCartRedirectQueryVariables>;
+export type UseCartRedirectQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type UseCartRedirectQuery = { cart?: Types.Maybe<{ id: string }> };

package/hooks/UseCartRedirect.graphql

@@ -0,0 +1,5 @@
+query UseCartRedirect($cartId: String!) {
+  cart(cart_id: $cartId) {
+    id
+  }
+}

package/hooks/UseMergeCustomerCart.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UseMergeCustomerCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UseMergeCustomerCart"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sourceCartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"destinationCartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mergeCarts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"source_cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sourceCartId"}}},{"kind":"Argument","name":{"kind":"Name","value":"destination_cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"destinationCartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<UseMergeCustomerCartMutation, UseMergeCustomerCartMutationVariables>;
+export type UseMergeCustomerCartMutationVariables = Types.Exact<{
+  sourceCartId: Types.Scalars['String'];
+  destinationCartId: Types.Scalars['String'];
+}>;
+
+
+export type UseMergeCustomerCartMutation = { mergeCarts: { __typename: 'Cart', id: string } };

package/hooks/UseMergeCustomerCart.graphql

@@ -0,0 +1,6 @@
+mutation UseMergeCustomerCart($sourceCartId: String!, $destinationCartId: String!) {
+  mergeCarts(source_cart_id: $sourceCartId, destination_cart_id: $destinationCartId) {
+    __typename
+    id
+  }
+}

package/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useAssignCurrentCartId'
+export * from './useCurrentCartId'
+export * from './useCartQuery'
+export * from './useClearCurrentCartId'
+export * from './useCartIdCreate'
+export * from './useFormGqlMutationCart'
+export * from './useMergeCustomerCart'
+export * from './useDisplayInclTax'

package/hooks/useAssignCurrentCartId.ts

@@ -0,0 +1,18 @@
+import { useApolloClient } from '@apollo/client'
+import { useCallback } from 'react'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
+
+export function useAssignCurrentCartId() {
+  const { cache } = useApolloClient()
+
+  return useCallback(
+    (id: string) => {
+      cache.writeQuery({
+        query: CurrentCartIdDocument,
+        data: { currentCartId: { __typename: 'CurrentCartId', id } },
+        broadcast: true,
+      })
+    },
+    [cache],
+  )
+}

package/hooks/useCartIdCreate.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@apollo/client'
+import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
+import { useAssignCurrentCartId } from './useAssignCurrentCartId'
+import { useCurrentCartId } from './useCurrentCartId'
+
+export function useCartIdCreate() {
+  const cartId = useCurrentCartId()
+  const [create] = useMutation(CreateEmptyCartDocument)
+  const assignCurrentCartId = useAssignCurrentCartId()
+
+  return async (): Promise<string> => {
+    if (cartId) return cartId
+
+    const { data } = await create()
+    if (!data?.createEmptyCart) throw Error('Could not create an empty cart')
+
+    // We store the cartId that is returned as the currentCartId result
+    assignCurrentCartId(data.createEmptyCart)
+
+    return data.createEmptyCart
+  }
+}

package/hooks/useCartQuery.ts

@@ -0,0 +1,37 @@
+import { useQuery, TypedDocumentNode, QueryHookOptions } from '@apollo/client'
+import { useRouter } from 'next/router'
+import { useCurrentCartId } from './useCurrentCartId'
+
+/**
+ * Requires the query to have a `$cartId: String!` argument. It will automatically inject the
+ * currently active cart_id.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const { data } = useCartQuery(CartFabQueryDocument)
+ * ```
+ */
+export function useCartQuery<Q, V extends { cartId: string; [index: string]: unknown }>(
+  document: TypedDocumentNode<Q, V>,
+  options: QueryHookOptions<Q, Omit<V, 'cartId'>> & { allowUrl?: boolean } = {},
+) {
+  const { allowUrl = false, ...queryOptions } = options
+
+  const router = useRouter()
+  const currentCartId = useCurrentCartId()
+  const urlCartId = router.query.cartId
+  const usingUrl = allowUrl && typeof urlCartId === 'string'
+
+  const cartId = usingUrl ? urlCartId : currentCartId
+
+  if (usingUrl && typeof queryOptions.fetchPolicy === 'undefined')
+    queryOptions.fetchPolicy = 'cache-only'
+  if (usingUrl && typeof queryOptions.returnPartialData === 'undefined')
+    queryOptions.returnPartialData = true
+  queryOptions.variables = { cartId, ...options?.variables } as V
+  queryOptions.skip = queryOptions?.skip || !cartId
+  queryOptions.ssr = false
+
+  return useQuery(document, queryOptions)
+}

package/hooks/useClearCurrentCartId.ts

@@ -0,0 +1,18 @@
+import { useApolloClient } from '@apollo/client'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
+import { useCurrentCartId } from './useCurrentCartId'
+
+export function useClearCurrentCartId() {
+  const { cache } = useApolloClient()
+  const currentCartId = useCurrentCartId()
+
+  if (!currentCartId) return undefined
+
+  return () => {
+    cache.writeQuery({
+      query: CurrentCartIdDocument,
+      data: { currentCartId: { __typename: 'CurrentCartId', id: null } },
+      broadcast: true,
+    })
+  }
+}

package/hooks/useCurrentCartId.ts

@@ -0,0 +1,6 @@
+import { useQuery } from '@apollo/client'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
+
+export function useCurrentCartId() {
+  return useQuery(CurrentCartIdDocument, { ssr: false }).data?.currentCartId?.id ?? undefined
+}

package/hooks/useDisplayInclTax.ts

@@ -0,0 +1,7 @@
+import { useRouter } from 'next/router'
+
+export function useDisplayInclTax(): boolean {
+  const { locale } = useRouter()
+  const locales = (process.env.NEXT_PUBLIC_DISPLAY_INCL_TAX ?? '').split(',').map((i) => i.trim())
+  return locale ? locales.includes(locale) : false
+}

package/hooks/useFormGqlMutationCart.ts

@@ -0,0 +1,28 @@
+import { MutationHookOptions, TypedDocumentNode } from '@apollo/client'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import {
+  useFormGqlMutation,
+  UseFormGqlMutationReturn,
+  UseFormGraphQlOptions,
+} from '@graphcommerce/react-hook-form'
+import { useCartIdCreate } from './useCartIdCreate'
+
+export function useFormGqlMutationCart<Q, V extends { cartId: string; [index: string]: unknown }>(
+  document: TypedDocumentNode<Q, V>,
+  options: UseFormGraphQlOptions<Q, V> = {},
+  operationOptions?: MutationHookOptions<Q, V>,
+): UseFormGqlMutationReturn<Q, V> {
+  const cartId = useCartIdCreate()
+
+  const onBeforeSubmit = async (variables: V) => {
+    const vars = { ...variables, cartId: await cartId() }
+    return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
+  }
+  const result = useFormGqlMutation<Q, V>(
+    document,
+    { ...options, onBeforeSubmit },
+    { errorPolicy: 'all', ...operationOptions },
+  )
+
+  return result
+}