Merged in feat(SW-1275)-cancel-booking-my-stay (pull request #1376)

Feat(SW-1275) cancel booking my stay

* feat(SW-1276) UI implementation Desktop part 1 for MyStay

* feat(SW-1276) UI implementation Desktop part 2 for MyStay

* feat(SW-1276) UI implementation Mobile part 1 for MyStay

* refactor: move files from MyStay/MyStay to MyStay

* feat(SW-1276) Sidepeek implementation

* feat(SW-1276): Refactoring

* feat(SW-1276) UI implementation Mobile part 2 for MyStay

* feat(SW-1276): translations

* feat(SW-1276) fixed skeleton

* feat(SW-1276): Added missing translations

* feat(SW-1276) fixed translations

* feat(SW-1275) cancel modal

* feat(SW-1275): Mutate cancel booking

* feat(SW-1275) added translations

* feat(SW-1275) match current cancellationReason

* feat(SW-1275) Added modal for manage stay

* feat(SW-1275) Added missing icon

* feat(SW-1275) New Dont cancel button

* feat(SW-1275) Added preperation for Cancellation number

* feat(SW-1275): added --modal-box-shadow

* feat(SW-1718) Add to calendar

* feat(SW-1718) general add to calendar


Approved-by: Niclas Edenvin

components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendar.tsx

@@ -1,61 +0,0 @@
-"use client"
-import { createEvent } from "ics"
-import { useIntl } from "react-intl"
-
-import { dt } from "@/lib/dt"
-
-import { CalendarAddIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import useLang from "@/hooks/useLang"
-
-import type { AddToCalendarProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/addToCalendar"
-
-export default function AddToCalendar({
-  checkInDate,
-  event,
-  hotelName,
-}: AddToCalendarProps) {
-  const intl = useIntl()
-  const lang = useLang()
-
-  async function downloadBooking() {
-    const d = dt(checkInDate).locale(lang).format("YYYY-MM-DD")
-    const filename = `${hotelName.toLowerCase().split(" ").join("_")}-${d}.ics`
-
-    const file: Blob = await new Promise((resolve, reject) => {
-      createEvent(event, (error, value) => {
-        if (error) {
-          reject(error)
-        }
-
-        resolve(new File([value], filename, { type: "text/calendar" }))
-      })
-    })
-
-    const url = URL.createObjectURL(file)
-
-    const anchor = document.createElement("a")
-    anchor.href = url
-    anchor.download = filename
-
-    document.body.appendChild(anchor)
-    anchor.click()
-    document.body.removeChild(anchor)
-
-    URL.revokeObjectURL(url)
-  }
-
-  return (
-    <Button
-      intent="text"
-      onPress={downloadBooking}
-      size="small"
-      theme="base"
-      variant="icon"
-      wrapping
-    >
-      <CalendarAddIcon />
-      {intl.formatMessage({ id: "Add to calendar" })}
-    </Button>
-  )
-}

components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -0,0 +1,20 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { CalendarAddIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+export default function AddToCalendarButton({
+  onPress,
+}: {
+  onPress: () => void
+}) {
+  const intl = useIntl()
+
+  return (
+    <Button intent="text" size="small" theme="base" wrapping onPress={onPress}>
+      <CalendarAddIcon />
+      {intl.formatMessage({ id: "Add to calendar" })}
+    </Button>
+  )
+}

components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -6,7 +6,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
-import AddToCalendar from "./Actions/AddToCalendar"
+import AddToCalendar from "../../AddToCalendar"
+import AddToCalendarButton from "./Actions/AddToCalendarButton"
 import DownloadInvoice from "./Actions/DownloadInvoice"
 import { generateDateTime } from "./Actions/helpers"
 import ManageBooking from "./Actions/ManageBooking"
@@ -80,6 +81,7 @@ export default function Header({
           checkInDate={booking.checkInDate}
           event={event}
           hotelName={hotel.name}
+          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
         />
         <ManageBooking
           confirmationNumber={booking.confirmationNumber}

components/HotelReservation/BookingConfirmation/index.tsx

@@ -23,11 +23,18 @@ export default async function BookingConfirmation({
   confirmationNumber,
 }: BookingConfirmationProps) {
   const lang = getLang()
-  const { booking, hotel, room } =
-    await getBookingConfirmation(confirmationNumber)
+  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
+
+  if (!bookingConfirmation) {
+    return notFound()
+  }
+
+  const { booking, hotel, room } = bookingConfirmation
+
   if (!room) {
     return notFound()
   }
+
   const arrivalDate = new Date(booking.checkInDate)
   const departureDate = new Date(booking.checkOutDate)
 
@@ -62,7 +69,7 @@ export default async function BookingConfirmation({
     noOfAdults: booking.adults,
     noOfChildren: booking.childrenAges?.length,
     ageOfChildren: booking.childrenAges?.join(","),
-    childBedPreference: booking?.extraBedTypes
+    childBedPreference: booking?.childBedPreferences
       ?.flatMap((c) => Array(c.quantity).fill(invertedBedTypeMap[c.bedType]))
       .join("|"),
     noOfRooms: 1, // // TODO: Handle multiple rooms