@base44/app-plugin-commerce 0.5.0 → 0.6.0

package/src/commerce/storefront/parts/checkout.jsx

@@ -1,540 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react";
-import { addressFieldSpec, attributesLabel } from "@/commerce/utils";
-import { CheckoutProvider, useCheckoutContext } from "../useCheckout";
-import { ShippingMethodPicker, PaymentMethodPicker } from "../pickers";
-import { useCart, useCountries, useFormatMoney } from "../StorefrontProvider";
-import { REQUIRED_BILLING_FIELDS } from "../address";
-import { LabelsScope, label, useResolvedLabels } from "./labels";
-import { visible } from "./visibility";
-import { CouponField, Totals } from "./shared";
-
-/**
- * Checkout parts — the checkout's sections as unstyled, unworded components
- * the store places into ITS OWN layout markup. Contract, styling
- * (`data-part`), labels and placement: the commerce skill's
- * install/02-storefront.md. Each part is a thin composition over `useCheckout`
- * and the pickers; mixing a part with a custom section built on
- * `useCheckoutContext()` is normal, and the parts are the app's source —
- * editable when a requirement outgrows their props.
- */
-
-const CheckoutPartsContext = createContext(null);
-
-/** Layout effect where there is a DOM; plain effect on the server (no warning). */
-const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-
-/**
- * Mounts `CheckoutProvider`, resolves the page's phase once (`submitted` >
- * `loading` > `empty` > `form` — the ordering that kills the empty-bag flash
- * over a just-placed order), and scopes `labels`. `orderReceivedPath` is
- * REQUIRED: the one navigation this flow performs is an explicit decision —
- * pass the store's own receipt route, or `null` (+ `onPlaced(result)`) to own
- * the step entirely.
- */
-function Root({ labels, orderReceivedPath, onPlaced, options, checkout, children }) {
-  if (checkout == null && orderReceivedPath === undefined) {
-    throw new Error(
-      "<Checkout.Root> requires orderReceivedPath — the route the store's order-received page is mounted at (or null, with onPlaced, to handle the post-order step yourself). The kit never assumes a route.",
-    );
-  }
-  return (
-    <CheckoutProvider checkout={checkout} options={{ ...options, orderReceivedPath }}>
-      <LabelsScope labels={labels}>
-        <RootPhase onPlaced={onPlaced}>{children}</RootPhase>
-      </LabelsScope>
-    </CheckoutProvider>
-  );
-}
-
-function RootPhase({ onPlaced, children }) {
-  const checkout = useCheckoutContext();
-  const { status } = useCart();
-  const phase =
-    checkout.stage === "submitted"
-      ? "submitted"
-      : status === "loading"
-        ? "loading"
-        : status === "empty"
-          ? "empty"
-          : "form";
-  // A page that places <Checkout.Blockers> itself must not ALSO get the copy
-  // `PlaceOrder` renders by default — the same three reasons printed twice is a
-  // real defect an eval caught. Standalone instances register here (before
-  // paint), and the button's own copy stands down while one exists.
-  const [ownBlockers, setOwnBlockers] = useState(0);
-  const registerBlockers = useCallback((delta) => setOwnBlockers((n) => n + delta), []);
-  const value = useMemo(
-    () => ({ phase, onPlaced, hasOwnBlockers: ownBlockers > 0, registerBlockers }),
-    [phase, onPlaced, ownBlockers, registerBlockers],
-  );
-  return <CheckoutPartsContext.Provider value={value}>{children}</CheckoutPartsContext.Provider>;
-}
-
-function usePartsContext(name) {
-  const ctx = useContext(CheckoutPartsContext);
-  if (!ctx) throw new Error(`<Checkout.${name}> works inside <Checkout.Root> only.`);
-  return ctx;
-}
-
-/** Gates: children render only in the matching phase (node, or function of `{ checkout, cart }`). */
-function gate(name, match) {
-  function Gate({ children }) {
-    const { phase } = usePartsContext(name);
-    const checkout = useCheckoutContext();
-    if (phase !== match) return null;
-    return typeof children === "function"
-      ? (children({ checkout, cart: checkout.cart }) ?? null)
-      : (children ?? null);
-  }
-  Gate.displayName = `Checkout.${name}`;
-  return Gate;
-}
-
-const Submitted = gate("Submitted", "submitted");
-const Loading = gate("Loading", "loading");
-const Empty = gate("Empty", "empty");
-const Form = gate("Form", "form");
-
-/**
- * The address form off `addressFieldSpec`: state/province appears with the
- * right options once a country is picked, `autoComplete` tokens stay on,
- * required marks arm on first blur, and the server's "we don't ship there"
- * lands on the country field. `which="shipping"` renders null until
- * `shipToDifferent`. Overrides: `inputRender` swaps the control only,
- * `fieldRender` the whole labeled block.
- */
-function AddressFields({
-  which = "billing",
-  show,
-  include,
-  omit,
-  inputRender: InputRender,
-  fieldRender,
-  className,
-  classes,
-  labels: partLabels,
-}) {
-  const checkout = useCheckoutContext();
-  const L = useResolvedLabels(partLabels);
-  const { countries } = useCountries();
-  const idBase = useId();
-  const [touched, setTouched] = useState({});
-
-  const isBilling = which === "billing";
-  if (!isBilling && !checkout.shipToDifferent) return null;
-
-  const values = isBilling ? checkout.billing : checkout.shipping;
-  const set = isBilling ? checkout.updateBilling : checkout.updateShipping;
-  // `show` is the current form (keys are field keys); `include`/`omit` are the
-  // older spelling and fold into the same predicate.
-  const vis = visible(show, {
-    company: include?.includes("company") ?? false,
-    phone: include ? include.includes("phone") : true,
-    ...Object.fromEntries((omit ?? []).map((k) => [k, false])),
-  });
-  const fields = addressFieldSpec({
-    countries,
-    country: values.country,
-    required: isBilling ? REQUIRED_BILLING_FIELDS : ["country", "city"],
-    includeEmail: isBilling && vis("email"),
-    includeCompany: vis("company"),
-    includePhone: vis("phone"),
-  }).filter((f) => vis(f.key));
-
-  return (
-    <div data-part="address-fields" data-which={which} className={className}>
-      {fields.map((f) => {
-        const id = `${idBase}-${which}-${f.key}`;
-        const value = values[f.key] ?? "";
-        const invalid = Boolean(touched[f.key] && f.required && !String(value).trim());
-        const dom = {
-          id,
-          value,
-          autoComplete: f.autoComplete,
-          onChange: (e) => set({ [f.key]: e && e.target ? e.target.value : e }),
-          onBlur: () => setTouched((t) => (t[f.key] ? t : { ...t, [f.key]: true })),
-        };
-        const labelText = label(L, `fields.${f.key}`);
-        if (fieldRender) {
-          return (
-            <React.Fragment key={f.key}>
-              {fieldRender({ field: f, label: labelText, invalid, options: f.options, ...dom })}
-            </React.Fragment>
-          );
-        }
-        return (
-          <div
-            key={f.key}
-            data-part="field"
-            data-key={f.key}
-            data-span={f.colSpan}
-            data-invalid={invalid || undefined}
-            className={classes?.field}
-          >
-            <label data-part="label" className={classes?.label} htmlFor={id}>
-              {labelText}
-              {f.required && (
-                <span data-part="required" aria-hidden="true">
-                  *
-                </span>
-              )}
-            </label>
-            {InputRender ? (
-              <InputRender field={f} options={f.options} invalid={invalid} {...dom} />
-            ) : f.type === "select" ? (
-              <select
-                data-part="control"
-                className={classes?.control}
-                aria-invalid={invalid || undefined}
-                aria-required={f.required || undefined}
-                {...dom}
-              >
-                <option value="">{label(L, "fields.select_placeholder")}</option>
-                {f.options.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <input
-                data-part="control"
-                className={classes?.control}
-                type={f.type}
-                aria-invalid={invalid || undefined}
-                aria-required={f.required || undefined}
-                {...dom}
-              />
-            )}
-            {f.key === "country" && checkout.addressError && (
-              <p data-part="error" role="alert" className={classes?.error}>
-                {checkout.addressError.message}
-              </p>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-/**
- * The deliver-elsewhere toggle. Children are its label — the store's words.
- * `controlRender({ checked, onChange, toggle })` replaces the checkbox with
- * whatever the design wants (a switch, a segmented control, a pair of buttons);
- * keep it operable from the keyboard and give it a checked state a screen reader
- * can read (`role="switch"` + `aria-checked`, or a real input inside).
- */
-function ShipToDifferent({ children, controlRender, className, classes }) {
-  const checkout = useCheckoutContext();
-  const checked = checkout.shipToDifferent;
-  const set = checkout.setShipToDifferent;
-  const control = controlRender ? (
-    controlRender({ checked, onChange: (e) => set(e?.target ? e.target.checked : Boolean(e)), toggle: () => set(!checked) })
-  ) : (
-    <input
-      data-part="control"
-      className={classes?.control}
-      type="checkbox"
-      checked={checked}
-      onChange={(e) => set(e.target.checked)}
-    />
-  );
-  // Without the kit's own input there is nothing for a <label> to label, so the
-  // store's control stands on its own (it carries its own accessible name).
-  const Wrapper = controlRender ? "div" : "label";
-  return (
-    <Wrapper data-part="ship-to-different" className={className}>
-      {control}
-      <span data-part="label" className={classes?.label}>{children}</span>
-    </Wrapper>
-  );
-}
-
-/**
- * The delivery choice, every branch premade: the hint line (`serverMessage`
- * preferred over the store's own words), a radio list while there is a real
- * choice, the chosen/auto-selected method *displayed* when there is one option
- * (never a picker of one), null for a virtual cart. `optionRender(option)`
- * replaces an option's content; the radio stays wired.
- */
-function ShippingMethods({ optionRender, className, classes, labels: partLabels }) {
-  const L = useResolvedLabels(partLabels);
-  const groupName = useId();
-  return (
-    <ShippingMethodPicker>
-      {({ status, methods, chosen, syncing, hint }) => {
-        const showList = methods.length > 1;
-        return (
-          <fieldset
-            data-part="shipping-methods"
-            data-state={status}
-            data-syncing={syncing || undefined}
-            className={className}
-            aria-label={label(L, "aria.shipping_group")}
-          >
-            {hint && (
-              <p
-                data-part="hint"
-                data-severity={hint.severity}
-                className={classes?.hint}
-                role={hint.severity === "error" ? "alert" : "status"}
-              >
-                {hint.serverMessage ?? label(L, `shipping.${hint.code}`)}
-              </p>
-            )}
-            {showList &&
-              methods.map((m) =>
-                optionRender ? (
-                  <React.Fragment key={m.id}>{optionRender(m)}</React.Fragment>
-                ) : (
-                  <label
-                    key={m.id}
-                    data-part="option"
-                    data-state={m.selected ? "selected" : undefined}
-                    className={classes?.option}
-                  >
-                    <input
-                      data-part="option-input"
-                      type="radio"
-                      name={groupName}
-                      checked={m.selected}
-                      onChange={() => Promise.resolve(m.select()).catch(() => {})}
-                    />
-                    <span data-part="option-label" className={classes?.["option-label"]}>{m.title}</span>
-                    <span data-part="option-cost" className={classes?.["option-cost"]}>{m.costLabel}</span>
-                  </label>
-                ),
-              )}
-            {!showList && chosen && (
-              <p data-part="chosen" className={classes?.chosen}>
-                {optionRender ? (
-                  optionRender(chosen)
-                ) : (
-                  <>
-                    <span data-part="option-label" className={classes?.["option-label"]}>{chosen.title}</span>
-                    <span data-part="option-cost" className={classes?.["option-cost"]}>{chosen.costLabel}</span>
-                  </>
-                )}
-              </p>
-            )}
-          </fieldset>
-        );
-      }}
-    </ShippingMethodPicker>
-  );
-}
-
-/**
- * How to pay — every ENABLED gateway, titles and descriptions in the admin's
- * own words. One gateway renders as the selection it already is; none renders
- * the store's checkout-unavailable line. `optionRender(gateway)` replaces an
- * option's content; the radio stays wired.
- */
-function PaymentMethods({ optionRender, className, classes, labels: partLabels }) {
-  const L = useResolvedLabels(partLabels);
-  const groupName = useId();
-  return (
-    <PaymentMethodPicker>
-      {({ gateways, selected, single, hint }) => (
-        <fieldset data-part="payment-methods" className={className} aria-label={label(L, "aria.payment_group")}>
-          {hint && (
-            <p data-part="hint" data-severity={hint.severity} className={classes?.hint} role="alert">
-              {label(L, "payment.none_available")}
-            </p>
-          )}
-          {!single &&
-            gateways.map((g) => (
-              <label
-                key={g.slug}
-                data-part="option"
-                data-state={g.selected ? "selected" : undefined}
-                className={classes?.option}
-              >
-                <input
-                  data-part="option-input"
-                  type="radio"
-                  name={groupName}
-                  checked={g.selected}
-                  onChange={g.select}
-                />
-                {optionRender ? (
-                  optionRender(g)
-                ) : (
-                  <>
-                    <span data-part="option-label" className={classes?.["option-label"]}>{g.title}</span>
-                    {g.description && (
-                      <span data-part="option-description" className={classes?.["option-description"]}>
-                        {g.description}
-                      </span>
-                    )}
-                  </>
-                )}
-              </label>
-            ))}
-          {single && selected && (
-            <p data-part="chosen" className={classes?.chosen}>
-              {optionRender ? (
-                optionRender(selected)
-              ) : (
-                <>
-                  <span data-part="option-label" className={classes?.["option-label"]}>{selected.title}</span>
-                  {selected.description && (
-                    <span data-part="option-description" className={classes?.["option-description"]}>
-                      {selected.description}
-                    </span>
-                  )}
-                </>
-              )}
-            </p>
-          )}
-        </fieldset>
-      )}
-    </PaymentMethodPicker>
-  );
-}
-
-/**
- * The mini summary: read-only rows of what is being bought. `show` decides which
- * elements render — `media`, `attributes`, `quantity`, `lineTotal` (a dense
- * summary column often wants `show={{ media: false }}`); `itemRender(item)`
- * replaces a row.
- */
-function Items({ show, itemRender, className, classes }) {
-  const vis = visible(show);
-  const checkout = useCheckoutContext();
-  const formatMoney = useFormatMoney();
-  const items = checkout.cart?.items ?? [];
-  if (!items.length) return null;
-  return (
-    <ul data-part="items" className={className}>
-      {items.map((item) => (
-        <li key={item.item_key} data-part="row" className={classes?.row}>
-          {itemRender ? (
-            itemRender(item)
-          ) : (
-            <>
-              {vis("media") &&
-                (item.image ? (
-                  <img data-part="media" className={classes?.media} src={item.image} alt="" loading="lazy" />
-                ) : (
-                  <div data-part="media" data-empty="" className={classes?.media} />
-                ))}
-              <span data-part="content" className={classes?.content}>
-                <span data-part="name" className={classes?.name}>{item.name}</span>
-                {vis("attributes") && attributesLabel(item.attributes) ? (
-                  <span data-part="attributes" className={classes?.attributes}>
-                    {attributesLabel(item.attributes)}
-                  </span>
-                ) : null}
-              </span>
-              {vis("quantity") && (
-                <span data-part="quantity" className={classes?.quantity}>×{item.quantity}</span>
-              )}
-              {vis("lineTotal") && (
-                <span data-part="line-total" className={classes?.["line-total"]}>
-                  {formatMoney(item.total)}
-                </span>
-              )}
-            </>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/**
- * The blocker lines — what still stands between the customer and the order,
- * one line per code in the store's words, gone when the order can be placed.
- * `PlaceOrder` renders these next to the button by default; placing this part
- * anywhere under `Checkout.Root` moves them there instead — the button's own
- * copy stands down automatically, so the reasons are never printed twice.
- */
-function Blockers({ standalone = true, className, classes, labels: partLabels }) {
-  const checkout = useCheckoutContext();
-  const { registerBlockers } = usePartsContext("Blockers");
-  const L = useResolvedLabels(partLabels);
-  // Registered before paint, so the button's built-in copy never flashes.
-  useCommitEffect(() => {
-    if (!standalone) return undefined;
-    registerBlockers(1);
-    return () => registerBlockers(-1);
-  }, [standalone, registerBlockers]);
-  if (checkout.canPlaceOrder) return null;
-  return (
-    <div data-part="blockers" className={className}>
-      {checkout.blockers.map((code) => (
-        <p key={code} data-part="blocker" data-code={code} className={classes?.blocker}>
-          {label(L, `blockers.${code}`)}
-        </p>
-      ))}
-    </div>
-  );
-}
-
-/**
- * The gate, the button and the reasons, together so a disabled button always
- * says why. Label and placing-label are the store's; the order error is the
- * server's own words. `show={{ blockers: false }}` moves the reasons elsewhere
- * (place `Checkout.Blockers` yourself — it also suppresses these on its own). On success `Checkout.Root`'s `onPlaced` fires (when the
- * page owns the post-order step).
- */
-function PlaceOrder({ show, showBlockers = true, className, classes, labels: partLabels }) {
-  const vis = visible(show, { blockers: showBlockers });
-  const checkout = useCheckoutContext();
-  const { onPlaced, hasOwnBlockers } = usePartsContext("PlaceOrder");
-  const L = useResolvedLabels(partLabels);
-  const place = useCallback(async () => {
-    const res = await checkout.placeOrder(); // resolves {ok:false} — never throws
-    if (res?.ok && onPlaced) onPlaced(res.result);
-  }, [checkout, onPlaced]);
-  return (
-    <>
-      <button
-        type="button"
-        data-part="place-order"
-        data-state={checkout.placing ? "placing" : undefined}
-        className={className}
-        disabled={!checkout.canPlaceOrder || checkout.placing}
-        onClick={place}
-      >
-        {checkout.placing ? label(L, "placeOrder.placing") : label(L, "placeOrder.label")}
-      </button>
-      {vis("orderError") && checkout.orderError && (
-        <p data-part="order-error" role="alert" className={classes?.["order-error"]}>
-          {checkout.orderError.message}
-        </p>
-      )}
-      {vis("blockers") && !hasOwnBlockers && (
-        <Blockers standalone={false} className={classes?.blockers} labels={partLabels} />
-      )}
-    </>
-  );
-}
-
-export const Checkout = {
-  Root,
-  Submitted,
-  Loading,
-  Empty,
-  Form,
-  AddressFields,
-  ShipToDifferent,
-  ShippingMethods,
-  PaymentMethods,
-  Items,
-  CouponField,
-  Totals,
-  PlaceOrder,
-  Blockers,
-};

package/src/commerce/storefront/parts/drawer.jsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { useCart } from "../StorefrontProvider";
-import { useCartUI } from "../cartUI";
-import { label, useResolvedLabels } from "./labels";
-
-/**
- * The cart drawer's two wired *elements* — nothing more. **The drawer itself is
- * the store's**: you render the overlay and the panel, and own where they sit,
- * how wide they are, their padding and their animation. There is deliberately
- * no `Panel` part: a kit that positions the drawer gets it wrong for half the
- * designs it lands in (and there is no version of "which side, how wide, how it
- * moves" that isn't the store's decision).
- *
- * The state and the fiddly behavior stay premade in `useCartUI()` (open/close,
- * Esc, close-on-navigate, open-on-add, focus in and back out, inert while
- * closed, `panelId`) — see `cartUI.jsx`. The shape of a drawer, then, is:
- *
- *   const ui = useCartUI();
- *   …
- *   <CartDrawer.Trigger className="…">{({ count }) => …}</CartDrawer.Trigger>
- *   {ui.open && (
- *     <div className="…your fixed layer…">
- *       <div className="…your scrim…" aria-hidden="true" onClick={ui.closeCart} />
- *       <aside id={ui.panelId} ref={ui.panelRef} tabIndex={-1}
- *              role="dialog" aria-modal="true" aria-label="…"
- *              className="…your panel: side, width, padding, transition…">
- *         <CartDrawer.Close>…your glyph…</CartDrawer.Close>
- *         …Cart.* parts…
- *       </aside>
- *     </div>
- *   )}
- *
- * Contract, rules and labels: the commerce skill's install/02-storefront.md.
- */
-
-/**
- * The header's cart button, wired: toggles the drawer, reports `aria-expanded`,
- * and points `aria-controls` at `useCartUI().panelId` (put that on your panel).
- * The icon is the store's — children, or a render prop `({ count, open }) => …`
- * to badge it with the live item count.
- */
-function Trigger({ children, className, labels: partLabels }) {
-  const L = useResolvedLabels(partLabels);
-  const ui = useCartUI();
-  const { itemCount } = useCart();
-  const content = typeof children === "function" ? children({ count: itemCount, open: ui.open }) : children;
-  return (
-    <button
-      type="button"
-      data-part="trigger"
-      data-state={ui.open ? "open" : "closed"}
-      className={className}
-      aria-haspopup="dialog"
-      aria-expanded={ui.open}
-      aria-controls={ui.panelId}
-      aria-label={label(L, "aria.trigger")}
-      onClick={ui.toggleCart}
-    >
-      {content}
-    </button>
-  );
-}
-
-/**
- * The named close control — the drawer's keyboard and screen-reader way out
- * (a click-away scrim is not one). Children are the store's icon or text.
- */
-function Close({ children, className, labels: partLabels }) {
-  const L = useResolvedLabels(partLabels);
-  const ui = useCartUI();
-  return (
-    <button
-      type="button"
-      data-part="close"
-      className={className}
-      aria-label={label(L, "aria.close")}
-      onClick={ui.closeCart}
-    >
-      {children}
-    </button>
-  );
-}
-
-export const CartDrawer = {
-  Trigger,
-  Close,
-};