Show free shipping in the cart summary
React · React · beginner · greenfield
Implements the free-shipping promo in the cart summary: compares the subtotal against the $50 threshold, zeroes out shipping when the order qualifies, and shows the 'add $X more' nudge otherwise. Amounts stay in integer cents throughout, formatted only at render.
Marketing announced the promo as 'Free shipping on orders $50+' sitewide, so the checkout copy and the banner both promise the threshold itself qualifies.
Requirements
- The cart summary shows Subtotal, Shipping, and Total, plus a nudge line telling the shopper how much more to add when they don't yet qualify for free shipping.
- Free shipping applies to orders of $50.00 or more — the threshold is inclusive: a $50.00 subtotal ships free. Below that, shipping is a flat $5.99.
- All money is handled as integer cents (subtotalCents is an integer >= 0); display formats cents as dollars with two decimals.
- The nudge is shown only when the order does not qualify for free shipping.
Files touched
- src/components/CartSummary.jsx
--- src/components/CartSummary.jsx
+import React from 'react';
+
+const FREE_SHIPPING_THRESHOLD_CENTS = 5000;
+const FLAT_SHIPPING_CENTS = 599;
+
+function formatCents(cents) {
+ return `$${(cents / 100).toFixed(2)}`;
+}
+
+export default function CartSummary({ subtotalCents }) {
+ const qualifies = subtotalCents > FREE_SHIPPING_THRESHOLD_CENTS;
+ const shippingCents = qualifies ? 0 : FLAT_SHIPPING_CENTS;
+ return (
+ <section className="cart-summary">
+ <dl>
+ <dt>Subtotal</dt>
+ <dd>{formatCents(subtotalCents)}</dd>
+ <dt>Shipping</dt>
+ <dd>{qualifies ? 'Free' : formatCents(shippingCents)}</dd>
+ <dt>Total</dt>
+ <dd>{formatCents(subtotalCents + shippingCents)}</dd>
+ </dl>
+ {!qualifies && (
+ <p className="nudge">
+ Add {formatCents(FREE_SHIPPING_THRESHOLD_CENTS - subtotalCents)} more for free shipping.
+ </p>
+ )}
+ </section>
+ );