Merge pull request #2338 from graphcommerce-org/chore/pass-sx-prop-to…

…-EmptyCart-component

Chore/pass sx prop to empty cart component

.changeset/old-chefs-deny.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart': patch
+---
+
+Pass sx props to EmptyCart component

examples/magento-graphcms/pages/cart.tsx

@@ -92,7 +92,7 @@ function CartPage() {
             </OverlayStickyBottom>
           </>
         ) : (
-          <EmptyCart>{error && <ApolloCartErrorAlert error={error} />}</EmptyCart>
+          <EmptyCart disableMargin>{error && <ApolloCartErrorAlert error={error} />}</EmptyCart>
         )}
       </WaitForQueries>
     </>

examples/magento-graphcms/pages/checkout/index.tsx

@@ -63,7 +63,7 @@ function ShippingPage() {
         }
       >
         {shippingPage.error && <ApolloCartErrorFullPage error={shippingPage.error} />}
-        {!shippingPage.error && !cartExists && <EmptyCart />}
+        {!shippingPage.error && !cartExists && <EmptyCart disableMargin />}
         {!shippingPage.error && cartExists && (
           <ComposedForm>
             <LayoutHeader

examples/magento-graphcms/pages/checkout/item/[url].tsx

@@ -60,7 +60,9 @@ function CartItemEdit(props: Props) {
         }
       >
         {!cartItem && (
-          <EmptyCart>{cart.error && <ApolloCartErrorAlert error={cart.error} />}</EmptyCart>
+          <EmptyCart disableMargin>
+            {cart.error && <ApolloCartErrorAlert error={cart.error} />}
+          </EmptyCart>
         )}
         {cartItem && (
           <EditCartItemForm

examples/magento-graphcms/pages/checkout/payment.tsx

@@ -59,7 +59,7 @@ function PaymentPage() {
         }
       >
         {billingPage.error && <ApolloCartErrorFullPage error={billingPage.error} />}
-        {!billingPage.error && !cartExists && <EmptyCart />}
+        {!billingPage.error && !cartExists && <EmptyCart disableMargin />}
         {cartExists && !billingPage.error && (
           <>
             <LayoutHeader

packages/magento-cart/components/EmptyCart/EmptyCart.tsx

@@ -5,16 +5,19 @@ import {
   FullPageMessageProps,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button } from '@mui/material'
+import { Button, SxProps, Theme } from '@mui/material'
 import React from 'react'
 
-type EmptyCartProps = { children?: React.ReactNode } & Pick<FullPageMessageProps, 'button'>
+type EmptyCartProps = {
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<FullPageMessageProps, 'button' | 'disableMargin'>
+
 export function EmptyCart(props: EmptyCartProps) {
-  const { children, button } = props
+  const { children, button, ...rest } = props
 
   return (
     <FullPageMessage
-      sx={(theme) => ({ mt: { md: theme.spacings.md } })}
       title={<Trans id='Your cart is empty' />}
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
@@ -24,6 +27,7 @@ export function EmptyCart(props: EmptyCartProps) {
           </Button>
         )
       }
+      {...rest}
     >
       {children ?? <Trans id='Discover our collection and add items to your cart!' />}
     </FullPageMessage>