feat: only show alerts when booking dates are affected

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

@@ -1,6 +1,8 @@
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { dt } from "@/lib/dt"
+
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -18,7 +20,10 @@ import styles from "./hotelInfoCard.module.css"
 import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
+export default async function HotelInfoCard({
+  booking,
+  hotel,
+}: HotelInfoCardProps) {
   const intl = await getIntl()
 
   const sortedFacilities = hotel.detailedFacilities
@@ -27,6 +32,9 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
 
   const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
 
+  const fromDate = dt(booking.fromDate)
+  const toDate = dt(booking.toDate)
+
   return (
     <article className={styles.container}>
       <section className={styles.wrapper}>
@@ -94,16 +102,41 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
           </div>
         </div>
       </section>
-      {hotel.specialAlerts.map((alert) => (
-        <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
-          <Alert
-            key={alert.id}
-            type={alert.type}
-            heading={alert.heading}
-            text={alert.text}
-          />
-        </div>
-      ))}
+      {hotel.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
+              key={alert.id}
+              type={alert.type}
+              heading={alert.heading}
+              text={alert.text}
+            />
+          </div>
+        )
+      })}
     </article>
   )
 }

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

@@ -27,6 +27,7 @@ export default async function SelectRatePage({
   if (!searchDetails?.hotel) {
     return notFound()
   }
+
   const { adultsInRoom, childrenInRoom, hotel, noOfRooms, bookingCode } =
     searchDetails
 
@@ -47,7 +48,7 @@ export default async function SelectRatePage({
   }
   return (
     <>
-      <HotelInfoCard hotel={hotelData.hotel} />
+      <HotelInfoCard booking={booking} hotel={hotelData.hotel} />
 
       {isInValidFNF ? (
         <FnFNotAllowedAlert />

apps/scandic-web/lib/dt.ts

@@ -8,6 +8,7 @@ import nb from "dayjs/locale/nb"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import customParseFormat from "dayjs/plugin/customParseFormat"
 import duration from "dayjs/plugin/duration"
+import isBetween from "dayjs/plugin/isBetween"
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
 import isToday from "dayjs/plugin/isToday"
@@ -35,5 +36,6 @@ d.extend(isSameOrAfter)
 d.extend(isSameOrBefore)
 d.extend(duration)
 d.extend(customParseFormat)
+d.extend(isBetween)
 
 export const dt = d

apps/scandic-web/server/routers/hotels/schemas/hotel/specialAlerts.ts

@@ -22,11 +22,12 @@ export const specialAlertsSchema = z
   .transform((data) => {
     const now = dt().utc().format("YYYY-MM-DD")
     const filteredAlerts = data.filter((alert) => {
-      const shouldShowNow =
-        alert.startDate && alert.endDate
-          ? alert.startDate <= now && alert.endDate >= now
-          : true
       const hasText = alert.description || alert.title
+      const hasDates = alert.startDate && alert.endDate
+      if (!hasDates) {
+        return hasText
+      }
+      const shouldShowNow = alert.startDate <= now && alert.endDate >= now
       return shouldShowNow && hasText
     })
     return filteredAlerts.map((alert, idx) => ({
@@ -36,5 +37,7 @@ export const specialAlertsSchema = z
       text: alert.description || null,
       type: AlertTypeEnum.Info,
       displayInBookingFlow: alert.displayInBookingFlow,
+      endDate: alert.endDate,
+      startDate: alert.startDate,
     }))
   })

apps/scandic-web/types/components/hotelReservation/selectRate/hotelInfoCard.ts

@@ -1,5 +1,7 @@
 import type { Hotel } from "@/types/hotel"
+import type { SelectRateBooking } from "./selectRate"
 
 export interface HotelInfoCardProps {
+  booking: SelectRateBooking
   hotel: Hotel
 }