feat: add jest and initial tests for masking values

components/MyProfile/CreditCards/creditCards.module.css

@@ -1,18 +0,0 @@
-.container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.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;
-}

components/MyProfile/CreditCards/index.tsx

@@ -1,34 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import Card from "@/components/MyProfile/Card"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-
-import styles from "./creditCards.module.css"
-
-export default async function CreditCards() {
-  const creditCards = await serverClient().user.creditCards()
-  if (!creditCards) {
-    return null
-  }
-  const { formatMessage } = await getIntl()
-  return (
-    <Card className={styles.container}>
-      <Title level="h4">{formatMessage({ id: "My credit cards" })}</Title>
-      {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>
-      ))}
-    </Card>
-  )
-}