SW-1182 Updated popover to modal

2025-01-07 16:11:40 +01:00
parent b973882c5c
commit 61bd3a2c3e
8 changed files with 66 additions and 52 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/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>