feat(SW-472): Add EnterDetails SidePeek

components/HotelReservation/Contact/index.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import FacebookIcon from "@/components/Icons/Facebook"
+import InstagramIcon from "@/components/Icons/Instagram"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./contact.module.css"
+
+import { ContactProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+
+export default function Contact({ hotel }: ContactProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  return (
+    <section className={styles.wrapper}>
+      <address className={styles.address}>
+        <ul className={styles.contactInfo}>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Address" })}
+            </span>
+            <span>
+              {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+            </span>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Driving directions" })}
+            </span>
+            <Link href="#" color="peach80">
+              {intl.formatMessage({ id: "Google Maps" })}
+            </Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Email" })}
+            </span>
+            <Link
+              href={`mailto:${hotel.contactInformation.email}`}
+              color="peach80"
+            >
+              {hotel.contactInformation.email}
+            </Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Contact us" })}
+            </span>
+            <Link
+              href={`tel:${hotel.contactInformation.phoneNumber}`}
+              color="peach80"
+            >
+              {hotel.contactInformation.phoneNumber}
+            </Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Follow us" })}
+            </span>
+            <div className={styles.soMeIcons}>
+              <Link href="#" target="_blank">
+                <InstagramIcon color="burgundy" />
+              </Link>
+              <Link href="#" target="_blank">
+                <FacebookIcon color="burgundy" />
+              </Link>
+            </div>
+          </li>
+        </ul>
+      </address>
+      {hotel.hotelFacts.ecoLabels.nordicEcoLabel ? (
+        <div className={styles.ecoLabel}>
+          <Image
+            height={38}
+            width={38}
+            alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+            src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+          />
+          <div className={styles.ecoLabelText}>
+            <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
+            <span>
+              {hotel.hotelFacts.ecoLabels.svanenEcoLabelCertificateNumber}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}