payload-plugin-newsletter 0.12.2 → 0.13.0

package/dist/components.d.cts

@@ -2,7 +2,7 @@ export { MagicLinkVerify, MagicLinkVerifyProps, NewsletterForm, PreferencesForm,
 export { PreferencesFormProps, SignupFormProps, Subscriber } from './types.cjs';
 import React from 'react';
 import { SerializedEditorState } from 'lexical';
-import { RichTextField } from 'payload';
+import { RichTextField, DefaultCellComponentProps } from 'payload';
 
 interface EmailPreviewProps {
     content: SerializedEditorState | null;
@@ -50,6 +50,12 @@ interface EmailRendererProps {
 }
 declare const EmailRenderer: React.FC<EmailRendererProps>;
 
+declare const StatusBadge: React.FC<DefaultCellComponentProps>;
+
+declare const ActionsCell: React.FC<DefaultCellComponentProps>;
+
+declare const EmptyField: React.FC;
+
 interface BroadcastTemplateProps {
     subject: string;
     preheader?: string;
@@ -57,4 +63,4 @@ interface BroadcastTemplateProps {
 }
 declare const DefaultBroadcastTemplate: React.FC<BroadcastTemplateProps>;
 
-export { BroadcastEditor, BroadcastInlinePreview, BroadcastPreviewField, type BroadcastTemplateProps, DefaultBroadcastTemplate, EmailPreview, EmailPreviewField, EmailRenderer, PreviewControls };
+export { ActionsCell, BroadcastEditor, BroadcastInlinePreview, BroadcastPreviewField, type BroadcastTemplateProps, DefaultBroadcastTemplate, EmailPreview, EmailPreviewField, EmailRenderer, EmptyField, PreviewControls, StatusBadge };

package/dist/components.d.ts

@@ -2,7 +2,7 @@ export { MagicLinkVerify, MagicLinkVerifyProps, NewsletterForm, PreferencesForm,
 export { PreferencesFormProps, SignupFormProps, Subscriber } from './types.js';
 import React from 'react';
 import { SerializedEditorState } from 'lexical';
-import { RichTextField } from 'payload';
+import { RichTextField, DefaultCellComponentProps } from 'payload';
 
 interface EmailPreviewProps {
     content: SerializedEditorState | null;
@@ -50,6 +50,12 @@ interface EmailRendererProps {
 }
 declare const EmailRenderer: React.FC<EmailRendererProps>;
 
+declare const StatusBadge: React.FC<DefaultCellComponentProps>;
+
+declare const ActionsCell: React.FC<DefaultCellComponentProps>;
+
+declare const EmptyField: React.FC;
+
 interface BroadcastTemplateProps {
     subject: string;
     preheader?: string;
@@ -57,4 +63,4 @@ interface BroadcastTemplateProps {
 }
 declare const DefaultBroadcastTemplate: React.FC<BroadcastTemplateProps>;
 
-export { BroadcastEditor, BroadcastInlinePreview, BroadcastPreviewField, type BroadcastTemplateProps, DefaultBroadcastTemplate, EmailPreview, EmailPreviewField, EmailRenderer, PreviewControls };
+export { ActionsCell, BroadcastEditor, BroadcastInlinePreview, BroadcastPreviewField, type BroadcastTemplateProps, DefaultBroadcastTemplate, EmailPreview, EmailPreviewField, EmailRenderer, EmptyField, PreviewControls, StatusBadge };

package/dist/components.js

@@ -1394,9 +1394,9 @@ var EmailPreviewField = () => {
   const [isValid, setIsValid] = useState6(true);
   const [validationSummary, setValidationSummary] = useState6("");
   const fields = useFormFields(([fields2]) => ({
-    content: fields2.content,
-    subject: fields2.subject,
-    preheader: fields2.preheader,
+    content: fields2["contentSection.content"],
+    subject: fields2["contentSection.subject"],
+    preheader: fields2["contentSection.preheader"],
     channel: fields2.channel
   }));
   const handleValidation = (result) => {
@@ -1536,8 +1536,8 @@ var BroadcastEditor = (props) => {
   const [isValid, setIsValid] = useState7(true);
   const [validationSummary, setValidationSummary] = useState7("");
   const fields = useFormFields2(([fields2]) => ({
-    subject: fields2.subject,
-    preheader: fields2.preheader
+    subject: fields2["contentSection.subject"],
+    preheader: fields2["contentSection.preheader"]
   }));
   const handleValidation = useCallback2((result) => {
     setIsValid(result.valid);
@@ -1989,9 +1989,9 @@ var BroadcastInlinePreview = () => {
   const [previewData, setPreviewData] = useState9(null);
   const [error, setError] = useState9(null);
   const fields = useFormFields3(([fields2]) => ({
-    subject: fields2.subject?.value,
-    preheader: fields2.preheader?.value,
-    content: fields2.content?.value
+    subject: fields2["contentSection.subject"]?.value,
+    preheader: fields2["contentSection.preheader"]?.value,
+    content: fields2["contentSection.content"]?.value
   }));
   const updatePreview = useCallback4(async () => {
     if (!fields.content) {
@@ -2022,10 +2022,12 @@ var BroadcastInlinePreview = () => {
     }
   }, [fields]);
   const containerStyle = {
-    marginTop: "2rem",
     border: "1px solid #e5e7eb",
     borderRadius: "8px",
-    overflow: "hidden"
+    overflow: "hidden",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column"
   };
   const headerStyle = {
     display: "flex",
@@ -2042,10 +2044,11 @@ var BroadcastInlinePreview = () => {
     margin: 0
   };
   const previewContainerStyle = {
-    height: "600px",
+    flex: 1,
     display: "flex",
     flexDirection: "column",
-    background: "#f3f4f6"
+    background: "#f3f4f6",
+    minHeight: "600px"
   };
   const errorStyle = {
     padding: "2rem",
@@ -2124,7 +2127,516 @@ var BroadcastPreviewField = () => {
     color: "#6b7280"
   }, children: "Email preview is available inline below the content editor." });
 };
+
+// src/components/Broadcasts/StatusBadge.tsx
+import { jsx as jsx12 } from "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__ */ jsx12(
+    "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
+import { useState as useState11 } from "react";
+
+// src/components/Broadcasts/SendBroadcastModal.tsx
+import { useState as useState10, useEffect as useEffect6 } from "react";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var SendBroadcastModal = ({
+  broadcast,
+  onClose,
+  onSuccess
+}) => {
+  const [loading, setLoading] = useState10(false);
+  const [error, setError] = useState10(null);
+  const [selectedAudiences, setSelectedAudiences] = useState10([]);
+  const [audiences, setAudiences] = useState10([]);
+  const [providerCapabilities, setProviderCapabilities] = useState10(null);
+  const [sendMode, setSendMode] = useState10("now");
+  const [scheduledDate, setScheduledDate] = useState10("");
+  const [scheduledTime, setScheduledTime] = useState10("");
+  useEffect6(() => {
+    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__ */ jsx13("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__ */ jsxs11("div", { style: {
+    backgroundColor: "white",
+    borderRadius: "8px",
+    padding: "32px",
+    maxWidth: "500px",
+    width: "90%",
+    maxHeight: "90vh",
+    overflowY: "auto"
+  }, children: [
+    /* @__PURE__ */ jsxs11("h2", { style: { marginTop: 0, marginBottom: "24px" }, children: [
+      "Send Broadcast: ",
+      broadcast.name
+    ] }),
+    /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs11("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ jsx13("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "When to send:" }),
+        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "16px" }, children: [
+          /* @__PURE__ */ jsxs11("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                value: "now",
+                checked: sendMode === "now",
+                onChange: (e) => setSendMode(e.target.value),
+                style: { marginRight: "8px" }
+              }
+            ),
+            "Send Now"
+          ] }),
+          providerCapabilities?.supportsScheduling && /* @__PURE__ */ jsxs11("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                value: "schedule",
+                checked: sendMode === "schedule",
+                onChange: (e) => setSendMode(e.target.value),
+                style: { marginRight: "8px" }
+              }
+            ),
+            "Schedule for Later"
+          ] })
+        ] })
+      ] }),
+      sendMode === "schedule" && /* @__PURE__ */ jsxs11("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ jsx13("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "Schedule Date & Time:" }),
+        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx13(
+            "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__ */ jsx13(
+            "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__ */ jsxs11("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ jsx13("label", { style: { fontWeight: "bold", display: "block", marginBottom: "8px" }, children: "Target Audiences (optional):" }),
+        /* @__PURE__ */ jsx13("div", { style: {
+          border: "1px solid #D1D5DB",
+          borderRadius: "4px",
+          maxHeight: "200px",
+          overflowY: "auto"
+        }, children: audiences.map((audience) => /* @__PURE__ */ jsxs11(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "12px",
+              borderBottom: "1px solid #E5E7EB",
+              cursor: "pointer",
+              backgroundColor: selectedAudiences.includes(audience.id) ? "#F3F4F6" : "transparent"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedAudiences.includes(audience.id),
+                  onChange: () => handleAudienceToggle(audience.id),
+                  style: { marginRight: "12px" }
+                }
+              ),
+              /* @__PURE__ */ jsxs11("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx13("div", { style: { fontWeight: 500 }, children: audience.name }),
+                /* @__PURE__ */ jsxs11("div", { style: { fontSize: "14px", color: "#6B7280" }, children: [
+                  audience.subscriberCount.toLocaleString(),
+                  " subscribers"
+                ] })
+              ] })
+            ]
+          },
+          audience.id
+        )) }),
+        selectedAudiences.length === 0 && /* @__PURE__ */ jsx13("p", { style: { fontSize: "14px", color: "#6B7280", marginTop: "8px" }, children: "If no audiences are selected, the broadcast will be sent to all subscribers." })
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { style: {
+        backgroundColor: "#F3F4F6",
+        padding: "16px",
+        borderRadius: "4px",
+        marginBottom: "24px"
+      }, children: [
+        /* @__PURE__ */ jsx13("h4", { style: { marginTop: 0, marginBottom: "8px" }, children: "Summary" }),
+        /* @__PURE__ */ jsxs11("p", { style: { margin: 0, fontSize: "14px" }, children: [
+          /* @__PURE__ */ jsx13("strong", { children: "Subject:" }),
+          " ",
+          broadcast.subject,
+          /* @__PURE__ */ jsx13("br", {}),
+          /* @__PURE__ */ jsx13("strong", { children: "Channel:" }),
+          " ",
+          broadcast.channel?.name || "Unknown",
+          /* @__PURE__ */ jsx13("br", {}),
+          /* @__PURE__ */ jsx13("strong", { children: "Provider:" }),
+          " ",
+          broadcast.channel?.providerType || "Unknown",
+          /* @__PURE__ */ jsx13("br", {}),
+          /* @__PURE__ */ jsx13("strong", { children: "When:" }),
+          " ",
+          sendMode === "now" ? "Immediately" : `${scheduledDate} at ${scheduledTime}`,
+          /* @__PURE__ */ jsx13("br", {}),
+          selectedAudiences.length > 0 && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+            /* @__PURE__ */ jsx13("strong", { children: "Audiences:" }),
+            " ",
+            selectedAudiences.length,
+            " selected"
+          ] })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx13("div", { style: {
+        backgroundColor: "#FEE2E2",
+        border: "1px solid #FCA5A5",
+        color: "#DC2626",
+        padding: "12px",
+        borderRadius: "4px",
+        marginBottom: "24px"
+      }, children: error }),
+      /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "flex-end", gap: "12px" }, children: [
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsx13(
+          "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
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var ActionsCell = ({ rowData }) => {
+  const [loading, setLoading] = useState11(false);
+  const [showSendModal, setShowSendModal] = useState11(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__ */ jsxs12(Fragment4, { children: [
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+      canSend && /* @__PURE__ */ jsx14(
+        "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__ */ jsx14(
+        "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__ */ jsx14(
+        "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__ */ jsx14(
+      SendBroadcastModal,
+      {
+        broadcast,
+        onClose: () => setShowSendModal(false),
+        onSuccess: () => {
+          setShowSendModal(false);
+          window.location.reload();
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/Broadcasts/EmptyField.tsx
+var EmptyField = () => {
+  return null;
+};
 export {
+  ActionsCell,
   BroadcastEditor,
   BroadcastInlinePreview,
   BroadcastPreviewField,
@@ -2132,10 +2644,12 @@ export {
   EmailPreview,
   EmailPreviewField,
   EmailRenderer,
+  EmptyField,
   MagicLinkVerify,
   NewsletterForm,
   PreferencesForm,
   PreviewControls,
+  StatusBadge,
   createMagicLinkVerify,
   createNewsletterForm,
   createPreferencesForm,