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

import { Lang, languages } from "@scandic-hotels/common/constants/language"
import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
import { isValidLang } from "@scandic-hotels/common/utils/languages"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { countriesMap } from "@scandic-hotels/trpc/constants/countries"

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

import CommunicationSlot from "@/components/MyPages/Profile/Communication"
import CreditCardSlot from "@/components/MyPages/Profile/CreditCards"
import Header from "@/components/Profile/Header"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"

import ChangeNameDisclaimer from "./ChangeNameDisclaimer"

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

export default async function Profile() {
  const user = await getProfile()
  if (!user || "error" in user) {
    return null
  }

  const intl = await getIntl()
  const lang = await getLang()

  const addressParts = []
  if (user.address.streetAddress) {
    addressParts.push(user.address.streetAddress)
  }

  if (user.address.city) {
    addressParts.push(user.address.city)
  }

  const displayNames = {
    language: new Intl.DisplayNames([lang], { type: "language" }),
    region: new Intl.DisplayNames([lang], { type: "region" }),
  }

  if (user.address.country) {
    const countryCode = isValidCountry(user.address.country)
      ? countriesMap[user.address.country]
      : null
    const localizedCountry = countryCode
      ? displayNames.region.of(countryCode)
      : user.address.country
    addressParts.push(localizedCountry)
  }

  const addressOutput =
    addressParts.length > 0
      ? addressParts.join(", ")
      : intl.formatMessage({
          defaultMessage: "N/A",
        })

  const userLang = isValidLang(user.language) ? user.language : Lang.en
  const localizedLanguage = displayNames.language.of(userLang)
  const normalizedLanguage = localizedLanguage
    ? localizedLanguage.charAt(0).toUpperCase() + localizedLanguage.slice(1)
    : languages[userLang]

  return (
    <section className={styles.container}>
      <Header>
        <Typography variant="Title/xs">
          <h2 className={styles.title}>
            {intl.formatMessage({
              defaultMessage: "Welcome",
            })}
            <br />
            <span data-hj-suppress className={styles.titleName}>
              {user.name}
            </span>
          </h2>
        </Typography>
        <ButtonLink
          size="Small"
          prefetch={false}
          href={profileEdit[lang]}
          typography="Body/Supporting text (caption)/smBold"
        >
          {intl.formatMessage({
            defaultMessage: "Edit profile",
          })}
        </ButtonLink>
      </Header>
      <div className={styles.info}>
        <div className={styles.item}>
          <MaterialIcon
            icon="calendar_month"
            color="Icon/Interactive/Default"
          />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Date of Birth",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{user.dateOfBirth}</p>
          </Typography>
        </div>
        <div className={styles.item}>
          <MaterialIcon icon="phone" color="Icon/Interactive/Default" />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Phone number",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{user.phoneNumber}</p>
          </Typography>
        </div>
        <div className={styles.item}>
          <MaterialIcon icon="globe" color="Icon/Interactive/Default" />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Language",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{normalizedLanguage}</p>
          </Typography>
        </div>
        <div className={styles.item}>
          <MaterialIcon icon="mail" color="Icon/Interactive/Default" />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Email",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{user.email}</p>
          </Typography>
        </div>
        <div className={styles.item}>
          <MaterialIcon icon="location_on" color="Icon/Interactive/Default" />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Address",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{addressOutput}</p>
          </Typography>
        </div>
        <div className={styles.item}>
          <MaterialIcon icon="lock" color="Icon/Interactive/Default" />
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Password",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <p>**********</p>
          </Typography>
        </div>
      </div>

      <ChangeNameDisclaimer />

      <Divider />
      <CreditCardSlot />
      {/* <MembershipCardSlot /> */}
      <CommunicationSlot />
    </section>
  )
}