@cartbase/storefront 0.21.0 → 0.22.1

package/src/checkout/discount-section.tsx

@@ -62,6 +62,13 @@ type DiscountSectionProps = {
   /** The SDK transport — the promotions route is called through it. */
   client: StorefrontClient
   cart: Cart
+  /**
+   * Show the field itself instead of the door that opens it. The checkout
+   * passes this on the phone, where the door would be the second tap
+   * inside an already-closed summary bar and a shopper holding a code
+   * would never find it.
+   */
+  alwaysOpen?: boolean
   /** Receives the decorated cart returned by a successful apply. */
   onCartChange?: (cart: Cart) => void
 }
@@ -69,6 +76,7 @@ type DiscountSectionProps = {
 export function DiscountSection({
   client,
   cart,
+  alwaysOpen = false,
   onCartChange,
 }: DiscountSectionProps) {
   const labels = useCheckoutLabels()
@@ -98,6 +106,45 @@ export function DiscountSection({
     }
   }
 
+  const field = (
+    <div className={cn("flex gap-2", !alwaysOpen && "mt-3")}>
+      <input
+        type="text"
+        value={code}
+        onChange={(e) => setCode(e.target.value.toUpperCase())}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault()
+            void handleApply()
+          }
+        }}
+        placeholder="PROMO2024"
+        className="flex-1 h-11 px-4 text-sm bg-card border border-border rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+      />
+      <button
+        type="button"
+        onClick={handleApply}
+        disabled={loading || !code.trim()}
+        className="px-5 h-11 text-sm font-semibold bg-foreground text-card rounded-xl hover:bg-foreground/90 transition-all disabled:opacity-40"
+      >
+        {labels.addCode}
+      </button>
+    </div>
+  )
+
+  if (alwaysOpen) {
+    return (
+      <div>
+        <p className="text-xs font-medium text-muted-foreground mb-1.5">
+          {labels.discountCode}
+        </p>
+        {field}
+        {error && <p className="text-xs text-destructive mt-2">{error}</p>}
+        {promotions.length > 0 && <AppliedList promotions={promotions} />}
+      </div>
+    )
+  }
+
   return (
     <div>
       <button
@@ -152,67 +199,52 @@ export function DiscountSection({
         </span>
       </button>
 
-      {open && (
-        <div className="mt-3 flex gap-2">
-          <input
-            type="text"
-            value={code}
-            onChange={(e) => setCode(e.target.value.toUpperCase())}
-            placeholder="PROMO2024"
-            className="flex-1 h-11 px-4 text-sm bg-card border border-border rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
-          />
-          <button
-            type="button"
-            onClick={handleApply}
-            disabled={loading || !code.trim()}
-            className="px-5 h-11 text-sm font-semibold bg-foreground text-card rounded-xl hover:bg-foreground/90 transition-all disabled:opacity-40"
-          >
-            {labels.addCode}
-          </button>
-        </div>
-      )}
+      {open && field}
 
       {error && <p className="text-xs text-destructive mt-2">{error}</p>}
 
-      {promotions.length > 0 && (
-        <div className="mt-3 space-y-1.5">
-          {promotions.map((p) => (
-            <div
-              key={p.id}
-              className="flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg"
+      {promotions.length > 0 && <AppliedList promotions={promotions} />}
+    </div>
+  )
+}
+
+/** The codes already on the cart, with what each one takes off. */
+function AppliedList({ promotions }: { promotions: AppliedPromotion[] }) {
+  return (
+    <div className="mt-3 space-y-1.5">
+      {promotions.map((p) => (
+        <div
+          key={p.id}
+          className="flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg"
+        >
+          <div className="flex items-center gap-2">
+            <svg
+              className="w-4 h-4 text-success"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
             >
-              <div className="flex items-center gap-2">
-                <svg
-                  className="w-4 h-4 text-success"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <span className="text-sm font-semibold text-success">
-                  {p.code}
-                </span>
-              </div>
-              <span className="text-sm font-medium text-success">
-                {p.application_method?.type === "percentage"
-                  ? `-${p.application_method.value}%`
-                  : p.application_method?.value && p.application_method?.currency_code
-                    ? `-${convertToLocale({
-                        amount: +p.application_method.value,
-                        currency_code: p.application_method.currency_code,
-                      })}`
-                    : ""}
-              </span>
-            </div>
-          ))}
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span className="text-sm font-semibold text-success">{p.code}</span>
+          </div>
+          <span className="text-sm font-medium text-success">
+            {p.application_method?.type === "percentage"
+              ? `-${p.application_method.value}%`
+              : p.application_method?.value && p.application_method?.currency_code
+                ? `-${convertToLocale({
+                    amount: +p.application_method.value,
+                    currency_code: p.application_method.currency_code,
+                  })}`
+                : ""}
+          </span>
         </div>
-      )}
+      ))}
     </div>
   )
 }

package/src/checkout/fulfillment-option.ts

@@ -0,0 +1,30 @@
+import type { StoreShippingOption } from "../api/checkout"
+
+/**
+ * WHICH DESTINATION a shipping option books, read from the option itself.
+ *
+ * Cartbase writes the merchant's choice as `data.fulfillment_option` (the
+ * Shipping option drawer's "To an Econt office", "To a BoxNow locker" and
+ * the rest, from the carrier registry). The kit was ported from a platform
+ * that put the same value at `data.id`, and nothing on this side ever wrote
+ * that key, so on a Cartbase store every reader of it saw null: no office
+ * or locker picker ever opened, no carrier mark ever keyed, and a cart
+ * could reach Buy with an office option and no office chosen (found live on
+ * the Demo Store, 2026-09-18).
+ *
+ * So the Cartbase key is read first and the ported one stays as a fallback,
+ * because a cart carried over from that platform still speaks it.
+ */
+export function fulfillmentOptionId(
+  option: Pick<StoreShippingOption, "data"> | null | undefined
+): string | null {
+  const data = option?.data as
+    | { fulfillment_option?: unknown; id?: unknown }
+    | null
+    | undefined
+  if (typeof data?.fulfillment_option === "string" && data.fulfillment_option) {
+    return data.fulfillment_option
+  }
+  if (typeof data?.id === "string" && data.id) return data.id
+  return null
+}

package/src/checkout/index.ts

@@ -1,11 +1,11 @@
 // @cartbase/storefront/checkout — barrel export.
 //
-// Ported from `@1click/ui/src/checkout/index.ts` (v2.3.1). Not ported in
-// this batch: CheckoutLineItem's standalone file (its flat row lives inside
-// order-summary.tsx and is re-exported below) and the Mobile* bars (out of
-// the pre-declared file list; stores compose their own from the hook).
-// Extra modules beyond the pre-declared export list (geocode,
-// compare-addresses) are exported from here only.
+// Ported from `@1click/ui/src/checkout/index.ts` (v2.3.1). CheckoutLineItem
+// has no standalone file here: its flat row lives inside order-summary.tsx
+// and is re-exported below. The mobile bars are exported too, so a store
+// with its own checkout layout composes the same phone summary the default
+// layout mounts. Extra modules beyond the pre-declared export list
+// (geocode, compare-addresses) are exported from here only.
 
 export {
   CheckoutProvider,
@@ -21,6 +21,11 @@ export {
   useStripeScope,
 } from "./stripe-wrapper"
 export { PaymentWrapper } from "./payment-wrapper"
+export {
+  resolveCardOffer,
+  type CardEntryLike,
+  type CardOffer,
+} from "./card-offer"
 export { PaymentButton } from "./payment-button"
 export {
   EcontOfficeSelector,
@@ -30,16 +35,41 @@ export {
   BoxNowLockerSelector,
   type BoxNowLocker,
 } from "./boxnow-locker-selector"
+export {
+  PigeonOfficeSelector,
+  type PigeonOffice,
+} from "./pigeon-office-selector"
+export {
+  PickupPointSelector,
+  type PickupPoint,
+} from "./pickup-point-selector"
+export { pickupOptionOf, type PickupOption } from "./pickup-option"
+export { carrierMarks } from "./carrier-marks"
 export { AddressSelect } from "./address-select"
 export { CompanyDetails } from "./company-details"
 export { DiscountSection } from "./discount-section"
 export { GiftCardSection } from "./gift-card-section"
 export { LineItemCard } from "./line-item-card"
 export { OrderSummary, CheckoutLineItem } from "./order-summary"
+export { MobileCheckoutTopBar } from "./mobile-checkout-top-bar"
+export { MobileCheckoutBottomBar } from "./mobile-checkout-bottom-bar"
+export { MobileOrderSummaryBody } from "./mobile-order-summary-body"
+export {
+  checkoutTotals,
+  amountDueAfterTender,
+  isNothingToPay,
+  isCompanyOrder,
+  type CheckoutTotals,
+  type CheckoutTotalsInput,
+} from "./summary-math"
 export { CheckoutAddressForm } from "./address-form"
 export { CheckoutShippingMethodList } from "./shipping-method-list"
 export { CheckoutPaymentMethodList } from "./payment-method-list"
 export { CheckoutClient } from "./checkout-client"
+export {
+  CheckoutErrorScreen,
+  type CheckoutErrorScreenProps,
+} from "./checkout-error-screen"
 export {
   useCheckoutOrchestration,
   resolveOrderConfirmedPath,
@@ -47,6 +77,11 @@ export {
   type CheckoutLogError,
   type PaymentProviderLike,
 } from "./use-checkout-orchestration"
+export {
+  useCheckoutFunnel,
+  type UseCheckoutFunnelOptions,
+} from "./use-checkout-funnel"
+export { fulfillmentOptionId } from "./fulfillment-option"
 export {
   translatePaymentError,
   translateGiftCardError,

package/src/checkout/labels.ts

@@ -46,6 +46,15 @@ export type CheckoutLabels = {
   addCode: string
 
   // States / empty / disabled
+  /**
+   * The checkout with nothing to check out. A shopper who lands here with
+   * an empty cart, or after their order was placed in another tab, used to
+   * be bounced to the home page without a word, which reads as the store
+   * losing their order. The page says it instead, and offers the way back.
+   */
+  cartEmptyTitle: string
+  cartEmptyText: string
+  cartEmptyBack: string
   deliveryDisabled: string
   noShippingOptions: string
   paymentDisabled: string
@@ -80,6 +89,18 @@ export type CheckoutLabels = {
   shipping: string
   shippingCalc: string
   shippingFree: string
+  /**
+   * What a line that costs nothing says in place of its price: a gift a
+   * promotion added, or a line a discount took to zero.
+   *
+   * A SEPARATE label from `shippingFree` on purpose, and not a saving of
+   * one string: in Bulgarian the shipping row reads "Безплатна", agreeing
+   * with доставка, and a product line reads "Безплатно". One label would
+   * print the wrong gender on one of the two rows for every Bulgarian
+   * store, which is exactly the kind of detail a shopper reads as
+   * carelessness at the moment of paying.
+   */
+  lineFree: string
   tax: string
   /**
    * What the tax is, in the store's words. OPTIONAL and undefined by
@@ -124,7 +145,19 @@ export type CheckoutLabels = {
 
   // Place order button
   placeOrder: string
+  /** The button on an order with nothing left to pay. */
+  completeOrder: string
   selectPaymentMethod: string
+  /** What stands where the tender list would be on a covered order. */
+  nothingToPay: string
+
+  /**
+   * The checkout's own error screen (`CheckoutErrorScreen`), shown when
+   * the page itself fails rather than a call inside it.
+   */
+  errorTitle: string
+  errorBody: string
+  errorRetry: string
 
   /**
    * Processing-state messages shown beneath the spinning Buy button
@@ -141,6 +174,27 @@ export type CheckoutLabels = {
   processingCard: string[]
   processingCod: string[]
 
+  /**
+   * The pickup picker, for every carrier (2026-09-18). One picker means one
+   * set of words: a shopper choosing a Speedy office and a shopper choosing
+   * an Econt office are doing the same thing, and the carrier is already
+   * named on the row above by its own mark. The three per-carrier sets below
+   * stay for stores that still mount the old components; new work reads
+   * these.
+   */
+  pickupLoading: string
+  pickupNearestOffices: string
+  pickupNearestLockers: string
+  pickupSearchOffice: string
+  pickupSearchLocker: string
+  pickupSearchOfficePlaceholder: string
+  pickupSearchLockerPlaceholder: string
+  pickupNoResults: string
+  pickupChange: string
+  pickupUnavailable: string
+  /** Why Buy is still disabled: an office option with no office named. */
+  pickupRequired: string
+
   // Econt office selector
   econtLoadingOffices: string
   econtNearestOffices: string
@@ -158,6 +212,16 @@ export type CheckoutLabels = {
   boxnowChange: string
   boxnowUnavailable: string
   boxnowNoLockersInCity: string
+
+  // Pigeon Express office selector
+  pigeonLoadingOffices: string
+  pigeonNearestOffices: string
+  pigeonSearchAnother: string
+  pigeonSearchPlaceholder: string
+  pigeonNoResults: string
+  pigeonChange: string
+  pigeonUnavailable: string
+  pigeonNoOfficesInCity: string
   /**
    * What a shopper reads when saving the address fails. It used to be
    * hardcoded BULGARIAN inside `address-error-copy.ts` with no way to
@@ -287,6 +351,9 @@ export const defaultCheckoutLabels: CheckoutLabels = {
   addToOrder: "+ Add to order",
   addCode: "Apply",
 
+  cartEmptyTitle: "Your cart is empty",
+  cartEmptyText: "Add something to it and your order starts here.",
+  cartEmptyBack: "Back to the shop",
   deliveryDisabled:
     "Enter your delivery address to see available shipping options.",
   noShippingOptions: "No shipping options available for your address.",
@@ -312,6 +379,7 @@ export const defaultCheckoutLabels: CheckoutLabels = {
   shipping: "Shipping",
   shippingCalc: "Calculated at checkout",
   shippingFree: "Free",
+  lineFree: "Free",
   // The row NAME, neutral on purpose: it sits beside a number, so it must
   // say something, but "VAT incl." names one tax regime and asserts that
   // prices include it. That is Bulgaria's answer, not Germany's, and not any
@@ -347,7 +415,14 @@ export const defaultCheckoutLabels: CheckoutLabels = {
   companyAddress: "Company address",
 
   placeOrder: "Place order",
+  completeOrder: "Complete order",
   selectPaymentMethod: "Select a payment method",
+  nothingToPay: "Your order is fully covered. There is nothing left to pay.",
+
+  errorTitle: "Something went wrong at checkout",
+  errorBody:
+    "Your cart is safe. Try again, and if it keeps happening, get in touch.",
+  errorRetry: "Try again",
 
   processingCard: [
     "Connecting to the bank...",
@@ -361,6 +436,18 @@ export const defaultCheckoutLabels: CheckoutLabels = {
     "Attending to every detail...",
   ],
 
+  pickupLoading: "Loading pickup points...",
+  pickupNearestOffices: "Nearest offices",
+  pickupNearestLockers: "Nearest lockers",
+  pickupSearchOffice: "Search for another office",
+  pickupSearchLocker: "Search for another locker",
+  pickupSearchOfficePlaceholder: "Search by name, city, or address...",
+  pickupSearchLockerPlaceholder: "Search by name, city, or address...",
+  pickupNoResults: "Nothing found",
+  pickupChange: "Change",
+  pickupUnavailable: "Pickup points are unavailable right now",
+  pickupRequired: "Choose a pickup point",
+
   econtLoadingOffices: "Loading offices...",
   econtNearestOffices: "Nearest offices",
   econtSearchAnother: "Search for another office",
@@ -378,6 +465,17 @@ export const defaultCheckoutLabels: CheckoutLabels = {
     "BoxNow is temporarily unavailable, please choose a different shipping method.",
   boxnowNoLockersInCity:
     "No BoxNow lockers found in your city. Please choose a different shipping method.",
+
+  pigeonLoadingOffices: "Loading offices...",
+  pigeonNearestOffices: "Nearest offices",
+  pigeonSearchAnother: "Search for another office",
+  pigeonSearchPlaceholder: "Search by name, city, or address...",
+  pigeonNoResults: "No offices found for",
+  pigeonChange: "Change",
+  pigeonUnavailable:
+    "Pigeon Express is temporarily unavailable, please choose a different shipping method.",
+  pigeonNoOfficesInCity:
+    "No Pigeon Express offices found in your city. Please choose a different shipping method.",
   addressErrors: {
     generic:
       "We could not save your address. Please check the details and try again.",

package/src/checkout/line-item-card.tsx

@@ -1,76 +1,44 @@
 "use client"
 
-import { useState } from "react"
-
 import type { StorefrontClient } from "../api/http"
-import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
+import type { Cart, CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
-import { cn } from "../lib/utils"
 import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 
 /**
  * LineItemCard — a single cart line shown inside the checkout order
- * summary card. Includes thumbnail, title, variant, quantity select,
- * and price.
+ * summary card: thumbnail, title, variant, how many, price.
  *
- * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1) with
- * the Cartbase data seam: the cookie-bound `updateLineItem` server action →
- * `carts.updateLineItem(client, cartId, lineId, {quantity})`
- * (POST /api/store/carts/:id/line-items/:lineId — docs/storefront/
- * carts.md). The route returns the freshly decorated cart; pass
- * `onCartChange` so the host can update its cart state (or
- * `router.refresh()` in an RSC app). `variant.title` → the flat
- * `variant_title` column of the Cartbase line DTO.
+ * **A CHECKOUT IS A CHECKOUT** (Alexander, 2026-09-18). This card carried a
+ * quantity select, ported from the platform this kit came from, and it is
+ * gone with the summary row's stepper: the cart is changed in the cart, and
+ * the checkout states the order. Nothing in the checkout family writes a
+ * line any more.
  *
- * Checkout is master-level: customers cannot remove items here.
- * Removal lives in the cart drawer only.
+ * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1);
+ * `variant.title` → the flat `variant_title` column of the Cartbase line
+ * DTO.
  */
 
 type LineItemCardProps = {
-  /** The SDK transport — quantity changes go through it. */
-  client: StorefrontClient
-  cartId: string
   item: CartLineItem
   currencyCode: string
-  /** Receives the decorated cart returned by the quantity update. */
+  /** @deprecated Unused: the checkout summary no longer writes. Accepted so
+   * a store passing the old props keeps compiling; remove them at leisure. */
+  client?: StorefrontClient
+  /** @deprecated Unused — see `client`. */
+  cartId?: string
+  /** @deprecated Unused — see `client`. */
   onCartChange?: (cart: Cart) => void
 }
 
-export function LineItemCard({
-  client,
-  cartId,
-  item,
-  currencyCode,
-  onCartChange,
-}: LineItemCardProps) {
+export function LineItemCard({ item, currencyCode }: LineItemCardProps) {
   const labels = useCheckoutLabels()
-  const [updating, setUpdating] = useState(false)
-
-  const handleQty = async (qty: number) => {
-    setUpdating(true)
-    try {
-      const { cart } = await updateLineItem(client, cartId, item.id, {
-        quantity: qty,
-      })
-      onCartChange?.(cart)
-    } catch {
-      // Quantity update failed (e.g. insufficient_inventory) — the select
-      // snaps back to the server value on the next cart render.
-    } finally {
-      setUpdating(false)
-    }
-  }
-
   const total = item.total ?? 0
 
   return (
-    <div
-      className={cn(
-        "relative flex gap-4 p-4 rounded-xl border border-border bg-muted/50 transition-opacity",
-        updating && "opacity-40 pointer-events-none"
-      )}
-    >
+    <div className="relative flex gap-4 p-4 rounded-xl border border-border bg-muted/50">
       <div className="relative w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 bg-card border border-border">
         {item.thumbnail ? (
           // eslint-disable-next-line @next/next/no-img-element
@@ -113,42 +81,26 @@ export function LineItemCard({
           </p>
         )}
 
-        <div className="flex items-center gap-2 mt-2.5">
-          <div className="relative">
-            <select
-              value={item.quantity}
-              onChange={(e) => handleQty(parseInt(e.target.value, 10))}
-              className="h-8 pl-2.5 pr-7 text-xs font-medium border border-border rounded-lg bg-card text-foreground appearance-none cursor-pointer hover:border-muted-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-primary/20"
-            >
-              {Array.from({ length: 10 }, (_, i) => (
-                <option key={i + 1} value={i + 1}>
-                  {labels.qty} {i + 1}
-                </option>
-              ))}
-            </select>
-            <svg
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-muted-foreground pointer-events-none"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-              />
-            </svg>
-          </div>
-        </div>
+        {/* How many, said and not offered: the quantity select that stood
+            here could change the order from inside the checkout. */}
+        <p className="text-xs font-medium text-muted-foreground mt-2.5 tabular-nums">
+          {labels.qty} {item.quantity}
+        </p>
       </div>
 
       <div className="flex flex-col items-end justify-center flex-shrink-0">
-        <Price
-          amount={total}
-          currencyCode={currencyCode}
-          className="text-sm font-bold text-foreground"
-        />
+        {/* A line that costs nothing says so; €0.00 reads as a fault. */}
+        {total <= 0 ? (
+          <span className="text-xs font-bold text-success uppercase">
+            {labels.lineFree}
+          </span>
+        ) : (
+          <Price
+            amount={total}
+            currencyCode={currencyCode}
+            className="text-sm font-bold text-foreground"
+          />
+        )}
       </div>
     </div>
   )