SW-1182 Updated popover to modal

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

@@ -11,7 +11,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Modal from "../../Modal"
+import Modal from "../../../Modal"
 
 import styles from "./modal.module.css"
 

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

@@ -20,7 +20,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Modal from "../../Modal"
+import Modal from "../../../Modal"
 import PriceDetailsTable from "../PriceDetailsTable"
 
 import styles from "./ui.module.css"

components/HotelReservation/Modal/index.tsx

@@ -11,6 +11,7 @@ import {
 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 {
@@ -34,6 +35,7 @@ function InnerModal({
   isOpen,
   children,
   title,
+  subtitle,
 }: PropsWithChildren<InnerModalProps>) {
   const intl = useIntl()
   function modalStateHandler(newAnimationState: AnimationState) {
@@ -74,11 +76,18 @@ function InnerModal({
           {({ close }) => (
             <>
               <header className={styles.header}>
-                {title && (
-                  <Subtitle type="one" color="uiTextHighContrast">
-                    {title}
-                  </Subtitle>
-                )}
+                <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" />
@@ -99,6 +108,7 @@ export default function Modal({
   isOpen,
   onToggle,
   title,
+  subtitle,
   children,
 }: PropsWithChildren<ModalProps>) {
   const [animation, setAnimation] = useState<AnimationState>(
@@ -111,6 +121,9 @@ export default function Modal({
         isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
       )
     }
+    if (typeof isOpen === "undefined") {
+      setAnimation(AnimationStateEnum.unmounted)
+    }
   }, [isOpen])
 
   if (!trigger) {
@@ -122,6 +135,7 @@ export default function Modal({
         onToggle={onToggle}
         isOpen={isOpen}
         title={title}
+        subtitle={subtitle}
       >
         {children}
       </InnerModal>
@@ -142,6 +156,7 @@ export default function Modal({
         animation={animation}
         setAnimation={setAnimation}
         title={title}
+        subtitle={subtitle}
       >
         {children}
       </InnerModal>

components/HotelReservation/Modal/modal.module.css

@@ -33,8 +33,8 @@
 
   box-sizing: content-box;
   display: flex;
-  align-items: center;
-  height: var(--button-dimension);
+  align-items: flex-start;
+  min-height: var(--button-dimension);
   position: relative;
   padding: var(--Spacing-x2) var(--Spacing-x3) 0;
 }
@@ -57,6 +57,8 @@
   height: var(--button-dimension);
   display: flex;
   align-items: center;
+  padding: 0;
+  justify-content: center;
 }
 
 @media screen and (min-width: 768px) {
@@ -72,4 +74,4 @@
     width: auto;
     border-radius: var(--Corner-radius-Medium);
   }
-}
+}

components/HotelReservation/Modal/modal.ts

@@ -11,6 +11,7 @@ export type AnimationState = keyof typeof AnimationStateEnum
 export type ModalProps = {
   onAnimationComplete?: VoidFunction
   title?: string
+  subtitle?: string
 } & (
   | { trigger: JSX.Element; isOpen?: never; onToggle?: never }
   | {

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -77,24 +77,15 @@ input[type="radio"]:checked + .card .checkIcon {
   margin: 0 auto var(--Spacing-x2);
 }
 
-.popover {
-  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-Medium);
-  left: 0px;
-  max-height: 400px;
-  padding: var(--Spacing-x2);
-  top: calc(55px + var(--Spacing-x1));
-  width: 100%;
-  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-}
-
-.popover section:focus-visible {
+.modal section:focus-visible {
   outline: none;
 }
-.popover .popoverText {
-  margin-bottom: var(--Spacing-x-half);
+.terms {
+  margin-top: var(--Spacing-x3);
+  margin-bottom: var(--Spacing-x3);
 }
-.popover .popoverHeading {
+.termsText:nth-child(n) {
+  display: flex;
+  align-items: center;
   margin-bottom: var(--Spacing-x1);
-  font-weight: 600; /* TODO: Remove when this is updated in Design system */
 }

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

@@ -5,10 +5,12 @@ import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
-import Popover from "@/components/TempDesignSystem/Popover"
+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"
 
@@ -116,33 +118,36 @@ export default function FlexibilityOption({
       />
       <div className={`${styles.card} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
         <div className={styles.header}>
-          <Popover
-            placement="bottom left"
-            triggerContent={
-              <InfoCircleIcon
-                width={16}
-                height={16}
-                color="uiTextMediumContrast"
-              />
+          <Modal
+            trigger={
+              <Button intent="text">
+                <InfoCircleIcon
+                  width={16}
+                  height={16}
+                  color="uiTextMediumContrast"
+                />
+              </Button>
             }
+            title={name}
+            subtitle={paymentTerm}
           >
-            <Caption
-              color="uiTextHighContrast"
-              type="bold"
-              className={styles.popoverHeading}
-            >
-              {name}
-            </Caption>
-            {priceInformation?.map((info) => (
-              <Caption
-                key={info}
-                color="uiTextHighContrast"
-                className={styles.popoverText}
-              >
-                {info}
-              </Caption>
-            ))}
-          </Popover>
+            <div className={styles.terms}>
+              {priceInformation?.map((info) => (
+                <Body
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.termsText}
+                >
+                  <CheckIcon
+                    color="uiSemanticSuccess"
+                    width={20}
+                    height={20}
+                  ></CheckIcon>
+                  {info}
+                </Body>
+              ))}
+            </div>
+          </Modal>
           <div className={styles.priceType}>
             <Caption color="uiTextHighContrast">{name}</Caption>
             <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>