fix(BOOK-559): Using same ContactInformation component on hotel pages and booking flow inside the hotel details sidepeek

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/HotelDetailsSidePeek/ContactInformation/contactInformation.module.css

@@ -0,0 +1,50 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+}
+
+.information {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Space-x2);
+  grid-template-areas:
+    "address drivingDirections"
+    "contact socials"
+    "email email"
+    "ecoLabel ecoLabel";
+  font-style: normal;
+}
+
+.address {
+  grid-area: address;
+}
+
+.drivingDirections {
+  grid-area: drivingDirections;
+}
+
+.contact {
+  grid-area: contact;
+}
+
+.socials {
+  grid-area: socials;
+}
+
+.socialIcons {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: center;
+}
+
+.email {
+  grid-area: email;
+}
+
+.ecoLabel {
+  grid-area: ecoLabel;
+  display: flex;
+  gap: var(--Space-x15);
+  color: var(--Text-Secondary);
+}

packages/booking-flow/lib/components/HotelDetailsSidePeek/ContactInformation/index.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import NextLink from "next/link"
+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 { LocalCallCharges } from "@scandic-hotels/design-system/LocalCallCharges"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "../../../hooks/useLang"
+
+import styles from "./contactInformation.module.css"
+
+import type { Hotel, HotelAddress } from "@scandic-hotels/trpc/types/hotel"
+
+interface ContactInformationProps {
+  hotelAddress: HotelAddress
+  contact: Hotel["contactInformation"]
+  socials: Hotel["socialMedia"]
+  ecoLabels: Hotel["hotelFacts"]["ecoLabels"]
+  hotelName: Hotel["name"]
+}
+
+export function ContactInformation({
+  hotelAddress,
+  contact,
+  socials,
+  ecoLabels,
+  hotelName,
+}: ContactInformationProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+    `${hotelName}, ${hotelAddress.streetAddress}, ${hotelAddress.zipCode} ${hotelAddress.city}`
+  )}`
+  return (
+    <div className={styles.wrapper}>
+      <Typography variant="Title/Subtitle/lg">
+        <h3>
+          {intl.formatMessage({
+            id: "common.practicalInformation",
+            defaultMessage: "Practical information",
+          })}
+        </h3>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdBold">
+        <address className={styles.information}>
+          <div className={styles.address}>
+            <p>
+              {intl.formatMessage({
+                id: "common.address",
+                defaultMessage: "Address",
+              })}
+            </p>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div>
+                <p>{hotelAddress.streetAddress}</p>
+                <p>{hotelAddress.city}</p>
+              </div>
+            </Typography>
+          </div>
+          <div className={styles.drivingDirections}>
+            <p>
+              {intl.formatMessage({
+                id: "common.drivingDirections",
+                defaultMessage: "Driving directions",
+              })}
+            </p>
+            <TextLink href={directionsUrl} target="_blank">
+              {intl.formatMessage({
+                id: "common.googleMaps",
+                defaultMessage: "Google Maps",
+              })}
+            </TextLink>
+          </div>
+          <div className={styles.contact}>
+            <p>
+              {intl.formatMessage({
+                id: "common.contactUs",
+                defaultMessage: "Contact us",
+              })}
+            </p>
+            <TextLink href={`tel:+${contact.phoneNumber}`}>
+              {contact.phoneNumber}
+            </TextLink>
+            <LocalCallCharges country={hotelAddress.country} />
+          </div>
+          {socials.instagram || socials.facebook ? (
+            <div className={styles.socials}>
+              <p>
+                {intl.formatMessage({
+                  id: "common.followUs",
+                  defaultMessage: "Follow us",
+                })}
+              </p>
+              <div className={styles.socialIcons}>
+                {socials.instagram && (
+                  <NextLink href={socials.instagram}>
+                    <InstagramIcon color="Icon/Interactive/Default" />
+                  </NextLink>
+                )}
+                {socials.facebook && (
+                  <NextLink href={socials.facebook}>
+                    <FacebookIcon color="Icon/Interactive/Default" />
+                  </NextLink>
+                )}
+              </div>
+            </div>
+          ) : null}
+          <div className={styles.email}>
+            <p>
+              {intl.formatMessage({
+                id: "common.email",
+                defaultMessage: "Email",
+              })}
+            </p>
+            <TextLink href={`mailto:${contact.email}`}>
+              {contact.email}
+            </TextLink>
+          </div>
+          {ecoLabels.nordicEcoLabel && (
+            <div className={styles.ecoLabel}>
+              <Image
+                height={38}
+                width={38}
+                alt={intl.formatMessage({
+                  id: "common.nordicSwanEcolabel",
+                  defaultMessage: "Nordic Swan Ecolabel",
+                })}
+                src={`/_static/shared/icons/swan-eco/swan_eco_dark_${lang}.png`}
+              />
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div>
+                  <p>
+                    {intl.formatMessage({
+                      id: "common.nordicSwanEcolabel",
+                      defaultMessage: "Nordic Swan Ecolabel",
+                    })}
+                  </p>
+                  <p>{ecoLabels.svanenEcoLabelCertificateNumber}</p>
+                </div>
+              </Typography>
+            </div>
+          )}
+        </address>
+      </Typography>
+    </div>
+  )
+}

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css

@@ -1,5 +1,5 @@
 .content {
   display: grid;
-  gap: var(--Space-x2);
+  gap: var(--Space-x4);
   color: var(--Text-Default);
 }

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx

@@ -10,10 +10,10 @@ import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents"
 import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
 import { routeToScandicWebUrl } from "../../../utils/routeToScandicWebUrl"
 import AdditionalAmenities from "../../AdditionalAmenities"
-import Contact from "../../Contact"
 import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem"
 import CheckInCheckOutAccordionItem from "../../SidePeekAccordions/CheckInCheckOutAccordionItem"
 import ParkingAccordionItem from "../../SidePeekAccordions/ParkingAccordionItem"
+import { ContactInformation } from "../ContactInformation"
 
 import styles from "./hotelSidePeek.module.css"
 
@@ -41,15 +41,13 @@ export function HotelSidePeekContent({
 
   return (
     <div className={styles.content}>
-      <Typography variant="Title/Subtitle/lg">
-        <h3>
-          {intl.formatMessage({
-            id: "common.practicalInformation",
-            defaultMessage: "Practical information",
-          })}
-        </h3>
-      </Typography>
-      <Contact hotel={hotel} />
+      <ContactInformation
+        hotelAddress={hotel.address}
+        contact={hotel.contactInformation}
+        socials={hotel.socialMedia}
+        ecoLabels={hotel.hotelFacts.ecoLabels}
+        hotelName={hotel.name}
+      />
 
       <Accordion type="sidepeek">
         <ParkingAccordionItem