Merged in feature/select-rate-vertical-data-flow (pull request #2535)

Feature/select rate vertical data flow

* add fix from SW-2666

* use translations for room packages

* move types to it's own file

* Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow

* merge

* feature/select-rate: double rate for campaing rates

* revert NODE_ENV check in Cookiebot script

* revert testing values

* fix(SW-3171): fix all filter selected in price details

* fix(SW-3166): multiroom anchoring when changing filter

* fix(SW-3172): check hotelType, show correct breakfast message

* Merge branch 'feature/select-rate-vertical-data-flow' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow

* fix: show special needs icons for subsequent roomTypes SW-3167

* fix: Display strike through text when logged in SW-3168

* fix: Reinstate the scrollToView behaviour when selecting a rate SW-3169

* merge

* .

* PR fixes

* fix: don't return notFound()

* .

* always include defaults for room packages

* merge

* merge

* merge

* Remove floating h1 for new select-rate


Approved-by: Anton Gunnarsson

apps/scandic-web/hooks/useBreakpoint.ts

@@ -0,0 +1,27 @@
+import { useMediaQuery } from "usehooks-ts"
+
+type Size = "mobile" | "tablet" | "desktop"
+
+/**
+ * @example
+ * mobile: "max-width: 767px",
+ * tablet: "min-width: 768px and max-width: 1023px",
+ * desktop: "min-width: 1024px",
+ * @param device - The device size to check against.
+ * @returns True if the current viewport matches the specified device size, false otherwise.
+ */
+export const useBreakpoint = (devices: Size | Size[]) => {
+  const deviceArray = Array.isArray(devices) ? devices : [devices]
+  const queries = deviceArray.map((device) => `(${sizeMapping[device]})`)
+  return useMediaQuery(queries.join(", "))
+}
+
+export const useIsMobile = () => useBreakpoint("mobile")
+export const useIsTablet = () => useBreakpoint("tablet")
+export const useIsDesktop = () => useBreakpoint("desktop")
+
+const sizeMapping: Record<Size, string> = {
+  mobile: "max-width: 767px",
+  tablet: "min-width: 768px and max-width: 1023px",
+  desktop: "min-width: 1024px",
+}