@btst/stack 5.1.0 → 5.2.0

package/dist/packages/stack/src/plugins/newsletter/client/components/pages/edit-campaign-page.internal.mjs

@@ -0,0 +1,553 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useRef, useEffect, useCallback } from 'react';
+import { PermissionRouteAccess } from '@btst/stack/client/components';
+import { useStack, usePluginSiteNavigation, usePluginOverrides, PermissionAccess } from '@btst/stack/context';
+import { MarkdownEditor } from '@btst/stack/components/markdown';
+import { usePost } from '@btst/stack/plugins/blog/client/hooks';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { Textarea } from '../../../../../../../ui/src/components/textarea.mjs';
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../../../../../ui/src/components/alert-dialog.mjs';
+import { newsletterPermissions } from '../../../../../../../../plugins/newsletter/permissions.mjs';
+import { useCampaign, useCreateCampaign, useUpdateCampaign, useSendCampaign, useTestCampaign, useScheduleCampaign, useDeleteCampaign } from '../../../../../../../../plugins/newsletter/client/hooks/index.mjs';
+import { NewsletterMarkdownPreview } from '../markdown-preview.mjs';
+import { NEWSLETTER_PLUGIN_ID } from '../../constants.mjs';
+import { NewsletterLoading, NewsletterPage, Status, Field, selectClass } from '../shared.mjs';
+
+const emptyCampaign = {
+  subject: "",
+  fromName: "",
+  fromEmail: "",
+  replyTo: "",
+  body: "",
+  format: "markdown",
+  tags: []
+};
+function EditCampaignPage({ id }) {
+  return id ? /* @__PURE__ */ jsx(ExistingCampaign, { id }) : /* @__PURE__ */ jsx(CampaignForm, { initial: emptyCampaign });
+}
+function ExistingCampaign({ id }) {
+  const { data: campaign } = useCampaign(id);
+  const initial = { ...campaign, replyTo: campaign.replyTo ?? void 0 };
+  return campaign.status === "draft" ? /* @__PURE__ */ jsx(
+    PermissionRouteAccess,
+    {
+      permission: newsletterPermissions.campaign.update({
+        campaignId: id,
+        status: campaign.status
+      }),
+      LoadingComponent: NewsletterLoading,
+      children: /* @__PURE__ */ jsx(CampaignForm, { initial, campaign }, id)
+    }
+  ) : /* @__PURE__ */ jsx(CampaignForm, { initial, campaign }, id);
+}
+function BlogCampaignSource({
+  slug,
+  postId,
+  onLoad
+}) {
+  const { post, error, isLoading } = usePost(slug);
+  const loaded = useRef(false);
+  useEffect(() => {
+    if (post && post.id === postId && !loaded.current) {
+      loaded.current = true;
+      onLoad(post.title, post.content);
+    }
+  }, [post, postId, onLoad]);
+  if (error)
+    return /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: "The blog post could not be loaded. Check your access or write a new campaign." });
+  if (isLoading)
+    return /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm", children: "Loading blog post\u2026" });
+  if (!post || post.id !== postId)
+    return /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: "The selected blog post was not found." });
+  return /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+    "Started from \u201C",
+    post.title,
+    "\u201D. Changes here do not change the blog post."
+  ] });
+}
+function CampaignForm({
+  initial,
+  campaign
+}) {
+  const id = useId();
+  const { plugins } = useStack();
+  const { Link, resolve, navigate } = usePluginSiteNavigation(NEWSLETTER_PLUGIN_ID);
+  const { uploadImage } = usePluginOverrides(NEWSLETTER_PLUGIN_ID);
+  const [values, setValues] = useState(initial);
+  const [mode, setMode] = useState("markdown");
+  const [source, setSource] = useState();
+  const [testEmail, setTestEmail] = useState("");
+  const [scheduledAt, setScheduledAt] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+  const create = useCreateCampaign();
+  const update = useUpdateCampaign();
+  const send = useSendCampaign();
+  const test = useTestCampaign();
+  const schedule = useScheduleCampaign();
+  const remove = useDeleteCampaign();
+  const formRef = useRef(null);
+  const pending = create.isPending || update.isPending || send.isPending || test.isPending || schedule.isPending || remove.isPending;
+  const readOnly = !!campaign && campaign.status !== "draft";
+  const canDelete = campaign?.status === "draft" || campaign?.status === "scheduled";
+  useEffect(() => {
+    if (campaign) return;
+    const params = new URLSearchParams(window.location.search);
+    const slug = params.get("fromPostSlug");
+    const postId = params.get("fromPostId");
+    if (slug && postId) setSource({ slug, id: postId });
+  }, [campaign]);
+  const loadSource = useCallback(
+    (subject, body) => setValues((current) => ({ ...current, subject, body })),
+    []
+  );
+  const change = (key, value) => setValues((current) => ({ ...current, [key]: value }));
+  const run = async (action) => {
+    setError("");
+    setMessage("");
+    try {
+      await action();
+    } catch (caught) {
+      setError(
+        caught instanceof Error ? caught.message : "The campaign could not be updated. Try again."
+      );
+    }
+  };
+  const save = async () => {
+    if (!formRef.current?.reportValidity()) return;
+    if (!values.body.trim())
+      throw new Error("Write an email body before saving.");
+    const data = {
+      ...values,
+      replyTo: values.replyTo || void 0,
+      tags: values.tags?.map((tag) => tag.trim()).filter(Boolean)
+    };
+    if (campaign) {
+      await update.mutateAsync({
+        id: campaign.id,
+        data: { ...data, replyTo: values.replyTo || null }
+      });
+      return campaign.id;
+    }
+    const created = await create.mutateAsync(data);
+    await navigate(`newsletter/campaigns/${created.id}`);
+    return created.id;
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    void run(async () => {
+      await save();
+      setMessage("Campaign saved");
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    NewsletterPage,
+    {
+      title: campaign ? campaign.subject : "New campaign",
+      description: "A clear subject, a useful message, and the right audience.",
+      action: campaign && /* @__PURE__ */ jsx(PermissionAccess, { permission: newsletterPermissions.analytics.read(), children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: resolve(`newsletter/campaigns/${campaign.id}/stats`).href,
+          children: "View results"
+        }
+      ) }) }),
+      children: [
+        source && plugins?.blog && /* @__PURE__ */ jsx(
+          BlogCampaignSource,
+          {
+            slug: source.slug,
+            postId: source.id,
+            onLoad: loadSource
+          }
+        ),
+        campaign && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx(Status, { value: campaign.status }),
+          campaign.scheduledAt && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "Scheduled for ",
+            new Date(campaign.scheduledAt).toLocaleString()
+          ] }),
+          readOnly && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "This campaign is ",
+            campaign.status,
+            ". Its content can no longer be edited."
+          ] })
+        ] }),
+        message && /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm", children: message }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            ref: formRef,
+            onSubmit: submit,
+            className: "grid min-w-0 gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(260px,1fr)]",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-5", children: [
+                /* @__PURE__ */ jsx(Field, { id: `${id}-subject`, label: "Subject", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `${id}-subject`,
+                    required: true,
+                    maxLength: 500,
+                    value: values.subject,
+                    readOnly: readOnly || pending,
+                    onChange: (e) => change("subject", e.target.value),
+                    className: "min-h-12 text-lg",
+                    placeholder: "What should your readers know?"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [
+                    /* @__PURE__ */ jsx("label", { htmlFor: `${id}-body`, className: "text-sm font-medium", children: "Email body" }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "flex flex-wrap gap-1",
+                        role: "group",
+                        "aria-label": "Email editor mode",
+                        inert: pending,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              size: "sm",
+                              variant: mode === "markdown" ? "secondary" : "ghost",
+                              "aria-pressed": mode === "markdown",
+                              onClick: () => setMode("markdown"),
+                              children: values.format === "html" ? "HTML" : "Markdown"
+                            }
+                          ),
+                          values.format !== "html" && !readOnly && /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              size: "sm",
+                              variant: mode === "rich" ? "secondary" : "ghost",
+                              "aria-pressed": mode === "rich",
+                              onClick: () => setMode("rich"),
+                              children: "Rich text"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              size: "sm",
+                              variant: mode === "preview" ? "secondary" : "ghost",
+                              "aria-pressed": mode === "preview",
+                              onClick: () => setMode("preview"),
+                              children: "Preview"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  mode === "markdown" ? /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: `${id}-body`,
+                      rows: 20,
+                      value: values.body,
+                      readOnly: readOnly || pending,
+                      onChange: (e) => change("body", e.target.value),
+                      placeholder: "Write your newsletter\u2026",
+                      className: "min-h-[420px] resize-y leading-relaxed"
+                    }
+                  ) : mode === "rich" ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "min-h-[420px] rounded-lg border",
+                      role: "group",
+                      "aria-label": "Email body rich text editor",
+                      inert: pending,
+                      children: /* @__PURE__ */ jsx(
+                        MarkdownEditor,
+                        {
+                          value: values.body,
+                          onChange: (body) => change("body", body),
+                          uploadImage
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "min-h-[420px] overflow-hidden rounded-lg border bg-background p-5",
+                      "aria-label": "Email preview",
+                      children: [
+                        values.format === "html" ? /* @__PURE__ */ jsx(
+                          "iframe",
+                          {
+                            title: "Email preview",
+                            sandbox: "",
+                            srcDoc: values.body,
+                            className: "h-[420px] w-full"
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          NewsletterMarkdownPreview,
+                          {
+                            markdown: values.body || "Your email preview will appear here."
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("p", { className: "mt-8 border-t pt-4 text-xs text-muted-foreground", children: "An unsubscribe link is added automatically to each subscriber's email." })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("aside", { className: "min-w-0 space-y-6", children: [
+                /* @__PURE__ */ jsxs("fieldset", { disabled: readOnly || pending, className: "space-y-4", children: [
+                  /* @__PURE__ */ jsx("legend", { className: "mb-4 text-lg font-medium", children: "Sender and audience" }),
+                  /* @__PURE__ */ jsx(Field, { id: `${id}-from-name`, label: "From name", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: `${id}-from-name`,
+                      required: true,
+                      maxLength: 200,
+                      value: values.fromName,
+                      onChange: (e) => change("fromName", e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Field, { id: `${id}-from-email`, label: "From email", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: `${id}-from-email`,
+                      required: true,
+                      type: "email",
+                      value: values.fromEmail,
+                      onChange: (e) => change("fromEmail", e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Field, { id: `${id}-reply-to`, label: "Reply-to", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: `${id}-reply-to`,
+                      type: "email",
+                      value: values.replyTo ?? "",
+                      onChange: (e) => change("replyTo", e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    Field,
+                    {
+                      id: `${id}-tags`,
+                      label: "Audience tags",
+                      hint: "Leave empty to reach all subscribed readers. Separate tags with commas; readers matching any tag are included.",
+                      children: /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          id: `${id}-tags`,
+                          value: values.tags?.join(", ") ?? "",
+                          onChange: (e) => change(
+                            "tags",
+                            e.target.value.split(",").map((tag) => tag.trim())
+                          ),
+                          onBlur: () => change("tags", values.tags?.filter(Boolean))
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field, { id: `${id}-format`, label: "Body format", children: /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: `${id}-format`,
+                      className: selectClass,
+                      value: values.format ?? "markdown",
+                      onChange: (e) => {
+                        change("format", e.target.value);
+                        setMode("markdown");
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "markdown", children: "Markdown" }),
+                        /* @__PURE__ */ jsx("option", { value: "html", children: "HTML" })
+                      ]
+                    }
+                  ) })
+                ] }),
+                !readOnly && /* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", disabled: pending, children: pending ? "Saving\u2026" : "Save draft" })
+              ] })
+            ]
+          }
+        ),
+        campaign && !readOnly && /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": "Campaign delivery",
+            className: "grid gap-6 border-t pt-8 md:grid-cols-3",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Send a test" }),
+                /* @__PURE__ */ jsx(Field, { id: `${id}-test`, label: "Test email address", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `${id}-test`,
+                    type: "email",
+                    value: testEmail,
+                    onChange: (e) => setTestEmail(e.target.value)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  PermissionAccess,
+                  {
+                    permission: newsletterPermissions.campaign.test({
+                      campaignId: campaign.id,
+                      status: campaign.status
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        disabled: pending || !testEmail,
+                        onClick: () => void run(async () => {
+                          const saved = await save();
+                          if (!saved) return;
+                          await test.mutateAsync({ id: saved, email: testEmail });
+                          setMessage("Test email sent");
+                        }),
+                        children: "Send test email"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Schedule delivery" }),
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    id: `${id}-schedule`,
+                    label: "Scheduled send time",
+                    hint: "Uses your local time zone.",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: `${id}-schedule`,
+                        type: "datetime-local",
+                        value: scheduledAt,
+                        onChange: (e) => setScheduledAt(e.target.value)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  PermissionAccess,
+                  {
+                    permission: newsletterPermissions.campaign.schedule({
+                      campaignId: campaign.id,
+                      status: campaign.status
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        disabled: pending || !scheduledAt,
+                        onClick: () => void run(async () => {
+                          const date = new Date(scheduledAt);
+                          if (!Number.isFinite(date.getTime()) || date.getTime() <= Date.now())
+                            throw new Error(
+                              "Choose a scheduled send time in the future."
+                            );
+                          const saved = await save();
+                          if (!saved) return;
+                          await schedule.mutateAsync({
+                            id: saved,
+                            scheduledAt: date.toISOString()
+                          });
+                          setMessage("Campaign scheduled");
+                        }),
+                        children: "Schedule campaign"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Ready to send?" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Only subscribed, confirmed readers in your audience receive this email." }),
+                /* @__PURE__ */ jsx(
+                  PermissionAccess,
+                  {
+                    permission: newsletterPermissions.campaign.send({
+                      campaignId: campaign.id,
+                      status: campaign.status
+                    }),
+                    children: /* @__PURE__ */ jsxs(AlertDialog, { children: [
+                      /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { disabled: pending, children: "Send campaign" }) }),
+                      /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+                        /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                          /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Send this campaign now?" }),
+                          /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+                            "This sends your message to all eligible subscribers",
+                            values.tags?.filter(Boolean).length ? ` matching ${values.tags.filter(Boolean).join(", ")}` : "",
+                            ". Sent emails cannot be recalled."
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                          /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
+                          /* @__PURE__ */ jsx(
+                            AlertDialogAction,
+                            {
+                              onClick: () => void run(async () => {
+                                const saved = await save();
+                                if (!saved) return;
+                                await send.mutateAsync(saved);
+                                setMessage("Campaign sent");
+                              }),
+                              children: "Send now"
+                            }
+                          )
+                        ] })
+                      ] })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        campaign && canDelete && /* @__PURE__ */ jsx("div", { className: "border-t pt-6", children: /* @__PURE__ */ jsx(
+          PermissionAccess,
+          {
+            permission: newsletterPermissions.campaign.delete({
+              campaignId: campaign.id,
+              status: campaign.status
+            }),
+            children: /* @__PURE__ */ jsxs(AlertDialog, { children: [
+              /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: pending, children: campaign.status === "scheduled" ? "Delete scheduled campaign" : "Delete draft" }) }),
+              /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+                /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                  /* @__PURE__ */ jsx(AlertDialogTitle, { children: campaign.status === "scheduled" ? "Delete scheduled campaign?" : "Delete campaign draft?" }),
+                  /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+                    "\u201C",
+                    campaign.subject,
+                    "\u201D and its content will be removed.",
+                    campaign.status === "scheduled" && " Deleting this campaign cancels its scheduled delivery."
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                  /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
+                  /* @__PURE__ */ jsx(
+                    AlertDialogAction,
+                    {
+                      onClick: () => void run(async () => {
+                        await remove.mutateAsync(campaign.id);
+                        await navigate("newsletter/campaigns");
+                      }),
+                      children: "Delete campaign"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { EditCampaignPage };