Merged in feat/SW-1676-modify-contact-details-my-stay-anonymous (pull request #1468)

Feat/SW-1676 modify contact details my stay anonymous

* 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-1676) updated myStayReturnRoute to sessionStorage


Approved-by: Niclas Edenvin

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

@@ -1,24 +1,17 @@
 "use client"
-import { motion } from "framer-motion"
-import { useEffect, useState } from "react"
-import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+
+import { useState } from "react"
 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 Modal from "@/components/Modal"
 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"
 
@@ -38,39 +31,14 @@ export default function ManageStay({
   bookingStatus,
 }: ManageStayProps) {
   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 =
+  const showCancelStayButton =
     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")
@@ -99,7 +67,7 @@ export default function ManageStay({
             booking={booking}
             hotel={hotel}
             onCancelClick={() => setActiveView("cancelStay")}
-            showCancelButton={showCancelButton}
+            showCancelStayButton={showCancelStayButton}
           />
         )
     }
@@ -111,28 +79,9 @@ export default function ManageStay({
         {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>
+      <Modal isOpen={isOpen} onToggle={handleClose} withActions hideHeader>
+        {renderContent()}
+      </Modal>
     </>
   )
 }