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

feat: list credit card according to design

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-16 15:50:26 +02:00
parent d8f7e4157a
commit 09b1d322a7
12 changed files with 195 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Spacing-x2);
max-width: 510px;
}
@@ -9,14 +9,24 @@
gap: var(--Spacing-x1);
}
.card {
margin-top: 2rem;
.cardContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 0.5rem;
gap: var(--Spacing-x1);
}
.subTitle {
grid-column: span 2;
.card {
display: grid;
align-items: center;
column-gap: var(--Spacing-x1);
grid-template-columns: auto auto auto 1fr;
justify-items: flex-end;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half,);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Background-Primary-Normal);
}
@media screen and (min-width: 768px) {
.container {
gap: var(--Spacing-x2);
}
}

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

@@ -1,8 +1,10 @@
import { serverClient } from "@/lib/trpc/server"
import { PlusCircleIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import { CreditCard, Delete } from "@/components/Icons"
import AddCreditCardButton from "@/components/Profile/AddCreditCardButton"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
@@ -24,27 +26,38 @@ 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">
{formatMessage({ id: "Add new card" })}
</Body>
</Link>
{creditCards?.length ? (
<div className={styles.cardContainer}>
{creditCards.map((card, idx) => (
<CreditCardRow
key={idx}
cardType={card.attribute.cardType}
truncatedNumber={card.attribute.truncatedNumber}
/>
))}
</div>
) : null}
<AddCreditCardButton />
</section>
)
}
function CreditCardRow({
truncatedNumber,
cardType,
}: {
truncatedNumber: string
cardType: string
}) {
const maskedCardNumber = `**** ${truncatedNumber.slice(12, 16)}`
return (
<div className={styles.card}>
<CreditCard color="black" />
<Body textTransform="bold">{cardType}</Body>
<Caption color="textMediumContrast">{maskedCardNumber}</Caption>
<Button variant="icon" theme="base" intent="text">
<Delete color="burgundy" />
</Button>
</div>
)
}

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

@@ -7,7 +7,7 @@
.info {
display: grid;
gap: var(--Spacing-x-one-and-half) var(--Spacing-x7);
grid-template-columns: repeat(3, auto);
width: 100%;
justify-items: flex-start;
}
@@ -16,4 +16,15 @@
display: grid;
gap: var(--Spacing-x1);
grid-template-columns: auto auto 1fr;
justify-items: flex-end;
width: 100%;
}
@media screen and (min-width: 768px) {
.info {
grid-template-columns: repeat(3, auto);
}
.item {
justify-items: flex-start;
}
}

8
app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css
View File

@@ -7,5 +7,11 @@
border-radius: var(--Corner-radius-xLarge);
display: grid;
gap: var(--Spacing-x4);
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
}
@media screen and (min-width: 768px) {
.profile-layout {
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
}
}