fix(SW-451): Fixed some of the ui comments

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

@@ -1,8 +1,8 @@
 "use client"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { Button, DialogTrigger } from "react-aria-components"
 
-import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import PricePopover from "./Popover"
@@ -25,6 +25,7 @@ export default function FlexibilityOption({
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  let triggerRef = useRef<HTMLButtonElement>(null)
 
   function setRef(node: Element | null) {
     if (node) {
@@ -36,7 +37,7 @@ export default function FlexibilityOption({
     return (
       <div className={styles.disabledCard}>
         <div className={styles.header}>
-          <InfoCircleIcon className={styles.infoIcon} />
+          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
           <Caption color="disabled">{name}</Caption>
           <Caption color="disabled">({paymentTerm})</Caption>
         </div>
@@ -59,6 +60,13 @@ export default function FlexibilityOption({
     handleSelectRate(rate)
   }
 
+  function togglePopover() {
+    console.log("Toggle Popover called")
+    setIsPopoverOpen((prevState) => !prevState)
+  }
+
+  console.log(isPopoverOpen)
+
   return (
     <label>
       <input
@@ -69,48 +77,52 @@ export default function FlexibilityOption({
       />
       <div className={styles.card}>
         <div className={styles.header} ref={setRef}>
-          <DialogTrigger>
-            <Button
-              aria-label="Help"
-              className={styles.button}
-              onPress={() => setIsPopoverOpen(true)}
-            >
-              <InfoCircleIcon className={styles.infoIcon} />
-            </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}
-              isOpen={isPopoverOpen}
-              onOpenChange={setIsPopoverOpen}
+          <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={setIsPopoverOpen}
+          >
+            <Caption
+              color="uiTextHighContrast"
+              type="bold"
+              className={styles.popoverHeading}
             >
+              {name}
+            </Caption>
+            {priceInformation?.map((info) => (
               <Caption
+                key={info}
                 color="uiTextHighContrast"
-                type="bold"
-                className={styles.popoverHeading}
+                className={styles.popoverText}
               >
-                {name}
+                {info}
               </Caption>
-              {priceInformation?.map((info) => (
-                <Caption
-                  key={info}
-                  color="uiTextHighContrast"
-                  className={styles.popoverText}
-                >
-                  {info}
-                </Caption>
-              ))}
-            </PricePopover>
-          </DialogTrigger>
+            ))}
+          </PricePopover>
           <Caption color="uiTextHighContrast">{name}</Caption>
           <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>
@@ -119,13 +131,10 @@ export default function FlexibilityOption({
           memberPrice={memberPrice}
           petRoomPackage={petRoomPackage}
         />
-        <CheckCircleIcon
-          color="blue"
-          className={styles.checkIcon}
-          width={24}
-          height={24}
-          stroke="white"
-        />
+
+        <div className={styles.checkIcon}>
+          <CheckIcon color="white" height="16" width="16" />
+        </div>
       </div>
     </label>
   )