@base44/app-plugin-commerce 0.2.1 → 0.2.3

package/src/commerce/storefront/blocks/CartLinesBlock.jsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { useCart } from "../StorefrontProvider";
-import { useFormatMoney } from "../StorefrontProvider";
-import { QuantityStepper } from "./QuantityStepper";
-import { CouponFieldBlock } from "./CouponFieldBlock";
-
-/**
- * The bag's line items: image, name, variant label, quantity stepper, line
- * total — plus the notices that say what auto-dropped and why, and the coupon
- * field.
- *
- *   <CartLinesBlock />
- *
- * Branches on the cart's `status`, so it never flashes an empty state while the
- * cart is still loading. Pass `slots.empty` / `slots.loading` to brand those
- * two states, or `renderLine` to take over a row entirely.
- *
- * **The coupon field is on by default** (`showCoupon`). A store whose codes have
- * nowhere to be typed cannot honour its own discounts, and that has been the
- * most-repeated omission in hand-built storefronts — so the default is the safe
- * one. Turn it off for a store that has no coupons and doesn't want the field,
- * or when your checkout carries the only one.
- *
- * @param {{className?: string, showNotices?: boolean, showCoupon?: boolean,
- *   slots?: {empty?: React.ReactNode, loading?: React.ReactNode},
- *   renderLine?: (line: object) => React.ReactNode}} props
- */
-export function CartLinesBlock({
-  className = "",
-  showNotices = true,
-  showCoupon = true,
-  slots = {},
-  renderLine,
-}) {
-  const { status, lines, notices } = useCart();
-  const formatMoney = useFormatMoney();
-
-  if (status === "loading") {
-    return slots.loading ?? <p data-commerce="cart-loading" className="text-sm text-muted-foreground">Loading your bag…</p>;
-  }
-  if (status === "empty") {
-    return slots.empty ?? <p data-commerce="cart-empty" className="text-sm text-muted-foreground">Your bag is empty.</p>;
-  }
-
-  return (
-    <div data-commerce="cart-lines" className={className}>
-      {showNotices && notices.length > 0 && (
-        <ul data-commerce="cart-notices" className="mb-4 space-y-1">
-          {notices.map((n, i) => (
-            <li key={`${n.code}-${i}`} role="status" className="text-xs text-muted-foreground">
-              {n.message}
-            </li>
-          ))}
-        </ul>
-      )}
-
-      <ul className="divide-y divide-border">
-        {lines.map((line) =>
-          renderLine ? (
-            <React.Fragment key={line.item_key}>{renderLine(line)}</React.Fragment>
-          ) : (
-            <li
-              key={line.item_key}
-              data-commerce="line-item"
-              className="grid grid-cols-[64px_1fr_auto] items-start gap-4 py-4"
-            >
-              {line.image ? (
-                <img
-                  src={line.image.src}
-                  alt={line.image.alt}
-                  className="aspect-square w-16 object-cover"
-                  loading="lazy"
-                />
-              ) : (
-                <div aria-hidden className="aspect-square w-16 bg-muted" />
-              )}
-              <div className="min-w-0">
-                <p data-commerce="line-name" className="truncate text-sm">{line.name}</p>
-                {line.attributesLabel && (
-                  <p data-commerce="line-attributes" className="mt-0.5 text-xs text-muted-foreground">
-                    {line.attributesLabel}
-                  </p>
-                )}
-                {!line.purchasable && line.unavailableReason && (
-                  <p role="alert" className="mt-1 text-xs text-destructive">{line.unavailableReason}</p>
-                )}
-                <QuantityStepper line={line} className="mt-2" />
-              </div>
-              <p data-commerce="line-total" className="text-sm">{formatMoney(line.total)}</p>
-            </li>
-          ),
-        )}
-      </ul>
-
-      {showCoupon && <CouponFieldBlock className="mt-6" />}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/CheckoutBlock.jsx

@@ -1,247 +0,0 @@
-import React from "react";
-import { CheckoutProvider, useCheckoutContext } from "../useCheckout";
-import { PaymentMethodPicker, ShippingMethodPicker } from "../pickers";
-import { useCart, useFormatMoney } from "../StorefrontProvider";
-import { useCheckoutBlockers } from "../useTotalsLines";
-import { AddressFieldsBlock } from "./AddressFieldsBlock";
-import { CouponFieldBlock } from "./CouponFieldBlock";
-import { TotalsBlock } from "./TotalsBlock";
-
-/**
- * The whole checkout: address → delivery → payment → summary → place order.
- * It supplies its own `<CheckoutProvider>`, so this is a complete page body:
- *
- *   export default function Checkout() {
- *     return <main className="mx-auto max-w-3xl px-6 py-16">
- *       <h1 className="font-heading text-5xl">Checkout</h1>
- *       <CheckoutBlock />
- *     </main>;
- *   }
- *
- * Correct with zero props in a default-seeded store (one manual gateway, one
- * shipping rate), and every branch a checkout must handle is already wired:
- * shipping recalculates from the address, a single shipping/payment option
- * reads as selected, a store with no enabled gateway says so instead of
- * rendering a dead button, the place-order gate explains itself, and an offline
- * order's payment instructions are shown on the confirmation.
- *
- * Restyle it with `className`, replace one region with `slots`, or drop to the
- * hooks (`useCheckout`, `useAddressForm`, the pickers, `useTotalsLines`) when
- * the design needs different structure — this component is nothing but a
- * composition of them.
- *
- * @param {{className?: string, showCoupon?: boolean, options?: object,
- *   onPlaced?: (result: object) => void, orderReceivedPath?: string,
- *   slots?: {address?, shipping?, payment?, summary?, submit?, empty?}}} props
- *   `onPlaced` overrides the default post-order behaviour (navigating to
- *   `orderReceivedPath` with the order's id + key, where `<OrderReceivedBlock/>`
- *   renders the confirmation and any payment instructions).
- */
-export function CheckoutBlock({
-  className = "",
-  showCoupon = true,
-  options,
-  onPlaced,
-  orderReceivedPath = "/order-received",
-  slots = {},
-}) {
-  return (
-    <CheckoutProvider options={options}>
-      <CheckoutBody
-        className={className}
-        showCoupon={showCoupon}
-        onPlaced={onPlaced}
-        orderReceivedPath={orderReceivedPath}
-        slots={slots}
-      />
-    </CheckoutProvider>
-  );
-}
-
-function CheckoutBody({ className, showCoupon, onPlaced, orderReceivedPath, slots }) {
-  const { status } = useCart();
-  const checkout = useCheckoutContext();
-
-  if (status === "loading") {
-    return <p data-commerce="checkout-loading" className="text-sm text-muted-foreground">Loading…</p>;
-  }
-  if (status === "empty") {
-    return (
-      slots.empty ?? (
-        <p data-commerce="checkout-empty" className="text-sm text-muted-foreground">
-          Your bag is empty — add something before checking out.
-        </p>
-      )
-    );
-  }
-
-  return (
-    <div data-commerce="checkout" className={`grid gap-10 md:grid-cols-[1fr_360px] ${className}`}>
-      <div className="space-y-8">
-        {slots.address ?? <AddressFieldsBlock legend="Your details" />}
-        {checkout.shipToDifferent && <AddressFieldsBlock which="shipping" legend="Delivery address" />}
-        {slots.shipping ?? <ShippingStep />}
-        {slots.payment ?? <PaymentStep />}
-      </div>
-
-      <aside className="space-y-6">
-        {slots.summary ?? (
-          <>
-            {showCoupon && <CouponFieldBlock />}
-            <TotalsBlock />
-          </>
-        )}
-        {slots.submit ?? <PlaceOrder onPlaced={onPlaced} orderReceivedPath={orderReceivedPath} />}
-      </aside>
-    </div>
-  );
-}
-
-function ShippingStep() {
-  const formatMoney = useFormatMoney();
-  return (
-    <ShippingMethodPicker>
-      {({ status, methods, chosen, choose, mustChoose, single, syncing }) => (
-        <fieldset data-commerce="shipping-step" className={syncing ? "opacity-60" : ""}>
-          <legend className="mb-3 text-xs uppercase tracking-wide text-muted-foreground">Delivery</legend>
-
-          {status === "missing_address" && (
-            <p className="text-sm text-muted-foreground">
-              Delivery options appear once your address is entered.
-            </p>
-          )}
-
-          {status === "none_available" && (
-            <p role="alert" className="text-sm text-destructive">
-              We don't deliver to that address yet.
-            </p>
-          )}
-
-          {mustChoose &&
-            methods.map((m) => (
-              <label key={m.id} data-commerce="shipping-method" data-commerce-cost={m.cost} className="flex items-center justify-between gap-4 py-1.5 text-sm">
-                <span className="flex items-center gap-2">
-                  <input
-                    type="radio"
-                    name="shipping_method"
-                    value={m.id}
-                    checked={chosen?.id === m.id}
-                    onChange={() => choose(m.id)}
-                  />
-                  {m.title}
-                </span>
-                <span>{formatMoney(m.cost)}</span>
-              </label>
-            ))}
-
-          {!mustChoose && chosen && (
-            <p data-commerce="shipping-method" data-commerce-cost={chosen.cost} className="flex justify-between gap-4 text-sm">
-              <span>{chosen.title}</span>
-              <span>{formatMoney(chosen.cost)}</span>
-            </p>
-          )}
-          {single && chosen && (
-            <p className="mt-1 text-xs text-muted-foreground">The only option for this address.</p>
-          )}
-        </fieldset>
-      )}
-    </ShippingMethodPicker>
-  );
-}
-
-function PaymentStep() {
-  return (
-    <PaymentMethodPicker>
-      {({ gateways, value, select, selected, single }) => (
-        <fieldset data-commerce="payment-step">
-          <legend className="mb-3 text-xs uppercase tracking-wide text-muted-foreground">Payment</legend>
-
-          {gateways.length === 0 && (
-            <p role="alert" className="text-sm text-destructive">
-              No payment method is available right now — please contact us to complete your order.
-            </p>
-          )}
-
-          {!single &&
-            gateways.map((g) => (
-              <label key={g.slug} data-commerce="payment-method" className="block py-1.5 text-sm">
-                <span className="flex items-center gap-2">
-                  <input
-                    type="radio"
-                    name="payment_method"
-                    value={g.slug}
-                    checked={value === g.slug}
-                    onChange={() => select(g.slug)}
-                  />
-                  {g.title}
-                </span>
-                {g.description && (
-                  <span className="ml-6 block text-xs text-muted-foreground">{g.description}</span>
-                )}
-              </label>
-            ))}
-
-          {single && selected && (
-            <div data-commerce="payment-method" className="text-sm">
-              <p>{selected.title}</p>
-              {selected.description && (
-                <p className="mt-0.5 text-xs text-muted-foreground">{selected.description}</p>
-              )}
-            </div>
-          )}
-        </fieldset>
-      )}
-    </PaymentMethodPicker>
-  );
-}
-
-function PlaceOrder({ onPlaced, orderReceivedPath }) {
-  const { canPlaceOrder, placing, placeOrder, orderError } = useCheckoutContext();
-  const blockers = useCheckoutBlockers();
-
-  const submit = async () => {
-    const res = await placeOrder();
-    if (!res.ok) return;
-    if (onPlaced) return onPlaced(res.result);
-    // An online gateway has already redirected. Everything else lands on the
-    // return page, which is also where a manual order's payment instructions
-    // are rendered — so the offline default confirms properly too.
-    if (!res.result.payment && typeof window !== "undefined") {
-      const q = new URLSearchParams({
-        order_id: res.result.order_id,
-        order_key: res.result.order_key,
-      });
-      window.location.assign(`${orderReceivedPath}?${q}`);
-    }
-  };
-
-  return (
-    <div>
-      <button
-        type="button"
-        data-commerce="place-order"
-        onClick={submit}
-        disabled={!canPlaceOrder || placing}
-        className="w-full bg-primary px-6 py-3 text-sm text-primary-foreground disabled:opacity-50"
-      >
-        {placing ? "Placing your order…" : "Place order"}
-      </button>
-
-      {orderError && (
-        <p data-commerce="order-error" role="alert" className="mt-2 text-sm text-destructive">
-          {orderError.message}
-        </p>
-      )}
-
-      {!canPlaceOrder && blockers.length > 0 && (
-        <ul data-commerce="checkout-blockers" className="mt-2 space-y-1">
-          {blockers.map((b) => (
-            <li key={b.code} className="text-xs text-muted-foreground">
-              {b.message}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/CouponFieldBlock.jsx

@@ -1,84 +0,0 @@
-import React from "react";
-import { useCoupon } from "../useCartLine";
-import { useFormatMoney } from "../StorefrontProvider";
-
-/**
- * The coupon field. **If the store has any coupons, this has to exist
- * somewhere** — in the cart or the checkout — because codes are admin-only
- * data a customer can only redeem by typing them. A store that seeds coupons
- * and ships no field advertises discounts it cannot honour.
- *
- *   <CouponFieldBlock />
- *
- * @param {{className?: string, label?: string, placeholder?: string,
- *   applyLabel?: string}} props
- */
-export function CouponFieldBlock({
-  className = "",
-  label = "Discount code",
-  placeholder = "Enter code",
-  applyLabel = "Apply",
-}) {
-  const c = useCoupon();
-
-  return (
-    <div data-commerce="coupon" className={className}>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          c.apply();
-        }}
-        className="flex items-end gap-2"
-      >
-        <label className="flex-1">
-          <span className="block text-xs uppercase tracking-wide text-muted-foreground">{label}</span>
-          <input
-            data-commerce="coupon-input"
-            value={c.code}
-            onChange={(e) => c.setCode(e.target.value)}
-            placeholder={placeholder}
-            autoComplete="off"
-            className="mt-1 w-full border border-border bg-transparent px-3 py-2 text-sm"
-          />
-        </label>
-        <button
-          type="submit"
-          data-commerce="coupon-apply"
-          disabled={c.applying}
-          className="border border-border px-4 py-2 text-sm disabled:opacity-50"
-        >
-          {c.applying ? "Applying…" : applyLabel}
-        </button>
-      </form>
-
-      {c.error && (
-        <p data-commerce="coupon-error" role="alert" className="mt-1 text-xs text-destructive">
-          {c.error.message}
-        </p>
-      )}
-
-      {c.applied.length > 0 && (
-        <ul data-commerce="coupon-applied" className="mt-2 space-y-1">
-          {c.applied.map((a) => (
-            <AppliedCoupon key={a.code} coupon={a} onRemove={() => c.remove(a.code)} />
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-function AppliedCoupon({ coupon, onRemove }) {
-  const formatMoney = useFormatMoney();
-  return (
-    <li className="flex items-center justify-between gap-3 text-sm">
-      <span>
-        {coupon.code}
-        {coupon.freeShipping ? " · free shipping" : coupon.discount ? ` · −${formatMoney(coupon.discount)}` : ""}
-      </span>
-      <button type="button" onClick={onRemove} className="text-xs text-muted-foreground underline">
-        Remove
-      </button>
-    </li>
-  );
-}

package/src/commerce/storefront/blocks/OrderReceivedBlock.jsx

@@ -1,129 +0,0 @@
-import React from "react";
-import { orderLines } from "@/commerce/utils";
-import { useOrderReturn } from "../useOrderReturn";
-import { useFormatMoney } from "../StorefrontProvider";
-import { useStorefrontSeo, orderSeo } from "../useStorefrontSeo";
-import { TotalsBlock } from "./TotalsBlock";
-
-/**
- * The `/order-received` page. Mounting this route is **mandatory** — every
- * payment link returns here, and confirming is what marks a card order paid.
- *
- *   export default function OrderReceived() {
- *     return <main className="mx-auto max-w-2xl px-6 py-20">
- *       <OrderReceivedBlock />
- *     </main>;
- *   }
- *
- * It renders all five states, including the two that hand-written pages drop:
- * **`paymentInstructions` for a manual/offline order** — the default gateway, so
- * without them the store's normal customer is told nothing about how to pay —
- * and the pay-now link for an unpaid card order. The page is also `noindex`, as
- * a receipt carrying an order key should be.
- *
- * @param {{className?: string, slots?: {paid?, unpaid?, cancelled?, loading?},
- *   showSummary?: boolean}} props
- */
-export function OrderReceivedBlock({ className = "", slots = {}, showSummary = true }) {
-  const { status, order, paymentLink, paymentInstructions, error, reload } = useOrderReturn();
-  useStorefrontSeo(orderSeo(order));
-  const formatMoney = useFormatMoney();
-
-  if (status === "loading") {
-    return slots.loading ?? <p data-commerce="order-loading" className="text-sm text-muted-foreground">Confirming your order…</p>;
-  }
-
-  if (status === "error") {
-    return (
-      <div data-commerce="order-error" role="alert" className={className}>
-        <p className="text-sm text-destructive">{error?.message}</p>
-        <button type="button" onClick={() => reload()} className="mt-3 border border-border px-4 py-2 text-sm">
-          Try again
-        </button>
-      </div>
-    );
-  }
-
-  const lines = orderLines(order);
-
-  return (
-    <div data-commerce="order-received" data-commerce-status={status} className={className}>
-      {status === "paid" && (slots.paid ?? <h2 className="text-2xl">Thank you — your order is confirmed.</h2>)}
-
-      {status === "unpaid" &&
-        (slots.unpaid ?? (
-          <div>
-            <h2 className="text-2xl">Your order is awaiting payment.</h2>
-            {paymentLink?.url && (
-              <a
-                href={paymentLink.url}
-                data-commerce="pay-now"
-                className="mt-4 inline-block bg-primary px-6 py-3 text-sm text-primary-foreground"
-              >
-                Pay now
-              </a>
-            )}
-          </div>
-        ))}
-
-      {status === "cancelled" &&
-        (slots.cancelled ?? (
-          <div>
-            <h2 className="text-2xl">Payment was cancelled.</h2>
-            {paymentLink?.url && (
-              <a href={paymentLink.url} data-commerce="pay-now" className="mt-4 inline-block border border-border px-6 py-3 text-sm">
-                Try payment again
-              </a>
-            )}
-          </div>
-        ))}
-
-      {order?.order_number && (
-        <p data-commerce="order-number" className="mt-2 text-sm text-muted-foreground">
-          Order {order.order_number}
-        </p>
-      )}
-
-      {/* A manual gateway settles outside the store: these ARE the instructions
-          for how the customer pays, so they must never be dropped. */}
-      {paymentInstructions && (
-        <section data-commerce="payment-instructions" className="mt-6 border border-border p-4">
-          <h3 className="text-xs uppercase tracking-wide text-muted-foreground">How to pay</h3>
-          {paymentInstructions.description && (
-            <p className="mt-2 whitespace-pre-line text-sm">{paymentInstructions.description}</p>
-          )}
-          {paymentInstructions.account_details && (
-            <dl className="mt-3 space-y-1 text-sm">
-              {Object.entries(paymentInstructions.account_details).map(([k, v]) => (
-                <div key={k} className="flex gap-2">
-                  <dt className="text-muted-foreground">{k.replace(/_/g, " ")}:</dt>
-                  <dd>{String(v)}</dd>
-                </div>
-              ))}
-            </dl>
-          )}
-        </section>
-      )}
-
-      {showSummary && lines.length > 0 && (
-        <section className="mt-8">
-          <ul className="divide-y divide-border">
-            {lines.map((l, i) => (
-              <li key={l.item_key ?? `${l.name}-${i}`} data-commerce="order-line" className="flex justify-between gap-4 py-3 text-sm">
-                <span>
-                  {l.name}
-                  {l.attributesLabel && <span className="text-muted-foreground"> · {l.attributesLabel}</span>}
-                  <span className="text-muted-foreground"> × {l.quantity}</span>
-                </span>
-                <span>{formatMoney(l.total)}</span>
-              </li>
-            ))}
-          </ul>
-          <div className="mt-4">
-            <TotalsBlock order={order} />
-          </div>
-        </section>
-      )}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/ProductGalleryBlock.jsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { useProductGallery } from "../useProductGallery";
-
-/**
- * The product gallery: main image, thumbnail strip, and the active image
- * following the variant selection.
- *
- *   <ProductGalleryBlock product={product} view={view} />
- *
- * The image objects, the placeholder case and the follow-the-variant behaviour
- * all come from `useProductGallery`; this adds the minimum markup. Style it
- * with `className`/`imageClassName` (aspect ratio, crossfade, object-fit are
- * yours), or pass `slots.placeholder` for a branded empty state.
- *
- * @param {{product: object, view?: object, className?: string,
- *   imageClassName?: string, showThumbnails?: boolean,
- *   slots?: {placeholder?: React.ReactNode}}} props
- */
-export function ProductGalleryBlock({
-  product,
-  view = null,
-  className = "",
-  imageClassName = "aspect-[4/5] w-full object-cover",
-  showThumbnails = true,
-  slots = {},
-}) {
-  const g = useProductGallery(product, view);
-
-  if (!g.hasImages) {
-    return (
-      slots.placeholder ?? (
-        <div data-commerce="gallery-placeholder" aria-hidden className={`${imageClassName} bg-muted ${className}`} />
-      )
-    );
-  }
-
-  return (
-    <div data-commerce="gallery" className={className}>
-      <img
-        data-commerce="gallery-image"
-        key={g.active.src}
-        src={g.active.src}
-        alt={g.active.alt || product?.name || ""}
-        className={imageClassName}
-      />
-
-      {showThumbnails && g.images.length > 1 && (
-        <div data-commerce="gallery-thumbnails" className="mt-2 flex gap-2 overflow-x-auto">
-          {g.images.map((img, i) => (
-            <button
-              key={img.src}
-              type="button"
-              data-commerce="gallery-thumbnail"
-              aria-label={`View image ${i + 1}`}
-              aria-current={i === g.activeIndex}
-              onClick={() => g.setActiveIndex(i)}
-              className={`shrink-0 border ${i === g.activeIndex ? "border-foreground" : "border-transparent"}`}
-            >
-              <img src={img.src} alt="" className="h-16 w-14 object-cover" loading="lazy" />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/ProductSpecsBlock.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-/**
- * A product's descriptive properties as a spec table — Material, Care, Fit.
- *
- *   <ProductSpecsBlock product={product} />
- *
- * These live in `product.meta_data` (the admin's *Modifiers* section) and are
- * **not** attributes and not ribbons: they describe the product, they don't
- * select a variant. Hidden keys (leading `_`) are skipped.
- *
- * @param {{product: object, className?: string, title?: string}} props
- */
-export function ProductSpecsBlock({ product, className = "", title }) {
-  const entries = (product?.meta_data ?? []).filter(
-    (m) => m?.key && !String(m.key).startsWith("_") && m.value != null && m.value !== "",
-  );
-  if (!entries.length) return null;
-
-  return (
-    <section data-commerce="product-specs" className={className}>
-      {title && <h3 className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">{title}</h3>}
-      <dl className="divide-y divide-border">
-        {entries.map((m) => (
-          <div key={m.key} className="flex justify-between gap-4 py-2 text-sm">
-            <dt className="text-muted-foreground">{String(m.key).replace(/_/g, " ")}</dt>
-            <dd className="text-right">{String(m.value)}</dd>
-          </div>
-        ))}
-      </dl>
-    </section>
-  );
-}