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={[
+          links={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"),
-            },
-          ]}
         />
       </div>
       {hotel.specialAlerts.map((alert) => (

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/AddToCalendar/index.tsx

@@ -16,14 +16,21 @@ import type { EventAttributes } from "ics"
 export default function AddToCalendarAction() {
   const pathName = usePathname()
 
-  const { checkInDate, checkOutDate, createDateTime, hotel } = useMyStayStore(
+  const { checkInDate, checkOutDate, createDateTime, hotelUrl, hotel } =
-    (state) => ({
+    useMyStayStore((state) => ({
       checkInDate: state.bookedRoom.checkInDate,
       checkOutDate: state.bookedRoom.checkOutDate,
       createDateTime: state.bookedRoom.createDateTime,
       hotel: state.hotel,
-    })
+      hotelUrl: state.hotelUrl,
-  )
+    }))
+  let baseUrl = typeof window !== "undefined" ? window.location.hostname : ""
+  if (baseUrl.includes("localhost") || !baseUrl) {
+    // Localhost not valid for calendar URL
+    baseUrl = "https://www.scandichotels.com"
+  }
+
+  const url = new URL(hotelUrl || "", baseUrl)
 
   const calendarEvent: EventAttributes = {
     busyStatus: "FREE",
@@ -41,7 +48,7 @@ export default function AddToCalendarAction() {
     startInputType: "utc",
     status: "CONFIRMED",
     title: hotel.name,
-    url: hotel.contactInformation.websiteUrl,
+    url: url.toString(),
   }
 
   const disabled = dateHasPassed(

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

@@ -191,6 +191,7 @@ async function MyStay(props: {
 
     const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
     const promoUrl = new URL(`${baseUrl}/${lang}/`)
+    const hotelUrl = new URL(`${baseUrl}${bookingConfirmation.url}/`)
 
     promoUrl.searchParams.set("hotel", hotel.operaId)
 
@@ -263,7 +264,7 @@ async function MyStay(props: {
             <SingleRoom user={maskedUser} />
             <MultiRoom user={maskedUser} />
 
-            <BookingSummary hotel={hotel} />
+            <BookingSummary hotelUrl={hotelUrl.toString()} hotel={hotel} />
             {!isWebview && (
               <Promo
                 title={intl.formatMessage({

apps/scandic-web/providers/MyStay.tsx

@@ -106,6 +106,7 @@ export default function MyStayProvider({
     storeRef.current = createMyStayStore({
       breakfastPackages,
       hotel: bookingConfirmation.hotel,
+      hotelUrl: bookingConfirmation.url,
       intl,
       refId,
       roomCategories,

apps/scandic-web/stores/my-stay/index.ts

@@ -21,6 +21,7 @@ export function createMyStayStore({
   hotel,
   intl,
   refId,
+  hotelUrl,
   roomCategories,
   rooms,
   savedCreditCards,
@@ -72,6 +73,7 @@ export function createMyStayStore({
       bookedRoom,
       breakfastPackages,
       hotel,
+      hotelUrl,
       isLoggedIn,
       mainRoom,
       manageStay: false,

apps/scandic-web/types/stores/my-stay.ts

@@ -45,6 +45,7 @@ interface Actions {
 }
 
 export interface MyStayState {
+  hotelUrl: string | null
   actions: Actions
   allRoomsAreCancelled: boolean
   bookedRoom: Room
@@ -61,17 +62,17 @@ export interface MyStayState {
   isPastBooking: boolean
 }
 
-export interface InitialState
+export interface InitialState extends Pick<
-  extends Pick<
+  MyStayState,
-    MyStayState,
+  | "breakfastPackages"
-    | "breakfastPackages"
+  | "hotel"
-    | "hotel"
+  | "refId"
-    | "refId"
+  | "savedCreditCards"
-    | "savedCreditCards"
+  | "isLoggedIn"
-    | "isLoggedIn"
+  | "isPastBooking"
-    | "isPastBooking"
+> {
-  > {
   intl: IntlShape
   roomCategories: RoomCategories
   rooms: BookingRoom[]
+  hotelUrl: string | null
 }