fix: keep sender options visible and normalize source emails (#2626)

Author: baderdean

frontend/src/components/campaigns/CampaignComposerDialog.vue

@@ -66,13 +66,21 @@
           </label>
           <Select
             v-model="form.senderEmail"
-            :options="availableSenderEmails"
+            :options="senderOptions"
+            option-label="label"
+            option-value="email"
+            option-disabled="disabled"
             :loading="isLoadingSenderOptions"
             @update:model-value="markTouched('senderEmail')"
           />
           <small v-if="showFieldError('senderEmail')" class="text-red-500">
             {{ validationErrors.senderEmail }}
           </small>
+          <small v-else-if="unavailableSenderCount" class="text-amber-600">
+            {{
+              t('some_senders_unavailable', { count: unavailableSenderCount })
+            }}
+          </small>
         </div>
 
         <div class="flex flex-col gap-1 md:col-span-2">
@@ -363,7 +371,15 @@ const dialogHeader = computed(() =>
   t('send_email_campaign_with_count', { count: selectedEmails.value.length }),
 );
 
-const availableSenderEmails = ref<string[]>([]);
+type SenderOptionItem = {
+  email: string;
+  available: boolean;
+  reason?: string;
+  label: string;
+  disabled: boolean;
+};
+
+const senderOptions = ref<SenderOptionItem[]>([]);
 const fallbackSenderEmail = ref('');
 const runtimeConfig = useRuntimeConfig();
 
@@ -448,6 +464,10 @@ type EdgeResponseError = {
   };
 };
 
+const unavailableSenderCount = computed(
+  () => senderOptions.value.filter((option) => option.disabled).length,
+);
+
 type FormField = 'senderName' | 'senderEmail' | 'replyTo' | 'subject' | 'body';
 
 const touched = reactive<Record<FormField, boolean>>({
@@ -882,22 +902,57 @@ async function loadSenderOptions() {
 
     fallbackSenderEmail.value = data.fallbackSenderEmail || '';
     form.senderDailyLimit = Number(data.defaultDailyLimit || 1000);
-    availableSenderEmails.value = (data.options || [])
-      .filter((option: { available: boolean }) => option.available)
-      .map((option: { email: string }) => option.email);
+    senderOptions.value = (data.options || []).map(
+      (option: { email: string; available: boolean; reason?: string }) => {
+        const reason = String(option.reason || '').trim();
+        const unavailableLabel = reason
+          ? t('sender_unavailable_reason', {
+              email: option.email,
+              reason,
+            })
+          : t('sender_unavailable', {
+              email: option.email,
+            });
+
+        return {
+          email: option.email,
+          available: option.available,
+          reason,
+          label: option.available ? option.email : unavailableLabel,
+          disabled: !option.available,
+        };
+      },
+    );
 
-    if (!availableSenderEmails.value.length) {
-      if (fallbackSenderEmail.value) {
-        availableSenderEmails.value = [fallbackSenderEmail.value];
-      }
+    if (!senderOptions.value.length && fallbackSenderEmail.value) {
+      senderOptions.value = [
+        {
+          email: fallbackSenderEmail.value,
+          available: true,
+          label: fallbackSenderEmail.value,
+          disabled: false,
+        },
+      ];
     }
 
-    if (!availableSenderEmails.value.includes(form.senderEmail)) {
-      form.senderEmail = availableSenderEmails.value[0] || '';
+    const firstAvailable =
+      senderOptions.value.find((option) => !option.disabled)?.email || '';
+    const selected = senderOptions.value.find(
+      (option) => option.email === form.senderEmail,
+    );
+    if (!selected || selected.disabled) {
+      form.senderEmail = firstAvailable;
     }
   } catch (error: unknown) {
     if (fallbackSenderEmail.value) {
-      availableSenderEmails.value = [fallbackSenderEmail.value];
+      senderOptions.value = [
+        {
+          email: fallbackSenderEmail.value,
+          available: true,
+          label: fallbackSenderEmail.value,
+          disabled: false,
+        },
+      ];
       form.senderEmail = fallbackSenderEmail.value;
     }
     $toast.add({
@@ -1105,6 +1160,9 @@ watch(
     "sender_name_help": "The sender name displayed in your recipient inbox.",
     "sender_email": "Sender email",
     "sender_email_help": "The email address used to send this campaign.",
+    "sender_unavailable": "{email} (unavailable)",
+    "sender_unavailable_reason": "{email} (unavailable: {reason})",
+    "some_senders_unavailable": "{count} sender option(s) are currently unavailable.",
     "reply_to": "Reply-to",
     "reply_to_help": "Replies from recipients will be sent to this email address.",
     "subject": "Subject",
@@ -1195,6 +1253,9 @@ watch(
     "sender_name_help": "Nom affiché dans la boîte de réception de vos destinataires.",
     "sender_email": "Adresse d'expédition",
     "sender_email_help": "Adresse email utilisée pour envoyer cette campagne.",
+    "sender_unavailable": "{email} (indisponible)",
+    "sender_unavailable_reason": "{email} (indisponible : {reason})",
+    "some_senders_unavailable": "{count} option(s) d'expéditeur sont actuellement indisponibles.",
     "reply_to": "Répondre à",
     "reply_to_help": "Les réponses de vos destinataires seront envoyées à cette adresse.",
     "subject": "Sujet",

supabase/functions/_shared/email.test.ts

@@ -0,0 +1,9 @@
+import { assertEquals } from "https://deno.land/std@0.224.0/assert/mod.ts";
+import { normalizeEmail } from "./email.ts";
+
+Deno.test("normalizeEmail trims and lowercases", () => {
+  assertEquals(
+    normalizeEmail("  Bader.Lejmi@GMAIL.com "),
+    "bader.lejmi@gmail.com",
+  );
+});

supabase/functions/_shared/email.ts

@@ -0,0 +1,3 @@
+export function normalizeEmail(email: string): string {
+  return email.trim().toLowerCase();
+}

supabase/functions/email-campaigns/index.ts

@@ -6,8 +6,13 @@ import {
   createSupabaseAdmin,
   createSupabaseClient,
 } from "../_shared/supabase.ts";
+import { normalizeEmail } from "../_shared/email.ts";
 import { resolveCampaignBaseUrlFromEnv } from "../_shared/url.ts";
 import { sendEmail, verifyTransport } from "./email.ts";
+import {
+  getSenderCredentialIssue,
+  listUniqueSenderSources,
+} from "./sender-options.ts";
 
 const functionName = "email-campaigns";
 const app = new Hono().basePath(`/${functionName}`);
@@ -25,7 +30,7 @@ const CAMPAIGN_COMPLIANCE_FOOTER = (
 const PUBLIC_CAMPAIGN_BASE_URL = resolveCampaignBaseUrlFromEnv((key) =>
   Deno.env.get(key),
 );
-const SMTP_USER = (Deno.env.get("SMTP_USER") || "").trim().toLowerCase();
+const SMTP_USER = normalizeEmail(Deno.env.get("SMTP_USER") || "");
 const DEFAULT_SENDER_DAILY_LIMIT = 1000;
 const MAX_SENDER_DAILY_LIMIT = 2000;
 const PROCESSING_BATCH_SIZE = 300;
@@ -564,34 +569,58 @@ async function resolveSenderOptions(authorization: string, userEmail: string) {
   const transportBySender: Record<string, Transport | null> = {
     [fallbackSenderEmail]: null,
   };
-  const sources = await getUserMiningSources(authorization);
-  const matchingSource = sources.find((source) => source.email === userEmail);
+  const sources = listUniqueSenderSources(
+    await getUserMiningSources(authorization),
+  );
+
+  for (const source of sources) {
+    const credentialIssue = getSenderCredentialIssue(source);
+    if (credentialIssue) {
+      options.push({
+        email: source.email,
+        available: false,
+        reason: credentialIssue,
+      });
+      continue;
+    }
 
-  if (!matchingSource) {
-    options.push({
-      email: userEmail,
-      available: false,
-      reason: "No matching mining source credentials",
-    });
-  } else {
     try {
       const transport = await buildUserTransport(
-        userEmail,
-        matchingSource.credentials,
+        source.email,
+        source.credentials,
       );
       await verifyTransport(transport);
-      options.push({ email: userEmail, available: true });
-      transportBySender[userEmail] = transport;
+      options.push({ email: source.email, available: true });
+      transportBySender[source.email] = transport;
     } catch (error) {
       options.push({
-        email: userEmail,
+        email: source.email,
         available: false,
         reason: extractErrorMessage(error),
       });
     }
   }
 
-  if (!options.some((option) => option.email === fallbackSenderEmail)) {
+  const normalizedUserEmail = normalizeEmail(userEmail);
+  if (
+    !options.some(
+      (option) => normalizeEmail(option.email) === normalizedUserEmail,
+    )
+  ) {
+    options.push({
+      email: userEmail,
+      available: false,
+      reason: "No matching mining source credentials",
+    });
+  }
+
+  const fallbackOption = options.find(
+    (option) => option.email === fallbackSenderEmail,
+  );
+  if (fallbackOption) {
+    fallbackOption.available = true;
+    delete fallbackOption.reason;
+  } else {
     options.push({ email: fallbackSenderEmail, available: true });
   }
 
@@ -603,8 +632,11 @@ async function resolveSenderOptions(authorization: string, userEmail: string) {
 }
 
 function ensureAllowedSender(senderEmail: string, options: SenderOption[]) {
+  const normalizedSenderEmail = normalizeEmail(senderEmail);
   return options.some(
-    (option) => option.email === senderEmail && option.available,
+    (option) =>
+      normalizeEmail(option.email) === normalizedSenderEmail &&
+      option.available,
   );
 }
 

supabase/functions/email-campaigns/sender-options.test.ts

@@ -0,0 +1,31 @@
+import { assertEquals } from "https://deno.land/std@0.224.0/assert/mod.ts";
+import {
+  getSenderCredentialIssue,
+  listUniqueSenderSources,
+} from "./sender-options.ts";
+
+Deno.test("listUniqueSenderSources keeps distinct sender emails", () => {
+  const sources = [
+    { email: "bader.lejmi@gmail.com", type: "google", credentials: {} },
+    { email: "sales@acme.io", type: "imap", credentials: {} },
+    { email: "BADER.LEJMI@gmail.com", type: "google", credentials: {} },
+  ];
+
+  const result = listUniqueSenderSources(sources);
+  assertEquals(result.length, 2);
+  assertEquals(result[0].email, "bader.lejmi@gmail.com");
+  assertEquals(result[1].email, "sales@acme.io");
+});
+
+Deno.test("getSenderCredentialIssue flags expired OAuth token", () => {
+  const issue = getSenderCredentialIssue(
+    {
+      email: "bader.lejmi@gmail.com",
+      type: "google",
+      credentials: { expiresAt: 1000 },
+    },
+    2000,
+  );
+
+  assertEquals(issue, "OAuth token expired. Reconnect this source.");
+});

supabase/functions/email-campaigns/sender-options.ts

@@ -0,0 +1,36 @@
+import { normalizeEmail } from "../_shared/email.ts";
+
+export type MiningSourceCredential = {
+  email: string;
+  type: string;
+  credentials: Record<string, unknown>;
+};
+
+export function listUniqueSenderSources(
+  sources: MiningSourceCredential[],
+): MiningSourceCredential[] {
+  const byEmail = new Map<string, MiningSourceCredential>();
+  for (const source of sources) {
+    const key = normalizeEmail(source.email);
+    if (!key || byEmail.has(key)) continue;
+    byEmail.set(key, source);
+  }
+  return [...byEmail.values()];
+}
+
+export function getSenderCredentialIssue(
+  source: MiningSourceCredential,
+  nowMs = Date.now(),
+): string | null {
+  const kind = source.type.trim().toLowerCase();
+  if (kind !== "google" && kind !== "azure") {
+    return null;
+  }
+
+  const expiresAt = Number(source.credentials.expiresAt);
+  if (Number.isFinite(expiresAt) && expiresAt > 0 && expiresAt <= nowMs) {
+    return "OAuth token expired. Reconnect this source.";
+  }
+
+  return null;
+}