@graphcommerce/magento-cart 4.1.2 → 4.2.0

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1,6 +1,6 @@
 import { ApolloErrorFullPage, ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { iconSadFace, SvgIcon } from '@graphcommerce/next-ui'
+import { iconSadFace, IconSvg } from '@graphcommerce/next-ui'
 import { Button } from '@mui/material'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
 
@@ -16,7 +16,7 @@ export function ApolloCartErrorFullPage(props: ApolloCartErrorFullPageProps) {
   return (
     <ApolloErrorFullPage
       error={error}
-      icon={<SvgIcon src={iconSadFace} size='xxl' />}
+      icon={<IconSvg src={iconSadFace} size='xxl' />}
       button={action}
       {...passedProps}
     />

package/components/CartAddressMultiLine/{index.tsx → CartAddressMultiLine.tsx}

@@ -5,7 +5,7 @@ import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressMultiLineProps = Partial<CartAddressFragment>
 
-export default function CartAddressMultiLine(props: CartAddressMultiLineProps) {
+export function CartAddressMultiLine(props: CartAddressMultiLineProps) {
   const { country, region, ...addressProps } = props
   return (
     <AddressMultiLine

package/components/CartAddressSingleLine/{index.tsx → CartAddressSingleLine.tsx}

@@ -5,7 +5,7 @@ import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressSingleLineProps = CartAddressFragment & { locale?: CountryCodeEnum }
 
-export default function CartAddressSingleLine(props: CartAddressSingleLineProps) {
+export function CartAddressSingleLine(props: CartAddressSingleLineProps) {
   const { locale } = props
   return <AddressSingleLine {...props} country_code={locale} />
 }

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -24,12 +24,12 @@ import { CartAgreementsDocument } from './CartAgreements.gql'
 
 export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'> & { sx?: SxProps<Theme> }
 
-const name = 'CartAgreementsForm' as const
+const componentName = 'CartAgreementsForm' as const
 const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
-const { classes } = extendableComponent(name, parts)
+const { classes } = extendableComponent(componentName, parts)
 
-export default function CartAgreementsForm(props: CartAgreementsFormProps) {
-  const { step } = props
+export function CartAgreementsForm(props: CartAgreementsFormProps) {
+  const { step, sx = [] } = props
   const { data } = useQuery(CartAgreementsDocument)
 
   // sort conditions so checkboxes will be placed first
@@ -51,7 +51,10 @@ export default function CartAgreementsForm(props: CartAgreementsFormProps) {
   useFormCompose({ form, step, submit, key: 'PaymentAgreementsForm' })
 
   return (
-    <FormDiv className={classes.form} sx={(theme) => ({ pt: theme.spacings.md })}>
+    <FormDiv
+      className={classes.form}
+      sx={[(theme) => ({ pt: theme.spacings.md }), ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <form noValidate onSubmit={submit} name='cartAgreements'>
         <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&

package/components/CartFab/CartFab.tsx

@@ -1,10 +1,10 @@
 import {
   extendableComponent,
   iconShoppingBag,
-  responsiveVal,
   DesktopHeaderBadge,
-  SvgIcon,
+  IconSvg,
   useScrollY,
+  useFabSize,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
 import { alpha, Fab, FabProps, NoSsr, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
@@ -18,13 +18,14 @@ import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 export type CartFabProps = {
   icon?: React.ReactNode
   sx?: SxProps<Theme>
-}
+} & Pick<FabProps, 'color' | 'size' | 'variant'>
 
 type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
 const MotionDiv = styled(m.div)({})
 
 const MotionFab = m(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   React.forwardRef<any, Omit<FabProps, 'style' | 'onDrag'>>((props, ref) => (
     <Fab {...props} ref={ref} />
   )),
@@ -43,8 +44,8 @@ function CartFabContent(props: CartFabContentProps) {
   const paper1 = alpha(theme2.palette.background.paper, 1)
   const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
 
-  const cartIcon = icon ?? <SvgIcon src={iconShoppingBag} size='large' />
-  const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+  const cartIcon = icon ?? <IconSvg src={iconShoppingBag} size='large' />
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box
@@ -57,18 +58,16 @@ function CartFabContent(props: CartFabContentProps) {
       <PageLink href='/cart' passHref>
         <MotionFab
           className={classes.cart}
-          {...fabProps}
           aria-label={t`Cart`}
           color='inherit'
-          size='large'
+          size='responsive'
           style={{ backgroundColor }}
           sx={(theme) => ({
-            width: fabIconSize,
-            height: fabIconSize,
             [theme.breakpoints.down('md')]: {
               backgroundColor: `${theme.palette.background.paper} !important`,
             },
           })}
+          {...fabProps}
         >
           {total_quantity > 0 ? (
             <DesktopHeaderBadge color='primary' variant='dot' overlap='circular'>
@@ -87,7 +86,7 @@ function CartFabContent(props: CartFabContentProps) {
           position: 'absolute',
           height: '100%',
           width: '100%',
-          boxShadow: theme.shadows[6],
+          boxShadow: 6,
           top: 0,
           [theme.breakpoints.down('md')]: {
             opacity: '1 !important',
@@ -109,7 +108,7 @@ function CartFabContent(props: CartFabContentProps) {
  * 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) {
+export function CartFab(props: CartFabProps) {
   const { data } = useCartQuery(CartFabDocument, {
     fetchPolicy: 'cache-only',
     nextFetchPolicy: 'cache-first',

package/components/CartItemSummary/{index.tsx → CartItemSummary.tsx}

@@ -5,14 +5,14 @@ import {
   iconChevronRight,
   responsiveVal,
   SectionContainer,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
 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 { CartTotals } from '../CartTotals/CartTotals'
 import { CartItemSummaryDocument } from './GetCartItemSummary.gql'
 
 const name = 'CartItemSummary' as const
@@ -32,7 +32,7 @@ const { classes } = extendableComponent(name, parts)
 
 type OrderSummaryProps = { sx?: SxProps<Theme> }
 
-export default function CartItemSummary(props: OrderSummaryProps) {
+export function CartItemSummary(props: OrderSummaryProps) {
   const { sx = [] } = props
   const { data } = useCartQuery(CartItemSummaryDocument, { allowUrl: true })
 
@@ -83,7 +83,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
                 left: 8,
               }}
             >
-              <SvgIcon src={iconChevronLeft} />
+              <IconSvg src={iconChevronLeft} />
             </ScrollerButton>
             <Box className={classes.scrollerContainer} sx={{ padding: '1px' }}>
               <Scroller className={classes.scroller}>
@@ -125,7 +125,7 @@ export default function CartItemSummary(props: OrderSummaryProps) {
                 right: 8,
               }}
             >
-              <SvgIcon src={iconChevronRight} />
+              <IconSvg src={iconChevronRight} />
             </ScrollerButton>
           </ScrollerProvider>
         </Box>

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,5 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
-import { iconChevronRight, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Box, Button, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
@@ -19,7 +19,7 @@ const parts = [
 ] as const
 const { classes } = extendableComponent(name, parts)
 
-export default function CartStartCheckout(props: CartStartCheckoutProps) {
+export function CartStartCheckout(props: CartStartCheckoutProps) {
   const { prices, children, sx = [] } = props
 
   const hasTotals = (prices?.grand_total?.value ?? 0) > 0
@@ -34,7 +34,7 @@ export default function CartStartCheckout(props: CartStartCheckoutProps) {
           color='secondary'
           size='large'
           className={classes.checkoutButton}
-          endIcon={<SvgIcon src={iconChevronRight} />}
+          endIcon={<IconSvg src={iconChevronRight} />}
           disabled={!hasTotals}
           sx={(theme) => ({
             marginTop: theme.spacings.md,

package/components/CartSummary/{index.tsx → CartSummary.tsx}

@@ -5,7 +5,7 @@ import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
-import CartAddressMultiLine from '../CartAddressMultiLine'
+import { CartAddressMultiLine } from '../CartAddressMultiLine/CartAddressMultiLine'
 import { GetCartSummaryDocument } from './GetCartSummary.gql'
 
 export type CartSummaryProps = {
@@ -19,7 +19,7 @@ const compName = 'CartSummary' as const
 const parts = ['root', 'detailsContainer', 'sectionHeaderWrapper'] as const
 const { classes } = extendableComponent<OwnerState, typeof compName, typeof parts>(compName, parts)
 
-export default function CartSummary(props: CartSummaryProps) {
+export function CartSummary(props: CartSummaryProps) {
   const { children, editable } = props
 
   const { data } = useCartQuery(GetCartSummaryDocument, { allowUrl: true })

package/components/CartTotals/CartTotals.tsx

@@ -27,7 +27,7 @@ const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>
  *
  * @see https://github.com/magento/magento2/issues/33848
  */
-export default function CartTotals(props: CartTotalsProps) {
+export function CartTotals(props: CartTotalsProps) {
   const { data } = useCartQuery(GetCartTotalsDocument, { allowUrl: true })
   const { containerMargin, sx = [] } = props
 
@@ -95,11 +95,11 @@ export default function CartTotals(props: CartTotalsProps) {
           return (
             <AnimatedRow
               key={discount?.label}
-              sx={(theme) => ({
+              sx={{
                 display: 'flex',
                 justifyContent: 'space-between',
                 typography: 'subtitle1',
-              })}
+              }}
             >
               <Box>{discount?.label}</Box>
               <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>

package/components/EmptyCart/EmptyCart.tsx

@@ -1,17 +1,17 @@
-import { FullPageMessage, SvgIcon, iconShoppingBag } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Button } from '@mui/material'
 import Link from 'next/link'
 import React from 'react'
 
 type EmptyCartProps = { children?: React.ReactNode }
-export default function EmptyCart(props: EmptyCartProps) {
+export function EmptyCart(props: EmptyCartProps) {
   const { children } = props
 
   return (
     <FullPageMessage
       title={<Trans>Your cart is empty</Trans>}
-      icon={<SvgIcon src={iconShoppingBag} size='xxl' />}
+      icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         <Link href='/' passHref>
           <Button variant='pill' color='secondary' size='large'>

package/components/InlineAccount/{index.tsx → InlineAccount.tsx}

@@ -22,7 +22,7 @@ const name = 'InlineAccount' as const
 const parts = ['root', 'innerContainer', 'form', 'button', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
-export default function InlineAccount(props: InlineAccountProps) {
+export function InlineAccount(props: InlineAccountProps) {
   const { title, description, accountHref, sx = [] } = props
 
   const [toggled, setToggled] = useState<boolean>(false)

package/components/index.ts

@@ -1,30 +1,12 @@
+export * from './ApolloCartError'
+export * from './CartAddressMultiLine/CartAddressMultiLine'
+export * from './CartAddressSingleLine/CartAddressSingleLine'
+export * from './CartAgreementsForm/CartAgreements.gql'
+export * from './CartAgreementsForm/CartAgreementsForm'
 export * from './CartFab/CartFab'
-export { default as CartFab } from './CartFab/CartFab'
-
+export * from './CartItemSummary/CartItemSummary'
 export * from './CartStartCheckout/CartStartCheckout'
-export { default as CartStartCheckout } from './CartStartCheckout/CartStartCheckout'
-
+export * from './CartSummary/CartSummary'
 export * from './CartTotals/CartTotals'
-export { default as CartTotals } from './CartTotals/CartTotals'
-
-export { default as EmptyCart } from './EmptyCart/EmptyCart'
-
-export * from './ApolloCartError'
-
-export * from './CartSummary'
-export { default as CartSummary } from './CartSummary'
-
-export { default as CartItemSummary } from './CartItemSummary'
-
-export * from './InlineAccount'
-export { default as InlineAccount } from './InlineAccount'
-
-export * from './CartAddressMultiLine'
-export { default as CartAddressMultiLine } from './CartAddressMultiLine'
-
-export * from './CartAddressSingleLine'
-export { default as CartAddressSingleLine } from './CartAddressSingleLine'
-
-export * from './CartAgreementsForm/CartAgreementsForm'
-export { default as CartAgreementsForm } from './CartAgreementsForm/CartAgreementsForm'
-export * from './CartAgreementsForm/CartAgreements.gql'
+export * from './EmptyCart/EmptyCart'
+export * from './InlineAccount/InlineAccount'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,22 +12,22 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.3",
-    "@graphcommerce/prettier-config-pwa": "^4.0.2",
+    "@graphcommerce/eslint-config-pwa": "^4.0.5",
+    "@graphcommerce/prettier-config-pwa": "^4.0.3",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.1"
+    "@playwright/test": "^1.19.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "^1.0.1",
-    "@graphcommerce/framer-next-pages": "^3.1.0",
-    "@graphcommerce/framer-scroller": "^2.0.3",
-    "@graphcommerce/graphql": "^3.0.3",
-    "@graphcommerce/image": "^3.1.0",
-    "@graphcommerce/magento-customer": "^4.1.2",
-    "@graphcommerce/magento-graphql": "^3.0.3",
-    "@graphcommerce/magento-store": "^4.0.3",
-    "@graphcommerce/next-ui": "^4.1.2",
-    "@graphcommerce/react-hook-form": "^3.0.3"
+    "@graphcommerce/ecommerce-ui": "^1.0.3",
+    "@graphcommerce/framer-next-pages": "^3.1.2",
+    "@graphcommerce/framer-scroller": "^2.1.0",
+    "@graphcommerce/graphql": "^3.0.4",
+    "@graphcommerce/image": "^3.1.1",
+    "@graphcommerce/magento-customer": "^4.1.5",
+    "@graphcommerce/magento-graphql": "^3.0.4",
+    "@graphcommerce/magento-store": "^4.1.3",
+    "@graphcommerce/next-ui": "^4.3.0",
+    "@graphcommerce/react-hook-form": "^3.0.4"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",