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
2025-02-21 09:06:15 +00:00
parent 8ed521de3f
commit a0286603db
45 changed files with 1358 additions and 104 deletions
--- a/components/HotelReservation/MyStay/ManageStay/index.tsx
+++ b/components/HotelReservation/MyStay/ManageStay/index.tsx
@@ -0,0 +1,136 @@
+"use client"
+import { motion } from "framer-motion"
+import { useEffect, useState } from "react"
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { BookingStatusEnum } from "@/constants/booking"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import {
+  type AnimationState,
+  AnimationStateEnum,
+} from "@/components/Modal/modal"
+import { slideFromTop } from "@/components/Modal/motionVariants"
+import Button from "@/components/TempDesignSystem/Button"
+
+import CancelStay from "../CancelStay"
+import ActionPanel from "./ActionPanel"
+
+import styles from "./modifyModal.module.css"
+
+import type { Hotel } from "@/types/hotel"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+type ActiveView = "actionPanel" | "cancelStay"
+
+export default function ManageStay({
+  booking,
+  hotel,
+  setBookingStatus,
+  bookingStatus,
+}: {
+  booking: BookingConfirmation["booking"]
+  hotel: Hotel
+  setBookingStatus: (status: BookingStatusEnum) => void
+  bookingStatus: string | null
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [animation, setAnimation] = useState<AnimationState>(
+    AnimationStateEnum.visible
+  )
+  const [activeView, setActiveView] = useState<ActiveView>("actionPanel")
+
+  const intl = useIntl()
+
+  const MotionOverlay = motion(ModalOverlay)
+  const MotionModal = motion(Modal)
+
+  const showCancelButton =
+    bookingStatus !== BookingStatusEnum.Cancelled && booking.isCancelable
+
+  useEffect(() => {
+    if (typeof isOpen === "boolean") {
+      setAnimation(
+        isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
+      )
+    }
+    if (isOpen === undefined) {
+      setAnimation(AnimationStateEnum.unmounted)
+    }
+  }, [isOpen])
+
+  function modalStateHandler(newAnimationState: AnimationState) {
+    setAnimation((currentAnimationState) =>
+      newAnimationState === AnimationStateEnum.hidden &&
+      currentAnimationState === AnimationStateEnum.hidden
+        ? AnimationStateEnum.unmounted
+        : currentAnimationState
+    )
+  }
+
+  function handleClose() {
+    setIsOpen(false)
+    setActiveView("actionPanel")
+  }
+  function handleBack() {
+    setActiveView("actionPanel")
+  }
+
+  function renderContent() {
+    switch (activeView) {
+      case "cancelStay":
+        return (
+          <CancelStay
+            booking={booking}
+            hotel={hotel}
+            setBookingStatus={() =>
+              setBookingStatus(BookingStatusEnum.Cancelled)
+            }
+            handleCloseModal={handleClose}
+            handleBackToManageStay={handleBack}
+          />
+        )
+      default:
+        return (
+          <ActionPanel
+            booking={booking}
+            hotel={hotel}
+            onCancelClick={() => setActiveView("cancelStay")}
+            showCancelButton={showCancelButton}
+          />
+        )
+    }
+  }
+
+  return (
+    <>
+      <Button variant="icon" fullWidth onClick={() => setIsOpen(true)}>
+        {intl.formatMessage({ id: "Manage stay" })}
+        <ChevronDownIcon width={24} height={24} color="burgundy" />
+      </Button>
+      <MotionOverlay
+        isOpen={isOpen}
+        className={styles.overlay}
+        initial={"hidden"}
+        onAnimationComplete={modalStateHandler}
+        onOpenChange={handleClose}
+        isDismissable
+      >
+        <MotionModal
+          className={styles.modal}
+          initial={"hidden"}
+          animate={animation}
+          variants={slideFromTop}
+        >
+          <Dialog
+            className={styles.dialog}
+            aria-label={intl.formatMessage({ id: "Dialog" })}
+          >
+            {renderContent()}
+          </Dialog>
+        </MotionModal>
+      </MotionOverlay>
+    </>
+  )
+}