From dc639647c2289de8148c6950f6d62caaba2cf47c Mon Sep 17 00:00:00 2001 From: Ben Allfree Date: Wed, 13 Nov 2024 06:16:47 -0800 Subject: [PATCH] enh: dashboard black friday updates --- cspell.json | 1 + .../src/routes/(app)/account/+page.svelte | 33 +++++++------- .../routes/(app)/account/FlounderCard.svelte | 13 ++---- .../src/routes/(static)/pricing/+page.svelte | 10 +---- .../(static)/pricing/PricingCard.svelte | 43 +++++++++++-------- .../(static)/pricing/PricingTable.svelte | 23 +++++----- packages/dashboard/src/routes/+layout.svelte | 2 + .../dashboard/src/routes/PromoBanner.svelte | 16 +++++++ 8 files changed, 79 insertions(+), 62 deletions(-) create mode 100644 packages/dashboard/src/routes/PromoBanner.svelte diff --git a/cspell.json b/cspell.json index 63f9d499..5816dc59 100644 --- a/cspell.json +++ b/cspell.json @@ -15,6 +15,7 @@ "dockerode", "esbuild", "eventsource", + "Flouder's", "fullchain", "geoip", "getenv", diff --git a/packages/dashboard/src/routes/(app)/account/+page.svelte b/packages/dashboard/src/routes/(app)/account/+page.svelte index c4bea96e..840a0303 100644 --- a/packages/dashboard/src/routes/(app)/account/+page.svelte +++ b/packages/dashboard/src/routes/(app)/account/+page.svelte @@ -7,20 +7,21 @@ import Avatar from '$src/routes/Navbar/Avatar.svelte' -
My Account
-
- - Change your avatar on - Gravatar -
-
- Your plan: {PLAN_NAMES[$userSubscriptionType]} -
-
- Need to change or cancel? Contact support -
-
- +
+
My Account
+
+ Your plan: {PLAN_NAMES[$userSubscriptionType]} +
+
+ + + Update Avatar + +
+ +
+ Manage Membership +
diff --git a/packages/dashboard/src/routes/(app)/account/FlounderCard.svelte b/packages/dashboard/src/routes/(app)/account/FlounderCard.svelte index a3a6b132..00ace04c 100644 --- a/packages/dashboard/src/routes/(app)/account/FlounderCard.svelte +++ b/packages/dashboard/src/routes/(app)/account/FlounderCard.svelte @@ -1,10 +1,7 @@
- +
-
- -
+ diff --git a/packages/dashboard/src/routes/(static)/pricing/PricingCard.svelte b/packages/dashboard/src/routes/(static)/pricing/PricingCard.svelte index 7fd45d76..1ce279fd 100644 --- a/packages/dashboard/src/routes/(static)/pricing/PricingCard.svelte +++ b/packages/dashboard/src/routes/(static)/pricing/PricingCard.svelte @@ -2,6 +2,7 @@ import { faClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons' import Fa from 'svelte-fa' import { onMount, onDestroy } from 'svelte' + import { writable } from 'svelte/store' export let name = '' export let description = '' export let priceMonthly: [number, string?, number?] = [0, ''] @@ -10,24 +11,26 @@ export let checkoutYearURL = '' export let qtyMax = 0 export let qtyRemaining = 0 - export let comingSoon = false export let soldOutText = 'SOLD OUT' export let comingSoonText = 'COMING SOON' export let availableText = 'AVAILABLE' export let features: string[] = [] export let fundingGoals: string[] = [] export let startDate: Date | null = null + export let endDate: Date | null = null + + const comingSoon = startDate && startDate > new Date() $: qtySold = qtyMax - qtyRemaining let countdown = '' let countdownInterval: ReturnType - function updateCountdown() { - if (!startDate) return + function updateCountdown(date: Date | null) { + if (!date) return const now = new Date() - const difference = startDate.getTime() - now.getTime() + const difference = date.getTime() - now.getTime() if (difference <= 0) { countdown = '' @@ -46,10 +49,17 @@ } onMount(() => { - if (startDate) { - updateCountdown() - countdownInterval = setInterval(updateCountdown, 1000) + if (!startDate && !endDate) return + const _update = () => { + if (startDate && comingSoon) { + updateCountdown(startDate) + } + if (endDate && !comingSoon) { + updateCountdown(endDate) + } } + countdownInterval = setInterval(_update, 1000) + _update() }) onDestroy(() => { @@ -78,18 +88,15 @@ {#if qtyRemaining <= 0}
{soldOutText}
- {:else if comingSoon} -
- {comingSoonText} -
- {#if startDate && countdown} -
-
- - {countdown} -
+ {:else if startDate || endDate} +
+
+ + {comingSoon ? comingSoonText : availableText} {countdown}
- {/if} +
{:else}
{availableText} diff --git a/packages/dashboard/src/routes/(static)/pricing/PricingTable.svelte b/packages/dashboard/src/routes/(static)/pricing/PricingTable.svelte index aa161720..da23d633 100644 --- a/packages/dashboard/src/routes/(static)/pricing/PricingTable.svelte +++ b/packages/dashboard/src/routes/(static)/pricing/PricingTable.svelte @@ -91,16 +91,17 @@ ] -
-
- Feature comparison -
- Learn more about our pricing ethos - and Fair Use. -
-
+
+ Learn more about our pricing ethos + and Fair Use. +
+ +
+
Feature comparison
@@ -125,7 +126,7 @@ href={$userStore && $isUserVerified ? pPrice.link : `/login`} - class="btn btn-sm btn-neutral text-base mb-2" + class="btn btn-sm btn-secondary text-base mb-2" > {pPrice.text} diff --git a/packages/dashboard/src/routes/+layout.svelte b/packages/dashboard/src/routes/+layout.svelte index 7f3a5be1..32c67340 100644 --- a/packages/dashboard/src/routes/+layout.svelte +++ b/packages/dashboard/src/routes/+layout.svelte @@ -8,6 +8,7 @@ import '@beyonk/gdpr-cookie-consent-banner/banner.css' // optional, you can also define your own styles // @ts-ignore import GdprBanner from '@beyonk/gdpr-cookie-consent-banner' + import PromoBanner from './PromoBanner.svelte' onMount(() => { init() @@ -18,6 +19,7 @@
+
diff --git a/packages/dashboard/src/routes/PromoBanner.svelte b/packages/dashboard/src/routes/PromoBanner.svelte new file mode 100644 index 00000000..44b68639 --- /dev/null +++ b/packages/dashboard/src/routes/PromoBanner.svelte @@ -0,0 +1,16 @@ + + +
+
+ This promo banner will go away after Dec 2. Please spread the word and help + close the Flouder's round. +
+ +