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 />