@base44/app-plugin-commerce 0.2.6 → 0.3.1

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 { useAddToCart } 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 } = useAddToCart();
-
-  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,
-  };
-}