@withpotter/components 0.13.0-next.101

package/dist/features/gift-cards/gift-cards-feature.js

@@ -0,0 +1,1038 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Copy, Download, Gift, History, Mail, Plus, Search } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { normalizeCurrencyCode } from "@withpotter/lib/utils";
+import { Button } from "@withpotter/ui-kit/button";
+import { Field } from "@withpotter/ui-kit/field";
+import { FormDialog } from "@withpotter/ui-kit/form-dialog";
+import { InlineDeleteButton } from "@withpotter/ui-kit/inline-delete-button";
+import { Input } from "@withpotter/ui-kit/input";
+import { ListPage } from "@withpotter/ui-kit/list-page";
+import { Textarea } from "@withpotter/ui-kit/textarea";
+import { Tooltip } from "@withpotter/ui-kit/tooltip";
+import {
+  giftCardsApi,
+  giftcardsApi,
+  communicationsApi
+} from "@withpotter/lib/api";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { useQuietPoll } from "@withpotter/hooks/use-quiet-poll";
+import { InlineListSkeleton } from "@withpotter/ui-kit/page-skeletons";
+import { RefreshButton } from "@withpotter/ui-kit/refresh-button";
+import { TableEmptyState } from "@withpotter/ui-kit/table-empty-state";
+import { TablePagination } from "@withpotter/ui-kit/table-pagination";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { MobilePageHeader } from "../../mobile/mobile-page-header";
+import { useRegisterRefresh } from "../../mobile/pull-to-refresh-context";
+import { MetricRow, MetricTile } from "@withpotter/ui-kit/metric-row";
+import {
+  createGiftCardEmailHtml,
+  downloadGiftCardArtwork,
+  GiftCardArtwork,
+  GIFT_CARD_PRESETS
+} from "../gift-card-artwork";
+import {
+  createInFlightDeduper,
+  currencySymbol,
+  isFirstRun,
+  PAGE_HINT_LINES,
+  STATUS_FILTERS,
+  STATUS_LABEL
+} from "./gift-card-logic";
+import { Hint } from "./hint";
+const PAGE_SIZE = 20;
+const LIVE = process.env.NEXT_PUBLIC_BOX_GIFT_CARDS_LIVE === "true";
+const LIVE_REFRESH_MS = 2e3;
+function minimumExpirationDate() {
+  const tomorrow = /* @__PURE__ */ new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  return tomorrow.toISOString().slice(0, 10);
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : "Something went wrong";
+}
+function dateLabel(value) {
+  if (!value) return "Never";
+  return new Date(value).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function statusClass(status) {
+  switch (status) {
+    case "active":
+      return "bg-[var(--success-bg)] text-[var(--success)]";
+    case "used":
+      return "bg-[var(--info-bg)] text-[var(--info)]";
+    case "expired":
+      return "bg-[var(--error-bg)] text-[var(--error)]";
+    case "cancelled":
+      return "bg-[var(--bg-muted)] text-[var(--text-tertiary)]";
+  }
+}
+function IssueGiftCardModal({
+  currency,
+  merchantName,
+  onClose,
+  onCreated
+}) {
+  const { tenant } = useAuth();
+  const formId = useId();
+  const ids = {
+    amount: `${formId}-amount`,
+    recipientName: `${formId}-recipient-name`,
+    recipientEmail: `${formId}-recipient-email`,
+    purchaserName: `${formId}-purchaser-name`,
+    purchaserEmail: `${formId}-purchaser-email`,
+    message: `${formId}-message`,
+    expiresAt: `${formId}-expires-at`
+  };
+  const [form, setForm] = useState({
+    originalAmount: 0,
+    currency,
+    design: GIFT_CARD_PRESETS[0]
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const setField = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!tenant?.slug || form.originalAmount <= 0) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = Object.fromEntries(
+        Object.entries(form).filter(([, value]) => value !== "")
+      );
+      const giftCard = await giftCardsApi.create(tenant.slug, payload);
+      onCreated(giftCard);
+    } catch (submitError) {
+      setError(errorMessage(submitError));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const symbol = currencySymbol(form.currency || currency);
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      title: "Issue gift card",
+      description: "We create the code for you. Fields marked * are required.",
+      size: "lg",
+      className: "max-w-4xl",
+      onClose,
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            form: formId,
+            disabled: saving || form.originalAmount <= 0,
+            children: saving ? "Issuing..." : "Issue gift card"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          id: formId,
+          onSubmit: submit,
+          className: "grid gap-6 md:grid-cols-[17rem_minmax(0,1fr)]",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:self-start", children: [
+              /* @__PURE__ */ jsx(
+                GiftCardArtwork,
+                {
+                  design: form.design ?? GIFT_CARD_PRESETS[0],
+                  merchantName,
+                  amount: form.originalAmount > 0 ? new Intl.NumberFormat(void 0, {
+                    style: "currency",
+                    currency: form.currency || currency
+                  }).format(form.originalAmount) : void 0,
+                  recipientName: form.recipientName,
+                  senderName: form.purchaserName
+                }
+              ),
+              /* @__PURE__ */ jsxs("fieldset", { children: [
+                /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Design" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-4 gap-2 md:grid-cols-2", children: GIFT_CARD_PRESETS.map((design) => {
+                  const selected = form.design?.designId === design.designId;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setField("design", design),
+                      className: `flex min-w-0 items-center gap-2 rounded-md border p-2 text-left text-xs font-medium ${selected ? "border-brand-500 bg-brand-500/10 text-[var(--text-primary)]" : "border-[var(--border-default)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
+                      "aria-label": design.name,
+                      "aria-pressed": selected,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "h-5 w-5 shrink-0 rounded-sm border border-black/10",
+                            style: { backgroundColor: design.palette.background }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "hidden truncate md:block", children: design.name })
+                      ]
+                    },
+                    design.designId
+                  );
+                }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  label: "Amount",
+                  htmlFor: ids.amount,
+                  required: true,
+                  hint: `In ${form.currency || currency}, your business currency. It cannot be changed here.`,
+                  children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-[var(--text-tertiary)]",
+                        children: symbol
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: ids.amount,
+                        type: "number",
+                        min: "0.01",
+                        step: "0.01",
+                        required: true,
+                        "aria-required": true,
+                        className: symbol.length > 2 ? "pl-14" : "pl-8",
+                        value: form.originalAmount || "",
+                        onChange: (event) => setField("originalAmount", Number(event.target.value))
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    label: "Recipient name",
+                    htmlFor: ids.recipientName,
+                    hint: "Optional. Who receives and spends the card.",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: ids.recipientName,
+                        value: form.recipientName ?? "",
+                        onChange: (event) => setField("recipientName", event.target.value)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    label: "Recipient email",
+                    htmlFor: ids.recipientEmail,
+                    hint: "Optional. Nothing is emailed when you issue. Send it from the card's details.",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: ids.recipientEmail,
+                        type: "email",
+                        value: form.recipientEmail ?? "",
+                        onChange: (event) => setField("recipientEmail", event.target.value)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    label: "Purchaser name",
+                    htmlFor: ids.purchaserName,
+                    hint: "Optional. Who is paying for the card.",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: ids.purchaserName,
+                        value: form.purchaserName ?? "",
+                        onChange: (event) => setField("purchaserName", event.target.value)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    label: "Purchaser email",
+                    htmlFor: ids.purchaserEmail,
+                    hint: "Optional.",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: ids.purchaserEmail,
+                        type: "email",
+                        value: form.purchaserEmail ?? "",
+                        onChange: (event) => setField("purchaserEmail", event.target.value)
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  label: "Personal message",
+                  htmlFor: ids.message,
+                  hint: "Optional. Up to 500 characters.",
+                  children: /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: ids.message,
+                      rows: 3,
+                      maxLength: 500,
+                      value: form.personalMessage ?? "",
+                      onChange: (event) => setField("personalMessage", event.target.value)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  label: "Expiration date",
+                  htmlFor: ids.expiresAt,
+                  hint: "Optional. Leave it empty and the card has no expiry date.",
+                  children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: ids.expiresAt,
+                      type: "date",
+                      min: minimumExpirationDate(),
+                      value: form.expiresAt ?? "",
+                      onChange: (event) => setField("expiresAt", event.target.value)
+                    }
+                  )
+                }
+              ),
+              error && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  role: "alert",
+                  className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]",
+                  children: error
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function BalanceModal({ onClose, initialCode = "" }) {
+  const { tenant } = useAuth();
+  const formatCurrency = useFormatCurrency();
+  const codeId = useId();
+  const [code, setCode] = useState(initialCode);
+  const [checking, setChecking] = useState(false);
+  const [result, setResult] = useState(null);
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!tenant?.slug || !code.trim()) return;
+    setChecking(true);
+    try {
+      setResult(
+        await giftCardsApi.checkBalance(tenant.slug, code.trim().toUpperCase())
+      );
+    } catch (checkError) {
+      setResult({ valid: false, error: errorMessage(checkError) });
+    } finally {
+      setChecking(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormDialog, { title: "Check gift card balance", size: "sm", onClose, children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(Field, { label: "Gift card code", htmlFor: codeId, required: true, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: codeId,
+        required: true,
+        "aria-required": true,
+        autoComplete: "off",
+        spellCheck: false,
+        className: "font-mono uppercase",
+        value: code,
+        onChange: (event) => {
+          setCode(event.target.value.toUpperCase());
+          setResult(null);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: result && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `rounded-md p-4 ${result.valid ? "bg-[var(--success-bg)] text-[var(--success)]" : "bg-[var(--error-bg)] text-[var(--error)]"}`,
+        children: result.valid ? `Available balance: ${formatCurrency(result.balance ?? 0)}` : result.error || "This gift card is not valid."
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "submit",
+        className: "w-full",
+        disabled: checking || !code.trim(),
+        children: checking ? "Checking..." : "Check balance"
+      }
+    )
+  ] }) });
+}
+function GiftCardDetailModal({
+  giftCard,
+  onClose,
+  onChanged
+}) {
+  const { tenant } = useAuth();
+  const formatCurrency = useFormatCurrency();
+  const { toast } = useToast();
+  const [amount, setAmount] = useState("");
+  const [referenceId, setReferenceId] = useState("");
+  const [note, setNote] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [error, setError] = useState(null);
+  const copyCode = async () => {
+    await navigator.clipboard.writeText(giftCard.code);
+    toast({ title: "Gift card code copied", description: giftCard.code });
+  };
+  const artworkData = {
+    design: giftCard.design ?? GIFT_CARD_PRESETS[0],
+    merchantName: tenant?.businessName || "Gift card",
+    amount: formatCurrency(Number(giftCard.originalAmount), giftCard.currency),
+    recipientName: giftCard.recipientName ?? void 0,
+    senderName: giftCard.purchaserName ?? void 0,
+    code: giftCard.code
+  };
+  const sendByEmail = async () => {
+    if (!tenant?.slug || !giftCard.recipientEmail) return;
+    setSharing(true);
+    setError(null);
+    try {
+      const result = await communicationsApi.sendCustomEmail(tenant.slug, {
+        recipientEmail: giftCard.recipientEmail,
+        recipientName: giftCard.recipientName ?? void 0,
+        subject: `${giftCard.purchaserName || tenant.businessName} sent you a gift card`,
+        htmlContent: createGiftCardEmailHtml(artworkData),
+        metadata: { giftCardId: giftCard.id, kind: "gift_card_delivery" }
+      });
+      if (!result.success) throw new Error(result.error || "Email delivery failed");
+      toast({ title: "Gift card email sent", description: giftCard.recipientEmail });
+    } catch (sendError) {
+      setError(errorMessage(sendError));
+    } finally {
+      setSharing(false);
+    }
+  };
+  const redeem = async (event) => {
+    event.preventDefault();
+    if (!tenant?.slug) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await giftCardsApi.redeem(tenant.slug, giftCard.code, {
+        amount: Number(amount),
+        ...referenceId ? { referenceId } : {},
+        ...note ? { note } : {}
+      });
+      if (!result.success) throw new Error(result.error || "Redemption failed");
+      toast({ title: "Gift card redeemed" });
+      onChanged();
+      onClose();
+    } catch (redeemError) {
+      setError(errorMessage(redeemError));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const remove = async () => {
+    if (!tenant?.slug) return;
+    setSaving(true);
+    try {
+      await giftcardsApi.cancel(tenant.slug, giftCard.id);
+      toast({ title: "Gift card cancelled" });
+      onChanged();
+      onClose();
+    } catch (deleteError) {
+      setError(errorMessage(deleteError));
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormDialog, { title: "Gift card details", onClose, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx(GiftCardArtwork, { ...artworkData }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          icon: /* @__PURE__ */ jsx(Download, {}),
+          onClick: () => downloadGiftCardArtwork(artworkData),
+          children: "Download"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          label: giftCard.recipientEmail ? "" : "Add a recipient email to send this card",
+          children: /* @__PURE__ */ jsx("span", { className: "block", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              icon: /* @__PURE__ */ jsx(Mail, {}),
+              className: "w-full",
+              onClick: sendByEmail,
+              disabled: sharing || !giftCard.recipientEmail,
+              children: sharing ? "Sending..." : "Send by email"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-[var(--border-default)] bg-[var(--bg-subtle)] p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--text-muted)]", children: "Code" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-xl font-semibold text-[var(--text-primary)]", children: giftCard.code })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon-sm",
+            "aria-label": "Copy code",
+            onClick: copyCode,
+            children: /* @__PURE__ */ jsx(Copy, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Balance left" }),
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Original value" }),
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(
+            Number(giftCard.originalAmount),
+            giftCard.currency
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Recipient" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: giftCard.recipientName || giftCard.recipientEmail || "Walk-in" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Expires" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: dateLabel(giftCard.expiresAt) })
+        ] })
+      ] })
+    ] }),
+    giftCard.status === "active" && Number(giftCard.balance) > 0 && /* @__PURE__ */ jsxs("form", { onSubmit: redeem, className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Redeem value" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Amount",
+            type: "number",
+            min: "0.01",
+            max: Number(giftCard.balance),
+            step: "0.01",
+            required: true,
+            "aria-required": true,
+            value: amount,
+            onChange: (event) => setAmount(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Order or reference ID (optional)",
+            value: referenceId,
+            onChange: (event) => setReferenceId(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Note (optional)",
+          value: note,
+          onChange: (event) => setNote(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: saving || !amount || Number(amount) <= 0,
+          children: saving ? "Redeeming..." : "Redeem gift card"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(History, { className: "h-4 w-4 text-[var(--text-tertiary)]" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Redemption history" })
+      ] }),
+      giftCard.redemptions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: "No redemptions yet." }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-default)] rounded-md border border-[var(--border-default)]", children: giftCard.redemptions.map((redemption) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-3 px-3 py-2.5",
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: redemption.orderId || "Manual redemption" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: dateLabel(redemption.redeemedAt) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
+              "-",
+              formatCurrency(Number(redemption.amount), giftCard.currency)
+            ] })
+          ]
+        },
+        redemption.id
+      )) })
+    ] }),
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        role: "alert",
+        className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]",
+        children: error
+      }
+    ),
+    giftCard.status !== "cancelled" && /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-[var(--border-default)] pt-4", children: /* @__PURE__ */ jsx(
+      InlineDeleteButton,
+      {
+        onDelete: remove,
+        disabled: saving,
+        title: "Cancel gift card",
+        confirmText: "Cancel this gift card?",
+        className: "text-[var(--error)]"
+      }
+    ) })
+  ] }) });
+}
+function GiftCardsFeature() {
+  const { tenant } = useAuth();
+  const formatCurrency = useFormatCurrency();
+  const { toast } = useToast();
+  const slug = tenant?.slug;
+  const currency = normalizeCurrencyCode(
+    tenant?.settings?.currency
+  );
+  const [giftCards, setGiftCards] = useState([]);
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [loaded, setLoaded] = useState(false);
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [page, setPage] = useState(1);
+  const [count, setCount] = useState(0);
+  const [showIssue, setShowIssue] = useState(false);
+  const [showBalance, setShowBalance] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const [dedupe] = useState(createInFlightDeduper);
+  const toastRef = useRef(toast);
+  useEffect(() => {
+    toastRef.current = toast;
+  });
+  const latestRead = useRef(0);
+  const readGiftCards = useCallback(
+    async (quiet) => {
+      if (!slug) return;
+      const read = quiet ? latestRead.current : ++latestRead.current;
+      if (!quiet) setLoading(true);
+      const query = {
+        ...status ? { status } : {},
+        ...search.trim() ? { search: search.trim() } : {},
+        page,
+        limit: PAGE_SIZE
+      };
+      try {
+        const list = await dedupe.run(
+          `list:${slug}:${JSON.stringify(query)}`,
+          () => giftCardsApi.list(slug, query)
+        );
+        if (read !== latestRead.current) return;
+        setGiftCards(list.rows);
+        setCount(list.count);
+      } catch (loadError) {
+        if (quiet) throw loadError;
+        toastRef.current({
+          title: "Unable to load gift cards",
+          description: errorMessage(loadError)
+        });
+      } finally {
+        if (!quiet && read === latestRead.current) {
+          setLoading(false);
+          setLoaded(true);
+        }
+      }
+    },
+    [dedupe, page, search, slug, status]
+  );
+  const readStats = useCallback(
+    async (quiet) => {
+      if (!slug) return;
+      try {
+        setStats(await dedupe.run(`stats:${slug}`, () => giftCardsApi.stats(slug)));
+      } catch (statsError) {
+        if (quiet) throw statsError;
+      }
+    },
+    [dedupe, slug]
+  );
+  const reloadAll = useCallback(
+    () => Promise.all([readGiftCards(false), readStats(false)]),
+    [readGiftCards, readStats]
+  );
+  useEffect(() => {
+    readGiftCards(false);
+  }, [readGiftCards]);
+  useEffect(() => {
+    readStats(false);
+  }, [readStats]);
+  useQuietPoll(
+    useCallback(
+      () => Promise.all([readGiftCards(true), readStats(true)]),
+      [readGiftCards, readStats]
+    ),
+    LIVE_REFRESH_MS,
+    LIVE
+  );
+  useRegisterRefresh(reloadAll);
+  const copyCode = async (event, code) => {
+    event.stopPropagation();
+    await navigator.clipboard.writeText(code);
+    toast({ title: "Gift card code copied", description: code });
+  };
+  const totalPages = Math.max(1, Math.ceil(count / PAGE_SIZE));
+  const hasFilters = Boolean(search.trim() || status);
+  const firstRun = loaded && isFirstRun({
+    loading,
+    search,
+    status,
+    count,
+    totalIssued: stats?.totalIssued
+  });
+  const hasCards = loaded && !firstRun;
+  const showStats = hasCards && stats !== null;
+  const openIssue = () => setShowIssue(true);
+  const openBalance = () => setShowBalance(true);
+  return /* @__PURE__ */ jsxs(
+    ListPage,
+    {
+      largeTitle: true,
+      title: "Gift cards",
+      mobileHeader: /* @__PURE__ */ jsx(
+        MobilePageHeader,
+        {
+          title: "Gift cards",
+          action: hasCards ? { label: "Issue gift card", onClick: openIssue } : void 0
+        }
+      ),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Hint, { lines: PAGE_HINT_LINES, topic: "gift cards" }),
+        !LIVE && /* @__PURE__ */ jsx(RefreshButton, { onClick: reloadAll, refreshing: loading }),
+        hasCards && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              icon: /* @__PURE__ */ jsx(Search, {}),
+              onClick: openBalance,
+              children: "Check balance"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", icon: /* @__PURE__ */ jsx(Plus, {}), onClick: openIssue, children: "Issue gift card" })
+        ] })
+      ] }),
+      children: [
+        showStats && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs(MetricRow, { children: [
+            /* @__PURE__ */ jsx(
+              MetricTile,
+              {
+                label: "Total sold",
+                value: formatCurrency(stats?.totalIssued ?? 0, currency)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MetricTile,
+              {
+                label: "Still to spend",
+                value: formatCurrency(stats?.outstanding ?? 0, currency)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MetricTile,
+              {
+                label: "Spent",
+                value: formatCurrency(stats?.redeemed ?? 0, currency)
+              }
+            ),
+            /* @__PURE__ */ jsx(MetricTile, { label: "Cards in use", value: stats?.activeCards ?? 0 })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-px overflow-hidden rounded-md bg-[var(--border-default)] lg:hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Still to spend" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: formatCurrency(stats?.outstanding ?? 0, currency) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Cards in use" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: stats?.activeCards ?? 0 })
+            ] })
+          ] })
+        ] }),
+        hasCards && /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto lg:hidden", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            shape: "pill",
+            icon: /* @__PURE__ */ jsx(Search, {}),
+            onClick: openBalance,
+            children: "Check balance"
+          }
+        ) }),
+        !firstRun && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx(
+              Search,
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "search",
+                "aria-label": "Search gift cards",
+                placeholder: "Search code, recipient, or email",
+                value: search,
+                onChange: (event) => {
+                  setSearch(event.target.value);
+                  setPage(1);
+                },
+                className: "pl-10"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-label": "Filter by status",
+              className: "flex gap-1 overflow-x-auto",
+              children: STATUS_FILTERS.map((filter) => {
+                const pressed = status === filter.value;
+                return /* @__PURE__ */ jsx(Tooltip, { label: filter.hint, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: pressed ? "secondary" : "ghost",
+                    "aria-pressed": pressed,
+                    className: "shrink-0",
+                    onClick: () => {
+                      setStatus(filter.value);
+                      setPage(1);
+                    },
+                    children: filter.label
+                  }
+                ) }, filter.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Issued gift cards" }),
+        !loaded && /* @__PURE__ */ jsx(InlineListSkeleton, {}),
+        loading && loaded && giftCards.length === 0 && /* @__PURE__ */ jsx(InlineListSkeleton, {}),
+        firstRun && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            TableEmptyState,
+            {
+              icon: Gift,
+              title: "Issue your first gift card",
+              description: "Create a stored-value card for a customer or walk-in purchase",
+              action: { label: "Issue gift card", onClick: openIssue }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              icon: /* @__PURE__ */ jsx(Search, {}),
+              onClick: openBalance,
+              children: "Check balance"
+            }
+          ) })
+        ] }),
+        loaded && !loading && !firstRun && giftCards.length === 0 && /* @__PURE__ */ jsx(
+          TableEmptyState,
+          {
+            icon: Gift,
+            title: "No gift cards found",
+            description: "Try changing the search or status filter",
+            action: hasFilters ? {
+              label: "Clear search and filters",
+              onClick: () => {
+                setSearch("");
+                setStatus("");
+                setPage(1);
+              }
+            } : void 0
+          }
+        ),
+        giftCards.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "space-y-2 lg:hidden", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSelected(giftCard),
+              className: "flex w-full items-center justify-between gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] p-4 text-left",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-sm font-semibold text-[var(--text-primary)]", children: giftCard.code }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[var(--text-tertiary)]", children: giftCard.recipientName || giftCard.recipientEmail || "Walk-in" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
+                  /* @__PURE__ */ jsx("span", { className: `text-xs ${statusClass(giftCard.status)}`, children: STATUS_LABEL[giftCard.status] })
+                ] })
+              ]
+            },
+            giftCard.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden overflow-x-auto rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] lg:block", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[760px]", children: [
+            /* @__PURE__ */ jsx("thead", { className: "border-b border-[var(--border-default)] bg-[var(--bg-subtle)]", children: /* @__PURE__ */ jsx("tr", { children: ["Code", "Recipient", "Issued", "Balance", "Expires", "Status"].map(
+              (heading) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  scope: "col",
+                  className: "px-4 py-3 text-left text-xs font-medium uppercase text-[var(--text-tertiary)]",
+                  children: heading
+                },
+                heading
+              )
+            ) }) }),
+            /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-[var(--border-default)]", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                tabIndex: 0,
+                "aria-label": `Open gift card ${giftCard.code}`,
+                onClick: () => setSelected(giftCard),
+                onKeyDown: (event) => {
+                  if (event.target !== event.currentTarget) return;
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setSelected(giftCard);
+                  }
+                },
+                className: "cursor-pointer hover:bg-[var(--interactive-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]",
+                children: [
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-medium text-[var(--text-primary)]", children: giftCard.code }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-sm",
+                        "aria-label": `Copy code ${giftCard.code}`,
+                        onClick: (event) => copyCode(event, giftCard.code),
+                        children: /* @__PURE__ */ jsx(Copy, {})
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: giftCard.recipientName || "Walk-in" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: giftCard.recipientEmail })
+                  ] }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: formatCurrency(
+                    Number(giftCard.originalAmount),
+                    giftCard.currency
+                  ) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm font-medium text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: dateLabel(giftCard.expiresAt) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${statusClass(giftCard.status)}`,
+                      children: STATUS_LABEL[giftCard.status]
+                    }
+                  ) })
+                ]
+              },
+              giftCard.id
+            )) })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            TablePagination,
+            {
+              page,
+              totalPages,
+              pageSize: PAGE_SIZE,
+              totalItems: count,
+              entityName: "gift cards",
+              onPageChange: setPage
+            }
+          )
+        ] }),
+        showIssue && /* @__PURE__ */ jsx(
+          IssueGiftCardModal,
+          {
+            currency,
+            merchantName: tenant?.businessName || "Gift card",
+            onClose: () => setShowIssue(false),
+            onCreated: (giftCard) => {
+              setShowIssue(false);
+              setSelected(giftCard);
+              toast({
+                title: "Gift card issued",
+                description: giftCard.code
+              });
+              reloadAll();
+            }
+          }
+        ),
+        showBalance && /* @__PURE__ */ jsx(BalanceModal, { onClose: () => setShowBalance(false) }),
+        selected && /* @__PURE__ */ jsx(
+          GiftCardDetailModal,
+          {
+            giftCard: selected,
+            onClose: () => setSelected(null),
+            onChanged: reloadAll
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GiftCardsFeature
+};
+//# sourceMappingURL=gift-cards-feature.js.map