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,29 +70,20 @@ export default async function IntroSection({
             <h1 className={styles.title}>{hotelName}</h1>
           </Typography>
         </div>
-        <address
+        <address className={styles.contactAddress}>
-          className={cx(styles.addressPhoneNumber, {
-            [styles.stacked]: showLocalCharges,
-          })}
-        >
           <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>
 
-            {!showLocalCharges && (
+          <div
-              <Divider
+            className={cx(styles.contactInformation, {
-                className={styles.divider}
+              [styles.stacked]: showLocalCharges,
-                variant="vertical"
+            })}
-                color="Border/Divider/Default"
+          >
-              />
+            <div className={styles.phoneNumber}>
-            )}
-          </span>
-
-          <div className={styles.phoneWrapper}>
               <Link
                 href={`tel:${phoneNumber}`}
                 size="small"
@@ -108,6 +99,23 @@ export default async function IntroSection({
                 country={country}
               />
             </div>
+            {!showLocalCharges && (
+              <Divider
+                className={styles.divider}
+                variant="vertical"
+                color="Border/Divider/Default"
+              />
+            )}
+            <Link
+              href={`mailto:${email}`}
+              size="small"
+              color="Text/Interactive/Secondary"
+              variant="icon"
+            >
+              <MaterialIcon icon="email" color="CurrentColor" size={20} />
+              {email}
+            </Link>
+          </div>
         </address>
 
         {tripAdvisor ? <TripAdvisorSection tripAdvisor={tripAdvisor} /> : null}

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

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