@wix/agent-skills 1.13.0 → 1.15.0

package/skills/wix-headless/references/astro/templates/ecom/components-ecom.css

@@ -1,302 +0,0 @@
-/* src/styles/components-ecom.css
- *
- * Ecom-pack component CSS. Owned by the ecom Phase 3 components agent.
- *
- * This file is the SINGLE source of truth for ecom-component classes.
- * The designer's global.css does NOT publish .cart-summary, .cart-total,
- * .cart-empty, or .checkout-btn — those all live here. See
- * references/shared/STYLING.md § "Component-specific CSS is owned by the
- * component, not the designer".
- *
- * Class groups in this file:
- * - .cart-summary / .cart-total / .cart-empty / .checkout-btn → /cart page summary panel and empty state
- * - .cart-item / .cart-item-* / .qty-* → CartView.tsx line items
- * - .cart-discount / .cart-applied-discounts → CartView.tsx discount rows
- * - .cart-badge / .cart-badge-* → CartBadge.tsx (mounted in Navigation)
- *
- * Rules use direct CSS (`var(--token)`) only — no `@apply`. Tailwind v4
- * `@apply` in a non-entrypoint file only resolves utilities whose theme keys
- * the designer's `@theme` block declares. Earlier revisions of this template
- * used `@apply text-bark/70 bg-tobacco …` (stale token vocabulary) and
- * `@apply size-6` (built-in utility that needs `@reference` to be visible
- * here), and both classes built-failed against current designer output.
- * Direct `var(--color-ink)` / `0.75rem` calls work against any
- * designer-published token set as long as the core scales exist (they always
- * do). Use fallback chains (`var(--color-paper-warm, var(--color-paper, var(--color-cream)))`)
- * for sometimes-published tokens.
- */
-
-/* =========================================================================
-   Cart summary panel + total + checkout button + empty state.
-   Owned here, NOT in global.css.
-   ========================================================================= */
-.cart-summary {
-  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
-  border: 1px solid var(--color-rule);
-  padding: 2rem;
-  border-radius: var(--radius-md);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-@media (min-width: 768px) {
-  .cart-summary {
-    position: sticky;
-    top: 2rem;
-  }
-}
-
-.cart-empty {
-  text-align: center;
-  padding-block: 4rem;
-  color: var(--color-mute);
-}
-.cart-empty .checkout-btn {
-  display: inline-flex;
-  width: auto;
-  max-width: 18rem;
-}
-
-/* .checkout-btn — primary CTA, full-width inside .cart-summary. Self-contained;
-   does NOT @apply the designer's `btn` utility (Tailwind v4 only @applies
-   utilities declared with `@utility`, and the designer may or may not have
-   declared it under that exact name). Composing the same visual shape inline
-   keeps this file portable across designer vocabularies. */
-.checkout-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 1.5rem;
-  font-family: var(--font-display);
-  font-size: 0.9375rem;
-  font-weight: 500;
-  background: var(--color-ink);
-  color: var(--color-paper);
-  border: 1px solid var(--color-ink);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  width: 100%;
-  margin-top: 1rem;
-  transition: background-color 150ms ease, box-shadow 150ms ease;
-}
-.checkout-btn:hover:not(:disabled) {
-  background: var(--color-ink-soft, var(--color-ink));
-}
-.checkout-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* --- Cart badge icon (CartBadge.tsx) --- */
-/* CartBadge.tsx renders an inline SVG bag icon + optional count span. */
-.cart-badge {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.cart-badge-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-}
-.cart-badge-count {
-  position: absolute;
-  top: -0.25rem;
-  right: -0.5rem;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: var(--color-ink);
-  color: var(--color-paper);
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-
-/* --- Cart line items (CartView.tsx) --- */
-.cart-item {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-.cart-item-image {
-  flex-shrink: 0;
-}
-.cart-item-image-link {
-  display: block;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-.cart-item-image-link:hover .cart-item-image,
-.cart-item-image-link:focus-visible .cart-item-image {
-  border-color: var(--color-ink);
-}
-.cart-item-name-link {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  border-bottom: 1px solid var(--color-mute);
-  padding-bottom: 1px;
-  transition: color 150ms ease, border-color 150ms ease;
-}
-.cart-item-name-link:hover,
-.cart-item-name-link:focus-visible {
-  color: var(--color-accent);
-  outline: none;
-  border-bottom-color: var(--color-accent);
-}
-.cart-item-info {
-  flex: 1;
-  min-width: 0;
-}
-
-/* --- Description lines & modifiers --- */
-.cart-item-option {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  margin: 0.125rem 0;
-}
-.cart-item-modifiers {
-  margin-top: 0.25rem;
-}
-
-/* --- Quantity stepper --- */
-.cart-item-qty {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-  width: fit-content;
-}
-.qty-btn {
-  width: 1.75rem;
-  height: 1.75rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-ink);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-ink);
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 1rem;
-  line-height: 1;
-}
-.qty-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.qty-value {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  min-width: 1.5rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-/* --- Unavailable state --- */
-.cart-item-unavailable {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-error, #c0392b);
-}
-
-/* --- Price + remove --- */
-.cart-item-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-  flex-shrink: 0;
-}
-.cart-item-prices {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-.cart-item-full-price {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  text-decoration: line-through;
-}
-.cart-item-unit-price {
-  font-family: var(--font-body);
-  font-weight: 600;
-  white-space: nowrap;
-}
-.cart-item-line-total {
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  margin: 0;
-}
-.cart-item-remove {
-  background: transparent;
-  border: none;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-mute);
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/* --- Cart summary: discount + total rows ---
-   Subtotal uses the designer's .cart-subtotal contract class in global.css.
-   These rows appear only when priceSummary exposes a discount or a total
-   that differs from subtotal (see CartView.tsx extractSummary). */
-.cart-discount {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  margin-top: 0.75rem;
-}
-.cart-discount-name {
-  font-size: 0.75rem;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.cart-discount-amount {
-  white-space: nowrap;
-}
-.cart-total {
-  border-top: 1px solid var(--color-rule);
-  padding-top: 1rem;
-  margin-top: 0.75rem;
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  font-weight: 500;
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-/* Applied-discounts row — name-only (no amount) for cases where the API
-   reports a promo NAME via appliedDiscounts[].discountName but no cart-level
-   amount in priceSummary.discount (common for line-item automatic discounts
-   — the savings already show inline via fullPrice/price strikethrough). */
-.cart-applied-discounts {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  margin-top: 0.75rem;
-}
-.cart-applied-discounts-name {
-  text-align: right;
-  color: var(--color-ink-soft, var(--color-mute));
-  font-style: italic;
-}

package/skills/wix-headless/references/astro/templates/ecom/discounts.ts

@@ -1,71 +0,0 @@
-// Live discount-rule fetch + per-product matching for storefront indicators.
-// Owned by the ecom pack because Wix Discount Rules is an @wix/ecom primitive.
-// Consumers: stores pack (ProductCard ribbon, product-detail offer callout,
-// home featured grid). Future ecom-using verticals (bookings, events) can
-// reuse the same util without change.
-//
-// Gotchas encoded here — do not remove:
-//  1. queryDiscountRules needs ECOM.DISCOUNT_RULES_READ — must be called via
-//     auth.elevate(), otherwise a visitor client returns no rules silently.
-//  2. Scope objects are returned with `_id` (underscore), not `id`. Check both.
-//  3. "All products" scope shape: { _id: "all_<appDefId>", catalogItemFilter:
-//     { catalogAppId, catalogItemIds: [] } }. Empty array + app id = applies
-//     to every product.
-
-import { discountRules } from "@wix/ecom";
-import { auth } from "@wix/essentials";
-
-export interface DiscountOffer {
-  id: string;
-  name: string;
-  offer: string;
-  targetType: string;
-}
-
-function applies(scopes: any[] | undefined, productId: string): boolean {
-  if (!scopes || scopes.length === 0) return false;
-  for (const s of scopes) {
-    const scopeId = s?._id ?? s?.id;
-    if (typeof scopeId === "string" && scopeId.startsWith("all_")) return true;
-    const ids = s?.catalogItemFilter?.catalogItemIds;
-    if (Array.isArray(ids) && ids.length === 0 && s?.catalogItemFilter?.catalogAppId) return true;
-    if (Array.isArray(ids) && ids.includes(productId)) return true;
-  }
-  return false;
-}
-
-function ruleApplies(rule: any, productId: string): boolean {
-  const values = rule?.discounts?.values ?? [];
-  for (const v of values) {
-    if (v?.targetType === "SPECIFIC_ITEMS") {
-      if (applies(v?.specificItemsInfo?.scopes, productId)) return true;
-    } else if (v?.targetType === "BUY_X_GET_Y") {
-      if (applies(v?.buyXGetYInfo?.customerBuys?.scopes, productId)) return true;
-      if (applies(v?.buyXGetYInfo?.customerGets?.scopes, productId)) return true;
-    }
-  }
-  return false;
-}
-
-export async function fetchLiveOffers(): Promise<any[]> {
-  try {
-    const elevated = auth.elevate(discountRules.queryDiscountRules);
-    const res: any = await elevated({ paging: { limit: 50 } } as any);
-    const list = res?.discountRules ?? res?.items ?? [];
-    return list.filter((r: any) => r?.active !== false && r?.status !== "EXPIRED");
-  } catch (err) {
-    console.error("[discounts] queryDiscountRules failed:", err);
-    return [];
-  }
-}
-
-export function offersForProduct(rules: any[], productId: string): DiscountOffer[] {
-  return rules
-    .filter((r) => ruleApplies(r, productId))
-    .map((r) => ({
-      id: r._id ?? r.id,
-      name: r.name ?? "",
-      offer: (r.offer ?? r.name ?? "").toString(),
-      targetType: r?.discounts?.values?.[0]?.targetType ?? "",
-    }));
-}

package/skills/wix-headless/references/astro/templates/ecom/thank-you.astro

@@ -1,24 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
-
-const orderId = Astro.url.searchParams.get("orderId");
----
-
-<Layout title="Thank You">
-  <main class="py-24">
-    <div class="max-w-prose mx-auto px-8 text-center flex flex-col gap-6">
-      <h1 class="font-display text-5xl">Thank You!</h1>
-      <p class="text-ink-soft">Your order has been placed successfully.</p>
-      {orderId && <p class="text-mute text-sm tracking-wide">Order ID: {orderId}</p>}
-      <a href="/products" class="btn-primary self-center mt-4">Continue Shopping</a>
-    </div>
-  </main>
-</Layout>
-
-<script>
-  import { trackEvent } from "../utils/analytics";
-  const orderId = new URLSearchParams(window.location.search).get("orderId");
-  if (orderId) {
-    trackEvent("Purchase", { id: orderId, origin: "Thank You Page" });
-  }
-</script>

package/skills/wix-headless/references/astro/templates/gift-cards/GiftCardPurchase.tsx

@@ -1,172 +0,0 @@
-import { useState } from "react";
-import { currentCart } from "@wix/ecom";
-import { trackEvent } from "../utils/analytics";
-import {
-  WIX_GIFT_CARDS_APP_ID,
-  type GiftCardProduct,
-  type GiftCardPresetVariant,
-} from "../utils/gift-cards";
-
-interface GiftCardPurchaseProps {
-  product: GiftCardProduct;
-}
-
-// catalogReference shape captured from a real paid Wix-Editor order:
-//   { appId: WIX_GIFT_CARDS_APP_ID,
-//     catalogItemId: <giftCardProduct.id>,
-//     options: { variantId, quantity, currency, giftingInfo, wixGiftCardsAppNewCatalog: true } }
-// On ORDER_PAID, Wix's gift-card backend auto-issues a redeemable card with
-// source: "ORDER" and emails the recipient — no follow-up API call needed.
-export default function GiftCardPurchase({ product }: GiftCardPurchaseProps) {
-  const [variantId, setVariantId] = useState<string>(product.presetVariants[0]?.id ?? "");
-  const [recipientFirstName, setRecipientFirstName] = useState("");
-  const [recipientLastName, setRecipientLastName] = useState("");
-  const [recipientEmail, setRecipientEmail] = useState("");
-  const [greetingMessage, setGreetingMessage] = useState("");
-  const [status, setStatus] = useState<"idle" | "adding" | "added" | "error">("idle");
-  const [error, setError] = useState<string | null>(null);
-
-  const selectedVariant: GiftCardPresetVariant | undefined =
-    product.presetVariants.find((v) => v.id === variantId);
-
-  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(recipientEmail);
-  const canSubmit =
-    !!selectedVariant &&
-    recipientFirstName.trim().length > 0 &&
-    emailValid &&
-    status !== "adding";
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!canSubmit || !selectedVariant) return;
-    setStatus("adding");
-    setError(null);
-    try {
-      const { cart } = await currentCart.addToCurrentCart({
-        lineItems: [
-          {
-            catalogReference: {
-              appId: WIX_GIFT_CARDS_APP_ID,
-              catalogItemId: product.id,
-              options: {
-                variantId: selectedVariant.id,
-                quantity: 1,
-                giftingInfo: {
-                  recipientInfo: {
-                    email: recipientEmail.trim(),
-                    firstName: recipientFirstName.trim(),
-                    lastName: recipientLastName.trim(),
-                  },
-                  greetingMessage: greetingMessage.trim(),
-                },
-                wixGiftCardsAppNewCatalog: true,
-              } as Record<string, unknown>,
-            },
-            quantity: 1,
-          },
-        ],
-      });
-      window.dispatchEvent(new CustomEvent("cart-updated", { detail: { cart, delta: 1 } }));
-      trackEvent("AddToCart", {
-        id: product.id,
-        name: product.name,
-        price: Number(selectedVariant.price.amount),
-        quantity: 1,
-        variant: selectedVariant.price.formattedAmount,
-        origin: "Gift Card Page",
-      });
-      setStatus("added");
-      window.location.href = "/cart";
-    } catch (err: any) {
-      console.error("[gift-cards] addToCurrentCart failed:", err);
-      setError(err?.message ?? "Could not add the gift card to your cart. Please try again.");
-      setStatus("error");
-    }
-  };
-
-  return (
-    <form className="gift-card-form" onSubmit={handleSubmit} noValidate>
-      <fieldset className="gift-card-fieldset">
-        <legend className="option-label">Amount</legend>
-        <div className="gift-card-amounts">
-          {product.presetVariants.map((v) => {
-            const sel = v.id === variantId;
-            return (
-              <button
-                key={v.id}
-                type="button"
-                onClick={() => setVariantId(v.id)}
-                className={`option-pill${sel ? " selected" : ""}`}
-                aria-pressed={sel}
-              >
-                {v.price.formattedAmount}
-              </button>
-            );
-          })}
-        </div>
-      </fieldset>
-
-      <div className="gift-card-grid">
-        <label className="gift-card-field">
-          <span className="option-label">Recipient first name *</span>
-          <input
-            type="text"
-            value={recipientFirstName}
-            onChange={(e) => setRecipientFirstName(e.target.value)}
-            required
-            autoComplete="off"
-          />
-        </label>
-
-        <label className="gift-card-field">
-          <span className="option-label">Recipient last name</span>
-          <input
-            type="text"
-            value={recipientLastName}
-            onChange={(e) => setRecipientLastName(e.target.value)}
-            autoComplete="off"
-          />
-        </label>
-
-        <label className="gift-card-field gift-card-field-wide">
-          <span className="option-label">Recipient email *</span>
-          <input
-            type="email"
-            value={recipientEmail}
-            onChange={(e) => setRecipientEmail(e.target.value)}
-            required
-            autoComplete="off"
-          />
-        </label>
-
-        <label className="gift-card-field gift-card-field-wide">
-          <span className="option-label">Personal message</span>
-          <textarea
-            value={greetingMessage}
-            onChange={(e) => setGreetingMessage(e.target.value.slice(0, 500))}
-            maxLength={500}
-            rows={3}
-            placeholder="A short note to the recipient…"
-          />
-          <span className="gift-card-counter">{greetingMessage.length} / 500</span>
-        </label>
-      </div>
-
-      {error && <p className="gift-card-error" role="alert">{error}</p>}
-
-      <button
-        type="submit"
-        disabled={!canSubmit}
-        className="add-to-cart-btn"
-      >
-        {status === "adding"
-          ? "Adding…"
-          : status === "added"
-            ? "Added ✓"
-            : selectedVariant
-              ? `Add ${selectedVariant.price.formattedAmount} gift card to cart`
-              : "Add to cart"}
-      </button>
-    </form>
-  );
-}

package/skills/wix-headless/references/astro/templates/gift-cards/_home-teaser-snippet.astro

@@ -1,42 +0,0 @@
-{/*
-  index.astro contribution. Insert the block below immediately AFTER the
-  `<!-- home:gift-cards -->` marker. ALSO add to the file's frontmatter
-  (above the `---` close):
-
-      import { getGiftCardProduct } from "../utils/gift-cards";
-      import { resolveWixImageUrl } from "../utils/wix-image";
-
-      const giftCardProduct = await getGiftCardProduct();
-      const giftCardImage = giftCardProduct
-        ? resolveWixImageUrl(giftCardProduct.image, 800, 600)
-        : null;
-
-  If `resolveWixImageUrl` is already imported by the stores patcher, do not
-  re-import — Astro frontmatter is TypeScript and duplicate imports build-fail.
-
-  The "A gift, considered" eyebrow can be replaced with brand-appropriate copy
-  during adaptation; keep the structure as-is.
-*/}
-{giftCardProduct && (
-  <section class="py-16 md:py-24">
-    <a href="/gift-cards" class="max-w-wide mx-auto px-8 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center group">
-      <div class="aspect-[4/3] bg-cream rounded-sm overflow-hidden">
-        {giftCardImage && (
-          <img
-            src={giftCardImage}
-            alt={giftCardProduct.image?.altText || giftCardProduct.name}
-            loading="lazy"
-            decoding="async"
-            class="w-full h-full object-cover"
-          />
-        )}
-      </div>
-      <div class="flex flex-col gap-4">
-        <p class="eyebrow">A gift, considered</p>
-        <h2 class="font-display text-3xl leading-tight">{giftCardProduct.name}</h2>
-        <p class="text-ink-soft leading-relaxed">{giftCardProduct.description}</p>
-        <span class="text-sm tracking-wide uppercase mt-3">Send a gift card →</span>
-      </div>
-    </a>
-  </section>
-)}

package/skills/wix-headless/references/astro/templates/gift-cards/_nav-snippet.astro

@@ -1,11 +0,0 @@
-{/*
-  Navigation.astro contribution. Insert the line below immediately AFTER the
-  `<!-- nav:links -->` marker. ALSO add to the file's frontmatter:
-
-      import { getGiftCardProduct } from "../utils/gift-cards";
-      const giftCardsEnabled = (await getGiftCardProduct()) !== null;
-
-  Wrap the await in try/catch only if other awaits in the file are also
-  guarded (the helper itself never throws). The snippet itself is one line.
-*/}
-{giftCardsEnabled && <a href="/gift-cards">Gift Cards</a>}