From bf60306236a1cc42127e3b9c9294ca5feeef653a Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Tue, 26 Nov 2024 23:32:14 +0100
Subject: [PATCH] fix: SW-1010 Fixed low screen height accessibility issue

---
 .../ChildSelector/ChildInfoSelector.tsx       |  2 +
 components/GuestsRoomsPicker/Form.tsx         |  4 +-
 components/GuestsRoomsPicker/index.tsx        | 51 +++++++++++++++++--
 components/TempDesignSystem/Popover/index.tsx |  3 +-
 .../TempDesignSystem/Popover/popover.ts       |  1 +
 components/TempDesignSystem/Select/index.tsx  |  3 +-
 components/TempDesignSystem/Select/select.ts  |  1 +
 hooks/useSetOverflowVisibleOnRA.ts            |  4 +-
 8 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index b39821483..a74b52200 100644
--- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -98,6 +98,7 @@ export default function ChildInfoSelector({
             {...register(ageFieldName, {
               required: true,
             })}
+            isNestedInModal={true}
           />
         </div>
         <div>
@@ -114,6 +115,7 @@ export default function ChildInfoSelector({
               {...register(bedFieldName, {
                 required: true,
               })}
+              isNestedInModal={true}
             />
           ) : null}
         </div>
diff --git a/components/GuestsRoomsPicker/Form.tsx b/components/GuestsRoomsPicker/Form.tsx
index 062347761..c93d6ed71 100644
--- a/components/GuestsRoomsPicker/Form.tsx
+++ b/components/GuestsRoomsPicker/Form.tsx
@@ -21,9 +21,11 @@ import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
 export default function GuestsRoomsPickerDialog({
   rooms,
   onClose,
+  isOverflowed = false,
 }: {
   rooms: GuestsRoom[]
   onClose: () => void
+  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
 }) {
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
@@ -124,7 +126,7 @@ export default function GuestsRoomsPickerDialog({
           <Tooltip
             heading={disabledBookingOptionsHeader}
             text={disabledBookingOptionsText}
-            position="bottom"
+            position={isOverflowed ? "top" : "bottom"}
             arrow="left"
           >
             {rooms.length < 4 ? (
diff --git a/components/GuestsRoomsPicker/index.tsx b/components/GuestsRoomsPicker/index.tsx
index 2ce978b39..b37d92730 100644
--- a/components/GuestsRoomsPicker/index.tsx
+++ b/components/GuestsRoomsPicker/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import {
   Button,
   Dialog,
@@ -26,6 +26,8 @@ export default function GuestsRoomsPickerForm() {
 
   const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
   const [isDesktop, setIsDesktop] = useState(true)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later
 
   const htmlElement =
     typeof window !== "undefined" ? document.querySelector("body") : null
@@ -46,12 +48,55 @@ export default function GuestsRoomsPickerForm() {
     setIsDesktop(checkIsDesktop)
   }, [checkIsDesktop])
 
+  const updateHeight = useCallback(() => {
+    if (typeof window !== undefined) {
+      // Get available space for picker to show without going beyond screen
+      let maxHeight =
+        window.innerHeight -
+        (document.querySelector("#booking-widget")?.getBoundingClientRect()
+          .bottom ?? 0) -
+        50
+      const innerContainerHt = document
+        .querySelector(".react-aria-Popover")
+        ?.getBoundingClientRect().height
+      if (
+        maxHeight != containerHeight &&
+        innerContainerHt &&
+        maxHeight <= innerContainerHt
+      ) {
+        setContainerHeight(maxHeight)
+      } else if (
+        containerHeight &&
+        innerContainerHt &&
+        maxHeight > innerContainerHt
+      ) {
+        setContainerHeight(0)
+      }
+    }
+  }, [containerHeight])
+
+  useEffect(() => {
+    if (typeof window !== undefined && isDesktop) {
+      updateHeight()
+    }
+  }, [childCount, isDesktop, updateHeight])
+
   return isDesktop ? (
     <DialogTrigger onOpenChange={setOverflowClip}>
       <Trigger rooms={rooms} className={styles.triggerDesktop} />
-      <Popover placement="bottom start" offset={36}>
+      <Popover
+        placement="bottom start"
+        offset={36}
+        style={containerHeight ? { overflow: "auto" } : {}}
+      >
         <Dialog className={styles.pickerContainerDesktop}>
-          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+          {({ close }) => (
+            <PickerForm
+              rooms={rooms}
+              onClose={close}
+              isOverflowed={!!containerHeight}
+            />
+          )}
         </Dialog>
       </Popover>
     </DialogTrigger>
diff --git a/components/TempDesignSystem/Popover/index.tsx b/components/TempDesignSystem/Popover/index.tsx
index b1b03f340..9d0eb3d29 100644
--- a/components/TempDesignSystem/Popover/index.tsx
+++ b/components/TempDesignSystem/Popover/index.tsx
@@ -17,9 +17,10 @@ import styles from "./popover.module.css"
 export default function Popover({
   triggerContent,
   children,
+  isNestedPopover = false,
   ...props
 }: PopoverProps) {
-  const setOverflowVisible = useSetOverFlowVisibleOnRA()
+  const setOverflowVisible = useSetOverFlowVisibleOnRA(isNestedPopover)
 
   return (
     <DialogTrigger onOpenChange={setOverflowVisible}>
diff --git a/components/TempDesignSystem/Popover/popover.ts b/components/TempDesignSystem/Popover/popover.ts
index c774ca398..140f70c79 100644
--- a/components/TempDesignSystem/Popover/popover.ts
+++ b/components/TempDesignSystem/Popover/popover.ts
@@ -3,4 +3,5 @@ import type { PopoverProps as RAPopoverProps } from "react-aria-components"
 export interface PopoverProps extends Omit<RAPopoverProps, "children"> {
   triggerContent: React.ReactNode
   children: React.ReactNode
+  isNestedPopover?: boolean
 }
diff --git a/components/TempDesignSystem/Select/index.tsx b/components/TempDesignSystem/Select/index.tsx
index 816d8ddb9..8226d1804 100644
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -38,9 +38,10 @@ export default function Select({
   maxHeight,
   showRadioButton = false,
   discreet = false,
+  isNestedInModal = false,
 }: SelectProps) {
   const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
-  const setOverflowVisible = useSetOverflowVisibleOnRA()
+  const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal)
 
   function setRef(node: SelectPortalContainerArgs) {
     if (node) {
diff --git a/components/TempDesignSystem/Select/select.ts b/components/TempDesignSystem/Select/select.ts
index 942223277..dd2679587 100644
--- a/components/TempDesignSystem/Select/select.ts
+++ b/components/TempDesignSystem/Select/select.ts
@@ -12,6 +12,7 @@ export interface SelectProps
   maxHeight?: number
   showRadioButton?: boolean
   discreet?: boolean
+  isNestedInModal?: boolean
 }
 
 export type SelectPortalContainer = HTMLDivElement | undefined
diff --git a/hooks/useSetOverflowVisibleOnRA.ts b/hooks/useSetOverflowVisibleOnRA.ts
index e9031b477..793974cfb 100644
--- a/hooks/useSetOverflowVisibleOnRA.ts
+++ b/hooks/useSetOverflowVisibleOnRA.ts
@@ -1,8 +1,8 @@
-export default function useSetOverflowVisibleOnRA() {
+export default function useSetOverflowVisibleOnRA(isNestedInModal: boolean) {
   function setOverflowVisible(isOpen: boolean) {
     if (isOpen) {
       document.body.style.overflow = "visible"
-    } else {
+    } else if (!isNestedInModal) {
       document.body.style.overflow = ""
     }
   }