From 7b431d7e119090c4486bf7d8a738dc1d66d460dd Mon Sep 17 00:00:00 2001
From: Acho Arnold Ewin <arnold@ndolestudio.com>
Date: Sun, 15 Nov 2026 15:44:02 +0200
Subject: [PATCH 1/2] feat(web): add Black Friday 2026 promotion

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 597866d6-5d9e-488f-9e1b-6d2f0281fc76
---
 web/app/components/BlackFridayBanner.vue | 177 +++++++++++++++++++++++
 web/app/layouts/default.vue              |   5 +-
 web/app/pages/billing/index.vue          |  24 ++-
 web/app/pages/index.vue                  |   1 +
 web/app/utils/black-friday.test.ts       | 112 ++++++++++++++
 web/app/utils/black-friday.ts            |  36 +++++
 6 files changed, 350 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/BlackFridayBanner.vue
 create mode 100644 web/app/utils/black-friday.test.ts
 create mode 100644 web/app/utils/black-friday.ts

diff --git a/web/app/components/BlackFridayBanner.vue b/web/app/components/BlackFridayBanner.vue
new file mode 100644
index 000000000..ebfd905b9
--- /dev/null
+++ b/web/app/components/BlackFridayBanner.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { mdiChevronRight, mdiClose } from '@mdi/js'
+import {
+  BLACK_FRIDAY_END,
+  getBlackFridayCountdown,
+  isBlackFridayEligible,
+} from '~/utils/black-friday'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const dismissed = useCookie<boolean>('httpsms_bf2026_dismissed', {
+  default: () => false,
+  expires: new Date(BLACK_FRIDAY_END),
+  sameSite: 'lax',
+  path: '/',
+})
+const now = ref(Date.now())
+const countdown = computed(() => getBlackFridayCountdown(now.value))
+const visible = computed(
+  () =>
+    !dismissed.value &&
+    countdown.value !== null &&
+    isBlackFridayEligible(
+      String(route.name),
+      authStore.authStateChanged,
+      authStore.authUser !== null,
+      authStore.user?.subscription_name,
+    ),
+)
+const bannerElement = useTemplateRef<HTMLElement>('bannerElement')
+const bannerHeight = ref(0)
+const contentColumns = computed(() => {
+  switch (route.name) {
+    case 'settings':
+    case 'billing':
+    case 'phone-api-keys':
+      return { md: 9, offsetMd: 1, xl: 8, offsetXl: 2 }
+    case 'bulk-messages':
+      return { md: 10, offsetMd: 1, xxl: 8, offsetXxl: 2 }
+    case 'messages':
+      return { md: 8, offsetMd: 2, xl: 6, offsetXl: 3 }
+    default:
+      return {}
+  }
+})
+const hasPagePadding = computed(() =>
+  ['settings', 'messages'].includes(String(route.name)),
+)
+let resizeObserver: ResizeObserver | undefined
+let timer: ReturnType<typeof setInterval> | undefined
+
+watch(bannerElement, (element) => {
+  resizeObserver?.disconnect()
+  if (!element) return
+
+  const updateHeight = () => {
+    bannerHeight.value = element.getBoundingClientRect().height
+  }
+  updateHeight()
+  resizeObserver = new ResizeObserver(updateHeight)
+  resizeObserver.observe(element)
+})
+
+watch(
+  visible,
+  (show) => {
+    clearInterval(timer)
+    if (show) {
+      now.value = Date.now()
+      timer = setInterval(() => {
+        now.value = Date.now()
+      }, 1000)
+    }
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  clearInterval(timer)
+  resizeObserver?.disconnect()
+})
+</script>
+
+<template>
+  <v-layout-item
+    v-if="visible"
+    position="top"
+    :order="-1"
+    :size="bannerHeight"
+    model-value
+  >
+    <div ref="bannerElement">
+      <v-toolbar
+        class="black-friday-banner"
+        color="transparent"
+        tag="aside"
+        aria-label="Black Friday promotion"
+        flat
+      >
+        <v-container fluid class="py-0" :class="{ 'px-0': !hasPagePadding }">
+          <v-container :class="route.name === 'settings' ? 'pa-0' : 'py-0'">
+            <v-row class="my-0">
+              <v-col cols="12" v-bind="contentColumns" class="py-3">
+                <div class="d-flex align-center ga-3">
+                  <div
+                    class="black-friday-banner-offer d-flex align-center ga-3"
+                  >
+                    <strong class="text-warning text-uppercase"
+                      >Black Friday</strong
+                    >
+                    <span>
+                      Get <strong>40% off</strong> the yearly plans with
+                      discount code
+                      <strong class="text-warning">BF2026</strong> at checkout.
+                    </span>
+                    <v-btn
+                      to="/billing"
+                      class="d-none d-sm-inline-flex"
+                      color="warning"
+                      size="small"
+                      :append-icon="mdiChevronRight"
+                    >
+                      Use now
+                    </v-btn>
+                  </div>
+                  <div
+                    class="black-friday-banner-timer d-none d-sm-block text-right"
+                  >
+                    <strong
+                      class="text-no-wrap"
+                      role="timer"
+                      aria-label="Time remaining"
+                      aria-live="off"
+                    >
+                      {{ countdown }}
+                    </strong>
+                  </div>
+                  <v-btn
+                    :icon="mdiClose"
+                    class="align-self-start align-self-sm-center flex-shrink-0"
+                    color="error"
+                    density="compact"
+                    size="small"
+                    variant="text"
+                    aria-label="Dismiss Black Friday promotion"
+                    @click="dismissed = true"
+                  />
+                </div>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-container>
+      </v-toolbar>
+    </div>
+  </v-layout-item>
+</template>
+
+<style scoped>
+.black-friday-banner {
+  background: linear-gradient(110deg, #090909 40%, #10545b);
+}
+
+.black-friday-banner :deep([class~='v-toolbar__content']) {
+  height: auto !important;
+  min-height: 64px;
+}
+
+.black-friday-banner-offer {
+  flex: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.black-friday-banner-timer {
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/web/app/layouts/default.vue b/web/app/layouts/default.vue
index 12f3dfc52..12e4beae4 100644
--- a/web/app/layouts/default.vue
+++ b/web/app/layouts/default.vue
@@ -66,8 +66,9 @@ function startPoller() {
 
 <template>
   <v-app>
+    <BlackFridayBanner />
     <v-navigation-drawer v-if="lgAndUp && hasDrawer" :width="400" permanent>
-      <template #prepend>
+      <template #default>
         <div class="message-thread-sidebar d-flex flex-column">
           <div v-if="appStore.isLocal" class="py-2 bg-warning" />
           <MessageThreadHeader />
@@ -99,7 +100,7 @@ function startPoller() {
     }
   }
   .message-thread-sidebar {
-    height: 100dvh;
+    height: 100%;
   }
   .v-navigation-drawer__message-thread {
     flex: 1;
diff --git a/web/app/pages/billing/index.vue b/web/app/pages/billing/index.vue
index 8a22aed23..58c22b55f 100644
--- a/web/app/pages/billing/index.vue
+++ b/web/app/pages/billing/index.vue
@@ -15,6 +15,10 @@ import type {
 
 import { countries, getStateOptions } from '~/utils/countries'
 import { getApiErrorMessage } from '~/utils/api-error'
+import {
+  BLACK_FRIDAY_END,
+  getBlackFridayCheckoutUrl,
+} from '~/utils/black-friday'
 
 type SubscriptionPayment =
   ResponsesUserSubscriptionPaymentsResponse['data'][number]
@@ -127,6 +131,11 @@ const plan = computed<PaymentPlan>(() => {
 })
 
 const isOnFreePlan = computed(() => plan.value.id === 'free')
+const blackFridayDiscountAvailable = computed(
+  () =>
+    authStore.user?.subscription_name === 'free' &&
+    Date.now() < BLACK_FRIDAY_END,
+)
 const isOnLifetimePlan = computed(() => plan.value.id === 'pro-lifetime')
 const subscriptionIsCancelled = computed(
   () => authStore.user?.subscription_status === 'cancelled',
@@ -156,7 +165,7 @@ const checkoutURL = computed(() => {
       url.searchParams.append('checkout[name]', user.displayName)
     }
   }
-  return url.toString()
+  return getBlackFridayCheckoutUrl(url, authStore.user?.subscription_name)
 })
 
 const enterpriseCheckoutURL = computed(() => {
@@ -171,7 +180,7 @@ const enterpriseCheckoutURL = computed(() => {
       url.searchParams.append('checkout[name]', user.displayName)
     }
   }
-  return url.toString()
+  return getBlackFridayCheckoutUrl(url, authStore.user?.subscription_name)
 })
 
 async function loadData() {
@@ -421,7 +430,9 @@ onMounted(async () => {
 
             <!-- Upgrade Plan (only for free users) -->
             <template v-if="isOnFreePlan">
-              <h2 class="text-headline-large mt-4 mb-2">Upgrade Plan</h2>
+              <h2 id="upgrade-plan" class="text-headline-large mt-4 mb-2">
+                Upgrade Plan
+              </h2>
               <VRow>
                 <VCol cols="12" md="6">
                   <VCard :href="checkoutURL" link>
@@ -436,6 +447,13 @@ onMounted(async () => {
                           <p class="text-medium-emphasis">
                             Send and receive 5,000 to 20,000 messages per month
                           </p>
+                          <p
+                            v-if="blackFridayDiscountAvailable"
+                            class="mb-0 text-warning"
+                          >
+                            Or <strong>$60/year</strong> with code
+                            <strong>BF2026</strong>.
+                          </p>
                         </VCol>
                         <VCol class="flex-grow-0 flex-shrink-0 text-center">
                           <span class="text-headline-medium">$10</span>/month
diff --git a/web/app/pages/index.vue b/web/app/pages/index.vue
index b0077847a..29855c40e 100644
--- a/web/app/pages/index.vue
+++ b/web/app/pages/index.vue
@@ -65,6 +65,7 @@ const planYearlyMonthlyPrice = computed(
 
 <template>
   <div>
+    <BlackFridayBanner />
     <VContainer>
       <VRow :class="{ 'py-4': lgAndUp }">
         <VCol
diff --git a/web/app/utils/black-friday.test.ts b/web/app/utils/black-friday.test.ts
new file mode 100644
index 000000000..1fe5f6da0
--- /dev/null
+++ b/web/app/utils/black-friday.test.ts
@@ -0,0 +1,112 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import {
+  getBlackFridayCheckoutUrl,
+  getBlackFridayCountdown,
+  isBlackFridayEligible,
+} from './black-friday'
+
+test('counts down to the UTC deadline regardless of the input timezone', () => {
+  for (const now of [
+    '2026-11-29T22:57:56Z',
+    '2026-11-30T00:57:56+02:00',
+    '2026-11-29T17:57:56-05:00',
+  ]) {
+    assert.equal(getBlackFridayCountdown(Date.parse(now)), '1 Day 01:02:04')
+  }
+})
+
+test('spells out plural days in the countdown', () => {
+  assert.equal(
+    getBlackFridayCountdown(Date.parse('2026-11-15T12:00:00Z')),
+    '15 Days 12:00:00',
+  )
+})
+
+test('keeps the final partial second visible and expires exactly at the deadline', () => {
+  assert.equal(
+    getBlackFridayCountdown(Date.parse('2026-11-30T23:59:59.500Z')),
+    '0 Days 00:00:01',
+  )
+  assert.equal(
+    getBlackFridayCountdown(Date.parse('2026-12-01T00:00:00Z')),
+    null,
+  )
+  assert.equal(
+    getBlackFridayCountdown(Date.parse('2026-12-02T00:00:00Z')),
+    null,
+  )
+})
+
+test('shows the landing promotion only after confirming the visitor is signed out', () => {
+  assert.equal(isBlackFridayEligible('index', true, false), true)
+  assert.equal(isBlackFridayEligible('index', false, false), false)
+  assert.equal(isBlackFridayEligible('index', true, true, 'free'), false)
+  assert.equal(isBlackFridayEligible('blog', true, false), false)
+})
+
+test('shows the promotion across app pages only for confirmed signed-in free users', () => {
+  for (const page of [
+    'billing',
+    'threads',
+    'threads-id',
+    'settings',
+    'bulk-messages',
+    'search-messages',
+    'phone-api-keys',
+    'heartbeats-id',
+  ]) {
+    assert.equal(isBlackFridayEligible(page, true, true, 'free'), true)
+    assert.equal(isBlackFridayEligible(page, true, true), false)
+    assert.equal(isBlackFridayEligible(page, true, false, 'free'), false)
+    assert.equal(isBlackFridayEligible(page, false, true, 'free'), false)
+    for (const plan of [
+      'pro-monthly',
+      'pro-yearly',
+      'pro-lifetime',
+      'unknown',
+    ]) {
+      assert.equal(isBlackFridayEligible(page, true, true, plan), false)
+    }
+  }
+})
+
+test('prefills the active promotion at checkout without losing customer details', () => {
+  const url = new URL('https://store.lemonsqueezy.com/buy/pro?embed=1')
+  url.searchParams.set('checkout[custom][user_id]', 'test-user')
+  url.searchParams.set('checkout[email]', 'buyer@example.test')
+  const checkout = new URL(
+    getBlackFridayCheckoutUrl(url, 'free', Date.parse('2026-11-30T23:59:59Z')),
+  )
+
+  assert.equal(checkout.searchParams.get('checkout[discount_code]'), 'BF2026')
+  assert.equal(
+    checkout.searchParams.get('checkout[custom][user_id]'),
+    'test-user',
+  )
+  assert.equal(
+    checkout.searchParams.get('checkout[email]'),
+    'buyer@example.test',
+  )
+  assert.equal(checkout.searchParams.get('embed'), '1')
+})
+
+test('does not prefill the promotion for paid or unconfirmed users', () => {
+  for (const plan of [undefined, 'pro-yearly', 'pro-lifetime', 'unknown']) {
+    const url = new URL('https://store.lemonsqueezy.com/buy/pro')
+    assert.equal(
+      getBlackFridayCheckoutUrl(url, plan, Date.parse('2026-11-15T12:00:00Z')),
+      'https://store.lemonsqueezy.com/buy/pro',
+    )
+  }
+})
+
+test('stops prefilling the discount at the UTC promotion deadline', () => {
+  const url = new URL('https://store.lemonsqueezy.com/buy/pro')
+  for (const now of ['2026-12-01T00:00:00Z', '2026-12-02T00:00:00Z']) {
+    assert.equal(
+      getBlackFridayCheckoutUrl(url, 'free', Date.parse(now)),
+      'https://store.lemonsqueezy.com/buy/pro',
+    )
+  }
+})
diff --git a/web/app/utils/black-friday.ts b/web/app/utils/black-friday.ts
new file mode 100644
index 000000000..ea837a604
--- /dev/null
+++ b/web/app/utils/black-friday.ts
@@ -0,0 +1,36 @@
+export const BLACK_FRIDAY_END = Date.parse('2026-12-01T00:00:00Z')
+
+export function getBlackFridayCountdown(now: number): string | null {
+  const seconds = Math.ceil((BLACK_FRIDAY_END - now) / 1000)
+  if (seconds <= 0) return null
+
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const time = [hours, minutes, seconds % 60]
+    .map((value) => String(value).padStart(2, '0'))
+    .join(':')
+  return `${days} ${days === 1 ? 'Day' : 'Days'} ${time}`
+}
+
+export function isBlackFridayEligible(
+  page: string,
+  authReady: boolean,
+  signedIn: boolean,
+  subscriptionName?: string,
+): boolean {
+  if (!authReady) return false
+  if (page === 'index') return !signedIn
+  return signedIn && subscriptionName === 'free'
+}
+
+export function getBlackFridayCheckoutUrl(
+  url: URL,
+  subscriptionName?: string,
+  now = Date.now(),
+): string {
+  if (subscriptionName === 'free' && now < BLACK_FRIDAY_END) {
+    url.searchParams.set('checkout[discount_code]', 'BF2026')
+  }
+  return url.toString()
+}

From ce012c1ebd6441e3723e0a165c4d5924a7705ad0 Mon Sep 17 00:00:00 2001
From: Acho Arnold Ewin <arnold@ndolestudio.com>
Date: Sun, 15 Nov 2026 15:51:57 +0200
Subject: [PATCH 2/2] fix(web): expire Black Friday offers with a shared clock

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 597866d6-5d9e-488f-9e1b-6d2f0281fc76
---
 web/app/components/BlackFridayBanner.vue | 29 ++---------
 web/app/pages/billing/index.vue          | 22 ++++----
 web/app/stores/blackFriday.test.ts       | 66 ++++++++++++++++++++++++
 web/app/stores/blackFriday.ts            | 24 +++++++++
 4 files changed, 107 insertions(+), 34 deletions(-)
 create mode 100644 web/app/stores/blackFriday.test.ts
 create mode 100644 web/app/stores/blackFriday.ts

diff --git a/web/app/components/BlackFridayBanner.vue b/web/app/components/BlackFridayBanner.vue
index ebfd905b9..7a6df7c7e 100644
--- a/web/app/components/BlackFridayBanner.vue
+++ b/web/app/components/BlackFridayBanner.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
 import { mdiChevronRight, mdiClose } from '@mdi/js'
-import {
-  BLACK_FRIDAY_END,
-  getBlackFridayCountdown,
-  isBlackFridayEligible,
-} from '~/utils/black-friday'
+import { BLACK_FRIDAY_END, isBlackFridayEligible } from '~/utils/black-friday'
 
 const route = useRoute()
 const authStore = useAuthStore()
+const promotion = useBlackFridayStore()
 const dismissed = useCookie<boolean>('httpsms_bf2026_dismissed', {
   default: () => false,
   expires: new Date(BLACK_FRIDAY_END),
   sameSite: 'lax',
   path: '/',
 })
-const now = ref(Date.now())
-const countdown = computed(() => getBlackFridayCountdown(now.value))
 const visible = computed(
   () =>
     !dismissed.value &&
-    countdown.value !== null &&
+    promotion.active &&
     isBlackFridayEligible(
       String(route.name),
       authStore.authStateChanged,
@@ -47,7 +42,6 @@ const hasPagePadding = computed(() =>
   ['settings', 'messages'].includes(String(route.name)),
 )
 let resizeObserver: ResizeObserver | undefined
-let timer: ReturnType<typeof setInterval> | undefined
 
 watch(bannerElement, (element) => {
   resizeObserver?.disconnect()
@@ -61,22 +55,7 @@ watch(bannerElement, (element) => {
   resizeObserver.observe(element)
 })
 
-watch(
-  visible,
-  (show) => {
-    clearInterval(timer)
-    if (show) {
-      now.value = Date.now()
-      timer = setInterval(() => {
-        now.value = Date.now()
-      }, 1000)
-    }
-  },
-  { immediate: true },
-)
-
 onBeforeUnmount(() => {
-  clearInterval(timer)
   resizeObserver?.disconnect()
 })
 </script>
@@ -132,7 +111,7 @@ onBeforeUnmount(() => {
                       aria-label="Time remaining"
                       aria-live="off"
                     >
-                      {{ countdown }}
+                      {{ promotion.countdown }}
                     </strong>
                   </div>
                   <v-btn
diff --git a/web/app/pages/billing/index.vue b/web/app/pages/billing/index.vue
index 58c22b55f..1106358f2 100644
--- a/web/app/pages/billing/index.vue
+++ b/web/app/pages/billing/index.vue
@@ -15,10 +15,7 @@ import type {
 
 import { countries, getStateOptions } from '~/utils/countries'
 import { getApiErrorMessage } from '~/utils/api-error'
-import {
-  BLACK_FRIDAY_END,
-  getBlackFridayCheckoutUrl,
-} from '~/utils/black-friday'
+import { getBlackFridayCheckoutUrl } from '~/utils/black-friday'
 
 type SubscriptionPayment =
   ResponsesUserSubscriptionPaymentsResponse['data'][number]
@@ -34,6 +31,7 @@ useHead({
 const config = useRuntimeConfig()
 const { lgAndUp } = useVDisplay()
 const authStore = useAuthStore()
+const promotion = useBlackFridayStore()
 const billingStore = useBillingStore()
 const notificationsStore = useNotificationsStore()
 const { formatDecimal, formatTimestamp } = useFilters()
@@ -132,9 +130,7 @@ const plan = computed<PaymentPlan>(() => {
 
 const isOnFreePlan = computed(() => plan.value.id === 'free')
 const blackFridayDiscountAvailable = computed(
-  () =>
-    authStore.user?.subscription_name === 'free' &&
-    Date.now() < BLACK_FRIDAY_END,
+  () => authStore.user?.subscription_name === 'free' && promotion.active,
 )
 const isOnLifetimePlan = computed(() => plan.value.id === 'pro-lifetime')
 const subscriptionIsCancelled = computed(
@@ -165,7 +161,11 @@ const checkoutURL = computed(() => {
       url.searchParams.append('checkout[name]', user.displayName)
     }
   }
-  return getBlackFridayCheckoutUrl(url, authStore.user?.subscription_name)
+  return getBlackFridayCheckoutUrl(
+    url,
+    authStore.user?.subscription_name,
+    promotion.now,
+  )
 })
 
 const enterpriseCheckoutURL = computed(() => {
@@ -180,7 +180,11 @@ const enterpriseCheckoutURL = computed(() => {
       url.searchParams.append('checkout[name]', user.displayName)
     }
   }
-  return getBlackFridayCheckoutUrl(url, authStore.user?.subscription_name)
+  return getBlackFridayCheckoutUrl(
+    url,
+    authStore.user?.subscription_name,
+    promotion.now,
+  )
 })
 
 async function loadData() {
diff --git a/web/app/stores/blackFriday.test.ts b/web/app/stores/blackFriday.test.ts
new file mode 100644
index 000000000..4434fe5fa
--- /dev/null
+++ b/web/app/stores/blackFriday.test.ts
@@ -0,0 +1,66 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { createPinia, disposePinia, setActivePinia } from 'pinia'
+import { computed } from 'vue'
+import { getBlackFridayCheckoutUrl } from '../utils/black-friday'
+import { useBlackFridayStore } from './blackFriday'
+
+test('expires the countdown, cached offer, and checkout links together on an open page', (t) => {
+  t.mock.timers.enable({
+    apis: ['Date', 'setInterval'],
+    now: new Date('2026-11-30T23:59:58Z'),
+  })
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  t.after(() => disposePinia(pinia))
+  const promotion = useBlackFridayStore()
+  const offerVisible = computed(() => promotion.active)
+  const links = ['pro', 'enterprise'].map((product) =>
+    computed(
+      () =>
+        new URL(
+          getBlackFridayCheckoutUrl(
+            new URL(`https://store.lemonsqueezy.com/buy/${product}`),
+            'free',
+            promotion.now,
+          ),
+        ),
+    ),
+  )
+
+  assert.equal(offerVisible.value, true)
+  for (const link of links) {
+    assert.equal(
+      link.value.searchParams.get('checkout[discount_code]'),
+      'BF2026',
+    )
+  }
+  t.mock.timers.tick(1000)
+  assert.equal(promotion.countdown, '0 Days 00:00:01')
+  t.mock.timers.tick(1000)
+  assert.equal(promotion.countdown, null)
+  assert.equal(offerVisible.value, false)
+  for (const link of links) {
+    assert.equal(link.value.searchParams.has('checkout[discount_code]'), false)
+  }
+  const expiredAt = promotion.now
+  t.mock.timers.tick(10_000)
+  assert.equal(promotion.now, expiredAt)
+})
+
+test('stops the shared clock when the store is disposed', (t) => {
+  t.mock.timers.enable({
+    apis: ['Date', 'setInterval'],
+    now: new Date('2026-11-30T23:59:58Z'),
+  })
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  t.after(() => disposePinia(pinia))
+  const promotion = useBlackFridayStore()
+  const initialTime = promotion.now
+
+  promotion.$dispose()
+  t.mock.timers.tick(2000)
+
+  assert.equal(promotion.now, initialTime)
+})
diff --git a/web/app/stores/blackFriday.ts b/web/app/stores/blackFriday.ts
new file mode 100644
index 000000000..b93325c41
--- /dev/null
+++ b/web/app/stores/blackFriday.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { computed, onScopeDispose, ref } from 'vue'
+import {
+  BLACK_FRIDAY_END,
+  getBlackFridayCountdown,
+} from '../utils/black-friday'
+
+export const useBlackFridayStore = defineStore('blackFriday', () => {
+  const now = ref(Date.now())
+  const active = computed(() => now.value < BLACK_FRIDAY_END)
+  const countdown = computed(() => getBlackFridayCountdown(now.value))
+  let timer: ReturnType<typeof setInterval> | undefined
+
+  if (active.value) {
+    timer = setInterval(() => {
+      now.value = Date.now()
+      if (!active.value) clearInterval(timer)
+    }, 1000)
+  }
+
+  onScopeDispose(() => clearInterval(timer))
+
+  return { now, active, countdown }
+})