Merged in chore/move-use-scroll-to-top (pull request #2705)

chore: Move useScrollToTop to common package

* Move useScrollToTop to common package


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./counter.module.css"
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 type CounterProps = {
   count: number

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -15,7 +16,6 @@ import styles from "./guests-rooms-picker.module.css"
 
 import type { GuestsRoom as TGuestsRoom } from ".."
 import type { BookingWidgetSchema } from "../Client"
-import { Button } from "@scandic-hotels/design-system/Button"
 
 const MAX_ROOMS = 4
 

packages/booking-flow/lib/components/Contact/index.tsx

@@ -6,13 +6,13 @@ import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../hooks/useLang"
 
 import styles from "./contact.module.css"
 
 import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 interface ContactProps {
   hotel: Hotel

packages/common/hooks/useScrollToTop.ts

@@ -0,0 +1,46 @@
+import { type RefObject, useEffect, useState } from "react"
+
+interface UseScrollToTopProps {
+  threshold: number
+  elementRef?: RefObject<HTMLElement | null>
+  refScrollable?: boolean
+}
+
+export function useScrollToTop({
+  threshold,
+  elementRef,
+  refScrollable,
+}: UseScrollToTopProps) {
+  const [showBackToTop, setShowBackToTop] = useState(false)
+
+  useEffect(() => {
+    const element =
+      refScrollable && elementRef?.current ? elementRef?.current : window
+
+    function handleScroll() {
+      let position = window.scrollY
+      if (elementRef?.current) {
+        position = refScrollable
+          ? elementRef.current.scrollTop
+          : elementRef.current.getBoundingClientRect().top * -1
+      }
+      setShowBackToTop(position > threshold)
+    }
+
+    element.addEventListener("scroll", handleScroll, { passive: true })
+    return () => element.removeEventListener("scroll", handleScroll)
+  }, [threshold, elementRef, refScrollable])
+
+  function scrollToTop() {
+    if (elementRef?.current) {
+      if (refScrollable) {
+        elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
+      }
+      window.scrollTo({ top: elementRef.current.offsetTop, behavior: "smooth" })
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+  }
+
+  return { showBackToTop, scrollToTop }
+}

packages/trpc/lib/routers/hotels/output.ts

@@ -1,11 +1,11 @@
 import { z } from "zod"
 
+import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { logger } from "@scandic-hotels/common/logger"
 import { toLang } from "@scandic-hotels/common/utils/languages"
 import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
 
 import { RateEnum } from "../../enums/rate"
-import { RateTypeEnum } from "../../../../common/constants/rateType"
 import { RoomPackageCodeEnum } from "../../enums/roomFilter"
 import { AvailabilityEnum } from "../../enums/selectHotel"
 import {

packages/trpc/lib/routers/hotels/query.ts

@@ -1,4 +1,5 @@
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { getCacheClient } from "@scandic-hotels/common/dataCache"
 import { dt } from "@scandic-hotels/common/dt"
 import { createLogger } from "@scandic-hotels/common/logger/createLogger"
@@ -10,7 +11,6 @@ import * as api from "../../api"
 import { SEARCH_TYPE_REDEMPTION } from "../../constants/booking"
 import { BreakfastPackageEnum } from "../../enums/breakfast"
 import { RateEnum } from "../../enums/rate"
-import { RateTypeEnum } from "../../../../common/constants/rateType"
 import { AvailabilityEnum } from "../../enums/selectHotel"
 import { badRequestError, unauthorizedError } from "../../errors"
 import {

packages/trpc/lib/routers/hotels/schemas/productTypePrice.ts

@@ -1,11 +1,10 @@
 import { z } from "zod"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { nullableNumberValidator } from "@scandic-hotels/common/utils/zod/numberValidator"
 import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
 
-import { RateTypeEnum } from "../../../../../common/constants/rateType"
-
 export const corporateChequeSchema = z
   .object({
     additionalPricePerStay: nullableNumberValidator,