From aa0d62ba116eccaa96b9ad5440377a299b2a102a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 3 Apr 2025 23:16:20 +0530
Subject: [PATCH] fix: Consolidate UTM source

---
 .eslintrc.cjs                        |  3 ++-
 src/lib/constants.ts                 |  4 ++++
 src/lib/util/promos/April2025.svelte | 33 +++++++++++++++++++++++-----
 src/lib/util/state.ts                |  5 +++--
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8300399a..a10ac907 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -105,12 +105,13 @@ module.exports = {
           j: true,
           k: true,
           param: true,
+          Params: true,
+          params: true,
           Props: true,
           props: true,
           req: true,
           res: true,
           str: true,
-          searchParams: true,
           temp: true,
           ImportMetaEnv: true
         }
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 85e0b108..0cd308b3 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -6,3 +6,7 @@ export const TID = {
   errorContainer: 'error-container',
   themeToggleButton: 'theme-toggle-button'
 } as const;
+
+export const C = {
+  utmSource: 'mermaid_live_editor'
+} as const;
diff --git a/src/lib/util/promos/April2025.svelte b/src/lib/util/promos/April2025.svelte
index 8f231042..530763ed 100644
--- a/src/lib/util/promos/April2025.svelte
+++ b/src/lib/util/promos/April2025.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button } from '$/components/ui/button';
+  import { C } from '$/constants';
   import { MCBaseURL } from '$/util/util';
   import { onDestroy, type Snippet } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -12,25 +13,42 @@
 
   interface Taglines {
     label: string;
-    url: string;
+    url: {
+      path: string;
+      params: Record<string, string>;
+    };
   }
 
+  const commonParams = { utm_source: C.utmSource, utm_medium: 'banner_ad' } as const;
+
   const taglines: Taglines[] = [
     {
       label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
-      url: '/mermaid-ai?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=aibundle'
+      url: {
+        path: '/mermaid-ai',
+        params: { utm_campaign: 'aibundle' }
+      }
     },
     {
       label: 'Diagram live with teammates in Mermaid Chart',
-      url: '/landing?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=team_collaboration'
+      url: {
+        path: '/landing',
+        params: { utm_campaign: 'team_collaboration' }
+      }
     },
     {
       label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-      url: '/landing?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor'
+      url: {
+        path: '/landing',
+        params: { utm_campaign: 'visual_editor' }
+      }
     },
     {
       label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
-      url: '/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard'
+      url: {
+        path: '/whiteboard',
+        params: { utm_campaign: 'whiteboard' }
+      }
     }
   ];
 
@@ -59,7 +77,10 @@
   <div class="grid grow">
     {#key currentTagline}
       <a
-        href={MCBaseURL + currentTagline.url}
+        href="{MCBaseURL}{currentTagline.url.path}?{new URLSearchParams({
+          ...commonParams,
+          ...currentTagline.url.params
+        }).toString()}"
         target="_blank"
         class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
         in:fade={{ delay: 800 }}
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 224d87d4..fdb72d9e 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -1,4 +1,5 @@
-import type { ErrorHash, MarkerData, State, ValidatedState } from '$lib/types';
+import { C } from '$/constants';
+import type { ErrorHash, MarkerData, State, ValidatedState } from '$/types';
 import { debounce } from 'lodash-es';
 import type { MermaidConfig } from 'mermaid';
 import { derived, get, writable, type Readable } from 'svelte/store';
@@ -141,7 +142,7 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
       medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share' | 'toggle';
     }) => {
       const parameters = new URLSearchParams();
-      parameters.set('utm_source', 'mermaid_live');
+      parameters.set('utm_source', C.utmSource);
       parameters.set('utm_medium', medium);
       const paramString = parameters.toString();
       return {