feat: SW-1182 Moved modal to components folder

components/HotelReservation/BookingConfirmation/Receipt/index.tsx

@@ -7,6 +7,7 @@ import {
   ChevronRightSmallIcon,
   InfoCircleIcon,
 } from "@/components/Icons"
+import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -15,8 +16,6 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Modal from "../../Modal"
-
 import styles from "./receipt.module.css"
 
 import type { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"

components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -5,14 +5,13 @@ import { useIntl } from "react-intl"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { MagicWandIcon } from "@/components/Icons"
+import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Modal from "../../../Modal"
-
 import styles from "./modal.module.css"
 
 import type { Dispatch, SetStateAction } from "react"

components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -12,6 +12,7 @@ import {
   ChevronDownSmallIcon,
   ChevronRightSmallIcon,
 } from "@/components/Icons"
+import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -20,7 +21,6 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Modal from "../../../Modal"
 import PriceDetailsTable from "../PriceDetailsTable"
 
 import styles from "./ui.module.css"

components/HotelReservation/Modal/index.tsx

@@ -1,165 +0,0 @@
-"use client"
-
-import { motion } from "framer-motion"
-import { type PropsWithChildren, useEffect, useState } from "react"
-import {
-  Dialog,
-  DialogTrigger,
-  Modal as AriaModal,
-  ModalOverlay,
-} from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { CloseLargeIcon } from "@/components/Icons"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
-import {
-  type AnimationState,
-  AnimationStateEnum,
-  type InnerModalProps,
-  type ModalProps,
-} from "./modal"
-import { fade, slideInOut } from "./motionVariants"
-
-import styles from "./modal.module.css"
-
-const MotionOverlay = motion(ModalOverlay)
-const MotionModal = motion(AriaModal)
-
-function InnerModal({
-  animation,
-  onAnimationComplete = () => undefined,
-  setAnimation,
-  onToggle,
-  isOpen,
-  children,
-  title,
-  subtitle,
-}: PropsWithChildren<InnerModalProps>) {
-  const intl = useIntl()
-  function modalStateHandler(newAnimationState: AnimationState) {
-    setAnimation((currentAnimationState) =>
-      newAnimationState === AnimationStateEnum.hidden &&
-      currentAnimationState === AnimationStateEnum.hidden
-        ? AnimationStateEnum.unmounted
-        : currentAnimationState
-    )
-    if (newAnimationState === AnimationStateEnum.visible) {
-      onAnimationComplete()
-    }
-  }
-
-  function onOpenChange(state: boolean) {
-    onToggle!(state)
-  }
-
-  return (
-    <MotionOverlay
-      animate={animation}
-      className={styles.overlay}
-      initial={"hidden"}
-      isDismissable
-      isExiting={animation === AnimationStateEnum.hidden}
-      onAnimationComplete={modalStateHandler}
-      variants={fade}
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-    >
-      <MotionModal
-        className={styles.modal}
-        variants={slideInOut}
-        animate={animation}
-        initial={"hidden"}
-      >
-        <Dialog className={styles.dialog} aria-label="Dialog">
-          {({ close }) => (
-            <>
-              <header className={styles.header}>
-                <div>
-                  {title && (
-                    <Subtitle type="one" color="uiTextHighContrast">
-                      {title}
-                    </Subtitle>
-                  )}
-                  {subtitle && (
-                    <Preamble asChild>
-                      <span>{subtitle}</span>
-                    </Preamble>
-                  )}
-                </div>
-
-                <button onClick={close} type="button" className={styles.close}>
-                  <CloseLargeIcon color="uiTextMediumContrast" />
-                </button>
-              </header>
-              <section className={styles.content}>{children}</section>
-            </>
-          )}
-        </Dialog>
-      </MotionModal>
-    </MotionOverlay>
-  )
-}
-
-export default function Modal({
-  onAnimationComplete = () => undefined,
-  trigger,
-  isOpen,
-  onToggle,
-  title,
-  subtitle,
-  children,
-}: PropsWithChildren<ModalProps>) {
-  const [animation, setAnimation] = useState<AnimationState>(
-    AnimationStateEnum.visible
-  )
-
-  useEffect(() => {
-    if (typeof isOpen === "boolean") {
-      setAnimation(
-        isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
-      )
-    }
-    if (typeof isOpen === "undefined") {
-      setAnimation(AnimationStateEnum.unmounted)
-    }
-  }, [isOpen])
-
-  if (!trigger) {
-    return (
-      <InnerModal
-        onAnimationComplete={onAnimationComplete}
-        animation={animation}
-        setAnimation={setAnimation}
-        onToggle={onToggle}
-        isOpen={isOpen}
-        title={title}
-        subtitle={subtitle}
-      >
-        {children}
-      </InnerModal>
-    )
-  }
-
-  return (
-    <DialogTrigger
-      onOpenChange={(isOpen) =>
-        setAnimation(
-          isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
-        )
-      }
-    >
-      {trigger}
-      <InnerModal
-        onAnimationComplete={onAnimationComplete}
-        animation={animation}
-        setAnimation={setAnimation}
-        title={title}
-        subtitle={subtitle}
-      >
-        {children}
-      </InnerModal>
-    </DialogTrigger>
-  )
-}

components/HotelReservation/Modal/modal.module.css

@@ -1,77 +0,0 @@
-.overlay {
-  background: rgba(0, 0, 0, 0.5);
-  height: var(--visual-viewport-height);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  z-index: var(--default-modal-overlay-z-index);
-}
-
-.modal {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
-  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  z-index: var(--default-modal-z-index);
-}
-
-.dialog {
-  display: flex;
-  flex-direction: column;
-
-  /* for supporting animations within content */
-  position: relative;
-  overflow: hidden;
-}
-
-.header {
-  --button-dimension: 32px;
-
-  box-sizing: content-box;
-  display: flex;
-  align-items: flex-start;
-  min-height: var(--button-dimension);
-  position: relative;
-  padding: var(--Spacing-x2) var(--Spacing-x3) 0;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x2);
-  padding: 0 var(--Spacing-x3) var(--Spacing-x1);
-}
-
-.close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  position: absolute;
-  right: var(--Spacing-x2);
-  width: var(--button-dimension);
-  height: var(--button-dimension);
-  display: flex;
-  align-items: center;
-  padding: 0;
-  justify-content: center;
-}
-
-@media screen and (min-width: 768px) {
-  .overlay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .modal {
-    left: auto;
-    bottom: auto;
-    width: auto;
-    border-radius: var(--Corner-radius-Medium);
-  }
-}

components/HotelReservation/Modal/modal.ts

@@ -1,27 +0,0 @@
-import type { Dispatch, SetStateAction } from "react"
-
-export enum AnimationStateEnum {
-  unmounted = "unmounted",
-  hidden = "hidden",
-  visible = "visible",
-}
-
-export type AnimationState = keyof typeof AnimationStateEnum
-
-export type ModalProps = {
-  onAnimationComplete?: VoidFunction
-  title?: string
-  subtitle?: string
-} & (
-  | { trigger: JSX.Element; isOpen?: never; onToggle?: never }
-  | {
-      trigger?: never
-      isOpen: boolean
-      onToggle: Dispatch<SetStateAction<boolean>>
-    }
-)
-
-export type InnerModalProps = Omit<ModalProps, "trigger"> & {
-  animation: AnimationState
-  setAnimation: Dispatch<SetStateAction<AnimationState>>
-}

components/HotelReservation/Modal/motionVariants.ts

@@ -1,23 +0,0 @@
-export const fade = {
-  hidden: {
-    opacity: 0,
-    transition: { duration: 0.4, ease: "easeInOut" },
-  },
-  visible: {
-    opacity: 1,
-    transition: { duration: 0.4, ease: "easeInOut" },
-  },
-}
-
-export const slideInOut = {
-  hidden: {
-    opacity: 0,
-    y: 32,
-    transition: { duration: 0.4, ease: "easeInOut" },
-  },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.4, ease: "easeInOut" },
-  },
-}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -5,12 +5,12 @@ import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { CheckCircleIcon, CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import Modal from "../../../Modal/index"
 import { RATE_CARD_EQUAL_HEIGHT_CLASS } from "../utils"
 import PriceTable from "./PriceList"