feat(BOOK-378): Added email address to the hotel page intro section

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -30,7 +30,7 @@ interface IntroSectionProps {
   hotelName: Hotel["name"]
   location: HotelLocation
   tripAdvisor: HotelTripAdvisor
-  phoneNumber: string
+  contactInformation: Hotel["contactInformation"]
 }
 
 export default async function IntroSection({
@@ -39,7 +39,7 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
-  phoneNumber,
+  contactInformation,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { streetAddress, city, country } = address
@@ -50,7 +50,7 @@ export default async function IntroSection({
     },
     { number: getSingleDecimal(distanceToCentre / 1000) }
   )
-
+  const { phoneNumber, email } = contactInformation
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
 
   const showLocalCharges = country === Country.Finland
@@ -70,19 +70,35 @@ export default async function IntroSection({
             <h1 className={styles.title}>{hotelName}</h1>
           </Typography>
         </div>
-        <address
-          className={cx(styles.addressPhoneNumber, {
-            [styles.stacked]: showLocalCharges,
-          })}
-        >
+        <address className={styles.contactAddress}>
           <span className={styles.location}>
-            <span className={styles.address}>
-              <MaterialIcon icon="location_on" color="CurrentColor" size={20} />
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>{formattedLocationText}</p>
-              </Typography>
-            </span>
+            <MaterialIcon icon="location_on" color="CurrentColor" size={20} />
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{formattedLocationText}</p>
+            </Typography>
+          </span>
 
+          <div
+            className={cx(styles.contactInformation, {
+              [styles.stacked]: showLocalCharges,
+            })}
+          >
+            <div className={styles.phoneNumber}>
+              <Link
+                href={`tel:${phoneNumber}`}
+                size="small"
+                color="Text/Interactive/Secondary"
+                textDecoration="underline"
+                variant="icon"
+              >
+                <MaterialIcon icon="phone" color="CurrentColor" size={20} />
+                {phoneNumber}
+              </Link>
+              <LocalCallCharges
+                className={styles.localCharges}
+                country={country}
+              />
+            </div>
             {!showLocalCharges && (
               <Divider
                 className={styles.divider}
@@ -90,23 +106,15 @@ export default async function IntroSection({
                 color="Border/Divider/Default"
               />
             )}
-          </span>
-
-          <div className={styles.phoneWrapper}>
             <Link
-              href={`tel:${phoneNumber}`}
+              href={`mailto:${email}`}
               size="small"
               color="Text/Interactive/Secondary"
-              textDecoration="underline"
               variant="icon"
             >
-              <MaterialIcon icon="phone" color="CurrentColor" size={20} />
-              {phoneNumber}
+              <MaterialIcon icon="email" color="CurrentColor" size={20} />
+              {email}
             </Link>
-            <LocalCallCharges
-              className={styles.localCharges}
-              country={country}
-            />
           </div>
         </address>
 

apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -6,7 +6,7 @@
 }
 
 .localCharges::before {
-  content: "(";
+  content: " (";
 }
 
 .localCharges::after {
@@ -39,60 +39,44 @@
   gap: var(--Space-x2);
 }
 
-.addressPhoneNumber {
-  font-style: normal;
+.contactAddress,
+.contactInformation {
   display: grid;
-  gap: var(--Space-x15);
-  align-items: center;
+  gap: var(--Space-x1);
 }
 
-.address {
-  color: var(--Text-Secondary);
-  gap: var(--Space-x05);
-  align-items: flex-start;
-  display: flex;
+.contactAddress {
+  font-style: normal;
 }
 
 .location {
   display: flex;
-  gap: var(--Space-x2);
-  height: 100%;
+  gap: var(--Space-x05);
+  align-items: center;
+  color: var(--Text-Secondary);
 }
 
-.divider {
-  display: none;
-}
-
-.phoneWrapper {
+.phoneNumber {
   display: flex;
   flex-direction: column;
   gap: var(--Space-x15);
 }
 
-@media screen and (min-width: 767px) {
-  .addressPhoneNumber {
+@media screen and (max-width: 767px) {
+  .divider {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .contactInformation:not(.stacked) {
     display: flex;
     flex-direction: row;
     gap: var(--Space-x2);
   }
 
-  .addressPhoneNumber.stacked {
-    display: grid;
-    gap: var(--Space-x15);
-    align-items: center;
-  }
-
-  .address {
-    align-items: center;
-  }
-
-  .phoneWrapper {
+  .phoneNumber {
     flex-direction: row;
     gap: var(--Space-x1);
-    align-items: center;
-  }
-
-  .divider {
-    display: block;
   }
 }

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -174,7 +174,7 @@ export default async function HotelPage({
               location={location}
               address={address}
               tripAdvisor={ratings?.tripAdvisor}
-              phoneNumber={contactInformation.phoneNumber}
+              contactInformation={contactInformation}
             />
 
             <AmenitiesList detailedFacilities={detailedFacilities} />