payload-plugin-newsletter 0.12.2 → 0.12.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [0.12.3] - 2025-07-20
+
+### Fixed
+- Fixed import map component path references to use package exports instead of file paths
+- Resolved "PayloadComponent not found in importMap" errors in Payload v3 projects
+- Added missing component exports (StatusBadge, ActionsCell, EmptyField)
+
 ## [0.12.2] - 2025-07-20
 
 ### Documentation

package/dist/components.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/exports/components.ts
 var components_exports = {};
 __export(components_exports, {
+  ActionsCell: () => ActionsCell,
   BroadcastEditor: () => BroadcastEditor,
   BroadcastInlinePreview: () => BroadcastInlinePreview,
   BroadcastPreviewField: () => BroadcastPreviewField,
@@ -38,10 +39,12 @@ __export(components_exports, {
   EmailPreview: () => EmailPreview,
   EmailPreviewField: () => EmailPreviewField,
   EmailRenderer: () => EmailRenderer,
+  EmptyField: () => EmptyField,
   MagicLinkVerify: () => MagicLinkVerify,
   NewsletterForm: () => NewsletterForm,
   PreferencesForm: () => PreferencesForm,
   PreviewControls: () => PreviewControls,
+  StatusBadge: () => StatusBadge,
   createMagicLinkVerify: () => createMagicLinkVerify,
   createNewsletterForm: () => createNewsletterForm,
   createPreferencesForm: () => createPreferencesForm,
@@ -2163,8 +2166,517 @@ var BroadcastPreviewField = () => {
     color: "#6b7280"
   }, children: "Email preview is available inline below the content editor." });
 };
+
+// src/components/Broadcasts/StatusBadge.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var statusConfig = {
+  ["draft" /* DRAFT */]: {
+    label: "Draft",
+    color: "#6B7280",
+    // gray
+    backgroundColor: "#F3F4F6"
+  },
+  ["scheduled" /* SCHEDULED */]: {
+    label: "Scheduled",
+    color: "#2563EB",
+    // blue
+    backgroundColor: "#DBEAFE"
+  },
+  ["sending" /* SENDING */]: {
+    label: "Sending",
+    color: "#D97706",
+    // yellow/orange
+    backgroundColor: "#FEF3C7"
+  },
+  ["sent" /* SENT */]: {
+    label: "Sent",
+    color: "#059669",
+    // green
+    backgroundColor: "#D1FAE5"
+  },
+  ["failed" /* FAILED */]: {
+    label: "Failed",
+    color: "#DC2626",
+    // red
+    backgroundColor: "#FEE2E2"
+  },
+  ["paused" /* PAUSED */]: {
+    label: "Paused",
+    color: "#9333EA",
+    // purple
+    backgroundColor: "#EDE9FE"
+  },
+  ["canceled" /* CANCELED */]: {
+    label: "Canceled",
+    color: "#6B7280",
+    // gray
+    backgroundColor: "#F3F4F6"
+  }
+};
+var StatusBadge = ({ cellData }) => {
+  const status = cellData;
+  const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: "500",
+        color: config.color,
+        backgroundColor: config.backgroundColor
+      },
+      children: config.label
+    }
+  );
+};
+
+// src/components/Broadcasts/ActionsCell.tsx
+var import_react11 = require("react");
+
+// src/components/Broadcasts/SendBroadcastModal.tsx
+var import_react10 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SendBroadcastModal = ({
+  broadcast,
+  onClose,
+  onSuccess
+}) => {
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [selectedAudiences, setSelectedAudiences] = (0, import_react10.useState)([]);
+  const [audiences, setAudiences] = (0, import_react10.useState)([]);
+  const [providerCapabilities, setProviderCapabilities] = (0, import_react10.useState)(null);
+  const [sendMode, setSendMode] = (0, import_react10.useState)("now");
+  const [scheduledDate, setScheduledDate] = (0, import_react10.useState)("");
+  const [scheduledTime, setScheduledTime] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
+    const fetchData = async () => {
+      try {
+        setAudiences([
+          { id: "all", name: "All Subscribers", subscriberCount: 1e3 },
+          { id: "active", name: "Active Subscribers", subscriberCount: 850 }
+        ]);
+        if (broadcast.channel?.providerType === "broadcast") {
+          setProviderCapabilities({ supportsScheduling: true });
+        } else {
+          setProviderCapabilities({ supportsScheduling: false });
+        }
+      } catch (err) {
+        console.error("Failed to fetch modal data:", err);
+      }
+    };
+    fetchData();
+  }, [broadcast.channel]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      if (sendMode === "now") {
+        const response = await fetch(`/api/broadcasts/${broadcast.id}/send`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            audienceIds: selectedAudiences.length > 0 ? selectedAudiences : void 0
+          })
+        });
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.error || "Failed to send broadcast");
+        }
+        alert(`Broadcast "${broadcast.name}" has been sent successfully`);
+      } else {
+        if (!scheduledDate || !scheduledTime) {
+          throw new Error("Please select both date and time for scheduling");
+        }
+        const scheduledAt = (/* @__PURE__ */ new Date(`${scheduledDate}T${scheduledTime}`)).toISOString();
+        const response = await fetch(`/api/broadcasts/${broadcast.id}/schedule`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            scheduledAt,
+            audienceIds: selectedAudiences.length > 0 ? selectedAudiences : void 0
+          })
+        });
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(data.error || "Failed to schedule broadcast");
+        }
+        alert(`Broadcast "${broadcast.name}" has been scheduled successfully`);
+      }
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAudienceToggle = (audienceId) => {
+    setSelectedAudiences(
+      (prev) => prev.includes(audienceId) ? prev.filter((id) => id !== audienceId) : [...prev, audienceId]
+    );
+  };
+  const now = /* @__PURE__ */ new Date();
+  const minDate = now.toISOString().split("T")[0];
+  const minTime = now.toTimeString().slice(0, 5);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: {
+    backgroundColor: "white",
+    borderRadius: "8px",
+    padding: "32px",
+    maxWidth: "500px",
+    width: "90%",
+    maxHeight: "90vh",
+    overflowY: "auto"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h2", { style: { marginTop: 0, marginBottom: "24px" }, children: [
+      "Send Broadcast: ",
+      broadcast.name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "When to send:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "input",
+              {
+                type: "radio",
+                value: "now",
+                checked: sendMode === "now",
+                onChange: (e) => setSendMode(e.target.value),
+                style: { marginRight: "8px" }
+              }
+            ),
+            "Send Now"
+          ] }),
+          providerCapabilities?.supportsScheduling && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "input",
+              {
+                type: "radio",
+                value: "schedule",
+                checked: sendMode === "schedule",
+                onChange: (e) => setSendMode(e.target.value),
+                style: { marginRight: "8px" }
+              }
+            ),
+            "Schedule for Later"
+          ] })
+        ] })
+      ] }),
+      sendMode === "schedule" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "Schedule Date & Time:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "input",
+            {
+              type: "date",
+              value: scheduledDate,
+              onChange: (e) => setScheduledDate(e.target.value),
+              min: minDate,
+              required: sendMode === "schedule",
+              style: {
+                padding: "8px 12px",
+                border: "1px solid #D1D5DB",
+                borderRadius: "4px",
+                flex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "input",
+            {
+              type: "time",
+              value: scheduledTime,
+              onChange: (e) => setScheduledTime(e.target.value),
+              min: scheduledDate === minDate ? minTime : void 0,
+              required: sendMode === "schedule",
+              style: {
+                padding: "8px 12px",
+                border: "1px solid #D1D5DB",
+                borderRadius: "4px",
+                flex: 1
+              }
+            }
+          )
+        ] })
+      ] }),
+      audiences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "Target Audiences (optional):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: {
+          border: "1px solid #D1D5DB",
+          borderRadius: "4px",
+          maxHeight: "200px",
+          overflowY: "auto"
+        }, children: audiences.map((audience) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "12px",
+              borderBottom: "1px solid #E5E7EB",
+              cursor: "pointer",
+              backgroundColor: selectedAudiences.includes(audience.id) ? "#F3F4F6" : "transparent"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedAudiences.includes(audience.id),
+                  onChange: () => handleAudienceToggle(audience.id),
+                  style: { marginRight: "12px" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontWeight: 500 }, children: audience.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { fontSize: "14px", color: "#6B7280" }, children: [
+                  audience.subscriberCount.toLocaleString(),
+                  " subscribers"
+                ] })
+              ] })
+            ]
+          },
+          audience.id
+        )) }),
+        selectedAudiences.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { fontSize: "14px", color: "#6B7280", marginTop: "8px" }, children: "If no audiences are selected, the broadcast will be sent to all subscribers." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: {
+        backgroundColor: "#F3F4F6",
+        padding: "16px",
+        borderRadius: "4px",
+        marginBottom: "24px"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { style: { marginTop: 0, marginBottom: "8px" }, children: "Summary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { style: { margin: 0, fontSize: "14px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Subject:" }),
+          " ",
+          broadcast.subject,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Channel:" }),
+          " ",
+          broadcast.channel?.name || "Unknown",
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Provider:" }),
+          " ",
+          broadcast.channel?.providerType || "Unknown",
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "When:" }),
+          " ",
+          sendMode === "now" ? "Immediately" : `${scheduledDate} at ${scheduledTime}`,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("br", {}),
+          selectedAudiences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Audiences:" }),
+            " ",
+            selectedAudiences.length,
+            " selected"
+          ] })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: {
+        backgroundColor: "#FEE2E2",
+        border: "1px solid #FCA5A5",
+        color: "#DC2626",
+        padding: "12px",
+        borderRadius: "4px",
+        marginBottom: "24px"
+      }, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            disabled: loading,
+            style: {
+              padding: "8px 24px",
+              backgroundColor: "#E5E7EB",
+              color: "#1F2937",
+              border: "none",
+              borderRadius: "4px",
+              fontSize: "16px",
+              cursor: loading ? "not-allowed" : "pointer",
+              opacity: loading ? 0.6 : 1
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: loading,
+            style: {
+              padding: "8px 24px",
+              backgroundColor: "#2563EB",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              fontSize: "16px",
+              cursor: loading ? "not-allowed" : "pointer",
+              opacity: loading ? 0.6 : 1
+            },
+            children: loading ? "Processing..." : sendMode === "now" ? "Send Now" : "Schedule"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/components/Broadcasts/ActionsCell.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ActionsCell = ({ rowData }) => {
+  const [loading, setLoading] = (0, import_react11.useState)(false);
+  const [showSendModal, setShowSendModal] = (0, import_react11.useState)(false);
+  const broadcast = rowData;
+  const handleSend = () => {
+    if (!broadcast.providerId) {
+      alert("This broadcast has not been synced with the provider yet");
+      return;
+    }
+    setShowSendModal(true);
+  };
+  const handleSchedule = () => {
+    if (!broadcast.providerId) {
+      alert("This broadcast has not been synced with the provider yet");
+      return;
+    }
+    setShowSendModal(true);
+  };
+  const handleDuplicate = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/broadcasts/${broadcast.id}`);
+      const data = await response.json();
+      delete data.id;
+      delete data.createdAt;
+      delete data.updatedAt;
+      delete data.providerId;
+      delete data.sentAt;
+      delete data.scheduledAt;
+      delete data.analytics;
+      data.name = `${data.name} (Copy)`;
+      data.status = "draft" /* DRAFT */;
+      const createResponse = await fetch("/api/broadcasts", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+      });
+      if (!createResponse.ok) {
+        throw new Error("Failed to duplicate broadcast");
+      }
+      alert("Broadcast duplicated successfully");
+      window.location.reload();
+    } catch (error) {
+      alert(error instanceof Error ? error.message : "Failed to duplicate broadcast");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const canSend = broadcast.status === "draft" /* DRAFT */;
+  const canSchedule = broadcast.status === "draft" /* DRAFT */;
+  const canDuplicate = true;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+      canSend && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          onClick: handleSend,
+          disabled: loading,
+          style: {
+            padding: "4px 12px",
+            backgroundColor: "#2563EB",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            fontSize: "12px",
+            cursor: loading ? "not-allowed" : "pointer",
+            opacity: loading ? 0.6 : 1
+          },
+          children: "Send"
+        }
+      ),
+      canSchedule && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          onClick: handleSchedule,
+          disabled: loading,
+          style: {
+            padding: "4px 12px",
+            backgroundColor: "#6366F1",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            fontSize: "12px",
+            cursor: loading ? "not-allowed" : "pointer",
+            opacity: loading ? 0.6 : 1
+          },
+          children: "Schedule"
+        }
+      ),
+      canDuplicate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          onClick: handleDuplicate,
+          disabled: loading,
+          style: {
+            padding: "4px 12px",
+            backgroundColor: "#6B7280",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            fontSize: "12px",
+            cursor: loading ? "not-allowed" : "pointer",
+            opacity: loading ? 0.6 : 1
+          },
+          children: "Duplicate"
+        }
+      )
+    ] }),
+    showSendModal && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      SendBroadcastModal,
+      {
+        broadcast,
+        onClose: () => setShowSendModal(false),
+        onSuccess: () => {
+          setShowSendModal(false);
+          window.location.reload();
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/Broadcasts/EmptyField.tsx
+var EmptyField = () => {
+  return null;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionsCell,
   BroadcastEditor,
   BroadcastInlinePreview,
   BroadcastPreviewField,
@@ -2172,10 +2684,12 @@ var BroadcastPreviewField = () => {
   EmailPreview,
   EmailPreviewField,
   EmailRenderer,
+  EmptyField,
   MagicLinkVerify,
   NewsletterForm,
   PreferencesForm,
   PreviewControls,
+  StatusBadge,
   createMagicLinkVerify,
   createNewsletterForm,
   createPreferencesForm,