scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add memberships "endoint"

Browse Source
This commit is contained in:
Matilda Landström
2024-06-14 10:35:41 +02:00
committed by Michael Zetterberg
parent f40a6d4288
commit 3e54d3c29e
10 changed files with 175 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.module.css
View File

@@ -8,3 +8,15 @@
display: grid;
gap: var(--Spacing-x1);
}
.card {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 0.5rem;
}
.subTitle {
grid-column: span 2;
}

19
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
View File

@@ -1,3 +1,5 @@
import { serverClient } from "@/lib/trpc/server"
import { PlusCircleIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -8,6 +10,8 @@ import styles from "./page.module.css"
export default async function CreditCardSlot() {
const { formatMessage } = await getIntl()
const creditCards = await serverClient().user.creditCards()
return (
<section className={styles.container}>
<article className={styles.content}>
@@ -20,6 +24,21 @@ export default async function CreditCardSlot() {
})}
</Body>
</article>
{creditCards &&
creditCards.length > 0 &&
creditCards.map((card, idx) => (
<div className={styles.card} key={idx}>
<Subtitle className={styles.subTitle}>
Name: {card.attribute.cardName}
</Subtitle>
<span> Type: {card.attribute.cardType} </span>
<span> Alias: {card.attribute.alias}</span>
<span> Number: {card.attribute.truncatedNumber}</span>
<span>
Expiration Date: {card.attribute.expirationDate.split("T")[0]}
</span>
</div>
))}
<Link href="#" variant="icon">
<PlusCircleIcon color="burgundy" />
<Body color="burgundy" textTransform="underlined">

1
app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/[...catchAll]/page.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "../page"

22
app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.module.css Normal file
View File

@@ -0,0 +1,22 @@
.container {
display: grid;
gap: var(--Spacing-x3);
max-width: 510px;
}
.content {
display: grid;
gap: var(--Spacing-x1);
}
.card {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 0.5rem;
}
.subTitle {
grid-column: span 2;
}

43
app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { serverClient } from "@/lib/trpc/server"
import { PlusCircleIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import styles from "./page.module.css"
export default async function MembershipCardSlot() {
const { formatMessage } = await getIntl()
const membershipCards = await serverClient().user.membershipCards()
return (
<section className={styles.container}>
<article className={styles.content}>
<Subtitle color="black">
{formatMessage({ id: "My membership cards" })}
</Subtitle>
</article>
{membershipCards &&
membershipCards.length > 0 &&
membershipCards.map((card, idx) => (
<div className={styles.card} key={idx}>
<Subtitle className={styles.subTitle}>
Name: {card.membershipType}
</Subtitle>
<span> Current Points: {card.currentPoints} </span>
<span> Member Since: {card.memberSince}</span>
<span> Number: {card.membershipNumber}</span>
<span>Expiration Date: {card.expirationDate.split("T")[0]}</span>
</div>
))}
<Link href="#" variant="icon">
<PlusCircleIcon color="burgundy" />
<Body color="burgundy" textTransform="underlined">
{formatMessage({ id: "Add new card" })}
</Body>
</Link>
</section>
)
}

2
app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx
View File

@@ -6,6 +6,7 @@ export default function ProfileLayout({
children,
communication,
creditCards,
membershipCards,
profile,
}: React.PropsWithChildren<ProfileLayoutProps>) {
return (
@@ -14,6 +15,7 @@ export default function ProfileLayout({
<section className="profile-layout">
{profile}
{creditCards}
{membershipCards}
<Divider color="burgundy" opacity={8} />
{communication}
</section>