web/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

import {
  MaterialIcon,
  type MaterialIconSetIconProps,
} from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"

import { serverClient } from "@/lib/trpc/server"

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

import type { ContactRowProps } from "@/types/components/sidebar/joinLoyaltyContact"

export default async function ContactRow({ contact }: ContactRowProps) {
  const caller = await serverClient()
  const data = await caller.contentstack.base.contact()
  if (!data) {
    return null
  }

  const val = getValueFromContactConfig(contact.contact_field, data)
  const footnote = contact.footnote
    ? getValueFromContactConfig(contact.footnote, data)
    : null

  if (!val) {
    return null
  }

  let Icon = null
  if (contact.contact_field.includes("email")) {
    Icon = MailIcon
  } else if (contact.contact_field.includes("phone")) {
    Icon = PhoneIcon
  }

  let openableLink = val
  if (contact.contact_field.includes("email")) {
    openableLink = `mailto:${val}`
  } else if (contact.contact_field.includes("phone")) {
    openableLink = `tel:${val}`
  }

  return (
    <div className={styles.wrapper}>
      {contact.display_text ? (
        <Typography
          variant="Body/Paragraph/mdBold"
          className={styles.displayText}
        >
          <p>{contact.display_text}</p>
        </Typography>
      ) : null}
      <TextLink
        typography="Link/sm"
        className={styles.link}
        href={openableLink}
      >
        {Icon ? <Icon size={20} color="Icon/Interactive/Default" /> : null}
        {val}
      </TextLink>
      {footnote && (
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{footnote}</p>
        </Typography>
      )}
    </div>
  )
}

function PhoneIcon(props: MaterialIconSetIconProps) {
  return <MaterialIcon icon="call" {...props} />
}
function MailIcon(props: MaterialIconSetIconProps) {
  return <MaterialIcon icon="mail" {...props} />
}