@carlonicora/nextjs-jsonapi 5.2.0 → 5.4.0

package/src/features/email-automation/components/containers/EmailAutomationContainer.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../components";
+import { SharedProvider } from "../../../../contexts/SharedContext";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { BreadcrumbItemData } from "../../../../interfaces";
+import { EmailAutomationProvider, useEmailAutomation } from "../../contexts/EmailAutomationContext";
+import { EmailAutomationActiveSwitch } from "../canvas/EmailAutomationActiveSwitch";
+import { EmailAutomationCanvasTab } from "../canvas/EmailAutomationCanvasTab";
+import { EmailAutomationEditor } from "../forms/EmailAutomationEditor";
+import { EmailAutomationRecipientsList } from "../lists/EmailAutomationRecipientsList";
+
+export type EmailAutomationContainerProps = {
+  automationId: string;
+};
+
+export function EmailAutomationContainer({ automationId }: EmailAutomationContainerProps) {
+  return (
+    <EmailAutomationProvider automationId={automationId}>
+      <EmailAutomationShell />
+    </EmailAutomationProvider>
+  );
+}
+
+function EmailAutomationShell() {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { automation, reload } = useEmailAutomation();
+
+  if (!automation) return null;
+
+  const breadcrumbs: BreadcrumbItemData[] = [
+    { name: t("emailAutomations.admin.title"), href: generateUrl({ page: Modules.EmailAutomation }) },
+    { name: automation.name },
+  ];
+
+  // The page chrome (title + header functions) is published here rather than by
+  // AdministrationProvider: SharedProvider replaces its value for the subtree,
+  // so this one carries the administration title type plus the automation name.
+  return (
+    <SharedProvider
+      value={{
+        breadcrumbs,
+        title: {
+          type: t("emailAutomations.admin.title"),
+          element: automation.name,
+          functions: [
+            <EmailAutomationActiveSwitch key="emailAutomationActiveSwitch" />,
+            <EmailAutomationEditor key="emailAutomationEditor" automation={automation} onSuccess={reload} />,
+          ],
+        },
+      }}
+    >
+      <RoundPageContainer
+        module={Modules.EmailAutomation}
+        id={automation.id}
+        fullWidth
+        forceHeader
+        // The canvas is sized h-full: it needs the viewport-bound shell and a
+        // fillHeight tab, or it resolves to zero height.
+        scroll="fixed"
+        tabs={[
+          {
+            sectionKey: "canvas",
+            label: t("emailAutomations.tabs.canvas"),
+            content: <EmailAutomationCanvasTab />,
+            fillHeight: true,
+          },
+          {
+            sectionKey: "recipients",
+            label: t("emailAutomations.tabs.recipients"),
+            content: <EmailAutomationRecipientsList />,
+          },
+        ]}
+      />
+    </SharedProvider>
+  );
+}

package/src/features/email-automation/components/containers/EmailAutomationsListContainer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { AdministrationProvider } from "../../../administration/contexts/AdministrationContext";
+import { EmailAutomationsList } from "../lists/EmailAutomationsList";
+
+/**
+ * Page container for the administrative email-automation list.
+ *
+ * Client component by necessity: `module={Modules.EmailAutomation}` is a
+ * registry entry carrying an icon component and methods, which a Server
+ * Component cannot pass across the boundary. Routes mount this container
+ * instead — the same shape as every other list page.
+ *
+ * No `forceHeader`: ContentListTable draws its own header row with the title
+ * and the create action, exactly as the company and user list pages do.
+ */
+export function EmailAutomationsListContainer() {
+  return (
+    <AdministrationProvider>
+      <RoundPageContainer module={Modules.EmailAutomation} fullWidth>
+        <EmailAutomationsList fullWidth />
+      </RoundPageContainer>
+    </AdministrationProvider>
+  );
+}

package/src/features/email-automation/components/forms/EmailAutomationEditor.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { EditorSheet, FormInput, FormSelect, FormSwitch } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useI18nRouter } from "../../../../i18n";
+import { EmailAutomationInput, EmailAutomationInterface } from "../../data/EmailAutomationInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+import { EmailAutomationTriggerInterface } from "../../data/EmailAutomationTriggerInterface";
+
+export type EmailAutomationEditorProps = {
+  automation?: EmailAutomationInterface;
+  propagateChanges?: (automation: EmailAutomationInterface) => void;
+  onSuccess?: () => void | Promise<void>;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+function EmailAutomationEditorInternal({
+  automation,
+  propagateChanges,
+  onSuccess,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: EmailAutomationEditorProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const isEdit = !!automation;
+  const [triggers, setTriggers] = useState<EmailAutomationTriggerInterface[]>([]);
+
+  // Trigger labels are plain strings from the app config, not i18n keys.
+  useEffect(() => {
+    let active = true;
+    EmailAutomationService.findTriggers()
+      .then((list) => {
+        if (active) setTriggers(list);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const triggerValues = useMemo(() => triggers.map((entry) => ({ id: entry.key, text: entry.label })), [triggers]);
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        name: z.string().min(1, { message: t("emailAutomations.fields.name.error") }),
+        trigger: z.string().optional(),
+        exitTrigger: z.string().optional(),
+        replyTo: z.string().refine((value) => value === "" || z.email().safeParse(value).success, {
+          message: t("emailAutomations.fields.replyTo.error"),
+        }),
+        isActive: z.boolean(),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: automation?.id ?? v4(),
+      name: automation?.name ?? "",
+      trigger: automation?.trigger ?? "",
+      exitTrigger: automation?.exitTrigger ?? "",
+      replyTo: automation?.replyTo ?? "",
+      isActive: automation?.isActive ?? false,
+    }),
+    [automation],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("emailAutomations.admin.title")}
+      entityName={automation?.name}
+      title={isEdit ? t("emailAutomations.admin.editAutomation") : t("emailAutomations.admin.newAutomation")}
+      isEdit={isEdit}
+      module={Modules.EmailAutomation}
+      size="md"
+      propagateChanges={propagateChanges}
+      onSuccess={onSuccess}
+      onNavigate={(url) => router.push(url)}
+      onSubmit={async (values) => {
+        const payload: EmailAutomationInput = {
+          id: values.id,
+          name: values.name,
+          trigger: values.trigger || undefined,
+          exitTrigger: values.exitTrigger || undefined,
+          replyTo: values.replyTo || undefined,
+          isActive: values.isActive,
+        };
+        return isEdit ? await EmailAutomationService.update(payload) : await EmailAutomationService.create(payload);
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput form={form} id="name" name={t("emailAutomations.fields.name.label")} isRequired />
+        <FormSelect
+          form={form}
+          id="trigger"
+          name={t("emailAutomations.fields.trigger.label")}
+          placeholder={t("emailAutomations.fields.trigger.none")}
+          values={triggerValues}
+          allowEmpty
+        />
+        <FormSelect
+          form={form}
+          id="exitTrigger"
+          name={t("emailAutomations.fields.exitTrigger.label")}
+          placeholder={t("emailAutomations.fields.trigger.none")}
+          values={triggerValues}
+          allowEmpty
+        />
+        <FormInput form={form} id="replyTo" name={t("emailAutomations.fields.replyTo.label")} />
+        <FormSwitch
+          form={form}
+          id="isActive"
+          name={t("emailAutomations.fields.isActive.label")}
+          description={t("emailAutomations.fields.isActive.help")}
+        />
+      </div>
+    </EditorSheet>
+  );
+}
+
+export function EmailAutomationEditor(props: EmailAutomationEditorProps) {
+  return <EmailAutomationEditorInternal {...props} />;
+}
+
+export default EmailAutomationEditor;

package/src/features/email-automation/components/forms/EmailStepEditor.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { EditorSheet, FormInput, FormTextarea } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useEmailAutomation } from "../../contexts/EmailAutomationContext";
+import { EmailAutomationStepInput, EmailAutomationStepInterface } from "../../data/EmailAutomationStepInterface";
+import { EmailAutomationStepService } from "../../data/EmailAutomationStepService";
+
+/** The fixed variable set the renderer fills (spec § "Rendering"). */
+const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeUrl}}", "{{unsubscribeAllUrl}}"];
+
+export type EmailStepEditorProps = {
+  step?: EmailAutomationStepInterface;
+  automationId: string;
+  /** Canvas position for a step created from the editor. */
+  initialPosition?: { x: number; y: number };
+  /** The head step's delay counts from entering the automation, not from a previous email. */
+  isHead?: boolean;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+  onSuccess?: () => void | Promise<void>;
+};
+
+function EmailStepEditorInternal({
+  step,
+  automationId,
+  initialPosition,
+  isHead,
+  trigger,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+  onSuccess,
+}: EmailStepEditorProps) {
+  const t = useTranslations();
+  const { reload } = useEmailAutomation();
+  const isEdit = !!step;
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        subject: z.string().min(1, { message: t("emailAutomations.step.fields.subject.error") }),
+        delayHours: z.number().int().min(0),
+        body: z.string().min(1, { message: t("emailAutomations.step.fields.body.error") }),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: step?.id ?? v4(),
+      subject: step?.subject ?? "",
+      delayHours: step?.delayHours ?? 24,
+      body: step?.body ?? "",
+    }),
+    [step],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t("emailAutomations.step.title")}
+      entityName={step?.subject}
+      title={isEdit ? t("emailAutomations.step.editTitle") : t("emailAutomations.step.title")}
+      isEdit={isEdit}
+      module={Modules.EmailAutomationStep}
+      size="lg"
+      onSubmit={async (values) => {
+        const payload: EmailAutomationStepInput = {
+          id: values.id,
+          automationId,
+          subject: values.subject,
+          body: values.body,
+          delayHours: values.delayHours,
+          positionX: step ? step.positionX : initialPosition?.x,
+          positionY: step ? step.positionY : initialPosition?.y,
+        };
+        return isEdit
+          ? await EmailAutomationStepService.update(payload)
+          : await EmailAutomationStepService.create(payload);
+      }}
+      // Save → reload the canvas, then whatever the caller adds.
+      onSuccess={async () => {
+        await reload();
+        await onSuccess?.();
+      }}
+      onReset={getDefaultValues}
+      trigger={trigger}
+      forceShow={forceShow}
+      onClose={onClose}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput form={form} id="subject" name={t("emailAutomations.step.fields.subject.label")} isRequired />
+        <FormInput
+          form={form}
+          id="delayHours"
+          type="number"
+          name={t("emailAutomations.step.fields.delayHours.label")}
+          description={
+            isHead ? t("emailAutomations.canvas.hoursAfterEntering") : t("emailAutomations.canvas.hoursAfterPrevious")
+          }
+        />
+        {/* FormTextarea has no `rows` prop; min-h-72 is the height of ~14 rows. */}
+        <FormTextarea
+          form={form}
+          id="body"
+          name={t("emailAutomations.step.fields.body.label")}
+          className="min-h-72"
+          isRequired
+          description={
+            <>
+              <span className="block">
+                {t("emailAutomations.step.variablesHint")}{" "}
+                {TEMPLATE_VARIABLES.map((variable) => (
+                  <span key={variable} className="me-2 text-foreground">
+                    {variable}
+                  </span>
+                ))}
+              </span>
+              <span className="mt-1 block">{t("emailAutomations.step.unsubscribeHint")}</span>
+            </>
+          }
+        />
+      </div>
+    </EditorSheet>
+  );
+}
+
+export function EmailStepEditor(props: EmailStepEditorProps) {
+  return <EmailStepEditorInternal {...props} />;
+}
+
+export default EmailStepEditor;

package/src/features/email-automation/components/index.ts

@@ -0,0 +1,15 @@
+export * from "./containers/EmailAutomationsListContainer";
+export * from "./containers/EmailAutomationContainer";
+export * from "./lists/EmailAutomationsList";
+export * from "./lists/EmailAutomationRecipientsList";
+export * from "./forms/EmailAutomationEditor";
+export * from "./forms/EmailStepEditor";
+export * from "./canvas/EmailAutomationActiveSwitch";
+export * from "./canvas/EmailAutomationCanvasTab";
+export * from "./canvas/EmailAutomationCanvas";
+export * from "./canvas/EmailAutomationCanvasInspector";
+export * from "./canvas/nodes/TriggerNode";
+export * from "./canvas/nodes/EmailStepNode";
+export * from "./canvas/edges/DelayEdge";
+export * from "./canvas/buildCanvasGraph";
+export * from "./unsubscribe/EmailUnsubscribe";

package/src/features/email-automation/components/lists/EmailAutomationRecipientsList.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { RefreshCw } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../shadcnui";
+import { useEmailAutomation } from "../../contexts/EmailAutomationContext";
+import { EmailAutomationEnrollmentFields } from "../../data/email-automation-enrollment.fields";
+import { EmailAutomationEnrollmentInterface } from "../../data/EmailAutomationEnrollmentInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+
+/**
+ * Read-only list of the people in this automation (owner decision 6: no row
+ * actions). Rendered inside a tab, so it keeps its own bordered card (no
+ * `fullWidth`), as PricesList does inside ProductContainer.
+ */
+export function EmailAutomationRecipientsList() {
+  const t = useTranslations();
+  const { automation } = useEmailAutomation();
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const data: DataListRetriever<EmailAutomationEnrollmentInterface> = useDataListRetriever({
+    retriever: (params) => EmailAutomationService.findEnrollments(params),
+    retrieverParams: { automationId: automation?.id },
+    module: Modules.EmailAutomationEnrollment,
+  });
+
+  const handleStatusChange = (value: string | null) => {
+    const status = value ?? "all";
+    setStatusFilter(status);
+    data.addAdditionalParameter("status", status === "all" ? null : status);
+  };
+
+  const statusItems = useMemo(
+    () => ({
+      all: t("emailAutomations.recipients.status.all"),
+      active: t("emailAutomations.recipients.status.active"),
+      completed: t("emailAutomations.recipients.status.completed"),
+      unsubscribed: t("emailAutomations.recipients.status.unsubscribed"),
+      exited: t("emailAutomations.recipients.status.exited"),
+      failed: t("emailAutomations.recipients.status.failed"),
+    }),
+    [t],
+  );
+
+  const filters = (
+    <div className="flex items-center gap-4">
+      <Select items={statusItems} value={statusFilter} onValueChange={handleStatusChange}>
+        <SelectTrigger className="w-40">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t("emailAutomations.recipients.status.all")}</SelectItem>
+          <SelectItem value="active">{t("emailAutomations.recipients.status.active")}</SelectItem>
+          <SelectItem value="completed">{t("emailAutomations.recipients.status.completed")}</SelectItem>
+          <SelectItem value="unsubscribed">{t("emailAutomations.recipients.status.unsubscribed")}</SelectItem>
+          <SelectItem value="exited">{t("emailAutomations.recipients.status.exited")}</SelectItem>
+          <SelectItem value="failed">{t("emailAutomations.recipients.status.failed")}</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Button variant="outline" size="icon" onClick={() => void data.refresh()} disabled={!data.isLoaded}>
+        <RefreshCw className={`h-4 w-4 ${!data.isLoaded ? "animate-spin" : ""}`} />
+      </Button>
+    </div>
+  );
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        EmailAutomationEnrollmentFields.email,
+        EmailAutomationEnrollmentFields.name,
+        EmailAutomationEnrollmentFields.status,
+        EmailAutomationEnrollmentFields.currentStep,
+        EmailAutomationEnrollmentFields.nextSendAt,
+        EmailAutomationEnrollmentFields.sentCount,
+      ]}
+      tableGeneratorType={Modules.EmailAutomationEnrollment}
+      filters={filters}
+      /* The enrolments endpoint takes no search term, so rendering the box would
+         give the page a control that silently does nothing. */
+      allowSearch={false}
+      emptyState={t("emailAutomations.recipients.empty")}
+    />
+  );
+}

package/src/features/email-automation/components/lists/EmailAutomationsList.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { EmptyState } from "../../../../shadcnui";
+import { EmailAutomationFields } from "../../data/email-automation.fields";
+import { EmailAutomationInterface } from "../../data/EmailAutomationInterface";
+import { EmailAutomationService } from "../../data/EmailAutomationService";
+import { EmailAutomationTriggerInterface } from "../../data/EmailAutomationTriggerInterface";
+import EmailAutomationEditor from "../forms/EmailAutomationEditor";
+
+type EmailAutomationsListProps = {
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell.
+   */
+  fullWidth?: boolean;
+};
+
+export function EmailAutomationsList({ fullWidth }: EmailAutomationsListProps = {}) {
+  const t = useTranslations();
+  const [triggers, setTriggers] = useState<EmailAutomationTriggerInterface[]>([]);
+
+  const data: DataListRetriever<EmailAutomationInterface> = useDataListRetriever({
+    retriever: (params) => EmailAutomationService.findMany(params),
+    retrieverParams: {},
+    module: Modules.EmailAutomation,
+  });
+
+  // The trigger column shows the label the app declares, not the stored key.
+  useEffect(() => {
+    let active = true;
+    EmailAutomationService.findTriggers()
+      .then((list) => {
+        if (active) setTriggers(list);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const triggerLabels = useMemo(
+    () => Object.fromEntries(triggers.map((trigger) => [trigger.key, trigger.label])),
+    [triggers],
+  );
+
+  const functions: ReactNode[] = [<EmailAutomationEditor key="create-email-automation" />];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        EmailAutomationFields.name,
+        EmailAutomationFields.trigger,
+        EmailAutomationFields.status,
+        EmailAutomationFields.steps,
+        EmailAutomationFields.active,
+        EmailAutomationFields.completed,
+        EmailAutomationFields.unsubscribed,
+      ]}
+      tableGeneratorType={Modules.EmailAutomation}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("emailAutomations.admin.title")}
+      context={{ triggerLabels }}
+      emptyState={<EmptyState icon={MailIcon} title={t("emailAutomations.admin.empty")} />}
+    />
+  );
+}