feat(SW-1063): add member price modal

components/HotelReservation/EnterDetails/Modal/index.tsx

@@ -0,0 +1,150 @@
+"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 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,
+}: 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}>
+                {title && (
+                  <Subtitle type="one" color="uiTextHighContrast">
+                    {title}
+                  </Subtitle>
+                )}
+
+                <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,
+  children,
+}: PropsWithChildren<ModalProps>) {
+  const [animation, setAnimation] = useState<AnimationState>(
+    AnimationStateEnum.visible
+  )
+
+  useEffect(() => {
+    if (typeof isOpen === "boolean") {
+      setAnimation(
+        isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
+      )
+    }
+  }, [isOpen])
+
+  if (!trigger) {
+    return (
+      <InnerModal
+        onAnimationComplete={onAnimationComplete}
+        animation={animation}
+        setAnimation={setAnimation}
+        onToggle={onToggle}
+        isOpen={isOpen}
+        title={title}
+      >
+        {children}
+      </InnerModal>
+    )
+  }
+
+  return (
+    <DialogTrigger
+      onOpenChange={(isOpen) =>
+        setAnimation(
+          isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
+        )
+      }
+    >
+      {trigger}
+      <InnerModal
+        onAnimationComplete={onAnimationComplete}
+        animation={animation}
+        setAnimation={setAnimation}
+        title={title}
+      >
+        {children}
+      </InnerModal>
+    </DialogTrigger>
+  )
+}