Merge pull request #2479 from graphcommerce-org/store-credit

feat(GCOM-1538): add StoreCredit placeholder component, allow checkout when total of the cart is 0

.changeset/rare-horses-cheer.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart': patch
+---
+
+Solve issue where the total of the cart was zero due to discount or store credit the user couldn't proceed to the checkout. We now check for items and errors instead of the total.

docs/feature-list.md

@@ -203,7 +203,7 @@ Features taken from the Magento Commerce 2 Feature List
 - [x] Zoom-in on product images.
 - [ ] Display product videos from YouTube or Vimeo. — [Todo]
 - [x] Include swatches to show colors, fabrics, and more.
-- [ ] Show multiple products in a grouped view. — [Todo]
+- [x] Show multiple products in a grouped view. — [Todo]
 - [x] Indicate stock availability.
 - [x] Set related products, up-sell, and cross-sell recommendations to increase
       average order value.
@@ -276,7 +276,7 @@ Features taken from the Magento Commerce 2 Feature List
       emails.
 - [x] Build customer relationships by creating newsletters and managing their
       distribution.
-- [ ] Connect with customers with a Contact Us form. — [Todo]
+- [x] Connect with customers with a Contact Us form.
 
 ### Customer loyalty
 
@@ -305,10 +305,11 @@ Features taken from the Magento Commerce 2 Feature List
 - [x] Choose default billing and shipping addresses.
 - [x] Store unlimited addresses in the address book.
 - [x] See order status and history.
-- [ ] Re-order from the customer account. — [Todo]
+- [x] Re-order from the customer account.
 - [x] View recently ordered items.
-- [ ] Track available store credits, gift card totals, and reward points. —
-      [Commerce]
+- [x] Track available store credits — [Commerce]
+- [ ] Track gift card totals — [Commerce]
+- [ ] Track reward points — [Commerce]
 - [x] Manage newsletter subscriptions.
 - [x] View submitted product reviews.
 - [ ] Access downloadable/digital products. — [Todo]

examples/magento-graphcms/pages/cart.tsx

@@ -79,8 +79,11 @@ function CartPage() {
         {hasItems ? (
           <>
             <Container maxWidth='md'>
-              <CartItemsActionCards cart={data.cart} sx={{ position: 'relative', zIndex: 1 }} />
-              <CouponAccordion key='couponform' sx={(theme) => ({ mt: theme.spacings.md })} />
+              <CartItemsActionCards
+                cart={data.cart}
+                sx={(theme) => ({ position: 'relative', zIndex: 1, mb: theme.spacings.md })}
+              />
+              <CouponAccordion key='couponform' />
               <CartTotals containerMargin sx={{ typography: 'body1' }} />
               <ApolloCartErrorAlert error={error} />
             </Container>

examples/magento-open-source/.gitignore

@@ -33,4 +33,5 @@ yarn-error.log*
 
 # managed by: graphcommerce
 pages/.well-known/assetlinks.json.tsx
+pages/account/store-credit.tsx
 # end managed by: graphcommerce

examples/magento-open-source/pages/cart.tsx

@@ -80,8 +80,11 @@ function CartPage() {
         {hasItems ? (
           <>
             <Container maxWidth='md'>
-              <CartItemsActionCards cart={data.cart} sx={{ position: 'relative', zIndex: 1 }} />
-              <CouponAccordion key='couponform' sx={(theme) => ({ mt: theme.spacings.md })} />
+              <CartItemsActionCards
+                cart={data.cart}
+                sx={(theme) => ({ position: 'relative', zIndex: 1, mb: theme.spacings.md })}
+              />
+              <CouponAccordion key='couponform' />
               <CartTotals containerMargin sx={{ typography: 'body1' }} />
               <ApolloCartErrorAlert error={error} />
             </Container>

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

@@ -40,7 +40,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
   } = props
 
   const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
-  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0 || !!cart?.items?.length
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (

packages/magento-cart/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -28,7 +28,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
 
   const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
 
-  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0 || !!cart?.items?.length
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (