@infuro/cms-core 1.0.34 → 1.0.35

package/README.md

@@ -708,6 +708,19 @@ The CSS variables are injected by the admin layout at runtime. Your website's ow
 | `GOOGLE_ANALYTICS_PRIVATE_KEY` | If analytics | GA service account key |
 | `GOOGLE_ANALYTICS_CLIENT_EMAIL` | If analytics | GA service account email |
 | `GOOGLE_ANALYTICS_VIEW_ID` | If analytics | GA property/view ID |
+| `WHATSAPP_ACCESS_TOKEN` | If WhatsApp notifications | Meta Cloud API permanent/system user token |
+| `WHATSAPP_PHONE_NUMBER_ID` | If WhatsApp notifications | WhatsApp Business phone number ID from Meta developer console |
+| `WHATSAPP_API_VERSION` | No | Graph API version (default `v21.0`) |
+
+### Event order notifications
+
+When an order is created (storefront checkout or admin **Place order**) and it includes products linked to an event via **event_products**, the core can notify the customer on enabled channels:
+
+1. **Platform admin** — Plugins → **Email** and **WhatsApp**: configure global templates (`GET/PUT /api/message-templates/event-order`). WhatsApp requires a [Meta-approved template](https://developers.facebook.com/docs/whatsapp/business-management-api/message-templates) name matching `externalTemplateRef` (default `event_order_placed`).
+2. **Vendor** — Event edit → **Order notifications**: enable notifications, pick **Email** / **WhatsApp**, optionally override templates. API: `GET/PUT /api/events/:id/notifications`, test via `POST /api/events/:id/notifications/test`.
+3. **Consumer app** — Register `whatsappPlugin()` and `emailPlugin()` in `getCms()`, plus optional `queuePlugin` for async sends. Call `dispatchEventOrderNotifications(orderId, deps)` is wired automatically from storefront checkout and admin order create.
+
+Template variables: `{{eventName}}`, `{{orderNumber}}`, `{{customerName}}`, `{{customerEmail}}`, `{{customerPhone}}`, `{{orderTotal}}`, `{{currency}}`, `{{venue}}`, `{{startDate}}`, `{{productNames}}`.
 
 ## Development
 

package/dist/OrderTrackPage-W3J6WIG2.js

@@ -0,0 +1,426 @@
+import { __name } from './chunk-SHUYVCID.js';
+
+// src/admin/pages/OrderTrackPage.ts
+function renderOrderTrackingPage(order) {
+  const contact = order.contact;
+  const items = order.items ?? [];
+  const currency = String(order.currency ?? "INR");
+  function formatMoney(amount) {
+    return new Intl.NumberFormat("en-IN", {
+      style: "currency",
+      currency,
+      minimumFractionDigits: 2
+    }).format(Number(amount));
+  }
+  __name(formatMoney, "formatMoney");
+  function formatDate(dateStr) {
+    return new Date(dateStr).toLocaleDateString("en-IN", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  }
+  __name(formatDate, "formatDate");
+  const statusConfig = {
+    pending: {
+      label: "Order Placed",
+      color: "#f59e0b",
+      step: 1
+    },
+    confirmed: {
+      label: "Confirmed",
+      color: "#3b82f6",
+      step: 2
+    },
+    processing: {
+      label: "Processing",
+      color: "#8b5cf6",
+      step: 3
+    },
+    completed: {
+      label: "Completed",
+      color: "#10b981",
+      step: 4
+    },
+    cancelled: {
+      label: "Cancelled",
+      color: "#ef4444",
+      step: 0
+    }
+  };
+  const status = String(order.status ?? "pending");
+  const sc = statusConfig[status] ?? {
+    label: status,
+    color: "#6b7280",
+    step: 1
+  };
+  const isCancelled = status === "cancelled";
+  const steps = [
+    {
+      label: "Order Placed",
+      icon: "\u{1F4CB}"
+    },
+    {
+      label: "Confirmed",
+      icon: "\u2705"
+    },
+    {
+      label: "Processing",
+      icon: "\u2699\uFE0F"
+    },
+    {
+      label: "Completed",
+      icon: "\u{1F389}"
+    }
+  ];
+  const stepsHtml = isCancelled ? `<div class="cancelled-banner">Order Cancelled</div>` : steps.map((s, i) => {
+    const stepNum = i + 1;
+    const isActive = sc.step === stepNum;
+    const isDone = sc.step > stepNum;
+    return `
+          <div class="step ${isDone ? "done" : ""} ${isActive ? "active" : ""}">
+            <div class="step-circle">${isDone ? "\u2713" : s.icon}</div>
+            <div class="step-label">${s.label}</div>
+          </div>
+          ${stepNum < 4 ? `<div class="step-line ${sc.step > stepNum ? "done" : ""}"></div>` : ""}
+        `;
+  }).join("");
+  const itemsHtml = items.map((item) => {
+    const name = item.product?.collection?.name ?? item.product?.name ?? `Product #${item.id}`;
+    const sku = item.product?.sku ?? "\u2014";
+    return `
+      <div class="item-row">
+        <div class="item-avatar">${name.charAt(0).toUpperCase()}</div>
+        <div class="item-info">
+          <div class="item-name">${name}</div>
+          <div class="item-sku">SKU: ${sku}</div>
+        </div>
+        <div class="item-qty">\xD7${item.quantity}</div>
+        <div class="item-price">${formatMoney(Number(item.unitPrice))}</div>
+      </div>
+    `;
+  }).join("");
+  const discountRow = Number(order.discount) > 0 ? `<div class="summary-row discount"><span>Discount</span><span>\u2212${formatMoney(Number(order.discount))}</span></div>` : "";
+  const taxRow = Number(order.tax) > 0 ? `<div class="summary-row"><span>Tax</span><span>${formatMoney(Number(order.tax))}</span></div>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Order ${order.orderNumber} \u2014 Tracking</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --accent: ${sc.color};
+    --bg: #f8f7f4;
+    --card: #ffffff;
+    --text: #1a1a2e;
+    --muted: #6b7280;
+    --border: #e5e7eb;
+    --radius: 16px;
+  }
+
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    padding: 24px 16px 48px;
+  }
+
+  .container { max-width: 640px; margin: 0 auto; }
+
+  /* Header */
+  .header {
+    text-align: center;
+    margin-bottom: 32px;
+    animation: fadeDown 0.5s ease both;
+  }
+  .header-eyebrow {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 8px;
+  }
+  .header h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(26px, 6vw, 36px);
+    color: var(--text);
+    line-height: 1.2;
+  }
+  .header-meta {
+    font-size: 13px;
+    color: var(--muted);
+    margin-top: 6px;
+  }
+
+  /* Status badge */
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    color: var(--accent);
+    border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
+    border-radius: 100px;
+    padding: 5px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    margin-top: 14px;
+  }
+  .status-dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: pulse 2s ease infinite;
+  }
+
+  /* Card */
+  .card {
+    background: var(--card);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    overflow: hidden;
+    margin-bottom: 16px;
+    animation: fadeUp 0.5s ease both;
+  }
+  .card:nth-child(2) { animation-delay: 0.08s; }
+  .card:nth-child(3) { animation-delay: 0.16s; }
+  .card:nth-child(4) { animation-delay: 0.24s; }
+
+  .card-header {
+    display: flex; align-items: center; gap: 10px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+    background: #fafafa;
+  }
+  .card-header-icon {
+    width: 32px; height: 32px;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 15px;
+  }
+  .card-title {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .card-body { padding: 20px; }
+
+  /* Progress tracker */
+  .progress-track {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 8px 0;
+    overflow-x: auto;
+  }
+  .step {
+    display: flex; flex-direction: column; align-items: center;
+    gap: 8px; min-width: 60px;
+  }
+  .step-circle {
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    border: 2px solid var(--border);
+    background: white;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px;
+    color: var(--muted);
+    transition: all 0.3s;
+  }
+  .step.done .step-circle {
+    background: color-mix(in srgb, var(--accent) 15%, white);
+    border-color: var(--accent);
+    color: var(--accent);
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .step.active .step-circle {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
+  }
+  .step-label {
+    font-size: 11px; font-weight: 500; color: var(--muted);
+    text-align: center; line-height: 1.3;
+  }
+  .step.active .step-label, .step.done .step-label { color: var(--accent); font-weight: 600; }
+  .step-line {
+    flex: 1; height: 2px;
+    background: var(--border);
+    margin-top: 22px; min-width: 20px;
+    transition: background 0.3s;
+  }
+  .step-line.done { background: var(--accent); }
+  .cancelled-banner {
+    text-align: center; padding: 16px;
+    background: #fef2f2; color: #ef4444;
+    border-radius: 10px;
+    font-weight: 600; font-size: 15px;
+  }
+
+  /* Info grid */
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 16px;
+  }
+  .info-item dt {
+    font-size: 11px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--muted); margin-bottom: 4px;
+  }
+  .info-item dd { font-size: 14px; font-weight: 500; color: var(--text); }
+
+  /* Customer */
+  .customer-row {
+    display: flex; align-items: center; gap: 14px;
+  }
+  .customer-avatar {
+    width: 46px; height: 46px; border-radius: 50%;
+    background: color-mix(in srgb, var(--accent) 15%, #f3f4f6);
+    color: var(--accent);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Playfair Display', serif;
+    font-size: 18px; font-weight: 700; flex-shrink: 0;
+  }
+  .customer-name { font-size: 15px; font-weight: 600; }
+  .customer-email { font-size: 13px; color: var(--muted); margin-top: 2px; }
+
+  /* Items */
+  .item-row {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .item-row:last-child { border-bottom: none; padding-bottom: 0; }
+  .item-row:first-child { padding-top: 0; }
+  .item-avatar {
+    width: 40px; height: 40px; border-radius: 10px;
+    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, #e5e7eb), color-mix(in srgb, var(--accent) 5%, #f9fafb));
+    color: var(--accent);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; font-weight: 700; flex-shrink: 0;
+  }
+  .item-info { flex: 1; min-width: 0; }
+  .item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .item-sku { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .item-qty { font-size: 13px; color: var(--muted); min-width: 28px; text-align: center; }
+  .item-price { font-size: 14px; font-weight: 600; min-width: 80px; text-align: right; }
+
+  /* Summary */
+  .summary-row {
+    display: flex; justify-content: space-between;
+    font-size: 14px; padding: 7px 0; color: var(--muted);
+  }
+  .summary-row.discount { color: #10b981; }
+  .summary-row.total {
+    font-size: 17px; font-weight: 700; color: var(--text);
+    border-top: 2px solid var(--border); margin-top: 6px; padding-top: 14px;
+  }
+
+  /* Footer */
+  .footer {
+    text-align: center; margin-top: 32px;
+    font-size: 12px; color: #9ca3af;
+    animation: fadeUp 0.5s ease 0.4s both;
+  }
+
+  /* Animations */
+  @keyframes fadeDown {
+    from { opacity: 0; transform: translateY(-16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.4; }
+  }
+</style>
+</head>
+<body>
+<div class="container">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="header-eyebrow">Order Tracking</div>
+    <h1>${String(order.orderNumber)}</h1>
+    <div class="header-meta">Placed on ${formatDate(String(order.createdAt))}</div>
+    <div><span class="status-badge"><span class="status-dot"></span>${sc.label}</span></div>
+  </div>
+
+  <!-- Progress -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-header-icon">\u{1F69A}</div>
+      <div class="card-title">Order Progress</div>
+    </div>
+    <div class="card-body">
+      <div class="progress-track">${stepsHtml}</div>
+    </div>
+  </div>
+
+  ${contact ? `
+  <!-- Customer -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-header-icon">\u{1F464}</div>
+      <div class="card-title">Customer</div>
+    </div>
+    <div class="card-body">
+      <div class="customer-row">
+        <div class="customer-avatar">${String(contact.name ?? "?").charAt(0).toUpperCase()}</div>
+        <div>
+          <div class="customer-name">${String(contact.name ?? "\u2014")}</div>
+          <div class="customer-email">${String(contact.email ?? "\u2014")}</div>
+          ${contact.phone ? `<div class="customer-email">${String(contact.phone)}</div>` : ""}
+        </div>
+      </div>
+    </div>
+  </div>` : ""}
+
+  <!-- Items -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-header-icon">\u{1F4E6}</div>
+      <div class="card-title">Items (${items.length})</div>
+    </div>
+    <div class="card-body">
+      ${items.length === 0 ? '<p style="color:var(--muted);font-size:14px;">No items</p>' : itemsHtml}
+    </div>
+  </div>
+
+  <!-- Summary -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-header-icon">\u{1F9FE}</div>
+      <div class="card-title">Order Summary</div>
+    </div>
+    <div class="card-body">
+      <div class="summary-row"><span>Subtotal</span><span>${formatMoney(Number(order.subtotal))}</span></div>
+      ${discountRow}
+      ${taxRow}
+      <div class="summary-row total"><span>Total</span><span>${formatMoney(Number(order.total))}</span></div>
+    </div>
+  </div>
+
+  <div class="footer">Scan the QR code on your receipt to return to this page.</div>
+</div>
+</body>
+</html>`;
+}
+__name(renderOrderTrackingPage, "renderOrderTrackingPage");
+
+export { renderOrderTrackingPage };