dashboard: promo banner prep

packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte

@@ -4,13 +4,12 @@
   import { instance } from '../store'
   import VersionPicker from './VersionPicker.svelte'
   import AlertBar from '$components/AlertBar.svelte'
-  import { versions as allVersions } from '$src/util/stores'
+  import { versions as allVersions, is23Available } from '$src/util/stores'
 
   $: ({ id, maintenance, version } = $instance)
 
   let is22OrLower = false
   let is23OrHigher = false
-  let is23Available = false
   $: {
     const [major, minor] = version.split('.').map(Number)
     is22OrLower = minor! <= 22
@@ -23,7 +22,6 @@
       const [major, minor] = v.split('.').map(Number)
       return (is22OrLower && minor! <= 22) || (is23OrHigher && minor! >= 23)
     })
-    is23Available = $allVersions.includes('0.23.*')
   }
 
   // Create a copy of the version
@@ -97,7 +95,7 @@
     > of PocketBase.
   </div>
 
-  {#if is23Available}
+  {#if $is23Available}
     <div class="mb-8 bg-info p-4 rounded text-info-content">
       <p class="font-bold text-xl">Attention v0.23.* users:</p>
       <p>

packages/dashboard/src/routes/+layout.svelte

@@ -21,7 +21,7 @@
 <div>
   <MothershipStatus />
   <Navbar />
-  <!-- <PromoBanner /> -->
+  <PromoBanner />
 
   <div class="px-4 sm:px-6 lg:px-8">
     <VerifyAccountBar />

packages/dashboard/src/routes/PromoBanner.svelte

@@ -1,20 +1,48 @@
 <script lang="ts">
+  import UserLoggedIn from '$components/guards/UserLoggedIn.svelte'
+  import UserLoggedOut from '$components/guards/UserLoggedOut.svelte'
+  import { onMount } from 'svelte'
+  import { dev } from '$app/environment'
+  import { is23Available } from '$util/stores'
+
+  const BANNER_KEY = 'promo-banner-v0.23-dismissed'
+  const isActive = $is23Available
+  let isVisible = isActive
+
+  onMount(() => {
+    if (dev) {
+      localStorage.removeItem(BANNER_KEY)
+    }
+    isVisible = isActive && !localStorage.getItem(BANNER_KEY)
+  })
+
+  function dismissBanner() {
+    localStorage.setItem(BANNER_KEY, 'true')
+    isVisible = false
+  }
 </script>
 
-<div class="alert alert-info bg-yellow-300 rounded-none mb-10">
-  <div>
-    <div class="text-info-content">
-      This promo banner will go away after Dec 2. Please spread the word and
-      help close the Flouder's round.
-    </div>
-    <div>
-      <a
-        href="https://www.producthunt.com/posts/pockethost?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-pockethost"
-        class="btn btn-sm btn-neutral m-2">Vote on Product Hunt</a
-      >
-      <a href="/pricing" class="btn btn-sm btn-neutral m-2"
-        >Black Friday ON now!</a
-      >
+{#if isVisible}
+  <div class="alert alert-info bg-yellow-300 rounded-none mb-10 relative">
+    <div class="text-info-content flex-1">
+      v0.23 is now available.
+      <UserLoggedIn>
+        <a href="/instances/new" class="btn btn-sm btn-neutral m-2"
+          >Try it now!</a
+        >
+      </UserLoggedIn>
+      <UserLoggedOut>
+        <a href="/get-started" class="btn btn-sm btn-neutral m-2"
+          >Get started now!</a
+        >
+      </UserLoggedOut>
     </div>
+    <button
+      class="btn btn-ghost btn-circle btn-xs absolute top-0 right-0"
+      on:click={dismissBanner}
+      aria-label="Dismiss banner"
+    >
+      ✕
+    </button>
   </div>
-</div>
+{/if}

packages/dashboard/src/util/stores.ts

@@ -24,6 +24,7 @@ try {
 }
 
 export const versions = writable<string[]>([])
+export const is23Available = writable(false)
 export const isMothershipReachable = writable(true)
 export const isUserLegacy = writable(false)
 export const userSubscriptionType = writable(SubscriptionType.Legacy)
@@ -80,6 +81,7 @@ export const init = () => {
     fetchVersions()
       .then((versionList) => {
         versions.set(versionList)
+        is23Available.set(versionList.includes('0.23.*'))
         console.log('Fetched versions', versionList)
       })
       .finally(() => {