Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: integrated getPlans endpoint #893

Merged
merged 1 commit into from
Feb 1, 2024
Merged

Feat: integrated getPlans endpoint #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions src/lib/assets/icons/premium/IconAffiliateVerification.svelte
View file
Open in desktop

This file was deleted.

79 changes: 40 additions & 39 deletions src/lib/components/Premium/ItemPlan.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,63 @@
<script lang="ts">
import { page } from '$app/stores'
import IconAffiliateCheck from '$lib/assets/icons/premium/IconAffiliateCheck.svelte'
import IconAffiliateVerification from '$lib/assets/icons/premium/IconAffiliateVerification.svelte'
import { onMount } from 'svelte'

export let plan: any = {}
export let plan: any = {},
index: number = 0,
recurringInterval: string = 'month'

$: if (recurringInterval) {
price = plan.prices.find((price: any) => price.recurring.interval === recurringInterval)
}

let price: any
onMount(() => {
console.log('recurringInterval', recurringInterval)
})
</script>

<div
class="card max-w-sm flex flex-col p-6 mx-auto text-center border border-gray-100 shadow dark:border-gray-600 xl:p-8">
<h3 class="text-2xl {plan.name === 'Premium' ? 'text-accent font-bold' : 'font-semibold'}">
{plan.name}
</h3>
<!-- <p class=" text-gray-500 sm:text-lg">
{plan.description}
</p> -->
class="card max-w-sm flex flex-col p-6 mx-auto text-center xl:p-8 border border-gray-100 shadow dark:border-gray-600">
{#if index > 1}
<div class="bg-accent rounded-lg">
<h3 class="text-2xl text-accent-content font-bold">
{plan.name}
</h3>
</div>
{:else}
<h3 class="text-2xl {index > 0 ? 'text-accent font-bold' : 'font-semibold'}">
{plan.name}
</h3>
{/if}
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">${plan.price}</span>
<span class="text-gray-500">/month</span>
<span class="mr-2 text-5xl font-extrabold">${price?.unit_amount / 100}</span>
<span class="text-gray-500">/{price?.recurring?.interval}</span>
</div>

<p class="sm:text-sm mb-8 font-semibold">
{plan.description}
</p>

<ul class="mb-8 space-y-4 text-left">
{#each plan.features as feature}
<li class="flex items-center space-x-3">
<IconAffiliateCheck />
<span>{feature}</span>
<span>{feature.name}</span>
</li>
{/each}

{#if plan.features2.length}
<div class="divider text-accent font-bold link link-accent">Requires Affiliate</div>
{#each plan.features2 as feature}
<li class="flex items-center space-x-3">
<IconAffiliateVerification />
<span>{feature}</span>
</li>
{/each}
{/if}
</ul>
{#if $page.data.user?.userId}
<form>
<form style="margin-top: auto;">
<div class="flex flex-col space-y-3">
{#if plan.name === 'Premium'}
<button
class="btn btn-accent px-5 py-2.5 text-black"
disabled={$page.data.user?.user?.planTier > 0}
>{$page.data.user?.user?.planTier > 0 ? 'Selected' : 'Select'}</button>
{#if $page.data.user?.user?.planTier === 1}
<a
href="https://forms.gle/mBtByR6jdoJeQd367"
class="link link-accent link-hover font-bold">
Apply for verification
</a>
{/if}
{:else}
<button
<button
class="btn btn-accent px-5 py-2.5 text-black"
disabled={$page.data.user?.user?.planTier > 0}
>{$page.data.user?.user?.planTier > 0 ? 'Selected' : 'Select'}</button>
<!-- <button
class="btn btn-neutral px-5 py-2.5"
disabled={$page.data.user?.user?.planTier === 0}
>{$page.data.user?.user?.planTier === 0 ? 'Selected' : 'Select'}</button>
{/if}
>{$page.data.user?.user?.planTier === 0 ? 'Selected' : 'Select'}</button> -->
</div>
</form>
{/if}
Expand Down
62 changes: 15 additions & 47 deletions src/routes/premium/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,16 @@
<script lang="ts">
import ItemPlan from '$lib/components/Premium/ItemPlan.svelte'
import { onMount } from 'svelte'
import { page } from '$app/stores'
import { env } from '$env/dynamic/public'
import { get } from '$lib/api'

let plans: any = [
{
name: 'Free',
// description:
// 'Great for individuals just getting started with streaming and learning the platform.',
price: 0,
features: [
'Unlimited channels',
'Up to 9 guests in a live-stream',
'Restream to 10 other platforms',
'AI chat fully enabled',
'Up to 100 messages in chat history',
'View streaming stats'
],
features2: []
},
{
name: 'Premium',
// description:
// 'Perfect for dedicated streamers looking to grow their brand and expand their reach.',
price: 4,
features: [
'Everything in Free Tier',
'Expanded reach for brand growth',
'GPT-4 access (once available)',
'Unlimited chat history'
],
features2: [
'Sponsor contributions',
'An affiliate badge',
'Modified avatar',
'RevShare (TBD)'
]
}
]

onMount(() => {})
let plans: any = []
let recurringInterval: string = 'month'
let isChecked = false
$: recurringInterval = isChecked ? 'year' : 'month'
onMount(async () => {
plans = await get(`plans`)
console.log('got here---plans', plans)
})
</script>

<!-- <section>
Expand Down Expand Up @@ -74,19 +44,17 @@
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold">Designed for dedicated streamers</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl">
Collaborative streaming powered by AI. Our platform is designed to expand your reach and
grow your brand.
Our platform is designed to expand your reach and grow your brand.
</p>
<div class="flex gap-2 justify-center">
<span>
<a class="mb-5 link link-secondary" href={env.PUBLIC_STRIPE_BILLING_URL}
>Manage your subscription</a>
</span>
<span>Monthly</span>
<input type="checkbox" class="toggle toggle-accent" bind:checked={isChecked} />
<span>Yearly (2 months free)</span>
</div>
</div>
<div class="md:flex h-full">
{#each plans as plan}
<ItemPlan {plan} />
{#each plans as plan, index}
<ItemPlan {plan} {index} {recurringInterval} />
{/each}
</div>
</div>
Expand Down