feat: add preheader field to campaign form and email delivery

zcesur · zcesur · commit 8e8b100f6fd8 · 2025-04-16T13:45:16.000+03:00
diff --git a/lib/algora/activities/jobs/send_campaign_email.ex b/lib/algora/activities/jobs/send_campaign_email.ex
@@ -17,7 +17,8 @@ defmodule Algora.Activities.Jobs.SendCampaignEmail do
           "recipient" => encoded_recipient,
           "template_params" => encoded_template_params,
           "from_name" => from_name,
-          "from_email" => from_email
+          "from_email" => from_email,
+          "preheader" => preheader
         }
       }) do
     recipient = Algora.Util.base64_to_term!(encoded_recipient)
@@ -29,7 +30,7 @@ defmodule Algora.Activities.Jobs.SendCampaignEmail do
          {:ok, _owner} <- Workspace.ensure_user(token, recipient["repo_owner"]),
          {:ok, _contributors} <- Workspace.ensure_contributors(token, repo),
          {:ok, _languages} <- Workspace.ensure_repo_tech_stack(token, repo) do
-      CampaignLive.deliver_email(recipient, subject, template_params, from)
+      CampaignLive.deliver_email(recipient, subject, template_params, from, preheader: preheader)
     end
   end
 end
diff --git a/lib/algora/mailer.ex b/lib/algora/mailer.ex
@@ -22,7 +22,7 @@ defmodule Algora.Mailer do
     end
   end
 
-  def html_template(template_params) do
+  def html_template(template_params, opts \\ []) do
     """
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
@@ -37,6 +37,9 @@ defmodule Algora.Mailer do
         </xml><![endif]-->
       </head>
       <body style="margin: 0; padding: 0; min-width: 100%; background-color: #ffffff;">
+        <div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">
+          #{opts[:preheader]}
+        </div>
         <div style="background-color: #ffffff; box-sizing: border-box; display: block; padding: 0;">
           <table cellpadding="0" cellspacing="0" width="100%">
             <tr>
diff --git a/lib/algora_web/live/admin/campaign_live.ex b/lib/algora_web/live/admin/campaign_live.ex
@@ -23,11 +23,12 @@ defmodule AlgoraWeb.Admin.CampaignLive do
       field :csv, :string
       field :from_name, :string
       field :from_email, :string
+      field :preheader, :string
     end
 
     def changeset(campaign, attrs \\ %{}) do
       campaign
-      |> cast(attrs, [:subject, :template, :csv, :from_name, :from_email])
+      |> cast(attrs, [:subject, :template, :csv, :from_name, :from_email, :preheader])
       |> validate_required([:subject, :template, :csv, :from_name, :from_email])
       |> validate_length(:subject, min: 1)
       |> validate_length(:template, min: 1)
@@ -86,8 +87,9 @@ defmodule AlgoraWeb.Admin.CampaignLive do
     template = get_change(socket.assigns.form.source, :template)
     from_name = get_change(socket.assigns.form.source, :from_name)
     from_email = get_change(socket.assigns.form.source, :from_email)
+    preheader = get_change(socket.assigns.form.source, :preheader)
 
-    case enqueue_emails(recipients, subject, template, from_name, from_email) do
+    case enqueue_emails(recipients, subject, template, from_name, from_email, preheader) do
       {:ok, _} ->
         {:noreply, put_flash(socket, :info, "Enqueued #{length(recipients)} emails for sending")}
 
@@ -119,6 +121,12 @@ defmodule AlgoraWeb.Admin.CampaignLive do
                 <.input type="email" field={@form[:from_email]} label="From Email" />
               </div>
               <.input type="text" field={@form[:subject]} label="Subject" />
+              <.input
+                type="text"
+                field={@form[:preheader]}
+                label="Preheader"
+                helptext="A short summary that appears after the subject line in email clients"
+              />
 
               <.input
                 type="textarea"
@@ -137,6 +145,10 @@ defmodule AlgoraWeb.Admin.CampaignLive do
                     <dt class="font-bold">Subject:</dt>
                     <dd>{get_change(@form.source, :subject)}</dd>
                   </div>
+                  <div class="flex gap-1">
+                    <dt class="font-bold">Preheader:</dt>
+                    <dd class="line-clamp-1">{get_change(@form.source, :preheader)}</dd>
+                  </div>
                   <div class="flex gap-1">
                     <dt class="font-bold">From:</dt>
                     <dd>
@@ -284,10 +296,11 @@ defmodule AlgoraWeb.Admin.CampaignLive do
           subject :: String.t(),
           template :: String.t(),
           from_name :: String.t(),
-          from_email :: String.t()
+          from_email :: String.t(),
+          preheader :: String.t()
         ) ::
           {:ok, term} | {:error, term}
-  def enqueue_emails(recipients, subject, template, from_name, from_email) do
+  def enqueue_emails(recipients, subject, template, from_name, from_email, preheader) do
     Repo.transact(fn _ ->
       recipients
       |> Enum.map(fn recipient ->
@@ -306,7 +319,8 @@ defmodule AlgoraWeb.Admin.CampaignLive do
           recipient: Algora.Util.term_to_base64(recipient),
           template_params: Algora.Util.term_to_base64(template_params),
           from_name: from_name,
-          from_email: from_email
+          from_email: from_email,
+          preheader: preheader
         }
       end)
       |> Enum.with_index()
@@ -323,35 +337,43 @@ defmodule AlgoraWeb.Admin.CampaignLive do
           recipient :: map(),
           subject :: String.t(),
           template_params :: Keyword.t(),
-          from :: {String.t(), String.t()}
+          from :: {String.t(), String.t()},
+          opts :: Keyword.t()
         ) ::
           {:ok, term} | {:error, term}
-  def deliver_email(recipient, subject, template_params, from) do
+  def deliver_email(recipient, subject, template_params, from, opts \\ []) do
     case :get
          |> Finch.build("https://algora.io/og/go/#{recipient["repo_owner"]}/#{recipient["repo_name"]}")
          |> Finch.request(Algora.Finch) do
       {:ok, %Finch.Response{status: status, body: body}} when status in 200..299 ->
-        deliver(recipient["email"], subject, template_params, from, [
-          Swoosh.Attachment.new({:data, body},
-            filename: "#{recipient["repo_owner"]}.png",
-            content_type: "image/png",
-            type: :inline
-          )
-        ])
+        deliver(
+          recipient["email"],
+          subject,
+          template_params,
+          from,
+          [
+            Swoosh.Attachment.new({:data, body},
+              filename: "#{recipient["repo_owner"]}.png",
+              content_type: "image/png",
+              type: :inline
+            )
+          ],
+          opts
+        )
 
       {:error, reason} ->
         raise reason
     end
   end
 
-  defp deliver(to, subject, template_params, from, attachments) do
+  defp deliver(to, subject, template_params, from, attachments, opts \\ []) do
     email =
       Email.new()
       |> Email.to(to)
       |> Email.from(from)
       |> Email.subject(subject)
       |> Email.text_body(Mailer.text_template(template_params))
-      |> Email.html_body(Mailer.html_template(template_params))
+      |> Email.html_body(Mailer.html_template(template_params, preheader: opts[:preheader]))
 
     email = Enum.reduce(attachments, email, fn attachment, acc -> Email.attachment(acc, attachment) end)
 
