Merged in fix/SW-2926-hotel-special-alerts- (pull request #2580)

fix(SW-2926): Display alerts in booking flow if date range matches search dates and in hotel page if current date is in date range

* fix(SW-2926): Display alerts in booking flow if date range matches search dates and in hotel page if current date is in date range

* fix(SW-2926) Updated hotel alerts with respect to booking dates

* fix(SW-2926): Optimized code


Approved-by: Matilda Landström

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

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import { dt } from "@scandic-hotels/common/dt"
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
 
 import {
@@ -181,9 +182,17 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           {specialAlerts.length ? (
             <div className={styles.alertsContainer}>
               {specialAlerts
-                .filter(
+                .filter((alert) => {
-                  (alert) => alert.name !== AlertName.HotelChildrenInBooking
+                  const now = dt().utc().format("YYYY-MM-DD")
-                )
+                  const shouldShowNow =
+                    alert.startDate && alert.endDate
+                      ? alert.startDate <= now && alert.endDate >= now
+                      : true
+                  return (
+                    alert.name !== AlertName.HotelChildrenInBooking &&
+                    shouldShowNow
+                  )
+                })
                 .map((alert) => (
                   <Alert
                     key={alert.id}

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

@@ -15,6 +15,7 @@ import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
 
+import { getHotelAlertsForBookingDates } from "../utils"
 import Confirmation from "./Confirmation"
 import Tracking from "./Tracking"
 import { mapRoomState } from "./utils"
@@ -77,7 +78,11 @@ export default async function BookingConfirmation({
           <PaymentDetails />
           <Divider color="Border/Divider/Subtle" />
           <HotelDetails hotel={hotel} />
-          {hotel.specialAlerts.map((alert) => (
+          {getHotelAlertsForBookingDates(
+            hotel.specialAlerts,
+            booking.checkInDate,
+            booking.checkOutDate
+          ).map((alert) => (
             <div key={alert.id}>
               <Alert
                 type={alert.type}

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

@@ -40,6 +40,8 @@ import { getIntl } from "@/i18n"
 import MyStayProvider from "@/providers/MyStay"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
+import { getHotelAlertsForBookingDates } from "../utils"
+
 import styles from "./index.module.css"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
@@ -199,6 +201,12 @@ export default async function MyStay(props: {
         } satisfies SafeUser)
       : null
 
+    hotel.specialAlerts = getHotelAlertsForBookingDates(
+      hotel.specialAlerts,
+      fromDate,
+      toDate
+    )
+
     return (
       <MyStayProvider
         bookingConfirmation={maskedBookingConfirmation}

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,4 +1,3 @@
-import { dt } from "@scandic-hotels/common/dt"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,6 +11,7 @@ import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ReadMore from "../../ReadMore"
 import TripAdvisorChip from "../../TripAdvisorChip"
+import { getHotelAlertsForBookingDates } from "../../utils"
 import HotelDescription from "./HotelDescription"
 
 import styles from "./hotelInfoCard.module.css"
@@ -31,8 +31,11 @@ export default async function HotelInfoCard({
 
   const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
 
-  const fromDate = dt(booking.fromDate)
+  const specialAlerts = getHotelAlertsForBookingDates(
-  const toDate = dt(booking.toDate)
+    hotel.specialAlerts,
+    booking.fromDate,
+    booking.toDate
+  )
 
   return (
     <article className={styles.container}>
@@ -101,30 +104,7 @@ export default async function HotelInfoCard({
           </div>
         </div>
       </section>
-      {hotel.specialAlerts.map((alert) => {
+      {specialAlerts.map((alert) => {
-        if (alert.endDate && alert.startDate) {
-          const endDate = dt(alert.endDate)
-          const startDate = dt(alert.startDate)
-
-          const fromDateIsBetweenAlertDates = dt(fromDate).isBetween(
-            startDate,
-            endDate,
-            "date",
-            "[]"
-          )
-          const toDateIsBetweenAlertDates = dt(toDate).isBetween(
-            startDate,
-            endDate,
-            "date",
-            "[]"
-          )
-          const bookingSpanIsBetweenAlertDates =
-            fromDateIsBetweenAlertDates && toDateIsBetweenAlertDates
-          if (!bookingSpanIsBetweenAlertDates) {
-            return null
-          }
-        }
-
         return (
           <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
             <Alert

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

@@ -1,3 +1,4 @@
+import { dt } from "@scandic-hotels/common/dt"
 import {
   MaterialIcon,
   type MaterialIconSetIconProps,
@@ -6,6 +7,7 @@ import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 import { ChildBedTypeEnum } from "@scandic-hotels/trpc/enums/childBedTypeEnum"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
+import type { specialAlertsSchema } from "@scandic-hotels/trpc/routers/hotels/schemas/hotel/specialAlerts"
 import type { Packages } from "@scandic-hotels/trpc/types/packages"
 import type { JSX } from "react"
 
@@ -83,3 +85,33 @@ export function calculateVat(priceInclVat: number, vat: number) {
     vatAmount,
   }
 }
+
+export function getHotelAlertsForBookingDates(
+  specialAlerts: Zod.infer<typeof specialAlertsSchema>,
+  fromDate: string,
+  toDate: string
+) {
+  return specialAlerts.filter((alert) => {
+    if (alert.endDate && alert.startDate) {
+      const endDate = dt(alert.endDate)
+      const startDate = dt(alert.startDate)
+
+      const fromDateIsBetweenAlertDates = dt(fromDate).isBetween(
+        startDate,
+        endDate,
+        "date",
+        "[]"
+      )
+      const toDateIsBetweenAlertDates = dt(toDate).isBetween(
+        startDate,
+        endDate,
+        "date",
+        "[]"
+      )
+      const bookingSpanIsBetweenAlertDates =
+        fromDateIsBetweenAlertDates || toDateIsBetweenAlertDates
+      return bookingSpanIsBetweenAlertDates
+    }
+    return true
+  })
+}

packages/trpc/lib/routers/hotels/schemas/hotel/specialAlerts.ts

@@ -26,8 +26,8 @@ export const specialAlertsSchema = z
       if (!hasDates) {
         return hasText
       }
-      const shouldShowNow = alert.startDate <= now && alert.endDate >= now
+      const isAlertExpired = alert.endDate < now
-      return shouldShowNow && hasText
+      return !isAlertExpired && hasText
     })
     return filteredAlerts.map((alert, idx) => ({
       heading: alert.title || null,