Skip to content

#418 feature:/account details #445

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

Merged
merged 3 commits into from
May 21, 2023
Merged

#418 feature:/account details #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24c70dd
add feature/account details #418
mgehrls May 15, 2023
8a86c65
fixed wrong href
mgehrls May 15, 2023
89919d0
Merge branch 'CodingCatDev:dev' into account-page-redesign
mgehrls May 20, 2023
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
61 changes: 15 additions & 46 deletions apps/codingcatdev/src/routes/(protected)/account/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,24 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;

import { openStripePortal } from '$lib/client/firebase';
import { ProgressCircle } from '@codingcatdev/blackcatui';
import LayoutWrapper from '../../(layout-partials)/LayoutWrapper.svelte';
import LogoutButton from '../../login/LogoutButton.svelte';
import ProButton from '../ProButton.svelte';

import { Icon } from '@steeze-ui/svelte-icon';
import { ArrowTopRightOnSquare } from '@steeze-ui/heroicons';

let redirecting = false;

const onOpenMembership = async () => {
redirecting = true;
await openStripePortal();
};
import AccountCard from './AccountCard.svelte';
import MembershipCard from './MembershipCard.svelte';
import SupportCard from './SupportCard.svelte';
</script>

<LayoutWrapper>
<h1>{data.user?.email}</h1>
<LogoutButton />

{#if data?.user?.stripeRole}
<div class="bcu-card p-8 flex flex-col gap-2 md:gap-8">
<h2>Membership</h2>

Current Membership: {data?.user?.stripeRole}

{#if redirecting}
<button class="bcu-button variant-filled-surface flex gap-2">
Redirecting
<ProgressCircle
stroke={100}
meter="stroke-primary-50"
track="stroke-primary-500/30"
class="w-8"
/>
</button>
{:else}
<button
class="bcu-button variant-filled-surface flex gap-2"
on:click|once={onOpenMembership}
>
Open Membership
<Icon src={ArrowTopRightOnSquare} theme="mini" class="w-8" />
</button>
{/if}
<div class="flex justify-center p-4 w-full">
<div class="xl:max-w-7xl w-full flex-1">
<div class="flex justify-between mb-4">
<h1>Account and Settings</h1>
<a class="bcu-button variant-filled" href="/dashboard">Dashboard</a>
</div>
<div class="flex flex-col w-full jSustify-center items-start gap-4">
<AccountCard {data} />
<MembershipCard {data} />
<SupportCard />
</div>
</div>
{:else}
<ProButton products={data.products} uid={data.user?.uid} />
{/if}
</div>
</LayoutWrapper>
31 changes: 31 additions & 0 deletions apps/codingcatdev/src/routes/(protected)/account/AccountCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;

import { openStripePortal } from '$lib/client/firebase';
import LogoutButton from '../../login/LogoutButton.svelte';
</script>

<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full">
<div class="flex flex-col md:flex-row md:justify-between w-full p-8 gap-4 md:gap-8">
<div class="md:w-1/3">
<h2 class="mb-8">Account</h2>
<p>Your account details</p>
</div>
<div class="bcu-card variant-filled p-8 flex flex-col gap-4 md:w-2/3">
<div class="flex items-center gap-4">
<p class="text-lg">Your Email:</p>
<p>{data?.user?.email}</p>
</div>
<div class="flex items-center gap-4">
<p class="text-lg">Your Avatar:</p>
<img
class="w-20"
src={data.user ? data.user.picture : '/images/avatar.png'}
alt="User's avatar"
/>
</div>
<LogoutButton />
</div>
</div>
</div>
54 changes: 54 additions & 0 deletions apps/codingcatdev/src/routes/(protected)/account/MembershipCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;

import { openStripePortal } from '$lib/client/firebase';
import { ProgressCircle } from '@codingcatdev/blackcatui';
import ProButton from '../ProButton.svelte';

import { Icon } from '@steeze-ui/svelte-icon';
import { ArrowTopRightOnSquare } from '@steeze-ui/heroicons';

let redirecting = false;

const onOpenMembership = async () => {
redirecting = true;
await openStripePortal();
};
</script>

{#if data?.user?.stripeRole}
<div class="bcu-card p-8 flex flex-col gap-2 md:gap-8 w-full">
<h2>Membership</h2>

Current Membership: {data?.user?.stripeRole}

{#if redirecting}
<button class="bcu-button variant-filled-surface flex gap-2">
Redirecting
<ProgressCircle
stroke={100}
meter="stroke-primary-50"
track="stroke-primary-500/30"
class="w-8"
/>
</button>
{:else}
<button class="bcu-button variant-filled-surface flex gap-2" on:click|once={onOpenMembership}>
Open Membership
<Icon src={ArrowTopRightOnSquare} theme="mini" class="w-8" />
</button>
{/if}
</div>
{:else}
<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full md:p-8">
<div class="flex flex-col gap-2 md:gap-8">
<div class="p-8 md:p-0">
<h2 class="mb-8">Membership</h2>

<p>Current Membership: Free-tier</p>
</div>
</div>
<ProButton products={data.products} uid={data.user?.uid} />
</div>
{/if}
47 changes: 47 additions & 0 deletions apps/codingcatdev/src/routes/(protected)/account/SupportCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts">
import { Icon } from '@steeze-ui/svelte-icon';
import { Discord, Github, Twitter, Youtube } from '@steeze-ui/simple-icons';
</script>

<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full">
<div class="flex flex-col md:flex-row md:justify-between w-full p-8 gap-4 md:gap-8">
<div class="md:w-1/3">
<h2 class="mb-8">Support</h2>
<p>Struggling? Reach out!</p>
</div>
<div class="bcu-card variant-filled p-8 flex flex-col gap-4 md:w-2/3">
<p class="text-lg">Support Contact</p>
<p>Questions/Comments? Reach out on your preferred platform!</p>
<div class="flex flex-wrap justify-around">
<a
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
target="_blank"
href="https://discord.com/invite/vM2bagU"
>
<Icon src={Discord} theme="solid" class="w-8" />
</a>
<a
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
target="_blank"
href="https://twitter.com/CodingCatDev"
>
<Icon src={Twitter} theme="solid" class="w-8" />
</a>
<a
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
target="_blank"
href="https://www.youtube.com/c/codingcatdev"
>
<Icon src={Youtube} theme="solid" class="w-8" />
</a>
<a
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
target="_blank"
href="https://twitter.com/CodingCatDev"
>
<Icon src={Github} theme="solid" class="w-8" />
</a>
</div>
</div>
</div>
</div>