@wix/agent-skills 1.13.0 → 1.15.0

package/skills/wix-headless/references/astro/templates/stores/AddToCartButton.tsx

@@ -1,77 +0,0 @@
-import { useState } from "react";
-import { currentCart } from "@wix/ecom";
-import { trackEvent } from "../utils/analytics";
-
-const WIX_STORES_APP_ID = "215238eb-22a5-4c36-9e7b-e7c08025e04e";
-
-interface AddToCartButtonProps {
-  productId: string;
-  productName: string;
-  price?: number;
-  currency?: string;
-  variantId?: string;
-  variantName?: string;
-  quantity?: number;
-  disabled?: boolean;
-  // Modifier selections, already flattened by ProductPurchase. Shapes:
-  //   modifierChoices:  { [modifier.key]: choice.key }
-  //   customTextFields: { [modifier.freeTextSettings.key]: "<user input>" }
-  modifierChoices?: Record<string, string>;
-  customTextFields?: Record<string, string>;
-}
-
-export default function AddToCartButton({
-  productId, productName, price, currency,
-  variantId, variantName, quantity = 1, disabled,
-  modifierChoices, customTextFields,
-}: AddToCartButtonProps) {
-  const [status, setStatus] = useState<"idle" | "added">("idle");
-
-  const handleAddToCart = async () => {
-    // Optimistic: show success immediately, fire API in background
-    setStatus("added");
-    setTimeout(() => setStatus("idle"), 2000);
-    window.dispatchEvent(new CustomEvent("cart-updated", { detail: { delta: quantity } }));
-
-    try {
-      // Build catalogReference.options per Wix Stores Catalog V3 contract:
-      //   { variantId, options: { [modifier.key]: choice.key }, customTextFields: { … } }
-      const catalogOptions: Record<string, unknown> = {};
-      if (variantId) catalogOptions.variantId = variantId;
-      if (modifierChoices && Object.keys(modifierChoices).length > 0) {
-        catalogOptions.options = modifierChoices;
-      }
-      if (customTextFields && Object.keys(customTextFields).length > 0) {
-        catalogOptions.customTextFields = customTextFields;
-      }
-      const { cart } = await currentCart.addToCurrentCart({
-        lineItems: [{
-          catalogReference: {
-            appId: WIX_STORES_APP_ID,
-            catalogItemId: productId,
-            options: Object.keys(catalogOptions).length > 0 ? catalogOptions : undefined,
-          },
-          quantity,
-        }],
-      });
-      window.dispatchEvent(new CustomEvent("cart-updated", { detail: { cart } }));
-      trackEvent("AddToCart", {
-        id: productId, name: productName, price, currency,
-        quantity, variant: variantName, origin: "Product Page",
-      });
-    } catch {
-      setStatus("idle");
-      window.dispatchEvent(new CustomEvent("cart-updated", { detail: {} }));
-    }
-  };
-
-  return (
-    <button
-      onClick={handleAddToCart}
-      disabled={disabled || status === "added"}
-      className="add-to-cart-btn"
-    >
-      {disabled ? "Select Options" : status === "added" ? "Added \u2713" : "Add to Cart"}
-    </button>
-  );
-}

package/skills/wix-headless/references/astro/templates/stores/BackInStockForm.tsx

@@ -1,176 +0,0 @@
-import { useState } from "react";
-import { backInStockNotifications } from "@wix/ecom";
-import { WIX_STORES_BACK_IN_STOCK_APP_ID } from "../utils/back-in-stock";
-
-interface BackInStockFormProps {
-  productId: string;
-  variantId?: string;
-  productName: string;
-  // Numeric price (number or numeric string). The Wix backend validates
-  // `itemDetails.price >= 0` against the parsed decimal, so currency-
-  // formatted strings ("$695") are stripped here before submission.
-  productPrice: number | string;
-  variantLabel?: string;
-}
-
-type Status =
-  | { kind: "idle" }
-  | { kind: "submitting" }
-  | { kind: "success"; alreadySubscribed?: boolean }
-  | { kind: "error"; message: string };
-
-const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-function normalizePrice(raw: number | string): string {
-  const s =
-    typeof raw === "number" ? String(raw) : String(raw).replace(/[^0-9.]/g, "");
-  const n = Number(s);
-  return Number.isFinite(n) && n >= 0 ? s : "0";
-}
-
-function readErrorCode(err: unknown): string | undefined {
-  if (!err || typeof err !== "object") return undefined;
-  // Wix SDK errors expose details.applicationError.code; some shapes also
-  // surface a top-level details.code or http status. Try the common ones.
-  const e = err as Record<string, any>;
-  return (
-    e?.details?.applicationError?.code ??
-    e?.details?.code ??
-    e?.applicationError?.code ??
-    undefined
-  );
-}
-
-export default function BackInStockForm({
-  productId,
-  variantId,
-  productName,
-  productPrice,
-  variantLabel,
-}: BackInStockFormProps) {
-  const [email, setEmail] = useState("");
-  const [status, setStatus] = useState<Status>({ kind: "idle" });
-
-  const submitting = status.kind === "submitting";
-  const success = status.kind === "success";
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    if (submitting) return;
-    if (!EMAIL_RE.test(email)) {
-      setStatus({ kind: "error", message: "Enter a valid email." });
-      return;
-    }
-    setStatus({ kind: "submitting" });
-
-    // Bare-fields rule: the SDK throws an opaque
-    // "TypeError: Failed to construct 'URL': Invalid URL" when the optional
-    // request.itemUrl or itemDetails.image fields are present, even with
-    // browser-valid URLs. Send only the four required fields:
-    // catalogReference, email, name, price. The dashboard's Back-in-Stock
-    // Requests view + the customer notification email both work without
-    // them; the email just won't have a thumbnail and the dashboard uses
-    // its default item URL.
-    const request = {
-      catalogReference: {
-        appId: WIX_STORES_BACK_IN_STOCK_APP_ID,
-        catalogItemId: productId,
-        ...(variantId ? { options: { variantId } } : {}),
-      },
-      email,
-    };
-    const itemDetails = {
-      name: productName,
-      price: normalizePrice(productPrice),
-    };
-
-    try {
-      await backInStockNotifications.createBackInStockNotificationRequest(
-        request,
-        itemDetails,
-      );
-      setStatus({ kind: "success" });
-    } catch (err) {
-      const code = readErrorCode(err);
-      if (code === "BACK_IN_STOCK_NOTIFICATION_REQUEST_ALREADY_EXISTS") {
-        setStatus({ kind: "success", alreadySubscribed: true });
-        return;
-      }
-      if (code === "REQUEST_COLLECTION_DISABLED") {
-        setStatus({
-          kind: "error",
-          message: "Notifications aren't being collected right now.",
-        });
-        return;
-      }
-      console.error("[back-in-stock] subscribe failed:", err);
-      setStatus({
-        kind: "error",
-        message: "Something went wrong. Please try again.",
-      });
-    }
-  }
-
-  if (success) {
-    return (
-      <div className="back-in-stock-success" role="status" aria-live="polite">
-        <p className="back-in-stock-success-headline">
-          {status.alreadySubscribed
-            ? "You're already on the list."
-            : "We'll let you know."}
-        </p>
-        <p className="back-in-stock-success-detail">
-          {status.alreadySubscribed
-            ? `We had your note for ${productName}${variantLabel ? ` (${variantLabel})` : ""}. We'll email ${email} the moment it's back.`
-            : `We'll email ${email} the moment ${productName}${variantLabel ? ` (${variantLabel})` : ""} is back in stock.`}
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <form className="back-in-stock-form" onSubmit={handleSubmit} noValidate>
-      <div className="back-in-stock-headline">
-        <span className="back-in-stock-eyebrow">Currently sold out</span>
-        <p className="back-in-stock-lede">
-          Leave your email and we'll notify you the moment
-          {variantLabel ? ` ${variantLabel.toLowerCase()}` : ""} is back in
-          stock.
-        </p>
-      </div>
-      <label className="back-in-stock-label" htmlFor="back-in-stock-email">
-        Email
-      </label>
-      <div className="back-in-stock-row">
-        <input
-          id="back-in-stock-email"
-          type="email"
-          inputMode="email"
-          autoComplete="email"
-          required
-          placeholder="you@example.com"
-          value={email}
-          onChange={(e) => {
-            setEmail(e.target.value);
-            if (status.kind === "error") setStatus({ kind: "idle" });
-          }}
-          className="back-in-stock-input"
-          aria-invalid={status.kind === "error"}
-          disabled={submitting}
-        />
-        <button
-          type="submit"
-          className="back-in-stock-submit"
-          disabled={submitting || email.trim().length === 0}
-        >
-          {submitting ? "Sending…" : "Notify me"}
-        </button>
-      </div>
-      {status.kind === "error" && (
-        <p className="back-in-stock-error" role="alert">
-          {status.message}
-        </p>
-      )}
-    </form>
-  );
-}

package/skills/wix-headless/references/astro/templates/stores/CategoryRail.astro

@@ -1,69 +0,0 @@
----
-// Shared category-rail + Prev/Next pagination for /products and
-// /category/[slug]. Persists across <ClientRouter /> swaps so pill clicks
-// feel like an in-place filter, not a navigation. The active pill is
-// recomputed from the URL by an astro:after-swap hook in Layout.astro.
-//
-// Owned by the stores pack. Ecom/blog/etc. do NOT write to this file.
-import type { StoreCategory } from "../utils/categories";
-
-interface Props {
-  categories: StoreCategory[];
-  // null = "All" view; otherwise the slug of the active category.
-  activeSlug: string | null;
-  prevHref: string | null;
-  nextHref: string | null;
-}
-
-const { categories, activeSlug, prevHref, nextHref } = Astro.props;
----
-
-{categories.length > 0 && (
-  <nav
-    class="category-rail"
-    aria-label="Browse by category"
-    data-category-rail
-    transition:persist="category-rail"
-    transition:name="category-rail"
-  >
-    <div class="container-page category-rail-inner">
-      <a
-        href="/products"
-        class="category-pill"
-        data-category-slug=""
-        data-astro-prefetch="hover"
-        aria-current={activeSlug ? undefined : "page"}
-      >All</a>
-      {categories.map((cat) => (
-        <a
-          href={`/category/${cat.slug}`}
-          class="category-pill"
-          data-category-slug={cat.slug}
-          data-astro-prefetch="hover"
-          aria-current={activeSlug === cat.slug ? "page" : undefined}
-        >{cat.name}</a>
-      ))}
-    </div>
-  </nav>
-)}
-
-{(prevHref || nextHref) && (
-  <nav class="pagination" aria-label="Listing pagination">
-    <div class="container-page pagination-inner">
-      {prevHref ? (
-        <a href={prevHref} class="pagination-link" data-astro-prefetch="hover" rel="prev">
-          &larr; Previous
-        </a>
-      ) : (
-        <span class="pagination-link is-disabled" aria-disabled="true">&larr; Previous</span>
-      )}
-      {nextHref ? (
-        <a href={nextHref} class="pagination-link" data-astro-prefetch="hover" rel="next">
-          Next &rarr;
-        </a>
-      ) : (
-        <span class="pagination-link is-disabled" aria-disabled="true">Next &rarr;</span>
-      )}
-    </div>
-  </nav>
-)}

package/skills/wix-headless/references/astro/templates/stores/ProductCard.astro

@@ -1,79 +0,0 @@
----
-import { resolveWixImageUrl } from "../utils/wix-image";
-import { fetchLiveOffers, offersForProduct } from "../utils/discounts";
-
-interface Props {
-  product: {
-    _id?: string;
-    name?: string;
-    slug?: string;
-    media?: { main?: { image?: string }; items?: any[] };
-    actualPriceRange?: {
-      minValue?: { formattedAmount?: string; amount?: string; currency?: string };
-    };
-  };
-  // Optional editorial ordinal (01 / 02 / 03). Listings that want it should
-  // pass their own index; home grids typically omit it.
-  index?: number;
-}
-
-const { product, index } = Astro.props;
-
-// fetchLiveOffers is memoized per request via auth.elevate's caching, so
-// rendering N ProductCards in one page does NOT fan out N discount-rule
-// queries. Pages that mount ProductCard never fetch offers themselves —
-// the component owns that concern.
-let primaryOffer: { name: string; offer?: string } | undefined;
-try {
-  const offers = await fetchLiveOffers();
-  primaryOffer = offersForProduct(offers, product._id)[0];
-} catch (err) {
-  console.error("[ProductCard] fetchLiveOffers failed:", err);
-}
-
-const imageUrl = resolveWixImageUrl(product.media?.main?.image, 600, 800);
-const price = product.actualPriceRange?.minValue?.formattedAmount;
-const amount = product.actualPriceRange?.minValue?.amount;
-const currency = product.actualPriceRange?.minValue?.currency;
-const indexLabel =
-  typeof index === "number" ? String(index + 1).padStart(2, "0") : null;
----
-
-<a
-  href={`/products/${product.slug}`}
-  class="product-card"
-  data-analytics-product
-  data-id={product._id}
-  data-name={product.name}
-  data-price={amount}
-  data-currency={currency}
->
-  <div class="product-card-media">
-    {imageUrl && <img src={imageUrl} alt={product.name ?? "Product"} loading="lazy" />}
-    {indexLabel && <span class="product-card-index">N°&nbsp;{indexLabel}</span>}
-    {primaryOffer && (
-      <span class="product-card-ribbon" title={primaryOffer.offer}>
-        {primaryOffer.name}
-      </span>
-    )}
-  </div>
-  <div class="product-card-body">
-    <h3 class="product-card-name">{product.name}</h3>
-    {price && <p class="product-card-price">{price}</p>}
-  </div>
-</a>
-
-<script>
-  import { trackEvent } from "../utils/analytics";
-  document.addEventListener("click", (event) => {
-    const anchor = (event.target as HTMLElement)?.closest("a[data-analytics-product]") as HTMLAnchorElement | null;
-    if (!anchor) return;
-    trackEvent("ClickProduct", {
-      id: anchor.dataset.id,
-      name: anchor.dataset.name,
-      price: anchor.dataset.price ? Number(anchor.dataset.price) : undefined,
-      currency: anchor.dataset.currency,
-      origin: "Product Listing",
-    });
-  });
-</script>