payload-plugin-newsletter 0.27.0 → 0.28.0

package/dist/admin.d.ts

@@ -24,4 +24,43 @@ declare const EmailPreview: React.FC<EmailPreviewProps>;
 
 declare const WebhookConfiguration: React.FC;
 
-export { BroadcastInlinePreview, type BroadcastInlinePreviewProps, EmailPreview, type EmailPreviewProps, StatusBadge, type StatusBadgeProps, WebhookConfiguration };
+/**
+ * Field component that shows scheduling controls based on broadcast status
+ * Shows Schedule button for drafts, Cancel button for scheduled broadcasts
+ */
+declare const BroadcastScheduleField: React.FC;
+
+interface BroadcastScheduleButtonProps {
+    broadcastId: string;
+    sendStatus?: string;
+    providerId?: string;
+}
+/**
+ * Button to open the schedule modal for a broadcast
+ * Only shows for draft broadcasts that have been synced to the provider
+ */
+declare const BroadcastScheduleButton: React.FC<BroadcastScheduleButtonProps>;
+
+interface CancelScheduleButtonProps {
+    broadcastId: string;
+    sendStatus?: string;
+    scheduledAt?: string;
+}
+/**
+ * Button to cancel a scheduled broadcast
+ * Only shows for broadcasts with 'scheduled' status
+ */
+declare const CancelScheduleButton: React.FC<CancelScheduleButtonProps>;
+
+interface ScheduleModalProps {
+    broadcastId: string;
+    onScheduled?: () => void;
+    onClose: () => void;
+}
+/**
+ * Modal for scheduling a broadcast
+ * Uses native HTML date-time inputs for compatibility
+ */
+declare const ScheduleModal: React.FC<ScheduleModalProps>;
+
+export { BroadcastInlinePreview, type BroadcastInlinePreviewProps, BroadcastScheduleButton, BroadcastScheduleField, CancelScheduleButton, EmailPreview, type EmailPreviewProps, ScheduleModal, StatusBadge, type StatusBadgeProps, WebhookConfiguration };

package/dist/admin.js

@@ -332,9 +332,550 @@ var WebhookConfiguration = () => {
     ] })
   ] }) });
 };
+
+// src/components/Broadcasts/BroadcastScheduleField.tsx
+import { useDocumentInfo, useFormFields as useFormFields3 } from "@payloadcms/ui";
+
+// src/components/Broadcasts/BroadcastScheduleButton.tsx
+import { useState as useState4 } from "react";
+
+// src/components/Broadcasts/ScheduleModal.tsx
+import { useState as useState3, useCallback as useCallback2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ScheduleModal = ({
+  broadcastId,
+  onScheduled,
+  onClose
+}) => {
+  const [selectedDate, setSelectedDate] = useState3("");
+  const [selectedTime, setSelectedTime] = useState3("");
+  const [timezone, setTimezone] = useState3(
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const getMinDate = () => {
+    const today = /* @__PURE__ */ new Date();
+    return today.toISOString().split("T")[0];
+  };
+  const getMinTime = () => {
+    if (!selectedDate) return void 0;
+    const today = /* @__PURE__ */ new Date();
+    const selectedDateObj = new Date(selectedDate);
+    if (selectedDateObj.toDateString() === today.toDateString()) {
+      const minTime = new Date(today.getTime() + 5 * 60 * 1e3);
+      return `${String(minTime.getHours()).padStart(2, "0")}:${String(minTime.getMinutes()).padStart(2, "0")}`;
+    }
+    return void 0;
+  };
+  const handleSchedule = useCallback2(async () => {
+    if (!selectedDate || !selectedTime) {
+      setError("Please select both date and time");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const scheduledAt = /* @__PURE__ */ new Date(`${selectedDate}T${selectedTime}:00`);
+      if (scheduledAt <= /* @__PURE__ */ new Date()) {
+        setError("Scheduled time must be in the future");
+        setIsLoading(false);
+        return;
+      }
+      const response = await fetch(`/api/broadcasts/${broadcastId}/schedule`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          scheduledAt: scheduledAt.toISOString(),
+          timezone
+        })
+      });
+      const data = await response.json();
+      if (!data.success) {
+        setError(data.error || "Failed to schedule broadcast");
+        return;
+      }
+      onScheduled?.();
+      onClose();
+      window.location.reload();
+    } catch (err) {
+      setError("Network error. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [selectedDate, selectedTime, timezone, broadcastId, onScheduled, onClose]);
+  const commonTimezones = [
+    "America/New_York",
+    "America/Chicago",
+    "America/Denver",
+    "America/Los_Angeles",
+    "Europe/London",
+    "Europe/Paris",
+    "Asia/Tokyo",
+    "Australia/Sydney"
+  ];
+  return /* @__PURE__ */ jsx5(
+    "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: 1e4
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: {
+            backgroundColor: "var(--theme-elevation-0, #fff)",
+            borderRadius: "8px",
+            padding: "24px",
+            maxWidth: "400px",
+            width: "100%",
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)"
+          },
+          children: [
+            /* @__PURE__ */ jsx5(
+              "h2",
+              {
+                style: {
+                  margin: "0 0 16px 0",
+                  fontSize: "18px",
+                  fontWeight: "600",
+                  color: "var(--theme-elevation-1000, #000)"
+                },
+                children: "Schedule Broadcast"
+              }
+            ),
+            error && /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  padding: "12px",
+                  marginBottom: "16px",
+                  backgroundColor: "var(--theme-error-100, #fef2f2)",
+                  color: "var(--theme-error-500, #ef4444)",
+                  borderRadius: "4px",
+                  fontSize: "14px"
+                },
+                children: error
+              }
+            ),
+            /* @__PURE__ */ jsxs4("div", { style: { marginBottom: "16px" }, children: [
+              /* @__PURE__ */ jsx5(
+                "label",
+                {
+                  style: {
+                    display: "block",
+                    marginBottom: "4px",
+                    fontSize: "14px",
+                    fontWeight: "500",
+                    color: "var(--theme-elevation-800, #333)"
+                  },
+                  children: "Date"
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "date",
+                  value: selectedDate,
+                  onChange: (e) => setSelectedDate(e.target.value),
+                  min: getMinDate(),
+                  style: {
+                    width: "100%",
+                    padding: "8px 12px",
+                    border: "1px solid var(--theme-elevation-150, #ddd)",
+                    borderRadius: "4px",
+                    fontSize: "14px",
+                    backgroundColor: "var(--theme-input-bg, #fff)",
+                    color: "var(--theme-elevation-1000, #000)"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { style: { marginBottom: "16px" }, children: [
+              /* @__PURE__ */ jsx5(
+                "label",
+                {
+                  style: {
+                    display: "block",
+                    marginBottom: "4px",
+                    fontSize: "14px",
+                    fontWeight: "500",
+                    color: "var(--theme-elevation-800, #333)"
+                  },
+                  children: "Time"
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "time",
+                  value: selectedTime,
+                  onChange: (e) => setSelectedTime(e.target.value),
+                  min: getMinTime(),
+                  style: {
+                    width: "100%",
+                    padding: "8px 12px",
+                    border: "1px solid var(--theme-elevation-150, #ddd)",
+                    borderRadius: "4px",
+                    fontSize: "14px",
+                    backgroundColor: "var(--theme-input-bg, #fff)",
+                    color: "var(--theme-elevation-1000, #000)"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { style: { marginBottom: "24px" }, children: [
+              /* @__PURE__ */ jsx5(
+                "label",
+                {
+                  style: {
+                    display: "block",
+                    marginBottom: "4px",
+                    fontSize: "14px",
+                    fontWeight: "500",
+                    color: "var(--theme-elevation-800, #333)"
+                  },
+                  children: "Timezone"
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "select",
+                {
+                  value: timezone,
+                  onChange: (e) => setTimezone(e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: "8px 12px",
+                    border: "1px solid var(--theme-elevation-150, #ddd)",
+                    borderRadius: "4px",
+                    fontSize: "14px",
+                    backgroundColor: "var(--theme-input-bg, #fff)",
+                    color: "var(--theme-elevation-1000, #000)"
+                  },
+                  children: [
+                    commonTimezones.includes(timezone) ? null : /* @__PURE__ */ jsx5("option", { value: timezone, children: timezone }),
+                    commonTimezones.map((tz) => /* @__PURE__ */ jsx5("option", { value: tz, children: tz.replace("_", " ") }, tz))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: "12px",
+                  justifyContent: "flex-end"
+                },
+                children: [
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      onClick: onClose,
+                      disabled: isLoading,
+                      style: {
+                        padding: "8px 16px",
+                        border: "1px solid var(--theme-elevation-150, #ddd)",
+                        borderRadius: "4px",
+                        backgroundColor: "transparent",
+                        color: "var(--theme-elevation-800, #333)",
+                        fontSize: "14px",
+                        cursor: "pointer"
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      onClick: handleSchedule,
+                      disabled: isLoading || !selectedDate || !selectedTime,
+                      style: {
+                        padding: "8px 16px",
+                        border: "none",
+                        borderRadius: "4px",
+                        backgroundColor: isLoading || !selectedDate || !selectedTime ? "var(--theme-elevation-200, #ccc)" : "var(--theme-success-500, #22c55e)",
+                        color: "#fff",
+                        fontSize: "14px",
+                        fontWeight: "500",
+                        cursor: isLoading || !selectedDate || !selectedTime ? "not-allowed" : "pointer"
+                      },
+                      children: isLoading ? "Scheduling..." : "Schedule"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Broadcasts/BroadcastScheduleButton.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var BroadcastScheduleButton = ({
+  broadcastId,
+  sendStatus = "draft",
+  providerId
+}) => {
+  const [showModal, setShowModal] = useState4(false);
+  if (sendStatus !== "draft") {
+    return null;
+  }
+  if (!providerId) {
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        disabled: true,
+        title: "Save the broadcast first to sync with the email provider",
+        style: {
+          padding: "8px 16px",
+          border: "none",
+          borderRadius: "4px",
+          backgroundColor: "var(--theme-elevation-200, #ccc)",
+          color: "var(--theme-elevation-500, #666)",
+          fontSize: "14px",
+          fontWeight: "500",
+          cursor: "not-allowed",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", { children: "\u{1F4C5}" }),
+          "Schedule (save first)"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: () => setShowModal(true),
+        style: {
+          padding: "8px 16px",
+          border: "none",
+          borderRadius: "4px",
+          backgroundColor: "var(--theme-success-500, #22c55e)",
+          color: "#fff",
+          fontSize: "14px",
+          fontWeight: "500",
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", { children: "\u{1F4C5}" }),
+          "Schedule Send"
+        ]
+      }
+    ),
+    showModal && /* @__PURE__ */ jsx6(
+      ScheduleModal,
+      {
+        broadcastId,
+        onClose: () => setShowModal(false)
+      }
+    )
+  ] });
+};
+
+// src/components/Broadcasts/CancelScheduleButton.tsx
+import { useState as useState5, useCallback as useCallback3 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var CancelScheduleButton = ({
+  broadcastId,
+  sendStatus = "draft",
+  scheduledAt
+}) => {
+  const [isLoading, setIsLoading] = useState5(false);
+  if (sendStatus !== "scheduled") {
+    return null;
+  }
+  const handleCancel = useCallback3(async () => {
+    const formattedDate = scheduledAt ? new Date(scheduledAt).toLocaleString() : "unknown time";
+    const confirmed = window.confirm(
+      `Are you sure you want to cancel this scheduled broadcast?
+
+It was scheduled for: ${formattedDate}
+
+The broadcast will be returned to draft status.`
+    );
+    if (!confirmed) return;
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/broadcasts/${broadcastId}/schedule`, {
+        method: "DELETE"
+      });
+      const data = await response.json();
+      if (!data.success) {
+        alert(data.error || "Failed to cancel schedule");
+        return;
+      }
+      window.location.reload();
+    } catch (err) {
+      alert("Network error. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [broadcastId, scheduledAt]);
+  const formattedScheduledAt = scheduledAt ? new Date(scheduledAt).toLocaleString() : null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "16px"
+      },
+      children: [
+        formattedScheduledAt && /* @__PURE__ */ jsxs6(
+          "span",
+          {
+            style: {
+              fontSize: "14px",
+              color: "var(--theme-elevation-600, #666)"
+            },
+            children: [
+              "Scheduled for: ",
+              /* @__PURE__ */ jsx7("strong", { children: formattedScheduledAt })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            onClick: handleCancel,
+            disabled: isLoading,
+            style: {
+              padding: "8px 16px",
+              border: "1px solid var(--theme-error-500, #ef4444)",
+              borderRadius: "4px",
+              backgroundColor: "transparent",
+              color: "var(--theme-error-500, #ef4444)",
+              fontSize: "14px",
+              fontWeight: "500",
+              cursor: isLoading ? "not-allowed" : "pointer",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "6px",
+              opacity: isLoading ? 0.6 : 1
+            },
+            children: [
+              /* @__PURE__ */ jsx7("span", { children: "\u2715" }),
+              isLoading ? "Cancelling..." : "Cancel Schedule"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Broadcasts/BroadcastScheduleField.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var BroadcastScheduleField = () => {
+  const { id } = useDocumentInfo();
+  const sendStatusField = useFormFields3(([fields]) => fields.sendStatus);
+  const providerIdField = useFormFields3(([fields]) => fields.providerId);
+  const scheduledAtField = useFormFields3(([fields]) => fields.scheduledAt);
+  const sendStatus = sendStatusField?.value;
+  const providerId = providerIdField?.value;
+  const scheduledAt = scheduledAtField?.value;
+  if (!id) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          backgroundColor: "var(--theme-elevation-50, #f9f9f9)",
+          borderRadius: "4px",
+          fontSize: "14px",
+          color: "var(--theme-elevation-600, #666)"
+        },
+        children: "Save the broadcast to enable scheduling options."
+      }
+    );
+  }
+  if (sendStatus === "sent" || sendStatus === "sending") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          backgroundColor: "var(--theme-elevation-50, #f9f9f9)",
+          borderRadius: "4px",
+          fontSize: "14px",
+          color: "var(--theme-elevation-600, #666)"
+        },
+        children: sendStatus === "sent" ? "This broadcast has been sent and cannot be rescheduled." : "This broadcast is currently being sent."
+      }
+    );
+  }
+  if (sendStatus === "failed") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          backgroundColor: "var(--theme-error-100, #fef2f2)",
+          borderRadius: "4px",
+          fontSize: "14px",
+          color: "var(--theme-error-600, #dc2626)"
+        },
+        children: "This broadcast failed to send. Edit and save to return it to draft status."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        padding: "16px",
+        backgroundColor: "var(--theme-elevation-50, #f9f9f9)",
+        borderRadius: "4px"
+      },
+      children: sendStatus === "scheduled" ? /* @__PURE__ */ jsx8(
+        CancelScheduleButton,
+        {
+          broadcastId: String(id),
+          sendStatus,
+          scheduledAt
+        }
+      ) : /* @__PURE__ */ jsx8(
+        BroadcastScheduleButton,
+        {
+          broadcastId: String(id),
+          sendStatus,
+          providerId
+        }
+      )
+    }
+  );
+};
 export {
   BroadcastInlinePreview,
+  BroadcastScheduleButton,
+  BroadcastScheduleField,
+  CancelScheduleButton,
   EmailPreview,
+  ScheduleModal,
   StatusBadge,
   WebhookConfiguration
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-plugin-newsletter",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Complete newsletter management plugin for Payload CMS with subscriber management, magic link authentication, and email service integration",
   "type": "module",
   "main": "./dist/index.js",