fix: use new Popover component in FlexibilityOption

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

@@ -1,13 +1,12 @@
 "use client"
-import { useRef, useState } from "react"
-import { Button } from "react-aria-components"
+
 import { useIntl } from "react-intl"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Label from "@/components/TempDesignSystem/Form/Label"
+import Popover from "@/components/TempDesignSystem/Popover"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import PricePopover from "./Popover"
 import PriceTable from "./PriceList"
 
 import styles from "./flexibilityOption.module.css"
@@ -25,18 +24,8 @@ export default function FlexibilityOption({
   petRoomPackage,
   handleSelectRate,
 }: FlexibilityOptionProps) {
-  const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  let triggerRef = useRef<HTMLButtonElement>(null)
-  const buttonClickedRef = useRef(false)
   const intl = useIntl()
 
-  function setRef(node: Element | null) {
-    if (node) {
-      setRootDiv(node)
-    }
-  }
-
   if (!product) {
     return (
       <div className={styles.noPricesCard}>
@@ -68,15 +57,6 @@ export default function FlexibilityOption({
     handleSelectRate(rate)
   }
 
-  function togglePopover() {
-    buttonClickedRef.current = !buttonClickedRef.current
-    setIsPopoverOpen(buttonClickedRef.current)
-  }
-
-  function handlePopoverChange(isOpen: boolean) {
-    setIsPopoverOpen(isOpen)
-  }
-
   return (
     <label>
       <input
@@ -86,37 +66,16 @@ export default function FlexibilityOption({
         onChange={onChange}
       />
       <div className={styles.card}>
-        <div className={styles.header} ref={setRef}>
-          <Button
-            aria-label="Help"
-            className={styles.button}
-            onPress={() => {
-              togglePopover()
-            }}
-            ref={triggerRef}
-          >
-            <InfoCircleIcon
-              width={16}
-              height={16}
-              color="uiTextMediumContrast"
-            />
-          </Button>
-          <PricePopover
-            placement="bottom"
-            className={styles.popover}
-            isNonModal
-            shouldFlip={false}
-            shouldUpdatePosition={false}
-            /**
-             * react-aria uses portals to render Popover in body
-             * unless otherwise specified. We need it to be contained
-             * by this component to both access css variables assigned
-             * on the container as well as to not overflow it at any time.
-             */
-            UNSTABLE_portalContainer={rootDiv}
-            triggerRef={triggerRef}
-            isOpen={isPopoverOpen}
-            onOpenChange={handlePopoverChange}
+        <div className={styles.header}>
+          <Popover
+            placement="bottom left"
+            triggerContent={
+              <InfoCircleIcon
+                width={16}
+                height={16}
+                color="uiTextMediumContrast"
+              />
+            }
           >
             <Caption
               color="uiTextHighContrast"
@@ -134,7 +93,7 @@ export default function FlexibilityOption({
                 {info}
               </Caption>
             ))}
-          </PricePopover>
+          </Popover>
           <Caption color="uiTextHighContrast">{name}</Caption>
           <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>