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 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 && creditCards.length > 0 && creditCards.map((card, idx) => (

Name: {card.attribute.cardName} Type: {card.attribute.cardType} Alias: {card.attribute.alias} Number: {card.attribute.truncatedNumber} Expiration Date: {card.attribute.expirationDate.split("T")[0]}

))} {formatMessage({ id: "Add new card" })}

) }