@graphcommerce/magento-cart 3.0.1

package/components/CartFab/CartFab.tsx

@@ -0,0 +1,67 @@
+import { Fab, FabProps, NoSsr } from '@material-ui/core'
+import {
+  iconShoppingBag,
+  StyledBadge,
+  SvgImageSimple,
+  useFixedFabAnimation,
+} from '@graphcommerce/next-ui'
+import { m } from 'framer-motion'
+import PageLink from 'next/link'
+import React from 'react'
+import { useCartQuery } from '../../hooks/useCartQuery'
+import { CartFabDocument } from './CartFab.gql'
+import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
+
+export type CartFabProps = {
+  icon?: React.ReactNode
+} & Omit<FabProps, 'children' | 'aria-label'>
+
+type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
+
+function CartFabContent(props: CartFabContentProps) {
+  const { total_quantity, icon, ...fabProps } = props
+  const cartIcon = icon ?? (
+    <SvgImageSimple src={iconShoppingBag} alt='Shopping Bag' loading='eager' size='large' />
+  )
+  const { filter } = useFixedFabAnimation()
+
+  return (
+    <m.div style={{ filter }}>
+      <PageLink href='/cart' passHref>
+        <Fab aria-label='Cart' color='inherit' size='large' {...fabProps}>
+          {total_quantity > 0 ? (
+            <StyledBadge color='primary' variant='dot'>
+              {cartIcon}
+            </StyledBadge>
+          ) : (
+            cartIcon
+          )}
+        </Fab>
+      </PageLink>
+    </m.div>
+  )
+}
+
+/**
+ * We give CartFab a bit of special handling. We don't want to make requests for this component
+ * whilly nilly. We've imposed some limitations:
+ *
+ * We use useCartQuery that means that this will only execute when there is a cartId.
+ *
+ * We use fetchPolicy 'cache-only' so that when the cart comes into existence it will not
+ * immediately start fetching. Why? There is a time between creating a cart and adding the first
+ * product to the cart. This would mean that it would immediately start executing this query.
+ */
+export default function CartFab(props: CartFabProps) {
+  const { data } = useCartQuery(CartFabDocument, {
+    fetchPolicy: 'cache-only',
+    nextFetchPolicy: 'cache-first',
+  })
+  const qty = data?.cart?.total_quantity ?? 0
+
+  return (
+    <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
+      <CartFabContent total_quantity={qty} {...props} />
+    </NoSsr>
+  )
+}

package/components/CartFab/CartTotalQuantity.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartTotalQuantityFragment = { total_quantity: number };

package/components/CartFab/CartTotalQuantity.graphql

@@ -0,0 +1,3 @@
+fragment CartTotalQuantity on Cart @inject(into: ["CartItemCountChanged"]) {
+  total_quantity
+}

package/components/CartItemSummary/GetCartItemSummary.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 CartItemSummaryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CartItemSummary"},"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"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"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":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"row_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":"row_total_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":"total_item_discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"BundleCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"bundle_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"price"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_uid"}},{"kind":"Field","name":{"kind":"Name","value":"configurable_product_option_value_uid"}},{"kind":"Field","name":{"kind":"Name","value":"option_label"}},{"kind":"Field","name":{"kind":"Name","value":"value_label"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"DownloadableCartItem"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"links"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"samples"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sample_url"}},{"kind":"Field","name":{"kind":"Name","value":"sort_order"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}},{"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<CartItemSummaryQuery, CartItemSummaryQueryVariables>;
+export type CartItemSummaryQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type CartItemSummaryQuery = { cart?: Types.Maybe<{ id: string, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleCartItem', uid: string, quantity: number, bundle_options: Array<Types.Maybe<{ uid: string, label: string, type: string, values: Array<Types.Maybe<{ uid: string, label: string, quantity: number, price: number }>> }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'ConfigurableCartItem', uid: string, quantity: number, configurable_options: Array<Types.Maybe<{ configurable_product_option_uid: string, configurable_product_option_value_uid: string, option_label: string, value_label: string }>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'DownloadableCartItem', uid: string, quantity: number, links?: Types.Maybe<Array<Types.Maybe<{ uid: string, price?: Types.Maybe<number>, sample_url?: Types.Maybe<string>, title?: Types.Maybe<string> }>>>, samples?: Types.Maybe<Array<Types.Maybe<{ sample_url?: Types.Maybe<string>, sort_order?: Types.Maybe<number>, title?: Types.Maybe<string> }>>>, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'SimpleCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> } | { __typename: 'VirtualCartItem', uid: string, quantity: number, product: { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, name?: Types.Maybe<string>, thumbnail?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }> }, prices?: Types.Maybe<{ discounts?: Types.Maybe<Array<Types.Maybe<{ label: string, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, row_total_including_tax: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, total_item_discount?: 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> } }>>> }>>, 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/CartItemSummary/GetCartItemSummary.graphql

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

package/components/CartItemSummary/index.tsx

@@ -0,0 +1,133 @@
+import { Divider, makeStyles, Theme } from '@material-ui/core'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Image } from '@graphcommerce/image'
+import {
+  iconChevronLeft,
+  iconChevronRight,
+  responsiveVal,
+  SectionContainer,
+  SvgImageSimple,
+  UseStyles,
+} from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import React from 'react'
+import { useCartQuery } from '../../hooks'
+import CartTotals from '../CartTotals/CartTotals'
+import { CartItemSummaryDocument } from './GetCartItemSummary.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
+      border: `1px ${theme.palette.divider} solid`,
+      borderRadius: 4,
+    },
+    imageScrollerContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacings.sm,
+      position: 'relative',
+    },
+    image: {
+      borderRadius: '50%',
+      marginRight: theme.spacings.xs,
+      border: `5px ${theme.palette.common.white} solid`,
+      boxShadow: `0px 0px 2px ${theme.palette.grey[700]}`,
+      width: `${responsiveVal(48, 96)} !important`,
+      height: `${responsiveVal(48, 96)} !important`,
+      display: 'block',
+    },
+    scrollerContainer: {
+      padding: 1,
+    },
+    scroller: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+    },
+    prevNext: {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      zIndex: 2,
+    },
+    prev: {
+      left: 8,
+    },
+    next: {
+      right: 8,
+    },
+    costContainer: {
+      background: theme.palette.background.default,
+      padding: 0,
+    },
+    sectionHeaderWrapper: {
+      marginTop: 0,
+    },
+    divider: {
+      margin: `${theme.spacings.xs} 0 ${theme.spacings.xs} 0`,
+    },
+  }),
+  { name: 'CartItemSummary' },
+)
+
+type OrderSummaryProps = UseStyles<typeof useStyles>
+
+export default function CartItemSummary(props: OrderSummaryProps) {
+  const classes = useStyles(props)
+
+  const { data } = useCartQuery(CartItemSummaryDocument, { allowUrl: true })
+
+  if (!data?.cart) return null
+
+  const { items } = data?.cart
+
+  return (
+    <div className={classes.root}>
+      <SectionContainer
+        classes={{
+          sectionHeaderWrapper: classes.sectionHeaderWrapper,
+        }}
+        labelLeft='Order summary'
+        // labelRight={
+        //   <PageLink href='/download' passHref>
+        //     <Link color='secondary'>Download invoice</Link>
+        //   </PageLink>
+        // }
+        variantLeft='h6'
+      >
+        <div className={classes.imageScrollerContainer}>
+          <ScrollerProvider scrollSnapAlign='start'>
+            <ScrollerButton direction='left' className={clsx(classes.prevNext, classes.prev)}>
+              <SvgImageSimple src={iconChevronLeft} />
+            </ScrollerButton>
+            <div className={classes.scrollerContainer}>
+              <Scroller className={classes.scroller}>
+                {items?.map((item) => (
+                  <React.Fragment key={item?.uid}>
+                    {item?.product?.thumbnail?.url ? (
+                      <Image
+                        key={item?.uid}
+                        alt={item?.product?.thumbnail?.label ?? ''}
+                        src={item?.product?.thumbnail?.url ?? ''}
+                        className={classes.image}
+                        layout='fill'
+                        sizes={responsiveVal(48, 96)}
+                      />
+                    ) : (
+                      <div />
+                    )}
+                  </React.Fragment>
+                ))}
+              </Scroller>
+            </div>
+            <ScrollerButton direction='right' className={clsx(classes.prevNext, classes.next)}>
+              <SvgImageSimple src={iconChevronRight} />
+            </ScrollerButton>
+          </ScrollerProvider>
+        </div>
+        <Divider classes={{ root: classes.divider }} />
+        <CartTotals classes={{ costsContainer: classes.costContainer }} />
+      </SectionContainer>
+    </div>
+  )
+}

package/components/CartStartCheckout/CartStartCheckout.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartStartCheckoutFragment = { prices?: Types.Maybe<{ grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> };

package/components/CartStartCheckout/CartStartCheckout.graphql

@@ -0,0 +1,7 @@
+fragment CartStartCheckout on Cart @inject(into: ["CartItemCountChanged"]) {
+  prices {
+    grand_total {
+      ...Money
+    }
+  }
+}

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -0,0 +1,63 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Money } from '@graphcommerce/magento-store'
+import { Button, iconChevronRight, responsiveVal, SvgImage } from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    checkoutButtonContainer: {
+      textAlign: 'center',
+    },
+    checkoutButton: {
+      borderRadius: responsiveVal(40, 50),
+      fontSize: 17,
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: 500,
+      marginBottom: theme.spacings.lg,
+      marginTop: theme.spacings.lg,
+      width: '100%',
+      maxHeight: 60,
+      maxWidth: 440,
+      padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
+    },
+    checkoutButtonIcon: {
+      marginLeft: 0,
+    },
+    checkoutButtonLabel: {
+      fontWeight: theme.typography.fontWeightBold,
+      paddingRight: theme.spacings.xxs,
+      '& ~ span.MuiButton-endIcon': {
+        marginLeft: 6,
+      },
+    },
+  }),
+  { name: 'Cart' },
+)
+
+export type CartStartCheckoutProps = PropsWithChildren<CartStartCheckoutFragment>
+
+export default function CartStartCheckout(props: CartStartCheckoutProps) {
+  const { prices, children } = props
+
+  const hasTotals = (prices?.grand_total?.value ?? 0) > 0
+  const classes = useStyles()
+  return (
+    <div className={classes.checkoutButtonContainer}>
+      <PageLink href='/checkout' passHref>
+        <Button
+          variant='pill'
+          color='secondary'
+          className={classes.checkoutButton}
+          endIcon={<SvgImage src={iconChevronRight} shade='inverted' alt='checkout' />}
+          disabled={!hasTotals}
+        >
+          <span className={classes.checkoutButtonLabel}>Start Checkout</span>{' '}
+          {hasTotals && <Money {...prices?.grand_total} />}
+        </Button>
+      </PageLink>
+      {children}
+    </div>
+  )
+}

package/components/CartSummary/CartSummary.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartSummaryFragment = { email?: Types.Maybe<string>, id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, carrier_title: string, method_title: string }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>>, billing_address?: Types.Maybe<{ __typename: 'BillingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }> };

package/components/CartSummary/CartSummary.graphql

@@ -0,0 +1,15 @@
+fragment CartSummary on Cart {
+  email
+
+  shipping_addresses {
+    selected_shipping_method {
+      carrier_code
+      method_code
+      carrier_title
+      method_title
+    }
+  }
+
+  ...ShippingAddress
+  ...BillingAddress
+}

package/components/CartSummary/GetCartSummary.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 GetCartSummaryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCartSummary"},"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":"email"}},{"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":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"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":"available"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"error_message"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"billing_address"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetCartSummaryQuery, GetCartSummaryQueryVariables>;
+export type GetCartSummaryQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type GetCartSummaryQuery = { cart?: Types.Maybe<{ email?: Types.Maybe<string>, id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }>, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string, carrier_title: string, method_title: string }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>> }>>, billing_address?: Types.Maybe<{ __typename: 'BillingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }> }> };

package/components/CartSummary/GetCartSummary.graphql

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

package/components/CartSummary/index.tsx

@@ -0,0 +1,139 @@
+import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
+import { CartAddressMultiLine } from '@graphcommerce/magento-cart-address'
+import { SectionContainer, UseStyles } from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+import { useCartQuery } from '../../hooks'
+import { GetCartSummaryDocument } from './GetCartSummary.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      borderRadius: 4,
+      background: '#FFFADD',
+      margin: `${theme.spacings.sm} 0`,
+    },
+    detailsContainer: {
+      padding: theme.spacings.sm,
+      gridColumnGap: theme.spacings.xl,
+      gridRowGap: theme.spacings.sm,
+      display: `grid`,
+      [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: `1fr 1fr`,
+        marginTop: theme.spacings.xxs,
+      },
+    },
+    sectionHeaderWrapper: {
+      marginTop: 0,
+      paddingBottom: 8,
+    },
+    orderNumberLabel: {
+      display: 'grid',
+      gridTemplateColumns: `2fr 1fr`,
+    },
+  }),
+  { name: 'OrderDetails' },
+)
+
+export type CartSummaryProps = {
+  children?: React.ReactNode
+  editable?: boolean
+} & UseStyles<typeof useStyles>
+
+export default function CartSummary(props: CartSummaryProps) {
+  const classes = useStyles(props)
+  const { children, editable } = props
+
+  const { data } = useCartQuery(GetCartSummaryDocument, {
+    // allowUrl: true,
+    fetchPolicy: 'network-only',
+  })
+
+  if (!data?.cart) return null
+
+  const { email, shipping_addresses, billing_address } = data.cart
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.detailsContainer}>
+        <div>
+          <SectionContainer
+            variantLeft='h5'
+            labelLeft='Confirmation + Track & trace'
+            classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+            // labelRight={
+            //   editable ? (
+            //     <PageLink href='/checkout/edit' passHref>
+            //       <Link color='secondary' variant='body2'>
+            //         Edit
+            //       </Link>
+            //     </PageLink>
+            //   ) : undefined
+            // }
+          />
+          <Typography variant='body1'>{email || ''}</Typography>
+        </div>
+        <div>
+          <SectionContainer
+            variantLeft='h5'
+            labelLeft='Shipping method'
+            classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+            // labelRight={
+            //   editable ? (
+            //     <PageLink href='/checkout/edit/shipping' passHref>
+            //       <Link color='secondary' variant='body2'>
+            //         Edit
+            //       </Link>
+            //     </PageLink>
+            //   ) : undefined
+            // }
+          />
+          <Typography variant='body1'>
+            {shipping_addresses?.[0]?.selected_shipping_method?.carrier_title}
+            {shipping_addresses?.[0]?.selected_shipping_method?.method_title}
+          </Typography>
+        </div>
+        {shipping_addresses && (
+          <>
+            <div>
+              <SectionContainer
+                variantLeft='h5'
+                labelLeft='Shipping address'
+                classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+                // labelRight={
+                //   editable ? (
+                //     <PageLink href='/checkout/edit/shipping_address' passHref>
+                //       <Link color='secondary' variant='body2'>
+                //         Edit
+                //       </Link>
+                //     </PageLink>
+                //   ) : undefined
+                // }
+              />
+              <CartAddressMultiLine {...shipping_addresses[0]} />
+            </div>
+            <div>
+              <SectionContainer
+                variantLeft='h5'
+                labelLeft='Billing Address'
+                classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+                labelRight={
+                  editable ? (
+                    <PageLink href='/checkout/edit/billing-address' passHref>
+                      <Link color='secondary' variant='body2'>
+                        Edit
+                      </Link>
+                    </PageLink>
+                  ) : undefined
+                }
+              >
+                <CartAddressMultiLine {...billing_address} />
+              </SectionContainer>
+            </div>
+          </>
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}

package/components/CartTotals/CartTotals.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CartTotalsFragment = { 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/CartTotals.graphql

@@ -0,0 +1,51 @@
+fragment CartTotals on Cart @inject(into: ["CartItemCountChanged"]) {
+  shipping_addresses {
+    selected_shipping_method {
+      carrier_code
+      method_code
+      method_title
+      carrier_title
+      amount {
+        ...Money
+      }
+    }
+    # https://github.com/magento/magento2/pull/31322
+    available_shipping_methods {
+      carrier_code
+      method_code
+      price_incl_tax {
+        ...Money
+      }
+      price_excl_tax {
+        ...Money
+      }
+    }
+  }
+  prices {
+    __typename
+    applied_taxes {
+      amount {
+        ...Money
+      }
+      label
+    }
+    discounts {
+      amount {
+        ...Money
+      }
+      label
+    }
+    grand_total {
+      ...Money
+    }
+    subtotal_excluding_tax {
+      ...Money
+    }
+    subtotal_including_tax {
+      ...Money
+    }
+    subtotal_with_discount_excluding_tax {
+      ...Money
+    }
+  }
+}