web/apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getMembershipCards } from "@/lib/trpc/memoizedRequests"

import { getIntl } from "@/i18n"

import styles from "./membershipcards.module.css"

export default async function MembershipCardSlot() {
  const intl = await getIntl()
  const membershipCards = await getMembershipCards()

  return (
    <section className={styles.container}>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              id: "myPages.myMembershipCards",
              defaultMessage: "My membership cards",
            })}
          </h3>
        </Typography>
      </div>
      {(membershipCards || []).map((card, idx) => (
        <div className={styles.card} key={idx}>
          <Typography variant="Title/Subtitle/md">
            <h4 className={styles.subTitle}>
              {intl.formatMessage(
                {
                  id: "myPages.nameWithCardMembershipType",
                  defaultMessage: "Name: {cardMembershipType}",
                },
                {
                  cardMembershipType: card.membershipType,
                }
              )}
            </h4>
          </Typography>
          <span>
            {intl.formatMessage(
              {
                id: "myPages.currentPointsWithPoints",
                defaultMessage: "Current Points: {points, number}",
              },
              { points: card.currentPoints }
            )}
          </span>
          <span>
            {intl.formatMessage(
              {
                id: "myPages.memberSinceWithValue",
                defaultMessage: "Member Since: {value}",
              },
              {
                value: card.memberSince,
              }
            )}
          </span>
          <span data-hj-suppress>
            {intl.formatMessage(
              {
                id: "myPages.numberWithValue",
                defaultMessage: "Number: {membershipNumber}",
              },
              {
                membershipNumber: card.membershipNumber,
              }
            )}
          </span>
          <span>
            {intl.formatMessage(
              {
                id: "myPages.expirationDateWithDate",
                defaultMessage: "Expiration Date: {expirationDate}",
              },
              {
                expirationDate: card.expirationDate?.split("T")[0],
              }
            )}
          </span>
        </div>
      ))}
      <Link href="#" variant="icon">
        <MaterialIcon icon="add_circle" color="CurrentColor" />
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.addNewCardText}
        >
          <p>
            {intl.formatMessage({
              id: "myPages.addNewCard",
              defaultMessage: "Add new card",
            })}
          </p>
        </Typography>
      </Link>
    </section>
  )
}