fix(SW-1003): Moved tooltip on mobile and fixed bug with touch/click

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -4,8 +4,10 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 import { z } from "zod"
 
+import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -25,6 +27,8 @@ export default function RoomFilter({
   onFilter,
   filterOptions,
 }: RoomFilterProps) {
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+
   const initialFilterValues = useMemo(
     () =>
       filterOptions.reduce(
@@ -55,6 +59,8 @@ export default function RoomFilter({
     id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
   })
 
+  const showTooltip = isAboveMobile && petFriendly
+
   const submitFilter = useCallback(() => {
     const data = getValues()
     onFilter(data)
@@ -77,19 +83,50 @@ export default function RoomFilter({
       </div>
       <div className={styles.infoMobile}>
         <div className={styles.filterInfo}>
-          <Caption
-            type="label"
-            color="baseTextMediumContrast"
-            textTransform="uppercase"
-          >
-            {intl.formatMessage({ id: "Filter" })}
-          </Caption>
-          <Caption type="label" color="baseTextMediumContrast">
-            {Object.entries(selectedFilters)
-              .filter(([_, value]) => value)
-              .map(([key]) => intl.formatMessage({ id: key }))
-              .join(", ")}
-          </Caption>
+          {!isAboveMobile ? (
+            <Tooltip
+              text={tooltipText}
+              position="bottom"
+              arrow="left"
+              isTouchable
+            >
+              <InfoCircleIcon
+                color="uiTextHighContrast"
+                height={20}
+                width={20}
+              />
+
+              <Caption
+                type="label"
+                color="baseTextMediumContrast"
+                textTransform="uppercase"
+              >
+                {intl.formatMessage({ id: "Filter" })}
+              </Caption>
+              <Caption type="label" color="baseTextMediumContrast">
+                {Object.entries(selectedFilters)
+                  .filter(([_, value]) => value)
+                  .map(([key]) => intl.formatMessage({ id: key }))
+                  .join(", ")}
+              </Caption>
+            </Tooltip>
+          ) : (
+            <>
+              <Caption
+                type="label"
+                color="baseTextMediumContrast"
+                textTransform="uppercase"
+              >
+                {intl.formatMessage({ id: "Filter" })}
+              </Caption>
+              <Caption type="label" color="baseTextMediumContrast">
+                {Object.entries(selectedFilters)
+                  .filter(([_, value]) => value)
+                  .map(([key]) => intl.formatMessage({ id: key }))
+                  .join(", ")}
+              </Caption>
+            </>
+          )}
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
@@ -118,11 +155,11 @@ export default function RoomFilter({
                   disabled={isDisabled}
                   selected={getValues(code)}
                   Icon={getIconForFeatureCode(code)}
-                  hasTooltip={isPetRoom}
+                  hasTooltip={isPetRoom && isAboveMobile}
                 />
               )
 
-              return isPetRoom ? (
+              return showTooltip ? (
                 <Tooltip
                   key={option.code}
                   text={tooltipText}