import { serverClient } from "@/lib/trpc/server" 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" import styles from "./page.module.css" export default async function CreditCardSlot() { const { formatMessage } = await getIntl() const creditCards = await serverClient().user.creditCards() return (
{formatMessage({ id: "My credit cards" })} {formatMessage({ id: "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.", })}
{creditCards?.length ? (
{creditCards.map((card, idx) => ( ))}
) : null}
) } function CreditCardRow({ truncatedNumber, cardType, }: { truncatedNumber: string cardType: string }) { const maskedCardNumber = `**** ${truncatedNumber.slice(12, 16)}` return (
{cardType} {maskedCardNumber}
) }