@base44/app-plugin-commerce 0.2.7 → 0.3.2

package/src/commerce/storefront/useStorefrontSeo.js

@@ -1,204 +0,0 @@
-import { useEffect } from "react";
-
-/**
- * Storefront SEO — titles, meta tags and product structured data, with no
- * dependency (no react-helmet). A store whose every page shares one static
- * `<title>` is invisible to search and unshareable on social; this is the
- * cheapest possible fix, one line per page:
- *
- *   useStorefrontSeo(productSeo(product, view, { storeName, currency }));
- *   useStorefrontSeo(collectionSeo({ title: "Gowns", products }));
- *   useStorefrontSeo(orderSeo(order));     // noindex — a receipt must not rank
- *
- * Everything it sets is restored on unmount, so navigating away can't leave a
- * product's title on the home page.
- */
-
-/** Upsert one <meta>, returning a restore function. */
-function setMeta(attr, name, content) {
-  if (typeof document === "undefined") return () => {};
-  const selector = `meta[${attr}="${name}"]`;
-  let el = document.head.querySelector(selector);
-  const created = !el;
-  const previous = el?.getAttribute("content") ?? null;
-  if (!el) {
-    el = document.createElement("meta");
-    el.setAttribute(attr, name);
-    document.head.appendChild(el);
-  }
-  el.setAttribute("content", content ?? "");
-  return () => {
-    if (created) el.remove();
-    else if (previous != null) el.setAttribute("content", previous);
-  };
-}
-
-function setLink(rel, href) {
-  if (typeof document === "undefined") return () => {};
-  let el = document.head.querySelector(`link[rel="${rel}"]`);
-  const created = !el;
-  const previous = el?.getAttribute("href") ?? null;
-  if (!el) {
-    el = document.createElement("link");
-    el.setAttribute("rel", rel);
-    document.head.appendChild(el);
-  }
-  el.setAttribute("href", href);
-  return () => {
-    if (created) el.remove();
-    else if (previous != null) el.setAttribute("href", previous);
-  };
-}
-
-/**
- * Apply page metadata. Pass the output of `productSeo`/`collectionSeo`/
- * `orderSeo`, or your own object.
- *
- * @param {{title?: string, description?: string, image?: string,
- *   canonical?: string, noindex?: boolean, jsonLd?: object}} seo
- */
-export function useStorefrontSeo(seo) {
-  const { title, description, image, canonical, noindex, jsonLd } = seo ?? {};
-  const jsonLdKey = jsonLd ? JSON.stringify(jsonLd) : null;
-
-  useEffect(() => {
-    if (typeof document === "undefined") return undefined;
-    const undo = [];
-
-    if (title) {
-      const previous = document.title;
-      document.title = title;
-      undo.push(() => {
-        document.title = previous;
-      });
-    }
-    if (description) {
-      undo.push(setMeta("name", "description", description));
-      undo.push(setMeta("property", "og:description", description));
-    }
-    if (title) {
-      undo.push(setMeta("property", "og:title", title));
-      undo.push(setMeta("name", "twitter:title", title));
-    }
-    if (image) {
-      undo.push(setMeta("property", "og:image", image));
-      undo.push(setMeta("name", "twitter:card", "summary_large_image"));
-      undo.push(setMeta("name", "twitter:image", image));
-    }
-    if (canonical) undo.push(setLink("canonical", canonical));
-    if (noindex) undo.push(setMeta("name", "robots", "noindex,nofollow"));
-
-    if (jsonLdKey) {
-      const script = document.createElement("script");
-      script.type = "application/ld+json";
-      script.textContent = jsonLdKey;
-      document.head.appendChild(script);
-      undo.push(() => script.remove());
-    }
-
-    return () => undo.forEach((fn) => fn());
-  }, [title, description, image, canonical, noindex, jsonLdKey]);
-}
-
-const stripHtml = (html) =>
-  String(html ?? "")
-    .replace(/<[^>]*>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-
-const currentUrl = (url) =>
-  url ?? (typeof window !== "undefined" ? window.location.href.split("?")[0] : undefined);
-
-/**
- * SEO for a product page, including schema.org `Product` + `Offer` structured
- * data (price, availability, rating, sku) — what makes a product eligible for
- * rich results.
- *
- * @param {object} product
- * @param {object|null} [view] a `resolveSelection` view — its resolved price
- *   and image are used when present
- * @param {{storeName?: string, currency?: string, url?: string}} [opts]
- */
-export function productSeo(product, view = null, { storeName, currency, url } = {}) {
-  if (!product) return {};
-  const display = view?.display ?? product;
-  const image = display?.image?.src ?? product.images?.[0]?.src;
-  const description =
-    stripHtml(product.short_description) || stripHtml(product.description).slice(0, 300);
-  const price = display?.price ?? product.price;
-  const inStock = ["instock", "onbackorder"].includes(display?.stock_status ?? product.stock_status);
-
-  return {
-    title: storeName ? `${product.name} — ${storeName}` : product.name,
-    description,
-    image,
-    canonical: currentUrl(url),
-    jsonLd: {
-      "@context": "https://schema.org",
-      "@type": "Product",
-      name: product.name,
-      description,
-      ...(image ? { image: [image] } : {}),
-      ...(display?.sku || product.sku ? { sku: display?.sku || product.sku } : {}),
-      ...(product.rating_count
-        ? {
-            aggregateRating: {
-              "@type": "AggregateRating",
-              ratingValue: product.average_rating,
-              reviewCount: product.rating_count,
-            },
-          }
-        : {}),
-      ...(price != null
-        ? {
-            offers: {
-              "@type": "Offer",
-              price,
-              ...(currency ? { priceCurrency: currency } : {}),
-              availability: `https://schema.org/${inStock ? "InStock" : "OutOfStock"}`,
-              ...(currentUrl(url) ? { url: currentUrl(url) } : {}),
-            },
-          }
-        : {}),
-    },
-  };
-}
-
-/**
- * SEO for a catalog/collection page, with an `ItemList` of the products shown.
- *
- * @param {{title: string, description?: string, products?: Array<object>,
- *   storeName?: string, url?: string}} opts
- */
-export function collectionSeo({ title, description, products = [], storeName, url } = {}) {
-  return {
-    title: storeName && title ? `${title} — ${storeName}` : title,
-    description,
-    image: products[0]?.images?.[0]?.src,
-    canonical: currentUrl(url),
-    jsonLd: products.length
-      ? {
-          "@context": "https://schema.org",
-          "@type": "ItemList",
-          itemListElement: products.slice(0, 24).map((p, i) => ({
-            "@type": "ListItem",
-            position: i + 1,
-            name: p.name,
-          })),
-        }
-      : undefined,
-  };
-}
-
-/**
- * SEO for `/order-received` — and for `/checkout`: both must be **noindex**.
- * A receipt page carrying an order key has no business in a search index.
- *
- * @param {object} [order]
- */
-export function orderSeo(order) {
-  return {
-    title: order?.order_number ? `Order ${order.order_number}` : "Order",
-    noindex: true,
-  };
-}

package/src/commerce/storefront/useTotalsLines.js

@@ -1,109 +0,0 @@
-import { useMemo } from "react";
-import { cartTotalsLines, orderTotalsLines } from "@/commerce/utils";
-import { useCart, useFormatMoney } from "./StorefrontProvider";
-import { useCheckoutContextOptional } from "./useCheckout";
-
-/**
- * useTotalsLines — the summary lines for the shared cart, or for a placed order.
- *
- *   const lines = useTotalsLines();          // the cart (bag page, checkout summary)
- *   const lines = useTotalsLines(order);     // a placed order (order-received)
- *
- *   {lines.filter(l => !l.hidden).map(l => (
- *     <p key={l.key} className={l.emphasis ? "font-medium" : ""}>
- *       <span>{l.label}</span><span>{l.formatted}</span>
- *     </p>
- *   ))}
- *
- * Always five keys — `subtotal` `discount` `shipping` `tax` `total` — with
- * `hidden` set on a zero discount or tax. Rendering the array is what keeps a
- * summary adding up once the store issues its first coupon or charges tax; a
- * hand-written block reliably omits exactly those two rows. It also absorbs the
- * cart-vs-order shape difference: a cart's totals are nested under
- * `cart.totals`, an order's are flat on the order.
- *
- * @param {object} [order] pass a placed order to project it instead of the cart
- */
-export function useTotalsLines(order) {
-  const formatMoney = useFormatMoney();
-  const { cart } = useCart();
-  return useMemo(
-    () =>
-      order
-        ? orderTotalsLines(order, { formatMoney })
-        : cart
-          ? cartTotalsLines(cart, { formatMoney })
-          : [],
-    [order, cart, formatMoney],
-  );
-}
-
-const BLOCKER_MESSAGES = {
-  cart_loading: "Loading your bag…",
-  empty_cart: "Your bag is empty.",
-  billing_incomplete: "Complete your details to continue.",
-  shipping_address_incomplete: "Enter the delivery address.",
-  shipping_recalculating: "Updating delivery options…",
-  shipping_address_required: "Enter your address to see delivery options.",
-  shipping_method_required: "Choose a delivery option.",
-  shipping_not_available: "We don't deliver to that address yet.",
-  payment_method_required: "Choose how you'd like to pay.",
-};
-
-const BLOCKER_FIELDS = {
-  billing_incomplete: "billing",
-  shipping_address_incomplete: "shipping",
-  shipping_address_required: "country",
-  shipping_not_available: "country",
-  shipping_method_required: "shipping_method",
-  payment_method_required: "payment_method",
-};
-
-/**
- * A blocker code turned into customer-facing copy.
- *
- * @param {string} code one of `useCheckout().blockers`
- * @param {{missingBillingFields?: string[], labels?: Record<string, string>}} [opts]
- *   pass `missingBillingFields` and an incomplete-billing message names the
- *   fields instead of saying "complete your details".
- * @returns {string}
- */
-export function blockerMessage(code, { missingBillingFields, labels } = {}) {
-  if (labels?.[code]) return labels[code];
-  if (code === "billing_incomplete" && missingBillingFields?.length) {
-    const names = missingBillingFields.map((f) => f.replace(/_/g, " ")).join(", ");
-    return `Still needed: ${names}.`;
-  }
-  return BLOCKER_MESSAGES[code] ?? "Something is still missing.";
-}
-
-/**
- * useCheckoutBlockers — why the place-order button is disabled, in words.
- *
- *   const blockers = useCheckoutBlockers();
- *   <button disabled={!canPlaceOrder}>Place order</button>
- *   {blockers.map(b => <p key={b.code}>{b.message}</p>)}
- *
- * `useCheckout` already names every blocker; the reason they went unrendered in
- * practice is that a code like `shipping_method_required` needs copy invented
- * for it. This supplies the copy (overridable) plus the `field` each one points
- * at, so a page can anchor the hint next to the input that fixes it — a
- * disabled button with no explanation is the most common checkout dead end.
- *
- * Needs a `<CheckoutProvider>` above it; returns `[]` without one.
- */
-export function useCheckoutBlockers({ labels } = {}) {
-  const checkout = useCheckoutContextOptional();
-  const blockers = checkout?.blockers ?? [];
-  const missing = checkout?.missingBillingFields;
-  return useMemo(
-    () =>
-      blockers.map((code) => ({
-        code,
-        message: blockerMessage(code, { missingBillingFields: missing, labels }),
-        field: BLOCKER_FIELDS[code] ?? null,
-      })),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(blockers), JSON.stringify(missing ?? []), labels],
-  );
-}

package/src/commerce/storefront/useUpsell.js

@@ -1,90 +0,0 @@
-import { useCallback } from "react";
-import { productImages } from "@/commerce/utils";
-import { useCart, useStorefront } from "./StorefrontProvider";
-import { useCartUIOptional } from "./cartUI";
-import { useAsyncData } from "./internal/useAsyncData";
-import { useAddItem } from "./useProduct";
-import { useProductPrice } from "./useProductPrice";
-
-/**
- * useUpsell — one product offered beside another surface (a cart drawer's
- * "add the care kit", a checkout's "complete the set", a cross-sell strip
- * entry), with the lifecycle solved:
- *
- *   const kit = useUpsell("care-kit");                    // slug or { id }…
- *   const kit = useUpsell(p.crossSells[0]);               // …or a row you already have
- *   {kit.show && (
- *     <aside className="…">
- *       {kit.image && <img src={kit.image.src} alt={kit.image.alt} className="…" />}
- *       {kit.product.name} {kit.price.label}
- *       <button type="button" onClick={kit.add} disabled={kit.adding}>Add</button>
- *       {kit.error && <p role="alert">{kit.error.message}</p>}
- *     </aside>
- *   )}
- *
- * `show` is the one flag to branch on: it is false while loading, on a fetch
- * failure, when the product is out of stock, and **when it is already in the
- * cart** — matched by product id, never by display name (a rename must not
- * break the match). Passing a row you already hold (`product.upsells` /
- * `product.crossSells` from `useProduct`, or a `useProductList` row) skips the
- * fetch entirely — prefer that when the row is on hand.
- *
- * `add()` never throws; a product with options can't be one-click added
- * (`needsSelection` — link to its page instead). With `<CartUIProvider>`
- * mounted, a successful add opens the drawer.
- *
- * @param {string|{id: string}|object} ref slug, `{ id }`, or a product row
- * @param {{quantity?: number}} [options]
- * @returns {{show: boolean, inCart: boolean, needsSelection: boolean,
- *   product: object|null, image: {src: string, alt: string}|null,
- *   price: object, add: () => Promise<object>, adding: boolean,
- *   error: object|null}}
- */
-export function useUpsell(ref, { quantity = 1 } = {}) {
-  const store = useStorefront();
-  const { cart } = useCart();
-  const cartUI = useCartUIOptional();
-
-  // A row (has id + name) is used as-is; a slug or { id } is fetched.
-  const isRow = Boolean(ref && typeof ref === "object" && ref.id && ref.name !== undefined);
-  const refKey = isRow ? `row:${ref.id}` : typeof ref === "string" ? ref : JSON.stringify(ref ?? null);
-
-  const { data, loading, error: fetchError } = useAsyncData(
-    () => (isRow || !ref ? Promise.resolve(null) : store.getProduct(ref)),
-    [store, refKey], // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
-  const product = isRow ? ref : (data?.product ?? null);
-  const needsSelection = isRow
-    ? (ref.attributes?.length ?? 0) > 0
-    : (data?.variations?.length ?? 0) > 0;
-
-  const price = useProductPrice(product);
-  const { add: rawAdd, adding, error, reset } = useAddItem();
-
-  const add = useCallback(async () => {
-    if (!product) return { ok: false, error: { code: "no_product", message: "Product not loaded." } };
-    if (needsSelection) {
-      return { ok: false, error: { code: "variation_required", message: "Choose an option first." } };
-    }
-    const res = await rawAdd({ product_id: product.id }, quantity);
-    if (res.ok) cartUI?.onItemAdded?.();
-    return res;
-  }, [product, needsSelection, rawAdd, quantity, cartUI]);
-
-  const inCart = Boolean(product) && (cart?.items ?? []).some((i) => i.product_id === product.id);
-  const busy = !isRow && Boolean(ref) && loading;
-
-  return {
-    show: !busy && !fetchError && Boolean(product) && !inCart && product?.stock_status !== "outofstock",
-    inCart,
-    needsSelection,
-    product,
-    image: productImages(product)[0] ?? null,
-    price,
-    add,
-    adding,
-    error,
-    reset,
-  };
-}