web/packages/booking-flow/lib/components/Contact/index.tsx

"use client"

import { useIntl } from "react-intl"

import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "../../hooks/useLang"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

interface ContactProps {
  hotel: Hotel
}

export default function Contact({ hotel }: ContactProps) {
  const lang = useLang()
  const intl = useIntl()

  const addressStr = `${hotel.address.streetAddress}, `
  const cityStr = hotel.address.city

  return (
    <section className={styles.wrapper}>
      <address className={styles.address}>
        <ul className={styles.contactInfo}>
          <li>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Address",
                })}
              </p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {addressStr}
                <br />
                {cityStr}
              </p>
            </Typography>
          </li>
          <li>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Driving directions",
                })}
              </p>
            </Typography>
            <Link
              href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
                `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
              )}`}
            >
              <Typography variant="Body/Underline/md">
                <p>
                  {intl.formatMessage({
                    defaultMessage: "Google Maps",
                  })}
                </p>
              </Typography>
            </Link>
          </li>
          <li>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Contact us",
                })}
              </p>
            </Typography>
            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
              <Typography variant="Body/Underline/md">
                <p>{hotel.contactInformation.phoneNumber}</p>
              </Typography>
            </Link>
          </li>
          <li>
            {(hotel.socialMedia.facebook || hotel.socialMedia.instagram) && (
              <>
                <Typography variant="Body/Paragraph/mdBold">
                  <p>
                    {intl.formatMessage({
                      defaultMessage: "Follow us",
                    })}
                  </p>
                </Typography>
                <div className={styles.soMeIcons}>
                  {hotel.socialMedia.instagram && (
                    <Link href={hotel.socialMedia.instagram} target="_blank">
                      <InstagramIcon color="Icon/Interactive/Default" />
                    </Link>
                  )}
                  {hotel.socialMedia.facebook && (
                    <Link href={hotel.socialMedia.facebook} target="_blank">
                      <FacebookIcon color="Icon/Interactive/Default" />
                    </Link>
                  )}
                </div>
              </>
            )}
          </li>
          <li>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "Email",
                })}
              </p>
            </Typography>
            <Link href={`mailto:${hotel.contactInformation.email}`}>
              <Typography variant="Body/Underline/md">
                <p>{hotel.contactInformation.email}</p>
              </Typography>
            </Link>
          </li>
        </ul>
      </address>
      {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
        <div className={styles.ecoContainer}>
          <div className={styles.ecoLabel}>
            <Image
              height={38}
              width={38}
              alt={intl.formatMessage({
                defaultMessage: "Nordic Swan Ecolabel",
              })}
              src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
            />
          </div>
          <div className={styles.ecoLabelText}>
            <span>
              {intl.formatMessage({
                defaultMessage: "Nordic Swan Ecolabel",
              })}
            </span>
            <span>
              {hotel.hotelFacts.ecoLabels.svanenEcoLabelCertificateNumber}
            </span>
          </div>
        </div>
      ) : null}
    </section>
  )
}