@sam-ael/medusa-plugin-whatsapp 0.1.0

package/.medusa/server/src/admin/index.js

@@ -0,0 +1,581 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const adminSdk = require("@medusajs/admin-sdk");
+const icons = require("@medusajs/icons");
+const ui = require("@medusajs/ui");
+const react = require("react");
+const MEDUSA_EVENTS = [
+  "order.placed",
+  "order.completed",
+  "order.canceled",
+  "order.updated",
+  "order.fulfillment_created",
+  "fulfillment.created",
+  "fulfillment.shipment_created",
+  "fulfillment.delivery_created",
+  "customer.created",
+  "customer.updated",
+  "return.created",
+  "return.received",
+  "claim.created",
+  "exchange.created"
+];
+const BACKEND_URL = __BACKEND_URL__ ?? "";
+async function api(path, options) {
+  const res = await fetch(`${BACKEND_URL}/admin/whatsapp${path}`, {
+    ...options,
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...options == null ? void 0 : options.headers
+    }
+  });
+  return res.json();
+}
+function ConfigSection() {
+  const [config2, setConfig] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [saving, setSaving] = react.useState(false);
+  const [form, setForm] = react.useState({
+    phone_number_id: "",
+    access_token: "",
+    api_version: "v21.0",
+    default_language_code: "en_US",
+    active: true
+  });
+  const loadConfig = react.useCallback(async () => {
+    setLoading(true);
+    const data = await api("/config");
+    if (data.config) {
+      setConfig(data.config);
+      setForm({
+        phone_number_id: data.config.phone_number_id || "",
+        access_token: "",
+        api_version: data.config.api_version || "v21.0",
+        default_language_code: data.config.default_language_code || "en_US",
+        active: data.config.active ?? true
+      });
+    }
+    setLoading(false);
+  }, []);
+  react.useEffect(() => {
+    loadConfig();
+  }, [loadConfig]);
+  const saveConfig = async () => {
+    setSaving(true);
+    const payload = { ...form };
+    if (!payload.access_token) delete payload.access_token;
+    await api("/config", { method: "POST", body: JSON.stringify(payload) });
+    ui.toast.success("Configuration saved");
+    await loadConfig();
+    setSaving(false);
+  };
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading configuration..." });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "WhatsApp Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "wa-active", children: "Active" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Switch,
+          {
+            id: "wa-active",
+            checked: form.active,
+            onCheckedChange: (checked) => setForm({ ...form, active: checked })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "phone-id", children: "Phone Number ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "phone-id",
+            placeholder: "e.g. 1234567890",
+            value: form.phone_number_id,
+            onChange: (e) => setForm({ ...form, phone_number_id: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { htmlFor: "access-token", children: [
+          "Access Token ",
+          config2 && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted", children: "(leave blank to keep current)" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "access-token",
+            type: "password",
+            placeholder: config2 ? "••••••••" : "Bearer token",
+            value: form.access_token,
+            onChange: (e) => setForm({ ...form, access_token: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "api-version", children: "API Version" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "api-version",
+            placeholder: "v21.0",
+            value: form.api_version,
+            onChange: (e) => setForm({ ...form, api_version: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "lang-code", children: "Default Language Code" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "lang-code",
+            placeholder: "en_US",
+            value: form.default_language_code,
+            onChange: (e) => setForm({ ...form, default_language_code: e.target.value })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: saveConfig, isLoading: saving, children: "Save Configuration" }) }),
+    config2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-muted", children: [
+      "Current token: ",
+      config2.access_token
+    ] }) })
+  ] });
+}
+const RECIPIENT_OPTIONS = [
+  { value: "billing_shipping", label: "Billing phone (fallback: shipping)" },
+  { value: "billing", label: "Billing phone only" },
+  { value: "shipping", label: "Shipping phone only" },
+  { value: "custom", label: "Custom phone number" }
+];
+const ORDER_DATA_PATHS = [
+  { value: "order.display_id", label: "Order ID" },
+  { value: "order.total", label: "Order Total" },
+  { value: "order.currency_code", label: "Currency Code" },
+  { value: "order.email", label: "Order Email" },
+  { value: "order.shipping_address.first_name", label: "Shipping First Name" },
+  { value: "order.shipping_address.last_name", label: "Shipping Last Name" },
+  { value: "order.shipping_address.phone", label: "Shipping Phone" },
+  { value: "order.shipping_address.city", label: "Shipping City" },
+  { value: "order.billing_address.first_name", label: "Billing First Name" },
+  { value: "order.billing_address.last_name", label: "Billing Last Name" },
+  { value: "order.billing_address.phone", label: "Billing Phone" },
+  { value: "order.customer.first_name", label: "Customer First Name" },
+  { value: "order.customer.last_name", label: "Customer Last Name" },
+  { value: "order.customer.email", label: "Customer Email" },
+  { value: "order.customer.phone", label: "Customer Phone" }
+];
+const EMPTY_VAR = { name: "", path: "" };
+const MAX_VARS = 5;
+function MappingsSection() {
+  const [mappings, setMappings] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [showForm, setShowForm] = react.useState(false);
+  const [editingId, setEditingId] = react.useState(null);
+  const [templateVars, setTemplateVars] = react.useState([{ ...EMPTY_VAR }]);
+  const [form, setForm] = react.useState({
+    event_name: MEDUSA_EVENTS[0],
+    template_name: "",
+    language_code: "en_US",
+    recipient_type: "billing_shipping",
+    recipient_phone: "",
+    active: true
+  });
+  const loadMappings = react.useCallback(async () => {
+    setLoading(true);
+    const data = await api("/mappings");
+    setMappings(data.mappings || []);
+    setLoading(false);
+  }, []);
+  react.useEffect(() => {
+    loadMappings();
+  }, [loadMappings]);
+  const resetForm = () => {
+    setForm({ event_name: MEDUSA_EVENTS[0], template_name: "", language_code: "en_US", recipient_type: "billing_shipping", recipient_phone: "", active: true });
+    setTemplateVars([{ ...EMPTY_VAR }]);
+    setEditingId(null);
+    setShowForm(false);
+  };
+  const updateVar = (index, field, value) => {
+    setTemplateVars((prev) => prev.map((v, i) => i === index ? { ...v, [field]: value } : v));
+  };
+  const addVar = () => {
+    if (templateVars.length < MAX_VARS) setTemplateVars((prev) => [...prev, { ...EMPTY_VAR }]);
+  };
+  const removeVar = (index) => {
+    setTemplateVars((prev) => prev.length <= 1 ? [{ ...EMPTY_VAR }] : prev.filter((_, i) => i !== index));
+  };
+  const saveMapping = async () => {
+    const variables = {};
+    templateVars.forEach((v) => {
+      if (v.name.trim() && v.path.trim()) variables[v.name.trim()] = v.path.trim();
+    });
+    const payload = { ...form, template_variables: variables };
+    if (editingId) {
+      await api(`/mappings/${editingId}`, { method: "PUT", body: JSON.stringify(payload) });
+      ui.toast.success("Mapping updated");
+    } else {
+      await api("/mappings", { method: "POST", body: JSON.stringify(payload) });
+      ui.toast.success("Mapping created");
+    }
+    resetForm();
+    await loadMappings();
+  };
+  const deleteMapping = async (id) => {
+    await api(`/mappings/${id}`, { method: "DELETE" });
+    ui.toast.success("Mapping deleted");
+    await loadMappings();
+  };
+  const editMapping = (m) => {
+    const vars = m.template_variables || {};
+    const rows = Object.entries(vars).map(([name, path]) => ({ name, path }));
+    setTemplateVars(rows.length > 0 ? rows : [{ ...EMPTY_VAR }]);
+    setForm({
+      event_name: m.event_name,
+      template_name: m.template_name,
+      language_code: m.language_code,
+      recipient_type: m.recipient_type || "billing_shipping",
+      recipient_phone: m.recipient_phone || "",
+      active: m.active
+    });
+    setEditingId(m.id);
+    setShowForm(true);
+  };
+  const recipientLabel = (type, phone) => {
+    const opt = RECIPIENT_OPTIONS.find((o) => o.value === type);
+    if (type === "custom" && phone) return `Custom: ${phone}`;
+    return (opt == null ? void 0 : opt.label) || type;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Event → Template Mappings" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => {
+        resetForm();
+        setShowForm(!showForm);
+      }, children: showForm ? "Cancel" : "Add Mapping" })
+    ] }),
+    showForm && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg p-4 mb-4 bg-ui-bg-subtle", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "event-name", children: "Medusa Event" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              id: "event-name",
+              list: "medusa-events-list",
+              placeholder: "Select or type a custom event...",
+              value: form.event_name,
+              onChange: (e) => setForm({ ...form, event_name: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: "medusa-events-list", children: MEDUSA_EVENTS.map((e) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: e }, e)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted mt-1", children: "Pick a preset or type any custom event name" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "tpl-name", children: "WhatsApp Template Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              id: "tpl-name",
+              placeholder: "e.g. order_confirmation",
+              value: form.template_name,
+              onChange: (e) => setForm({ ...form, template_name: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "tpl-lang", children: "Language Code" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              id: "tpl-lang",
+              placeholder: "en_US",
+              value: form.language_code,
+              onChange: (e) => setForm({ ...form, language_code: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "recipient-type", children: "Send To" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: form.recipient_type, onValueChange: (val) => setForm({ ...form, recipient_type: val }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Select recipient" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: RECIPIENT_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: opt.value, children: opt.label }, opt.value)) })
+          ] })
+        ] }),
+        form.recipient_type === "custom" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "recipient-phone", children: "Custom Phone Number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              id: "recipient-phone",
+              placeholder: "e.g. 919876543210",
+              value: form.recipient_phone,
+              onChange: (e) => setForm({ ...form, recipient_phone: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted mt-1", children: "Include country code, no + prefix" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "mapping-active", children: "Active" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Switch,
+            {
+              id: "mapping-active",
+              checked: form.active,
+              onCheckedChange: (checked) => setForm({ ...form, active: checked })
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Template Variables" }),
+          templateVars.length < MAX_VARS && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: addVar, children: "+ Add Variable" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted mb-2", children: "Map WhatsApp template variable positions (e.g. 1, 2, 3) to order data fields." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: templateVars.map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              placeholder: `${i + 1}`,
+              value: v.name,
+              onChange: (e) => updateVar(i, "name", e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              list: "order-data-paths",
+              placeholder: "Select or type a data path...",
+              value: v.path,
+              onChange: (e) => updateVar(i, "path", e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "secondary",
+              size: "small",
+              onClick: () => removeVar(i),
+              children: "✕"
+            }
+          )
+        ] }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: "order-data-paths", children: ORDER_DATA_PATHS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, label: p.label }, p.value)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: saveMapping, children: editingId ? "Update Mapping" : "Create Mapping" }) })
+    ] }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading mappings..." }) : mappings.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "No event mappings configured. Add one to get started." }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Event" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Template" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Send To" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Language" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: "text-right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: mappings.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "blue", children: m.event_name }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: m.template_name }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: recipientLabel(m.recipient_type, m.recipient_phone) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: m.language_code }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: m.active ? "green" : "grey", children: m.active ? "Active" : "Inactive" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => editMapping(m), children: "Edit" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "danger", size: "small", onClick: () => deleteMapping(m.id), children: "Delete" })
+        ] }) })
+      ] }, m.id)) })
+    ] })
+  ] });
+}
+function TestSection() {
+  const [sending, setSending] = react.useState(false);
+  const [form, setForm] = react.useState({
+    phone_number: "",
+    template_name: "",
+    language_code: "en_US",
+    template_variables: "{}"
+  });
+  const sendTest = async () => {
+    var _a, _b;
+    if (!form.phone_number || !form.template_name) {
+      ui.toast.error("Phone number and template name are required");
+      return;
+    }
+    setSending(true);
+    let variables = {};
+    try {
+      variables = JSON.parse(form.template_variables);
+    } catch {
+    }
+    const result = await api("/test", {
+      method: "POST",
+      body: JSON.stringify({ ...form, template_variables: variables })
+    });
+    if (result.success) {
+      ui.toast.success("Test message sent!");
+    } else {
+      ui.toast.error(`Failed: ${((_b = (_a = result.error) == null ? void 0 : _a.error) == null ? void 0 : _b.message) || result.error || "Unknown error"}`);
+    }
+    setSending(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "mb-4", children: "Send Test Message" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "test-phone", children: "Phone Number (with country code)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "test-phone",
+            placeholder: "e.g. 919876543210",
+            value: form.phone_number,
+            onChange: (e) => setForm({ ...form, phone_number: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "test-tpl", children: "Template Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "test-tpl",
+            placeholder: "e.g. hello_world",
+            value: form.template_name,
+            onChange: (e) => setForm({ ...form, template_name: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "test-lang", children: "Language Code" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "test-lang",
+            placeholder: "en_US",
+            value: form.language_code,
+            onChange: (e) => setForm({ ...form, language_code: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "test-vars", children: "Template Variables (JSON)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "test-vars",
+            placeholder: '{"1": "John"}',
+            value: form.template_variables,
+            onChange: (e) => setForm({ ...form, template_variables: e.target.value })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: sendTest, isLoading: sending, children: "Send Test Message" }) })
+  ] });
+}
+function LogsSection() {
+  const [logs, setLogs] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const loadLogs = react.useCallback(async () => {
+    setLoading(true);
+    const data = await api("/logs?limit=20");
+    setLogs(data.logs || []);
+    setLoading(false);
+  }, []);
+  react.useEffect(() => {
+    loadLogs();
+  }, [loadLogs]);
+  const statusColor = (status) => {
+    switch (status) {
+      case "sent":
+        return "green";
+      case "delivered":
+        return "green";
+      case "failed":
+        return "red";
+      default:
+        return "grey";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Message Logs" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: loadLogs, children: "Refresh" })
+    ] }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading logs..." }) : logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "No messages sent yet." }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Event" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Template" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Recipient" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Time" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: logs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "blue", children: log.event_name }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: log.template_name }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: log.recipient_phone }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: statusColor(log.status), children: log.status }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: new Date(log.created_at).toLocaleString() }) })
+      ] }, log.id)) })
+    ] })
+  ] });
+}
+const WhatsAppPage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.ChatBubbleLeftRight, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "WhatsApp Business" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(MappingsSection, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TestSection, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(LogsSection, {})
+  ] });
+};
+const config = adminSdk.defineRouteConfig({
+  label: "WhatsApp",
+  icon: icons.ChatBubbleLeftRight
+});
+const i18nTranslations0 = {};
+const widgetModule = { widgets: [] };
+const routeModule = {
+  routes: [
+    {
+      Component: WhatsAppPage,
+      path: "/whatsapp"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/whatsapp",
+      nested: void 0,
+      rank: void 0,
+      translationNs: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: i18nTranslations0 };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+module.exports = plugin;