@carlonicora/nextjs-jsonapi 6.14.1 → 6.16.0

package/src/features/email-blast/components/forms/EmailBlastEditor.tsx

@@ -6,14 +6,17 @@ 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 { EditorSheet, FormInput, FormSelect, FormTextarea } from "../../../../components";
 import { Modules } from "../../../../core";
 import { useI18nRouter } from "../../../../i18n";
+import { EmailPurpose } from "../../../email-automation/data/EmailPurpose";
 import { EmailBlastInput, EmailBlastInterface } from "../../data/EmailBlastInterface";
 import { EmailBlastService } from "../../data/EmailBlastService";
 
 /** The fixed variable set the blast renderer fills. */
-const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}", "{{unsubscribeAllUrl}}"];
+const TEMPLATE_VARIABLES = ["{{name}}", "{{email}}", "{{url}}"];
+/** Only a Marketing blast fills it: a Service blast carries no unsubscribe link. */
+const MARKETING_ONLY_VARIABLES = ["{{unsubscribeAllUrl}}"];
 
 export type EmailBlastEditorProps = {
   blast?: EmailBlastInterface;
@@ -49,6 +52,7 @@ function EmailBlastEditorInternal({
         replyTo: z.string().refine((value) => value === "" || z.email().safeParse(value).success, {
           message: t("emailBlasts.editor.fields.replyTo.error"),
         }),
+        purpose: z.enum(["service", "marketing"], { message: t("emailPurpose.error") }),
       }),
     [t],
   );
@@ -59,6 +63,8 @@ function EmailBlastEditorInternal({
       subject: blast?.subject ?? "",
       body: blast?.body ?? "",
       replyTo: blast?.replyTo ?? "",
+      // No preselected value on create: the form refuses to save without a choice.
+      purpose: (blast?.purpose ?? "") as EmailPurpose,
     }),
     [blast],
   );
@@ -68,6 +74,17 @@ function EmailBlastEditorInternal({
     defaultValues: getDefaultValues(),
   });
 
+  const purpose = form.watch("purpose");
+  const templateVariables =
+    purpose === "service" ? TEMPLATE_VARIABLES : [...TEMPLATE_VARIABLES, ...MARKETING_ONLY_VARIABLES];
+  const purposeValues = useMemo(
+    () => [
+      { id: "service", text: t("emailPurpose.service") },
+      { id: "marketing", text: t("emailPurpose.marketing") },
+    ],
+    [t],
+  );
+
   return (
     <EditorSheet
       form={form}
@@ -86,6 +103,7 @@ function EmailBlastEditorInternal({
           subject: values.subject,
           body: values.body,
           replyTo: values.replyTo || undefined,
+          purpose: values.purpose,
         };
         return isEdit ? await EmailBlastService.update(payload) : await EmailBlastService.create(payload);
       }}
@@ -98,6 +116,15 @@ function EmailBlastEditorInternal({
     >
       <div className="flex w-full flex-col gap-y-4">
         <FormInput form={form} id="subject" name={t("emailBlasts.editor.fields.subject.label")} isRequired />
+        <FormSelect
+          form={form}
+          id="purpose"
+          name={t("emailPurpose.label")}
+          placeholder={t("emailPurpose.placeholder")}
+          values={purposeValues}
+          description={purpose === "service" ? t("emailPurpose.serviceWarning") : undefined}
+          isRequired
+        />
         <FormInput form={form} id="replyTo" name={t("emailBlasts.editor.fields.replyTo.label")} />
         {/* FormTextarea has no `rows` prop; min-h-72 is the height of ~14 rows. */}
         <FormTextarea
@@ -110,13 +137,15 @@ function EmailBlastEditorInternal({
             <>
               <span className="block">
                 {t("emailBlasts.editor.variablesHint")}{" "}
-                {TEMPLATE_VARIABLES.map((variable) => (
+                {templateVariables.map((variable) => (
                   <span key={variable} className="me-2 text-foreground">
                     {variable}
                   </span>
                 ))}
               </span>
-              <span className="mt-1 block">{t("emailBlasts.editor.unsubscribeHint")}</span>
+              <span className="mt-1 block">
+                {purpose === "service" ? t("emailBlasts.editor.serviceHint") : t("emailBlasts.editor.unsubscribeHint")}
+              </span>
             </>
           }
         />

package/src/features/email-blast/components/lists/EmailBlastsList.tsx

@@ -41,6 +41,7 @@ export function EmailBlastsList({ fullWidth }: EmailBlastsListProps = {}) {
       data={data}
       fields={[
         EmailBlastFields.subject,
+        EmailBlastFields.purpose,
         EmailBlastFields.status,
         EmailBlastFields.sentAt,
         EmailBlastFields.sent,

package/src/features/email-blast/data/EmailBlast.ts

@@ -1,10 +1,12 @@
 import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../core";
+import { EmailPurpose } from "../../email-automation/data/EmailPurpose";
 import { EmailBlastInput, EmailBlastInterface, EmailBlastStatus } from "./EmailBlastInterface";
 
 export class EmailBlast extends AbstractApiData implements EmailBlastInterface {
   private _subject?: string;
   private _body?: string;
   private _replyTo?: string;
+  private _purpose: EmailPurpose = "marketing";
   private _status: EmailBlastStatus = "draft";
   private _sentAt?: Date;
   private _recipientCount?: number;
@@ -24,6 +26,10 @@ export class EmailBlast extends AbstractApiData implements EmailBlastInterface {
     return this._replyTo;
   }
 
+  get purpose(): EmailPurpose {
+    return this._purpose;
+  }
+
   get status(): EmailBlastStatus {
     return this._status;
   }
@@ -55,6 +61,8 @@ export class EmailBlast extends AbstractApiData implements EmailBlastInterface {
     this._subject = attributes.subject;
     this._body = attributes.body;
     this._replyTo = attributes.replyTo ?? undefined;
+    // A record saved before purpose existed counts as Marketing.
+    this._purpose = attributes.purpose === "service" ? "service" : "marketing";
     this._status = attributes.status ?? "draft";
     this._sentAt = attributes.sentAt ? new Date(attributes.sentAt) : undefined;
     this._recipientCount = attributes.recipientCount ?? undefined;
@@ -66,7 +74,7 @@ export class EmailBlast extends AbstractApiData implements EmailBlastInterface {
   }
 
   /**
-   * Only the editable text travels: status, counters and sentAt are set by the API.
+   * Only the editable text and the purpose travel: status, counters and sentAt are set by the API.
    */
   createJsonApi(data: EmailBlastInput) {
     const response: any = {
@@ -83,6 +91,7 @@ export class EmailBlast extends AbstractApiData implements EmailBlastInterface {
     if (data.subject !== undefined) response.data.attributes.subject = data.subject;
     if (data.body !== undefined) response.data.attributes.body = data.body;
     if (data.replyTo !== undefined) response.data.attributes.replyTo = data.replyTo;
+    if (data.purpose !== undefined) response.data.attributes.purpose = data.purpose;
 
     return response;
   }

package/src/features/email-blast/data/EmailBlastInterface.ts

@@ -1,4 +1,5 @@
 import { ApiDataInterface } from "../../../core";
+import { EmailPurpose } from "../../email-automation/data/EmailPurpose";
 
 export type EmailBlastStatus = "draft" | "sending" | "sent";
 
@@ -7,12 +8,14 @@ export type EmailBlastInput = {
   subject: string;
   body: string;
   replyTo?: string;
+  purpose?: EmailPurpose;
 };
 
 export interface EmailBlastInterface extends ApiDataInterface {
   get subject(): string;
   get body(): string;
   get replyTo(): string | undefined;
+  get purpose(): EmailPurpose;
   get status(): EmailBlastStatus;
   get sentAt(): Date | undefined;
   get recipientCount(): number | undefined;

package/src/features/email-blast/data/__tests__/EmailBlast.spec.ts

@@ -70,4 +70,22 @@ describe("email blast models", () => {
     expect(audience.recipientCount).toBe(42);
     expect(new EmailBlastAudience().rehydrate(hydrate({})).recipientCount).toBe(0);
   });
+  it('EmailBlast rehydrates purpose "service"', () => {
+    const blast = new EmailBlast().rehydrate(hydrate({ subject: "News", body: "Hello", purpose: "service" }));
+    expect(blast.purpose).toBe("service");
+  });
+
+  it("missing purpose rehydrates as marketing", () => {
+    expect(new EmailBlast().rehydrate(hydrate({ subject: "News", body: "Hello" })).purpose).toBe("marketing");
+    expect(new EmailBlast().rehydrate(hydrate({ subject: "News", body: "Hello", purpose: "x" })).purpose).toBe(
+      "marketing",
+    );
+  });
+
+  it("createJsonApi sends purpose when set", () => {
+    const body = new EmailBlast().createJsonApi({ id: "b1", subject: "News", body: "Hello", purpose: "service" });
+    expect(body.data.attributes.purpose).toBe("service");
+    const without = new EmailBlast().createJsonApi({ id: "b1", subject: "News", body: "Hello" });
+    expect("purpose" in without.data.attributes).toBe(false);
+  });
 });

package/src/features/email-blast/data/email-blast.fields.ts

@@ -1,5 +1,6 @@
 export enum EmailBlastFields {
   subject = "subject",
+  purpose = "purpose",
   status = "status",
   sentAt = "sentAt",
   sent = "sent",

package/src/features/email-blast/hooks/useEmailBlastTableStructure.tsx

@@ -57,6 +57,21 @@ export const useEmailBlastTableStructure: UseTableStructureHook<EmailBlastInterf
       enableSorting: false,
       enableHiding: false,
     }),
+    [EmailBlastFields.purpose]: () => ({
+      id: "purpose",
+      accessorKey: "purpose",
+      header: t("emailBlasts.list.columns.purpose"),
+      cell: ({ row }: { row: TableContent<EmailBlastInterface> }) => {
+        const blast: EmailBlastInterface = row.original.jsonApiData;
+        return blast.purpose === "service" ? (
+          <Badge variant="softBlue">{t("emailPurpose.service")}</Badge>
+        ) : (
+          <Badge variant="softGray">{t("emailPurpose.marketing")}</Badge>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
     [EmailBlastFields.status]: () => ({
       id: "status",
       accessorKey: "status",