Skip to content

Commit 49adcf5

Browse files
mgehrlsmgehrls
authored
#418 feature:/account details (#445)
* add feature/account details #418 * fixed wrong href
1 parent 49c19f5 commit 49adcf5

File tree

4 files changed

+147
-46
lines changed

4 files changed

+147
-46
lines changed

‎apps/codingcatdev/src/routes/(protected)/account/+page.svelte

Lines changed: 15 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,24 @@
11
<script lang="ts">
22
import type { PageData } from './$types';
33
export let data: PageData;
4-
5-
import { openStripePortal } from '$lib/client/firebase';
6-
import { ProgressCircle } from '@codingcatdev/blackcatui';
74
import LayoutWrapper from '../../(layout-partials)/LayoutWrapper.svelte';
8-
import LogoutButton from '../../login/LogoutButton.svelte';
9-
import ProButton from '../ProButton.svelte';
10-
11-
import { Icon } from '@steeze-ui/svelte-icon';
12-
import { ArrowTopRightOnSquare } from '@steeze-ui/heroicons';
13-
14-
let redirecting = false;
15-
16-
const onOpenMembership = async () => {
17-
redirecting = true;
18-
await openStripePortal();
19-
};
5+
import AccountCard from './AccountCard.svelte';
6+
import MembershipCard from './MembershipCard.svelte';
7+
import SupportCard from './SupportCard.svelte';
208
</script>
219

2210
<LayoutWrapper>
23-
<h1>{data.user?.email}</h1>
24-
<LogoutButton />
25-
26-
{#if data?.user?.stripeRole}
27-
<div class="bcu-card p-8 flex flex-col gap-2 md:gap-8">
28-
<h2>Membership</h2>
29-
30-
Current Membership: {data?.user?.stripeRole}
31-
32-
{#if redirecting}
33-
<button class="bcu-button variant-filled-surface flex gap-2">
34-
Redirecting
35-
<ProgressCircle
36-
stroke={100}
37-
meter="stroke-primary-50"
38-
track="stroke-primary-500/30"
39-
class="w-8"
40-
/>
41-
</button>
42-
{:else}
43-
<button
44-
class="bcu-button variant-filled-surface flex gap-2"
45-
on:click|once={onOpenMembership}
46-
>
47-
Open Membership
48-
<Icon src={ArrowTopRightOnSquare} theme="mini" class="w-8" />
49-
</button>
50-
{/if}
11+
<div class="flex justify-center p-4 w-full">
12+
<div class="xl:max-w-7xl w-full flex-1">
13+
<div class="flex justify-between mb-4">
14+
<h1>Account and Settings</h1>
15+
<a class="bcu-button variant-filled" href="/dashboard">Dashboard</a>
16+
</div>
17+
<div class="flex flex-col w-full jSustify-center items-start gap-4">
18+
<AccountCard {data} />
19+
<MembershipCard {data} />
20+
<SupportCard />
21+
</div>
5122
</div>
52-
{:else}
53-
<ProButton products={data.products} uid={data.user?.uid} />
54-
{/if}
23+
</div>
5524
</LayoutWrapper>

‎apps/codingcatdev/src/routes/(protected)/account/AccountCard.svelte

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import type { PageData } from './$types';
3+
export let data: PageData;
4+
5+
import { openStripePortal } from '$lib/client/firebase';
6+
import LogoutButton from '../../login/LogoutButton.svelte';
7+
</script>
8+
9+
<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full">
10+
<div class="flex flex-col md:flex-row md:justify-between w-full p-8 gap-4 md:gap-8">
11+
<div class="md:w-1/3">
12+
<h2 class="mb-8">Account</h2>
13+
<p>Your account details</p>
14+
</div>
15+
<div class="bcu-card variant-filled p-8 flex flex-col gap-4 md:w-2/3">
16+
<div class="flex items-center gap-4">
17+
<p class="text-lg">Your Email:</p>
18+
<p>{data?.user?.email}</p>
19+
</div>
20+
<div class="flex items-center gap-4">
21+
<p class="text-lg">Your Avatar:</p>
22+
<img
23+
class="w-20"
24+
src={data.user ? data.user.picture : '/images/avatar.png'}
25+
alt="User's avatar"
26+
/>
27+
</div>
28+
<LogoutButton />
29+
</div>
30+
</div>
31+
</div>

‎apps/codingcatdev/src/routes/(protected)/account/MembershipCard.svelte

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="ts">
2+
import type { PageData } from './$types';
3+
export let data: PageData;
4+
5+
import { openStripePortal } from '$lib/client/firebase';
6+
import { ProgressCircle } from '@codingcatdev/blackcatui';
7+
import ProButton from '../ProButton.svelte';
8+
9+
import { Icon } from '@steeze-ui/svelte-icon';
10+
import { ArrowTopRightOnSquare } from '@steeze-ui/heroicons';
11+
12+
let redirecting = false;
13+
14+
const onOpenMembership = async () => {
15+
redirecting = true;
16+
await openStripePortal();
17+
};
18+
</script>
19+
20+
{#if data?.user?.stripeRole}
21+
<div class="bcu-card p-8 flex flex-col gap-2 md:gap-8 w-full">
22+
<h2>Membership</h2>
23+
24+
Current Membership: {data?.user?.stripeRole}
25+
26+
{#if redirecting}
27+
<button class="bcu-button variant-filled-surface flex gap-2">
28+
Redirecting
29+
<ProgressCircle
30+
stroke={100}
31+
meter="stroke-primary-50"
32+
track="stroke-primary-500/30"
33+
class="w-8"
34+
/>
35+
</button>
36+
{:else}
37+
<button class="bcu-button variant-filled-surface flex gap-2" on:click|once={onOpenMembership}>
38+
Open Membership
39+
<Icon src={ArrowTopRightOnSquare} theme="mini" class="w-8" />
40+
</button>
41+
{/if}
42+
</div>
43+
{:else}
44+
<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full md:p-8">
45+
<div class="flex flex-col gap-2 md:gap-8">
46+
<div class="p-8 md:p-0">
47+
<h2 class="mb-8">Membership</h2>
48+
49+
<p>Current Membership: Free-tier</p>
50+
</div>
51+
</div>
52+
<ProButton products={data.products} uid={data.user?.uid} />
53+
</div>
54+
{/if}

‎apps/codingcatdev/src/routes/(protected)/account/SupportCard.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { Icon } from '@steeze-ui/svelte-icon';
3+
import { Discord, Github, Twitter, Youtube } from '@steeze-ui/simple-icons';
4+
</script>
5+
6+
<div class="bcu-card flex flex-col md:flex-row justify-between gap-2 md:gap-8 w-full">
7+
<div class="flex flex-col md:flex-row md:justify-between w-full p-8 gap-4 md:gap-8">
8+
<div class="md:w-1/3">
9+
<h2 class="mb-8">Support</h2>
10+
<p>Struggling? Reach out!</p>
11+
</div>
12+
<div class="bcu-card variant-filled p-8 flex flex-col gap-4 md:w-2/3">
13+
<p class="text-lg">Support Contact</p>
14+
<p>Questions/Comments? Reach out on your preferred platform!</p>
15+
<div class="flex flex-wrap justify-around">
16+
<a
17+
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
18+
target="_blank"
19+
href="https://discord.com/invite/vM2bagU"
20+
>
21+
<Icon src={Discord} theme="solid" class="w-8" />
22+
</a>
23+
<a
24+
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
25+
target="_blank"
26+
href="https://twitter.com/CodingCatDev"
27+
>
28+
<Icon src={Twitter} theme="solid" class="w-8" />
29+
</a>
30+
<a
31+
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
32+
target="_blank"
33+
href="https://www.youtube.com/c/codingcatdev"
34+
>
35+
<Icon src={Youtube} theme="solid" class="w-8" />
36+
</a>
37+
<a
38+
class="bcu-card variant-filled bcu-card-hover p-8 min-h-96"
39+
target="_blank"
40+
href="https://twitter.com/CodingCatDev"
41+
>
42+
<Icon src={Github} theme="solid" class="w-8" />
43+
</a>
44+
</div>
45+
</div>
46+
</div>
47+
</div>

0 commit comments

Comments
 (0)