feat(SW-415): Added content from API

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

@@ -1,9 +1,11 @@
 "use client"
-import { useIntl } from "react-intl"
+import { useState } from "react"
+import { Button, DialogTrigger } from "react-aria-components"
 
-import { InfoCircleIcon } from "@/components/Icons"
+import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import PricePopover from "./Popover"
 import PriceTable from "./PriceTable"
 
 import styles from "./flexibilityOption.module.css"
@@ -14,18 +16,26 @@ export default function FlexibilityOption({
   product,
   name,
   paymentTerm,
+  priceInformation,
 }: FlexibilityOptionProps) {
-  const intl = useIntl()
+  const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+  function setRef(node: Element | null) {
+    if (node) {
+      setRootDiv(node)
+    }
+  }
 
   if (!product) {
     return (
       <div className={styles.disabledCard}>
         <div className={styles.header}>
           <InfoCircleIcon className={styles.infoIcon} />
-          <Caption>{name}</Caption>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
-          <PriceTable />
+          <Caption color="disabled">{name}</Caption>
+          <Caption color="disabled">({paymentTerm})</Caption>
         </div>
+        <PriceTable />
       </div>
     )
   }
@@ -35,18 +45,65 @@ export default function FlexibilityOption({
 
   return (
     <label>
-      <input
-        type="radio"
-        name="rateCode"
-        value={product.productType.public?.rateCode}
-      />
+      <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
       <div className={styles.card}>
-        <div className={styles.header}>
-          <InfoCircleIcon className={styles.infoIcon} />
-          <Caption>{name}</Caption>
+        <div
+          className={styles.header}
+          ref={(node: Element | null) => setRef(node)}
+        >
+          <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}
+            >
+              <Caption
+                color="uiTextHighContrast"
+                textTransform="bold"
+                className={styles.popoverHeading}
+              >
+                {name}
+              </Caption>
+              {priceInformation?.map((info: string) => (
+                <Caption
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.popoverText}
+                >
+                  {info}
+                </Caption>
+              ))}
+            </PricePopover>
+          </DialogTrigger>
+          <Caption color="uiTextHighContrast">{name}</Caption>
           <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
-          <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
         </div>
+        <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
+        <CheckCircleIcon
+          color="blue"
+          className={styles.checkIcon}
+          width={24}
+          height={24}
+          stroke="white"
+        />
       </div>
     </label>
   )