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,
  type MaterialIconProps,
} 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 Header from "@/components/Profile/Header"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"

import ChangeNameDisclaimer from "./ChangeNameDisclaimer"
import { CommunicationSettings } from "./CommunicationSettings"
import { Payment } from "./Payment"

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({
          id: "common.NA",
          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]

  const userDataItems: {
    icon: MaterialIconProps["icon"]
    label: string
    value: string
  }[] = [
    {
      icon: "calendar_month",
      label: intl.formatMessage({
        id: "profile.dateOfBirth",
        defaultMessage: "Date of birth",
      }),
      value: user.dateOfBirth,
    },
    {
      icon: "phone",
      label: intl.formatMessage({
        id: "common.phoneNumber",
        defaultMessage: "Phone number",
      }),
      value: user.phoneNumber ?? "",
    },
    {
      icon: "globe",
      label: intl.formatMessage({
        id: "profile.language",
        defaultMessage: "Language",
      }),
      value: normalizedLanguage,
    },
    {
      icon: "mail",
      label: intl.formatMessage({
        id: "common.email",
        defaultMessage: "Email",
      }),
      value: user.email,
    },
    {
      icon: "location_on",
      label: intl.formatMessage({
        id: "common.address",
        defaultMessage: "Address",
      }),
      value: addressOutput,
    },
    {
      icon: "lock",
      label: intl.formatMessage({
        id: "profile.password",
        defaultMessage: "Password",
      }),
      value: "**********",
    },
  ]

  return (
    <section className={styles.container}>
      <Header>
        <Typography variant="Title/xs">
          <h2 className={styles.title}>
            {intl.formatMessage({
              id: "common.welcome",
              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({
            id: "myPages.editProfile",
            defaultMessage: "Edit profile",
          })}
        </ButtonLink>
      </Header>
      <div className={styles.info}>
        {userDataItems.map(({ icon, label, value }) => (
          <div className={styles.item} key={label}>
            <MaterialIcon icon={icon} color="Icon/Interactive/Default" />
            <Typography variant="Body/Paragraph/mdBold">
              <p>{label}</p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>{value}</p>
            </Typography>
          </div>
        ))}
      </div>

      <ChangeNameDisclaimer />

      <Divider />
      <CommunicationSettings />
      <Payment />
      {/* <MembershipCardSlot /> */}
    </section>
  )
}