Merged in feat(SW-1274)-modify-date-my-stay (pull request #1528)

Feat(SW-1274) modify date my stay

* feat(SW-1676): Modify guest details step 1

* feat(SW-1676) Integration to api to update guest details

* feat(SW-1676) Reuse of old modal

* feat(SW-1676) updated modify guest

* feat(SW-1676) cleanup

* feat(SW-1274) modify stay modal and datepicker

* feat(SW-1274) DatePicker from modify dates

* feat(SW-1274) Modify dates fixes and merge conflicts

* feat(SW-1274) handle modify for multiroom

* feat(SW-1274) update manage stay

* feat(SW-1274) fixed some comments

* feat(SW-1274) use Modal instead

* feat(SW-1274) fixed formatChildBedPreferences

* feat(SW-1274) removed any as prop

* feat(SW-1274) fix rebase conflicts

* feat(SW-1274) fix flicker on modify modal

* feat(SW-1274) CalendarButton

* feat(SW-1274) fixed gap variable

* feat(SW-1274) simplified code

* feat(SW-1274) Split up DatePicker on mode

* feat(SW-1274) Updated file structure for datepicker


Approved-by: Arvid Norlin

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

@@ -1,6 +1,5 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { BookingStatusEnum } from "@/constants/booking"
@@ -9,21 +8,22 @@ import { ChevronDownIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 
-import CancelStay from "../CancelStay"
 import GuaranteeLateArrival from "../GuaranteeLateArrival"
+import { useManageStayStore } from "../stores/manageStayStore"
+import CancelStay from "./ActionPanel/Actions/CancelStay"
+import ModifyStay from "./ActionPanel/Actions/ModifyStay"
 import ActionPanel from "./ActionPanel"
 
 import type { Hotel } from "@/types/hotel"
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-import type { CreditCard } from "@/types/user"
-
-type ActiveView = "actionPanel" | "cancelStay" | "guaranteeLateArrival"
+import { type CreditCard, type User } from "@/types/user"
 
 interface ManageStayProps {
   booking: BookingConfirmation["booking"]
   hotel: Hotel
   setBookingStatus: (status: BookingStatusEnum) => void
   bookingStatus: string | null
+  user: User | null
   savedCreditCards: CreditCard[] | null
   refId: string
 }
@@ -33,29 +33,20 @@ export default function ManageStay({
   hotel,
   setBookingStatus,
   bookingStatus,
+  user,
   savedCreditCards,
   refId,
 }: ManageStayProps) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const [activeView, setActiveView] = useState<ActiveView>("actionPanel")
-
   const intl = useIntl()
-
-  const showCancelStayButton =
-    bookingStatus !== BookingStatusEnum.Cancelled && booking.isCancelable
+  const {
+    isOpen,
+    activeView,
+    actions: { setIsOpen, handleCloseModal, setActiveView },
+  } = useManageStayStore()
 
   const showGuaranteeButton =
     bookingStatus !== BookingStatusEnum.Cancelled && !booking.guaranteeInfo
 
-  function handleClose() {
-    setIsOpen(false)
-    setActiveView("actionPanel")
-  }
-  function handleBack() {
-    setActiveView("actionPanel")
-  }
-
   function renderContent() {
     switch (activeView) {
       case "cancelStay":
@@ -66,16 +57,16 @@ export default function ManageStay({
             setBookingStatus={() =>
               setBookingStatus(BookingStatusEnum.Cancelled)
             }
-            handleCloseModal={handleClose}
-            handleBackToManageStay={handleBack}
           />
         )
+      case "modifyStay":
+        return <ModifyStay booking={booking} user={user} />
       case "guaranteeLateArrival":
         return (
           <GuaranteeLateArrival
             booking={booking}
-            handleCloseModal={handleClose}
-            handleBackToManageStay={handleBack}
+            handleCloseModal={handleCloseModal}
+            handleBackToManageStay={() => setActiveView("actionPanel")}
             savedCreditCards={savedCreditCards}
             refId={refId}
           />
@@ -85,9 +76,9 @@ export default function ManageStay({
           <ActionPanel
             booking={booking}
             hotel={hotel}
+            bookingStatus={bookingStatus}
             onCancelClick={() => setActiveView("cancelStay")}
             onGuaranteeClick={() => setActiveView("guaranteeLateArrival")}
-            showCancelStayButton={showCancelStayButton}
             showGuaranteeButton={showGuaranteeButton}
           />
         )
@@ -100,7 +91,7 @@ export default function ManageStay({
         {intl.formatMessage({ id: "Manage stay" })}
         <ChevronDownIcon width={24} height={24} color="burgundy" />
       </Button>
-      <Modal isOpen={isOpen} onToggle={handleClose} withActions hideHeader>
+      <Modal isOpen={isOpen} onToggle={handleCloseModal} withActions hideHeader>
         {renderContent()}
       </Modal>
     </>