fix: track quoted-printable links and disable tracking for plain text (#2644)

* fix: track quoted-printable links and disable tracking for plain text

- Fix click tracking regex to match Quoted-Printable encoded hrefs (href=3D"...")
- Add escapeRegExp helper for safe regex replacement
- Disable trackClick and trackOpen checkboxes when plain text only is enabled
- Add appropriate translations for disabled tracking state

* fix: remove unused isPreview variable in unsubscribe/failure.vue

* style: fix formatting issues in frontend files

Author: baderdean

frontend/src/components/campaigns/CampaignComposerDialog.vue

@@ -243,10 +243,45 @@
           </div>
 
           <div class="flex items-center gap-2">
-            <Checkbox v-model="form.trackClick" binary input-id="track-click" />
-            <label for="track-click">{{ t('track_click') }}</label>
+            <Checkbox
+              v-model="form.trackClick"
+              binary
+              input-id="track-click"
+              :disabled="form.plainTextOnly"
+            />
+            <label
+              for="track-click"
+              :class="{ 'opacity-50': form.plainTextOnly }"
+              >{{ t('track_click') }}</label
+            >
+            <i
+              v-tooltip.top="
+                form.plainTextOnly
+                  ? t('track_disabled_plain_text')
+                  : t('track_click_help')
+              "
+              class="pi pi-info-circle text-xs text-surface-500"
+            />
+          </div>
+
+          <div class="flex items-center gap-2 md:col-span-2">
+            <Checkbox
+              v-model="form.trackOpen"
+              binary
+              input-id="track-open"
+              :disabled="form.plainTextOnly"
+            />
+            <label
+              for="track-open"
+              :class="{ 'opacity-50': form.plainTextOnly }"
+              >{{ t('track_open') }}</label
+            >
             <i
-              v-tooltip.top="t('track_click_help')"
+              v-tooltip.top="
+                form.plainTextOnly
+                  ? t('track_disabled_plain_text')
+                  : t('track_open_help')
+              "
               class="pi pi-info-circle text-xs text-surface-500"
             />
           </div>
@@ -1101,6 +1136,8 @@ watch(
   (isPlainTextOnly) => {
     if (isPlainTextOnly) {
       form.bodyTextTemplate = normalizeBodyText();
+      form.trackClick = false;
+      form.trackOpen = false;
     }
   },
 );
@@ -1177,6 +1214,7 @@ watch(
     "track_open_help": "Adds a tracking pixel to measure opens.",
     "track_click": "Track clicking",
     "track_click_help": "Converts links into tracked links for click analytics.",
+    "track_disabled_plain_text": "Disabled for plain text emails",
     "plain_text_only": "Send pure text (no HTML)",
     "plain_text_only_help": "Disables rich formatting and sends a plain text email.",
     "footer_template": "Compliance footer",
@@ -1269,6 +1307,7 @@ watch(
     "track_open_help": "Ajoute un pixel de suivi pour mesurer les ouvertures.",
     "track_click": "Suivre les clics",
     "track_click_help": "Transforme les liens pour mesurer les clics.",
+    "track_disabled_plain_text": "Désactivé pour les emails texte brut",
     "plain_text_only": "Envoyer en texte brut (sans HTML)",
     "plain_text_only_help": "Désactive la mise en forme riche et envoie un email texte uniquement.",
     "footer_template": "Pied de page conformité",

frontend/src/pages/sources.vue

@@ -243,7 +243,7 @@ function getIcon(type: string) {
 function isActiveMiningSource(source: MiningSource): boolean {
   return Boolean(
     $leadminer.activeMiningSource?.email === source.email &&
-      $leadminer.miningTask,
+    $leadminer.miningTask,
   );
 }
 

frontend/src/pages/unsubscribe/failure.vue

@@ -29,7 +29,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-const $route = useRoute();
-const isPreview = Boolean($route.query.preview);
-</script>
+<script setup lang="ts"></script>

frontend/src/plugins/error-handler.ts

@@ -29,8 +29,8 @@ const EXPECTED_FAULTY_STATUS_CODES = [402];
 function isExpectedFaultyCode(err: unknown) {
   return Boolean(
     isFetchError(err) &&
-      err.response &&
-      EXPECTED_FAULTY_STATUS_CODES.includes(err.response.status),
+    err.response &&
+    EXPECTED_FAULTY_STATUS_CODES.includes(err.response.status),
   );
 }
 

frontend/src/stores/filters.ts

@@ -53,7 +53,7 @@ const areToggledFilters = computed(
 function checkValidStatus(statusValue = filters.value.status.value) {
   return Boolean(
     statusValue.length === VALID_STATUSES.length &&
-      statusValue.every((status: string) => VALID_STATUSES.includes(status)),
+    statusValue.every((status: string) => VALID_STATUSES.includes(status)),
   );
 }
 

supabase/functions/email-campaigns/index.ts

@@ -191,6 +191,10 @@ function escapeHtml(value: string): string {
     .replaceAll("'", "'");
 }
 
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 function requireFallbackSenderEmail() {
   if (!SMTP_USER) {
     throw new Error("SMTP_USER is not configured");
@@ -895,7 +899,8 @@ async function injectTrackers(
   let updatedHtml = html;
 
   if (trackClick) {
-    const hrefRegex = /href\s*=\s*"([^"]+)"/g;
+    // Match both href="..." and href=3D"..." (quoted-printable encoded)
+    const hrefRegex = /href\s*=\s*(?:3D\s*)?["']([^"']+)["']/gi;
     const matches = [...updatedHtml.matchAll(hrefRegex)];
 
     for (const match of matches) {
@@ -911,8 +916,13 @@ async function injectTrackers(
         originalUrl,
       );
       const trackedUrl = `${PUBLIC_CAMPAIGN_BASE_URL}/functions/v1/email-campaigns/track/click/${token}`;
+
+      // Replace both quoted-printable encoded (href=3D"...") and regular (href="...")
       updatedHtml = updatedHtml.replace(
-        `href="${originalUrl}"`,
+        new RegExp(
+          `href\\s*=\\s*(?:3D\\s*)?["']${escapeRegExp(originalUrl)}["']`,
+          "gi",
+        ),
         `href="${trackedUrl}"`,
       );
     }