TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update pro plan pricing card to include custom qr code

Browse Source
main
TZGyn 1 year ago
parent 389f38d0f7
commit 039adac60c
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
2 changed files with 130 additions and 114 deletions
Show Stats Download Patch File Download Diff File

240
frontend/src/routes/(app)/dashboard/billing/+page.svelte
Unescape Escape View File

@ -10,6 +10,7 @@
import { cancelSubscriptionSchema } from './schema' import { cancelSubscriptionSchema } from './schema'
import { superForm } from 'sveltekit-superforms' import { superForm } from 'sveltekit-superforms'
import { toast } from 'svelte-sonner' import { toast } from 'svelte-sonner'
import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: PageData export let data: PageData
@ -45,75 +46,81 @@
<p class="text-muted-foreground">Checkout our pricings here.</p> <p class="text-muted-foreground">Checkout our pricings here.</p>
</div> </div>
<Separator class="my-4 lg:my-6" /> <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"> <ScrollArea>
<div class="flex w-full flex-col gap-3 text-start"> <div class="flex w-full flex-wrap-reverse justify-center gap-8">
<h2 class="text-2xl font-bold">Free</h2> <div class="flex w-[400px] gap-8 rounded-lg border p-8">
<p class="text-muted-foreground">No credit card required.</p> <div class="flex w-full flex-col gap-3 text-start">
<Separator /> <h2 class="text-2xl font-bold">Free</h2>
<div class="flex flex-col gap-2"> <p class="text-muted-foreground">
<div class="flex items-end gap-2"> No credit card required.
<h1 class="text-5xl font-bold">$0</h1> </p>
<span>/month</span> <Separator />
</div> <div class="flex flex-col gap-2">
<span class="text-muted-foreground">Free Forever</span> <div class="flex items-end gap-2">
</div> <h1 class="text-5xl font-bold">$0</h1>
<Separator /> <span>/month</span>
<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>
<div class="flex items-center gap-2"> <span class="text-muted-foreground">Free Forever</span>
<Check class="text-brand" /> </div>
<p>Click history up to 1 month</p> <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> </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>
{#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>
</div>
<div
class="border-brand relative flex w-[400px] gap-8 rounded-lg border p-8">
<div <div
class="bg-brand text-brand-foreground absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-3"> class="border-brand relative flex w-[400px] gap-8 rounded-lg border p-8">
Recommended <div
</div> class="bg-brand text-brand-foreground absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-3">
<div class="flex w-full flex-col gap-3 text-start"> Recommended
<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>
</div> </div>
<Separator /> <div class="flex w-full flex-col gap-3 text-start">
<div class="flex h-full flex-col justify-between gap-12"> <h2 class="text-2xl font-bold">Pro</h2>
<div class="flex flex-col gap-4"> <p class="text-muted-foreground">
<div class="flex items-center gap-2"> More customizations, more data.
<Check class="text-brand" /> </p>
<p>Everything in free</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>
<div class="flex items-center gap-2"> <span class="text-muted-foreground">Billed Monthly</span>
<Check class="text-brand" /> </div>
<p>5 custom domains</p> <Separator />
<!-- <Tooltip.Root> <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"> <Tooltip.Trigger class="flex items-center gap-1">
<InfoIcon class="h-4 w-4" /> <InfoIcon class="h-4 w-4" />
</Tooltip.Trigger> </Tooltip.Trigger>
@ -121,62 +128,67 @@
Additional domains are $3 per domain Additional domains are $3 per domain
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Root> --> </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>
<div class="flex items-center gap-2"> {#if data.user.plan === 'owner'}
<Check class="text-brand" /> <Button variant={'brand'} disabled>Owner</Button>
<p>2 years of tracked clicks and history</p> {:else if data.user.plan === 'pro'}
</div> <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>
{#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>
</div> </div>
</div> </ScrollArea>
</div> </div>

4
frontend/src/routes/(public)/(landing)/+page.svelte
Unescape Escape View File

@ -138,6 +138,10 @@
<Check class="text-brand" /> <Check class="text-brand" />
<p>2 years click history</p> <p>2 years click history</p>
</div> </div>
<div class="flex items-center gap-2">
<Check class="text-brand" />
<p>Custom QR Code</p>
</div>
</div> </div>
</div> </div>
<div <div

Write Preview
Loading…
Cancel
Save