Merged in fix/book-607-fix-old-links-my-stay (pull request #3365)

fix: updated to use new link structure on My Stay

* fix: updated to use new link structure on My Stay

* fix(BOOK-607): hide hotel page link if link prop is missing

* comment fixes

* fix(BOOK-607): read href from window (lcalhost not allowed)


Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx

@@ -16,14 +16,64 @@ import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
 
 interface BookingSummaryProps {
   hotel: Hotel
+  hotelUrl: string | null
 }
 
-export default function BookingSummary({ hotel }: BookingSummaryProps) {
+export default function BookingSummary({
+  hotel,
+  hotelUrl,
+}: BookingSummaryProps) {
   const intl = useIntl()
 
   const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
     `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
   )}`
+
+  const directionsLinkObject = {
+    href: directionsUrl,
+    text: intl.formatMessage({
+      id: "common.directions",
+      defaultMessage: "Directions",
+    }),
+    icon: (
+      <MaterialIcon
+        icon="directions"
+        size={20}
+        color="Icon/Interactive/Default"
+      />
+    ),
+    onClick: () => trackMyStayPageLink("see on map"),
+  }
+
+  const emailLinkObject = {
+    href: `mailto:${hotel.contactInformation.email}`,
+    text: intl.formatMessage({
+      id: "common.email",
+      defaultMessage: "Email",
+    }),
+    icon: (
+      <MaterialIcon icon="mail" size={20} color="Icon/Interactive/Default" />
+    ),
+    onClick: () => trackMyStayPageLink("email us"),
+  }
+
+  const hotelLinkObject = {
+    href: hotelUrl || "",
+    text: intl.formatMessage({
+      id: "myStay.bookingSummary.homepage",
+      defaultMessage: "Homepage",
+    }),
+    icon: (
+      <MaterialIcon icon="link" size={20} color="Icon/Interactive/Default" />
+    ),
+    onClick: () => trackMyStayPageLink("hotel homepage"),
+  }
+
+  const links = [
+    directionsLinkObject,
+    emailLinkObject,
+    ...(hotelUrl ? [hotelLinkObject] : []), // Only include hotel link if URL is provided
+  ]
   return (
     <div className={styles.bookingSummary}>
       <Typography variant="Title/sm">
@@ -59,53 +109,7 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
               long: hotel.location.longitude,
             }
           )}
-          links={[
-            {
-              href: directionsUrl,
-              text: intl.formatMessage({
-                id: "common.directions",
-                defaultMessage: "Directions",
-              }),
-              icon: (
-                <MaterialIcon
-                  icon="directions"
-                  size={20}
-                  color="Icon/Interactive/Default"
-                />
-              ),
-              onClick: () => trackMyStayPageLink("see on map"),
-            },
-            {
-              href: `mailto:${hotel.contactInformation.email}`,
-              text: intl.formatMessage({
-                id: "common.email",
-                defaultMessage: "Email",
-              }),
-              icon: (
-                <MaterialIcon
-                  icon="mail"
-                  size={20}
-                  color="Icon/Interactive/Default"
-                />
-              ),
-              onClick: () => trackMyStayPageLink("email us"),
-            },
-            {
-              href: hotel.contactInformation.websiteUrl,
-              text: intl.formatMessage({
-                id: "myStay.bookingSummary.homepage",
-                defaultMessage: "Homepage",
-              }),
-              icon: (
-                <MaterialIcon
-                  icon="link"
-                  size={20}
-                  color="Icon/Interactive/Default"
-                />
-              ),
-              onClick: () => trackMyStayPageLink("hotel homepage"),
-            },
-          ]}
+          links={links}
         />
       </div>
       {hotel.specialAlerts.map((alert) => (