From 9ba2598b00e191d36c8e863d404cb942b4fc3bdc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 28 Nov 2023 14:25:14 +0530
Subject: [PATCH 1/4] feat: Add Holiday2023 banner

---
 src/lib/components/Navbar.svelte       | 21 ++++++++++--
 src/lib/util/promos/Holiday2023.svelte |  7 ++++
 src/lib/util/promos/promo.ts           | 47 ++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/util/promos/Holiday2023.svelte
 create mode 100644 src/lib/util/promos/promo.ts

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 51da006bd..6bd90f1c4 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import Theme from './Theme.svelte';
+  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   let isMenuOpen = false;
 
   function toggleMenu() {
@@ -46,8 +47,25 @@
       img: './mermaidchart-logo.svg'
     }
   ];
+
+  let activePromotion = getActivePromotion();
 </script>
 
+{#if activePromotion}
+  <div
+    class="z-10 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
+    <svelte:component this={activePromotion.component} />
+    <button
+      title="Dismiss banner"
+      on:click={() => {
+        dismissPromotion(activePromotion?.id);
+        activePromotion = undefined;
+      }}>
+      <i class="fa fa-close px-2" />
+    </button>
+  </div>
+{/if}
+
 <div class="navbar shadow-lg bg-primary p-0">
   <div class="flex-1 px-2 mx-2">
     <span class="text-lg font-bold">
@@ -93,7 +111,7 @@
     id="menu-toggle"
     bind:checked={isMenuOpen}
     on:click={toggleMenu} />
-  
+
   <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
     <Theme />
     <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
@@ -115,7 +133,6 @@
   </div>
 </div>
 
-
 <style>
   #menu-toggle:checked + #menu {
     position: absolute;
diff --git a/src/lib/util/promos/Holiday2023.svelte b/src/lib/util/promos/Holiday2023.svelte
new file mode 100644
index 000000000..ee958e6ba
--- /dev/null
+++ b/src/lib/util/promos/Holiday2023.svelte
@@ -0,0 +1,7 @@
+<a
+  href="https://www.mermaidchart.com/holiday-promo"
+  target="_blank"
+  class="tracking-wide flex-grow">
+  Get AI, team collaboration, storage, and more with
+  <span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
+</a>
diff --git a/src/lib/util/promos/promo.ts b/src/lib/util/promos/promo.ts
new file mode 100644
index 000000000..742bf99cd
--- /dev/null
+++ b/src/lib/util/promos/promo.ts
@@ -0,0 +1,47 @@
+import { writable, type Writable, get } from 'svelte/store';
+import { persist, localStorage } from '../persist';
+import Holiday2023 from './Holiday2023.svelte';
+
+interface Promotion {
+  id: string;
+  startDate: Date;
+  endDate: Date;
+  component: ConstructorOfATypedSvelteComponent;
+}
+
+const promotions: Promotion[] = [
+  {
+    id: 'holiday-2023',
+    startDate: new Date('2023-11-28'),
+    endDate: new Date('2023-12-31'),
+    component: Holiday2023
+  }
+];
+
+export const dismissPromotion = (id?: string): void => {
+  if (!id) {
+    return;
+  }
+  dismissedPromotionsStore.update((dismissedIDs: string[]) => {
+    dismissedIDs.push(id);
+    return dismissedIDs;
+  });
+};
+
+const dismissedPromotionsStore: Writable<string[]> = persist(
+  writable([]),
+  localStorage(),
+  'dismissedPromotions'
+);
+
+export const getActivePromotion = (): Promotion | undefined => {
+  const dismissedPromotions = get(dismissedPromotionsStore);
+  const now = new Date();
+  return promotions
+    .filter(
+      (p: Promotion) =>
+        p.startDate <= now && p.endDate >= now && !dismissedPromotions.includes(p.id)
+    )
+    .toSorted((a: Promotion, b: Promotion) => b.endDate.getTime() - a.endDate.getTime())
+    .pop();
+};

From 1f28dde6e7a62085705bbdf0e13429c03a9236aa Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 28 Nov 2023 14:27:17 +0530
Subject: [PATCH 2/4] chore: Tweak start and end dates

---
 src/lib/util/promos/promo.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/util/promos/promo.ts b/src/lib/util/promos/promo.ts
index 742bf99cd..fb02cb778 100644
--- a/src/lib/util/promos/promo.ts
+++ b/src/lib/util/promos/promo.ts
@@ -12,8 +12,8 @@ interface Promotion {
 const promotions: Promotion[] = [
   {
     id: 'holiday-2023',
-    startDate: new Date('2023-11-28'),
-    endDate: new Date('2023-12-31'),
+    startDate: new Date('2023-11-27'),
+    endDate: new Date('2024-01-01'),
     component: Holiday2023
   }
 ];

From 670b298ba632c65835622197c89aae792ed5b52e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 29 Nov 2023 10:08:15 +0530
Subject: [PATCH 3/4] remove toSorted

---
 src/lib/util/promos/promo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/util/promos/promo.ts b/src/lib/util/promos/promo.ts
index fb02cb778..150fcfa06 100644
--- a/src/lib/util/promos/promo.ts
+++ b/src/lib/util/promos/promo.ts
@@ -42,6 +42,6 @@ export const getActivePromotion = (): Promotion | undefined => {
       (p: Promotion) =>
         p.startDate <= now && p.endDate >= now && !dismissedPromotions.includes(p.id)
     )
-    .toSorted((a: Promotion, b: Promotion) => b.endDate.getTime() - a.endDate.getTime())
+    .sort((a: Promotion, b: Promotion) => b.endDate.getTime() - a.endDate.getTime())
     .pop();
 };

From 19a15e971026e6758815a8443668f21af89b2633 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 1 Dec 2023 12:00:02 +0530
Subject: [PATCH 4/4] chore: Update MC promo link

---
 src/lib/util/promos/Holiday2023.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/util/promos/Holiday2023.svelte b/src/lib/util/promos/Holiday2023.svelte
index ee958e6ba..c07c8758d 100644
--- a/src/lib/util/promos/Holiday2023.svelte
+++ b/src/lib/util/promos/Holiday2023.svelte
@@ -1,5 +1,5 @@
 <a
-  href="https://www.mermaidchart.com/holiday-promo"
+  href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
   target="_blank"
   class="tracking-wide flex-grow">
   Get AI, team collaboration, storage, and more with