feat: list credit card according to design

2024-07-16 15:50:26 +02:00
parent d8f7e4157a
commit 09b1d322a7
12 changed files with 195 additions and 36 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
@@ -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>
+  )
+}