From 0d59c4065c01c9b26262cd0682554409421146bb Mon Sep 17 00:00:00 2001
From: Zicklag <zicklag@katharostech.com>
Date: Sat, 14 Dec 2024 12:00:16 -0600
Subject: [PATCH] feat: improve information in free trial dialog.

---
 src/routes/(app)/[username]/+layout.svelte    |  1 -
 .../components/ManageSubscriptionModal.svelte | 21 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index ef0bd31..f4cebe7 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/src/routes/(app)/[username]/+layout.svelte
@@ -7,7 +7,6 @@
 	import SetHandleModal from './components/ChangeHandleModal.svelte';
 	import ManageSubscriptionModal from './components/ManageSubscriptionModal.svelte';
 	import DeleteProfileModal from './components/DeleteProfileModal.svelte';
-	import { env } from '$env/dynamic/public';
 
 	const { data, children }: { children: Snippet; data: PageData } = $props();
 
diff --git a/src/routes/(app)/[username]/components/ManageSubscriptionModal.svelte b/src/routes/(app)/[username]/components/ManageSubscriptionModal.svelte
index f39033b..4d99dc5 100644
--- a/src/routes/(app)/[username]/components/ManageSubscriptionModal.svelte
+++ b/src/routes/(app)/[username]/components/ManageSubscriptionModal.svelte
@@ -57,14 +57,31 @@
 				{#if subscriptionInfo?.freeTrialExpirationDate}
 					<div class="card bg-surface-200-700-token mt-4 drop-shadow-lg">
 						<header class="card-header text-xl font-bold">Free Trial</header>
-						<section class="flex flex-col gap-3 p-4">
-							<p class="max-w-[27em]">You have access to memorable usernames or custom domains!</p>
+						<section class="prose prose-invert p-4">
+							<p>You have access to the following benefits:</p>
+							<ul>
+								{#if subscriptionInfo.benefits.has('non_numbered_username')}
+									<li>Claim a handle that doesn't end in a number.</li>
+								{/if}
+								{#if subscriptionInfo.benefits.has('custom_domain')}
+									<li>Use a custom domain for your handle.</li>
+								{/if}
+							</ul>
 							<p>
 								<strong>Trial Expires:</strong>
 								{format(subscriptionInfo.freeTrialExpirationDate)}
 							</p>
 						</section>
 					</div>
+					<div class="mt-5 flex flex-col items-center gap-4">
+						<p class="max-w-[30em]">
+							You must purchase a subscription before the trial expires if you wish to keep your
+							custom domain or handle.
+						</p>
+						<button class="variant-ghost btn" onclick={purchaseSubscription}
+							>Purchase Subscription</button
+						>
+					</div>
 				{:else if !subscriptionInfo.benefits.size}
 					<div class="card bg-surface-200-700-token mt-4 drop-shadow-lg">
 						<header class="card-header text-xl font-bold">Weird Nerd</header>