From 039adac60c7fa93f71715c1502b1baffc20cd400 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 31 Aug 2024 01:29:31 +0800
Subject: [PATCH] update pro plan pricing card to include custom qr code

---
 .../(app)/dashboard/billing/+page.svelte      | 240 +++++++++---------
 .../routes/(public)/(landing)/+page.svelte    |   4 +
 2 files changed, 130 insertions(+), 114 deletions(-)

diff --git a/frontend/src/routes/(app)/dashboard/billing/+page.svelte b/frontend/src/routes/(app)/dashboard/billing/+page.svelte
index b379f31..1b38ca8 100644
--- a/frontend/src/routes/(app)/dashboard/billing/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/billing/+page.svelte
@@ -10,6 +10,7 @@
 	import { cancelSubscriptionSchema } from './schema'
 	import { superForm } from 'sveltekit-superforms'
 	import { toast } from 'svelte-sonner'
+	import { ScrollArea } from '$lib/components/ui/scroll-area'
 
 	export let data: PageData
 
@@ -45,75 +46,81 @@
 		<p class="text-muted-foreground">Checkout our pricings here.</p>
 	</div>
 	<Separator class="my-4 lg:my-6" />
-	<div class="flex w-full flex-wrap-reverse justify-center gap-8">
-		<div class="flex w-[400px] gap-8 rounded-lg border p-8">
-			<div class="flex w-full flex-col gap-3 text-start">
-				<h2 class="text-2xl font-bold">Free</h2>
-				<p class="text-muted-foreground">No credit card required.</p>
-				<Separator />
-				<div class="flex flex-col gap-2">
-					<div class="flex items-end gap-2">
-						<h1 class="text-5xl font-bold">$0</h1>
-						<span>/month</span>
-					</div>
-					<span class="text-muted-foreground">Free Forever</span>
-				</div>
-				<Separator />
-				<div class="flex h-full flex-col justify-between gap-12">
-					<div class="flex flex-col gap-4">
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>Unlimited Links</p>
-						</div>
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>Unlimited Projects</p>
+
+	<ScrollArea>
+		<div class="flex w-full flex-wrap-reverse justify-center gap-8">
+			<div class="flex w-[400px] gap-8 rounded-lg border p-8">
+				<div class="flex w-full flex-col gap-3 text-start">
+					<h2 class="text-2xl font-bold">Free</h2>
+					<p class="text-muted-foreground">
+						No credit card required.
+					</p>
+					<Separator />
+					<div class="flex flex-col gap-2">
+						<div class="flex items-end gap-2">
+							<h1 class="text-5xl font-bold">$0</h1>
+							<span>/month</span>
 						</div>
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>Click history up to 1 month</p>
+						<span class="text-muted-foreground">Free Forever</span>
+					</div>
+					<Separator />
+					<div class="flex h-full flex-col justify-between gap-12">
+						<div class="flex flex-col gap-4">
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>Unlimited Links</p>
+							</div>
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>Unlimited Projects</p>
+							</div>
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>Click history up to 1 month</p>
+							</div>
 						</div>
+						{#if data.user.plan === 'owner'}
+							<Button variant={'brand'} disabled>Owner</Button>
+						{:else if data.user.plan === 'free'}
+							<Button variant={'default'} disabled>
+								Current Plan
+							</Button>
+						{:else}
+							<Button variant={'brand'} disabled>Select Plan</Button>
+						{/if}
 					</div>
-					{#if data.user.plan === 'owner'}
-						<Button variant={'brand'} disabled>Owner</Button>
-					{:else if data.user.plan === 'free'}
-						<Button variant={'default'} disabled>Current Plan</Button>
-					{:else}
-						<Button variant={'brand'} disabled>Select Plan</Button>
-					{/if}
 				</div>
 			</div>
-		</div>
-		<div
-			class="border-brand relative flex w-[400px] gap-8 rounded-lg border p-8">
 			<div
-				class="bg-brand text-brand-foreground absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-3">
-				Recommended
-			</div>
-			<div class="flex w-full flex-col gap-3 text-start">
-				<h2 class="text-2xl font-bold">Pro</h2>
-				<p class="text-muted-foreground">
-					More customizations, more data.
-				</p>
-				<Separator />
-				<div class="flex flex-col gap-2">
-					<div class="flex items-end gap-2">
-						<h1 class="text-5xl font-bold">$9</h1>
-						<span>/month</span>
-					</div>
-					<span class="text-muted-foreground">Billed Monthly</span>
+				class="border-brand relative flex w-[400px] gap-8 rounded-lg border p-8">
+				<div
+					class="bg-brand text-brand-foreground absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-3">
+					Recommended
 				</div>
-				<Separator />
-				<div class="flex h-full flex-col justify-between gap-12">
-					<div class="flex flex-col gap-4">
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>Everything in free</p>
+				<div class="flex w-full flex-col gap-3 text-start">
+					<h2 class="text-2xl font-bold">Pro</h2>
+					<p class="text-muted-foreground">
+						More customizations, more data.
+					</p>
+					<Separator />
+					<div class="flex flex-col gap-2">
+						<div class="flex items-end gap-2">
+							<h1 class="text-5xl font-bold">$9</h1>
+							<span>/month</span>
 						</div>
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>5 custom domains</p>
-							<!-- <Tooltip.Root>
+						<span class="text-muted-foreground">Billed Monthly</span>
+					</div>
+					<Separator />
+					<div class="flex h-full flex-col justify-between gap-12">
+						<div class="flex flex-col gap-4">
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>Everything in free</p>
+							</div>
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>5 custom domains</p>
+								<!-- <Tooltip.Root>
 								<Tooltip.Trigger class="flex items-center gap-1">
 									<InfoIcon class="h-4 w-4" />
 								</Tooltip.Trigger>
@@ -121,62 +128,67 @@
 									Additional domains are $3 per domain
 								</Tooltip.Content>
 							</Tooltip.Root> -->
+							</div>
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>2 years of tracked clicks and history</p>
+							</div>
+							<div class="flex items-center gap-2">
+								<Check class="text-brand" />
+								<p>Custom QR Code</p>
+							</div>
 						</div>
-						<div class="flex items-center gap-2">
-							<Check class="text-brand" />
-							<p>2 years of tracked clicks and history</p>
-						</div>
+						{#if data.user.plan === 'owner'}
+							<Button variant={'brand'} disabled>Owner</Button>
+						{:else if data.user.plan === 'pro'}
+							<Dialog.Root bind:open={cancelPlanDialogOpen}>
+								<Dialog.Trigger
+									class={buttonVariants({ variant: 'destructive' })}>
+									Cancel Plan
+								</Dialog.Trigger>
+								<Dialog.Content class="sm:max-w-[425px]">
+									<Dialog.Header>
+										<Dialog.Title>Cancel plan?</Dialog.Title>
+										<Dialog.Description>
+											Your subscription will still be valid until the
+											next billing
+										</Dialog.Description>
+									</Dialog.Header>
+									<Dialog.Footer>
+										<Button
+											variant={'outline'}
+											on:click={() => (cancelPlanDialogOpen = false)}>
+											Cancel
+										</Button>
+										<form
+											method="POST"
+											use:enhanceCancelSubscription
+											class="flex flex-col gap-6"
+											action="?/cancel_subscription">
+											<Form.Button
+												class="w-fit"
+												variant="destructive"
+												disabled={$submittingCancelSubscription ||
+													!data.user.plan}>
+												{#if $submittingCancelSubscription}
+													<LoaderCircleIcon class="animate-spin" />
+												{/if}
+												Proceed
+											</Form.Button>
+										</form>
+									</Dialog.Footer>
+								</Dialog.Content>
+							</Dialog.Root>
+						{:else}
+							<Button
+								href={'/dashboard/billing/plan/pro'}
+								variant={'brand'}>
+								Select Plan
+							</Button>
+						{/if}
 					</div>
-					{#if data.user.plan === 'owner'}
-						<Button variant={'brand'} disabled>Owner</Button>
-					{:else if data.user.plan === 'pro'}
-						<Dialog.Root bind:open={cancelPlanDialogOpen}>
-							<Dialog.Trigger
-								class={buttonVariants({ variant: 'destructive' })}>
-								Cancel Plan
-							</Dialog.Trigger>
-							<Dialog.Content class="sm:max-w-[425px]">
-								<Dialog.Header>
-									<Dialog.Title>Cancel plan?</Dialog.Title>
-									<Dialog.Description>
-										Your subscription will still be valid until the
-										next billing
-									</Dialog.Description>
-								</Dialog.Header>
-								<Dialog.Footer>
-									<Button
-										variant={'outline'}
-										on:click={() => (cancelPlanDialogOpen = false)}>
-										Cancel
-									</Button>
-									<form
-										method="POST"
-										use:enhanceCancelSubscription
-										class="flex flex-col gap-6"
-										action="?/cancel_subscription">
-										<Form.Button
-											class="w-fit"
-											variant="destructive"
-											disabled={$submittingCancelSubscription ||
-												!data.user.plan}>
-											{#if $submittingCancelSubscription}
-												<LoaderCircleIcon class="animate-spin" />
-											{/if}
-											Proceed
-										</Form.Button>
-									</form>
-								</Dialog.Footer>
-							</Dialog.Content>
-						</Dialog.Root>
-					{:else}
-						<Button
-							href={'/dashboard/billing/plan/pro'}
-							variant={'brand'}>
-							Select Plan
-						</Button>
-					{/if}
 				</div>
 			</div>
 		</div>
-	</div>
+	</ScrollArea>
 </div>
diff --git a/frontend/src/routes/(public)/(landing)/+page.svelte b/frontend/src/routes/(public)/(landing)/+page.svelte
index a002197..2fd69ea 100644
--- a/frontend/src/routes/(public)/(landing)/+page.svelte
+++ b/frontend/src/routes/(public)/(landing)/+page.svelte
@@ -138,6 +138,10 @@
 									<Check class="text-brand" />
 									<p>2 years click history</p>
 								</div>
+								<div class="flex items-center gap-2">
+									<Check class="text-brand" />
+									<p>Custom QR Code</p>
+								</div>
 							</div>
 						</div>
 						<div