@cartbase/storefront 0.21.0 → 0.22.1

package/src/checkout/mobile-checkout-bottom-bar.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { MobileOrderSummaryBody } from "./mobile-order-summary-body"
+import { checkoutTotals } from "./summary-math"
+
+/**
+ * MobileCheckoutBottomBar — the card that sits directly above Place order
+ * on a phone: the first item's picture with the number of units on it, the
+ * word Total over the count, the figure, and a chevron onto the same body
+ * the top bar opens. It is the last thing a shopper reads before paying,
+ * so what they are paying for is one tap away at the moment it matters.
+ *
+ * It opens upwards, the body above its own row, so the row and the Buy
+ * button under it stay where the thumb already is. Hidden from the small
+ * breakpoint up, where the summary column is always open.
+ */
+
+type MobileCheckoutBottomBarProps = {
+  /** The SDK transport, for the doors inside the opened body. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  methodFeeLabel?: string
+  showGiftCards?: boolean
+  /** Hide the promo door inside the body; see MobileOrderSummaryBody. */
+  hideDiscount?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileCheckoutBottomBar({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards,
+  hideDiscount,
+  onCartChange,
+}: MobileCheckoutBottomBarProps) {
+  const labels = useCheckoutLabels()
+  const [open, setOpen] = useState(false)
+  const { displayTotal, itemCount, productItems } = checkoutTotals({
+    cart,
+    optimisticShippingCost,
+    optimisticMethodFee,
+  })
+
+  const firstItem = productItems[0]
+  if (!firstItem) return null
+
+  return (
+    <div className="sm:hidden rounded-[2px] border border-border bg-card overflow-hidden">
+      {open && (
+        <div className="px-5 pt-5 pb-2">
+          <MobileOrderSummaryBody
+            client={client}
+            cart={cart}
+            optimisticShippingCost={optimisticShippingCost}
+            optimisticMethodFee={optimisticMethodFee}
+            methodFeeLabel={methodFeeLabel}
+            showGiftCards={showGiftCards}
+            hideDiscount={hideDiscount}
+            onCartChange={onCartChange}
+          />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "w-full flex items-center gap-3 px-4 py-3 text-left",
+          open && "border-t border-border"
+        )}
+        aria-expanded={open}
+      >
+        <div className="relative flex-shrink-0">
+          <div className="w-12 h-12 rounded-lg overflow-hidden bg-muted border border-border">
+            {firstItem.thumbnail ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={firstItem.thumbnail}
+                alt={firstItem.product_title ?? ""}
+                className="w-full h-full object-cover"
+              />
+            ) : null}
+          </div>
+          {itemCount > 1 && (
+            <span className="absolute -top-1.5 -right-1.5 min-w-[20px] h-[20px] px-1 text-[10px] font-bold rounded-full bg-foreground text-card flex items-center justify-center shadow-sm ring-2 ring-card">
+              {itemCount}
+            </span>
+          )}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-base font-bold text-foreground leading-tight">{labels.total}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {itemCount} {labels.items}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <Price
+            amount={displayTotal}
+            currencyCode={cart.currency_code}
+            className="text-base font-bold text-foreground tracking-tight"
+          />
+          <svg
+            className={cn(
+              "w-4 h-4 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180"
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.25}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  )
+}

package/src/checkout/mobile-checkout-top-bar.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { MobileOrderSummaryBody } from "./mobile-order-summary-body"
+import { checkoutTotals } from "./summary-math"
+
+/**
+ * MobileCheckoutTopBar — the strip a phone shopper meets first, above the
+ * contact form: the words "Order summary", a chevron, and the total. It
+ * opens onto the items and the breakdown.
+ *
+ * Closed by default, because the first thing a shopper checks is the
+ * figure, and only then, if they want, what makes it up. The desktop
+ * column is always open, so this bar is hidden from the small breakpoint
+ * up: the two never show at once.
+ */
+
+type MobileCheckoutTopBarProps = {
+  /** The SDK transport, for the doors inside the opened body. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  methodFeeLabel?: string
+  showGiftCards?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileCheckoutTopBar({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards,
+  onCartChange,
+}: MobileCheckoutTopBarProps) {
+  const labels = useCheckoutLabels()
+  const [open, setOpen] = useState(false)
+  const { displayTotal } = checkoutTotals({
+    cart,
+    optimisticShippingCost,
+    optimisticMethodFee,
+  })
+
+  return (
+    <div className="sm:hidden bg-muted border-y border-border">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-5 py-3.5 text-left"
+        aria-expanded={open}
+      >
+        <span className="inline-flex items-center gap-1.5 text-sm font-medium text-primary">
+          {labels.orderSummary}
+          <svg
+            className={cn("w-4 h-4 transition-transform duration-200", open && "rotate-180")}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.25}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </span>
+        <Price
+          amount={displayTotal}
+          currencyCode={cart.currency_code}
+          className="text-base font-bold text-foreground tracking-tight"
+        />
+      </button>
+
+      {open && (
+        <div className="px-5 pb-5">
+          <MobileOrderSummaryBody
+            client={client}
+            cart={cart}
+            optimisticShippingCost={optimisticShippingCost}
+            optimisticMethodFee={optimisticMethodFee}
+            methodFeeLabel={methodFeeLabel}
+            showGiftCards={showGiftCards}
+            onCartChange={onCartChange}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/mobile-order-summary-body.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { Price } from "../lib/price"
+import { useCheckoutLabels } from "./context"
+import { DiscountSection } from "./discount-section"
+import { GiftCardSection } from "./gift-card-section"
+import { CheckoutLineItem } from "./order-summary"
+import { checkoutTotals, isCompanyOrder } from "./summary-math"
+
+/**
+ * MobileOrderSummaryBody — what the two mobile summary bars reveal when a
+ * shopper opens them: the items with their counts, the discount and
+ * gift-card doors, and the same breakdown the desktop column prints.
+ *
+ * It carries no card of its own: the top bar is a utility strip and the
+ * bottom bar is a product card, so each parent decides its own ground. The
+ * grand total is not repeated here either, because the bar's own row shows
+ * it whether the body is open or closed.
+ *
+ * The numbers come from `checkoutTotals`, the same function the desktop
+ * summary calls, so the three surfaces cannot drift apart.
+ */
+
+type MobileOrderSummaryBodyProps = {
+  /** The SDK transport — the promo and gift-card doors run through it. */
+  client: StorefrontClient
+  cart: Cart
+  optimisticShippingCost: number | null
+  optimisticMethodFee?: number | null
+  /** Override for the fee row's name; the cart's own label otherwise. */
+  methodFeeLabel?: string
+  /** Show the gift-card door. Default true, as on the desktop summary. */
+  showGiftCards?: boolean
+  /**
+   * Hide the promo door inside this body. A layout that surfaces an
+   * always-open discount field of its own (the checkout does this on the
+   * phone, right above the bottom bar) passes true so the shopper is not
+   * offered the same thing twice.
+   */
+  hideDiscount?: boolean
+  onCartChange?: (cart: Cart) => void
+}
+
+export function MobileOrderSummaryBody({
+  client,
+  cart,
+  optimisticShippingCost,
+  optimisticMethodFee,
+  methodFeeLabel,
+  showGiftCards = true,
+  hideDiscount = false,
+  onCartChange,
+}: MobileOrderSummaryBodyProps) {
+  const labels = useCheckoutLabels()
+  const t = checkoutTotals({ cart, optimisticShippingCost, optimisticMethodFee })
+
+  return (
+    <div className="space-y-4 pt-4">
+      <div className="divide-y divide-border">
+        {t.productItems.map((item) => (
+          <div key={item.id} className="py-5 first:pt-0">
+            <CheckoutLineItem
+              item={item}
+              currencyCode={cart.currency_code}
+            />
+          </div>
+        ))}
+      </div>
+
+      {(!hideDiscount || showGiftCards) && (
+        <div className="space-y-3">
+          {!hideDiscount && (
+            <DiscountSection client={client} cart={cart} onCartChange={onCartChange} />
+          )}
+          {showGiftCards && (
+            <GiftCardSection client={client} cart={cart} onCartChange={onCartChange} />
+          )}
+        </div>
+      )}
+
+      <div className="space-y-2 pt-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">
+            {labels.subtotal} · {t.itemCount} {labels.items}
+          </span>
+          <Price
+            amount={t.productSubtotal}
+            currencyCode={cart.currency_code}
+            className="font-medium text-foreground"
+          />
+        </div>
+
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">{labels.shipping}</span>
+          {t.shippingKnown ? (
+            t.shippingCost === 0 ? (
+              <span className="font-medium text-success">{labels.shippingFree}</span>
+            ) : (
+              <Price
+                amount={t.shippingCost ?? 0}
+                currencyCode={cart.currency_code}
+                className="font-medium text-foreground"
+              />
+            )
+          ) : (
+            <span className="font-medium text-foreground">{labels.shippingCalc}</span>
+          )}
+        </div>
+
+        {t.methodFeeAmount > 0 && (
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">
+              {methodFeeLabel ?? cart.payment_method_fee_label ?? labels.paymentMethodFee}
+            </span>
+            <Price
+              amount={t.methodFeeAmount}
+              currencyCode={cart.currency_code}
+              className="font-medium text-foreground"
+            />
+          </div>
+        )}
+
+        {!!cart.discount_total && (
+          <div className="flex justify-between text-sm text-success">
+            <span>{labels.discount}</span>
+            <span className="font-medium">
+              -
+              <Price amount={cart.discount_total} currencyCode={cart.currency_code} />
+            </span>
+          </div>
+        )}
+
+        {/* For a company, and only when the figure is known: a consumer
+            sees the price they pay, VAT included (see OrderSummary). */}
+        {isCompanyOrder(cart) && (cart.tax_total ?? 0) > 0 && (
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">{labels.tax}</span>
+            <Price
+              amount={cart.tax_total ?? 0}
+              currencyCode={cart.currency_code}
+              className="font-medium text-foreground"
+            />
+          </div>
+        )}
+
+        {/* Tender, not a reduction: the gift card covers part of the total
+            the bar shows, it does not lower it (docs/storefront/gift-cards.md). */}
+        {t.giftCardTotal > 0 && (
+          <>
+            <div className="flex justify-between text-sm text-success">
+              <span>{labels.giftCardApplied}</span>
+              <span className="font-medium">
+                -
+                <Price amount={t.giftCardTotal} currencyCode={cart.currency_code} />
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">{labels.giftCardRemaining}</span>
+              <Price
+                amount={t.giftCardRemainder}
+                currencyCode={cart.currency_code}
+                className="font-semibold text-foreground"
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}