@graphcommerce/magento-cart 3.10.1 → 4.0.0

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -1,8 +1,9 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { ApolloErrorAlert, ApolloErrorAlertProps, Button } from '@graphcommerce/next-ui'
+import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
+import { Button } from '@mui/material'
 import Link from 'next/link'
 import React from 'react'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1,12 +1,11 @@
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   ApolloErrorFullPage,
-  Button,
   ApolloErrorFullPageProps,
   iconSadFace,
-  SvgImageSimple,
+  SvgIcon,
 } from '@graphcommerce/next-ui'
-import React from 'react'
+import { Button } from '@mui/material'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 
 export type ApolloCartErrorFullPageProps = Omit<ApolloErrorFullPageProps, 'icon'>
@@ -21,7 +20,7 @@ export function ApolloCartErrorFullPage(props: ApolloCartErrorFullPageProps) {
   return (
     <ApolloErrorFullPage
       error={error}
-      icon={<SvgImageSimple src={iconSadFace} size='xxl' />}
+      icon={<SvgIcon src={iconSadFace} size='xxl' />}
       button={action}
       {...passedProps}
     />

package/components/ApolloCartError/ApolloCartErrorSnackbar.tsx

@@ -1,5 +1,6 @@
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { Button, ApolloErrorSnackbarProps, ApolloErrorSnackbar } from '@graphcommerce/next-ui'
+import { ApolloErrorSnackbarProps, ApolloErrorSnackbar } from '@graphcommerce/next-ui'
+import { Button } from '@mui/material'
 import React from 'react'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -1,5 +1,5 @@
-import { useQuery } from '@apollo/client'
-import { FormDiv } from '@graphcommerce/next-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
 import {
   Controller,
   useForm,
@@ -9,49 +9,33 @@ import {
 } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/macro'
 import {
+  Box,
   Checkbox,
   FormControl,
   FormControlLabel,
   FormHelperText,
   Link,
-  makeStyles,
+  SxProps,
   Theme,
-} from '@material-ui/core'
+} from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { CartAgreementsDocument } from './CartAgreements.gql'
 
-export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'>
+export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'> & { sx?: SxProps<Theme> }
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    formDiv: {
-      paddingTop: theme.spacings.sm,
-    },
-    formInner: {
-      ...theme.typography.body1,
-      display: 'inline-block',
-    },
-    formControlRoot: {
-      display: 'block',
-    },
-    manualCheck: {
-      padding: `9px 0`,
-    },
-  }),
-  {
-    name: 'CartAgreements',
-  },
-)
+const name = 'CartAgreementsForm' as const
+const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function CartAgreementsForm(props: CartAgreementsFormProps) {
   const { step } = props
   const { data } = useQuery(CartAgreementsDocument)
-  const classes = useStyles()
 
   // sort conditions so checkboxes will be placed first
   const sortedAgreements = data?.checkoutAgreements
     ? [...data.checkoutAgreements].sort((a, b) =>
+        // eslint-disable-next-line no-nested-ternary
         a?.mode === 'MANUAL' ? -1 : b?.mode === 'MANUAL' ? 1 : 0,
       )
     : []
@@ -67,9 +51,9 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
   useFormCompose({ form, step, submit, key: 'PaymentAgreementsForm' })
 
   return (
-    <FormDiv classes={{ root: classes.formDiv }}>
+    <FormDiv className={classes.form} sx={(theme) => ({ pt: theme.spacings.md })}>
       <form noValidate onSubmit={submit} name='cartAgreements'>
-        <div className={classes.formInner}>
+        <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&
             sortedAgreements?.map((agreement) => {
               if (!agreement) return null
@@ -88,13 +72,16 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
                       }) => (
                         <FormControl
                           error={!!formState.errors[String(agreement.agreement_id)]}
-                          classes={{ root: classes.formControlRoot }}
+                          className={classes.formControlRoot}
+                          sx={{ display: 'block' }}
                         >
                           <FormControlLabel
                             control={<Checkbox color='secondary' required />}
                             label={
                               <PageLink href={href} passHref>
-                                <Link color='secondary'>{agreement.checkbox_text}</Link>
+                                <Link color='secondary' underline='hover'>
+                                  {agreement.checkbox_text}
+                                </Link>
                               </PageLink>
                             }
                             checked={!!value}
@@ -108,16 +95,18 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
                       )}
                     />
                   ) : (
-                    <div className={classes.manualCheck}>
+                    <Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
                       <PageLink href={href} passHref>
-                        <Link color='secondary'>{agreement.checkbox_text}</Link>
+                        <Link color='secondary' underline='hover'>
+                          {agreement.checkbox_text}
+                        </Link>
                       </PageLink>
-                    </div>
+                    </Box>
                   )}
                 </React.Fragment>
               )
             })}
-        </div>
+        </Box>
       </form>
     </FormDiv>
   )

package/components/CartFab/CartFab.tsx

@@ -1,13 +1,13 @@
 import {
+  extendableComponent,
   iconShoppingBag,
   responsiveVal,
-  StyledBadge,
-  SvgImageSimple,
+  DesktopHeaderBadge,
+  SvgIcon,
   useScrollY,
-  UseStyles,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import { alpha, Fab, FabProps, makeStyles, NoSsr, Theme, useTheme } from '@material-ui/core'
+import { alpha, Fab, FabProps, NoSsr, styled, useTheme, Box } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
@@ -15,85 +15,83 @@ import { useCartQuery } from '../../hooks/useCartQuery'
 import { CartFabDocument } from './CartFab.gql'
 import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    placeholderFab: {
-      width: responsiveVal(42, 56),
-      height: responsiveVal(42, 56),
-      [theme.breakpoints.down('sm')]: {
-        backgroundColor: `${theme.palette.background.paper} !important`,
-      },
-    },
-    cartFab: {
-      boxShadow: 'none',
-      width: responsiveVal(42, 56),
-      height: responsiveVal(42, 56),
-      pointerEvents: 'all',
-      color: theme.palette.text.primary,
-    },
-    shadow: {
-      pointerEvents: 'none',
-      borderRadius: '99em',
-      position: 'absolute',
-      height: '100%',
-      width: '100%',
-      boxShadow: theme.shadows[6],
-      top: 0,
-      [theme.breakpoints.down('sm')]: {
-        opacity: '1 !important',
-      },
-    },
-  }),
-  { name: 'CartFab' },
-)
-
 export type CartFabProps = {
   icon?: React.ReactNode
-} & UseStyles<typeof useStyles>
+}
 
 type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
+const MotionDiv = styled(m.div)({})
+
 const MotionFab = m(
   React.forwardRef<any, Omit<FabProps, 'style' | 'onDrag'>>((props, ref) => (
     <Fab {...props} ref={ref} />
   )),
 )
 
+const { classes } = extendableComponent('CartFab', ['root', 'cart', 'shadow'] as const)
+
 function CartFabContent(props: CartFabContentProps) {
   const { total_quantity, icon, ...fabProps } = props
-  const classes = useStyles(props)
 
-  const theme = useTheme()
+  const theme2 = useTheme()
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
 
-  const paper0 = alpha(theme.palette.background.paper, 0)
-  const paper1 = alpha(theme.palette.background.paper, 1)
+  const paper0 = alpha(theme2.palette.background.paper, 0)
+  const paper1 = alpha(theme2.palette.background.paper, 1)
   const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
 
-  const cartIcon = icon ?? <SvgImageSimple src={iconShoppingBag} loading='eager' size='large' />
+  const cartIcon = icon ?? <SvgIcon src={iconShoppingBag} size='large' />
+  const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+
   return (
-    <>
+    <Box
+      className={classes.root}
+      sx={{ position: 'relative', width: fabIconSize, height: fabIconSize }}
+    >
       <PageLink href='/cart' passHref>
         <MotionFab
+          className={classes.cart}
           {...fabProps}
           aria-label={t`Cart`}
           color='inherit'
           size='large'
-          classes={{ root: classes.placeholderFab }}
           style={{ backgroundColor }}
+          sx={(theme) => ({
+            width: fabIconSize,
+            height: fabIconSize,
+            [theme.breakpoints.down('md')]: {
+              backgroundColor: `${theme.palette.background.paper} !important`,
+            },
+          })}
         >
           {total_quantity > 0 ? (
-            <StyledBadge color='primary' variant='dot'>
+            <DesktopHeaderBadge color='primary' variant='dot' overlap='circular'>
               {cartIcon}
-            </StyledBadge>
+            </DesktopHeaderBadge>
           ) : (
             cartIcon
           )}
         </MotionFab>
       </PageLink>
-      <m.div className={classes.shadow} style={{ opacity }} />
-    </>
+      <MotionDiv
+        className={classes.shadow}
+        sx={(theme) => ({
+          pointerEvents: 'none',
+          borderRadius: '99em',
+          position: 'absolute',
+          height: '100%',
+          width: '100%',
+          boxShadow: theme.shadows[6],
+          top: 0,
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+          },
+        })}
+        style={{ opacity }}
+      />
+    </Box>
   )
 }
 
@@ -108,7 +106,6 @@ function CartFabContent(props: CartFabContentProps) {
  * product to the cart. This would mean that it would immediately start executing this query.
  */
 export default function CartFab(props: CartFabProps) {
-  const classes = useStyles(props)
   const { data } = useCartQuery(CartFabDocument, {
     fetchPolicy: 'cache-only',
     nextFetchPolicy: 'cache-first',
@@ -116,10 +113,8 @@ export default function CartFab(props: CartFabProps) {
   const qty = data?.cart?.total_quantity ?? 0
 
   return (
-    <Fab color='inherit' aria-label='Open Menu' size='medium' className={classes.cartFab}>
-      <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
-        <CartFabContent total_quantity={qty} {...props} />
-      </NoSsr>
-    </Fab>
+    <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
+      <CartFabContent total_quantity={qty} {...props} />
+    </NoSsr>
   )
 }

package/components/CartItemSummary/index.tsx

@@ -5,74 +5,35 @@ import {
   iconChevronRight,
   responsiveVal,
   SectionContainer,
-  SvgImageSimple,
-  UseStyles,
+  SvgIcon,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
-import { Divider, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
+import { Trans } from '@lingui/macro'
+import { Box, Divider, SxProps, Theme } from '@mui/material'
 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: `1px solid ${theme.palette.divider}`,
-      padding: responsiveVal(5, 10),
-      width: `${responsiveVal(48, 96)} !important`,
-      height: `${responsiveVal(48, 96)} !important`,
-      display: 'block',
-    },
-    scrollerContainer: {
-      padding: 1,
-    },
-    scroller: {},
-    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' },
-)
+const name = 'CartItemSummary' as const
+const parts = [
+  'root',
+  'imageScrollerContainer',
+  'image',
+  'scrollerContainer',
+  'scroller',
+  'prevNext',
+  'prev',
+  'next',
+  'sectionHeaderWrapper',
+  'divider',
+] as const
+const { classes } = extendableComponent(name, parts)
 
-type OrderSummaryProps = UseStyles<typeof useStyles>
+type OrderSummaryProps = { sx?: SxProps<Theme> }
 
 export default function CartItemSummary(props: OrderSummaryProps) {
-  const classes = useStyles(props)
-
+  const { sx = [] } = props
   const { data } = useCartQuery(CartItemSummaryDocument, { allowUrl: true })
 
   if (!data?.cart) return null
@@ -80,12 +41,20 @@ export default function CartItemSummary(props: OrderSummaryProps) {
   const items = data?.cart.items
 
   return (
-    <div className={classes.root}>
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
+          border: `1px ${theme.palette.divider} solid`,
+          borderRadius: '4px',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <SectionContainer
-        classes={{
-          sectionHeaderWrapper: classes.sectionHeaderWrapper,
-        }}
-        labelLeft={t`Order summary`}
+        sx={{ '& .SectionHeader': { mt: 0 } }}
+        labelLeft={<Trans>Order summary</Trans>}
         // labelRight={
         //   <PageLink href='/download' passHref>
         //     <Link color='secondary'>Download invoice</Link>
@@ -93,12 +62,30 @@ export default function CartItemSummary(props: OrderSummaryProps) {
         // }
         variantLeft='h6'
       >
-        <div className={classes.imageScrollerContainer}>
+        <Box
+          className={classes.imageScrollerContainer}
+          sx={(theme) => ({
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacings.sm,
+            position: 'relative',
+          })}
+        >
           <ScrollerProvider scrollSnapAlign='start'>
-            <ScrollerButton direction='left' className={clsx(classes.prevNext, classes.prev)}>
-              <SvgImageSimple src={iconChevronLeft} />
+            <ScrollerButton
+              direction='left'
+              className={`${classes.prevNext} ${classes.prev}`}
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 2,
+                left: 8,
+              }}
+            >
+              <SvgIcon src={iconChevronLeft} />
             </ScrollerButton>
-            <div className={classes.scrollerContainer}>
+            <Box className={classes.scrollerContainer} sx={{ padding: '1px' }}>
               <Scroller className={classes.scroller}>
                 {items?.map((item) => (
                   <React.Fragment key={item?.uid}>
@@ -110,22 +97,51 @@ export default function CartItemSummary(props: OrderSummaryProps) {
                         className={classes.image}
                         layout='fill'
                         sizes={responsiveVal(48, 96)}
+                        sx={(theme) => ({
+                          borderRadius: '50%',
+                          marginRight: theme.spacings.xs,
+                          border: `1px solid ${theme.palette.divider}`,
+                          padding: responsiveVal(5, 10),
+                          width: `${responsiveVal(48, 96)} !important`,
+                          height: `${responsiveVal(48, 96)} !important`,
+                          display: 'block',
+                        })}
                       />
                     ) : (
-                      <div />
+                      <Box />
                     )}
                   </React.Fragment>
                 ))}
               </Scroller>
-            </div>
-            <ScrollerButton direction='right' className={clsx(classes.prevNext, classes.next)}>
-              <SvgImageSimple src={iconChevronRight} />
+            </Box>
+            <ScrollerButton
+              direction='right'
+              className={`${(classes.prevNext, classes.next)}`}
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 2,
+                right: 8,
+              }}
+            >
+              <SvgIcon src={iconChevronRight} />
             </ScrollerButton>
           </ScrollerProvider>
-        </div>
-        <Divider classes={{ root: classes.divider }} />
-        <CartTotals classes={{ costsContainer: classes.costContainer }} />
+        </Box>
+        <Divider
+          classes={{ root: classes.divider }}
+          sx={(theme) => ({
+            margin: `${theme.spacings.xs} 0 ${theme.spacings.xs} 0`,
+          })}
+        />
+        <CartTotals
+          sx={(theme) => ({
+            background: theme.palette.background.default,
+            padding: 0,
+          })}
+        />
       </SectionContainer>
-    </div>
+    </Box>
   )
 }

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,55 +1,56 @@
 import { Money } from '@graphcommerce/magento-store'
-import { Button, iconChevronRight, SvgImageSimple } from '@graphcommerce/next-ui'
+import { iconChevronRight, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { makeStyles, Theme } from '@material-ui/core'
+import { Box, Button, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React, { PropsWithChildren } from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    checkoutButtonContainer: {
-      textAlign: 'center',
-    },
-    checkoutButton: {
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.lg,
-    },
-    checkoutButtonIcon: {
-      marginLeft: 0,
-    },
-    checkoutButtonTotal: {
-      paddingRight: theme.spacings.xxs,
-      '& ~ span.MuiButton-endIcon': {
-        marginLeft: 6,
-      },
-    },
-    checkoutMoney: {},
-  }),
-  { name: 'Cart' },
-)
+export type CartStartCheckoutProps = CartStartCheckoutFragment & {
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+}
 
-export type CartStartCheckoutProps = PropsWithChildren<CartStartCheckoutFragment>
+const name = 'CartStartCheckout' as const
+const parts = [
+  'checkoutButtonContainer',
+  'checkoutButton',
+  'checkoutButtonTotal',
+  'checkoutMoney',
+] as const
+const { classes } = extendableComponent(name, parts)
 
 export default function CartStartCheckout(props: CartStartCheckoutProps) {
-  const { prices, children } = props
+  const { prices, children, sx = [] } = props
 
   const hasTotals = (prices?.grand_total?.value ?? 0) > 0
-  const classes = useStyles()
   return (
-    <div className={classes.checkoutButtonContainer}>
+    <Box
+      className={classes.checkoutButtonContainer}
+      sx={[{ textAlign: 'center' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <PageLink href='/checkout' passHref>
         <Button
           variant='pill'
           color='secondary'
           size='large'
           className={classes.checkoutButton}
-          endIcon={<SvgImageSimple src={iconChevronRight} inverted />}
+          endIcon={<SvgIcon src={iconChevronRight} />}
           disabled={!hasTotals}
+          sx={(theme) => ({
+            marginTop: theme.spacings.md,
+            marginBottom: theme.spacings.lg,
+          })}
         >
-          <span className={classes.checkoutButtonTotal}>
+          <Box
+            component='span'
+            className={classes.checkoutButtonTotal}
+            sx={(theme) => ({
+              paddingRight: theme.spacings.xxs,
+              '& ~ span.MuiButton-endIcon': { marginLeft: '6px' },
+            })}
+          >
             <Trans>Start Checkout</Trans>
-          </span>{' '}
+          </Box>{' '}
           {hasTotals && (
             <span className={classes.checkoutMoney}>
               <Money {...prices?.grand_total} />
@@ -58,6 +59,6 @@ export default function CartStartCheckout(props: CartStartCheckoutProps) {
         </Button>
       </PageLink>
       {children}
-    </div>
+    </Box>
   )
 }