Merged in monorepo-step-1 (pull request #1080)

Migrate to a monorepo setup - step 1

* Move web to subfolder /apps/scandic-web

* Yarn + transitive deps

- Move to yarn
- design-system package removed for now since yarn doesn't
support the parameter for token (ie project currently broken)
- Add missing transitive dependencies as Yarn otherwise
prevents these imports
- VS Code doesn't pick up TS path aliases unless you open
/apps/scandic-web instead of root (will be fixed with monorepo)

* Pin framer-motion to temporarily fix typing issue

https://github.com/adobe/react-spectrum/issues/7494

* Pin zod to avoid typ error

There seems to have been a breaking change in the types
returned by zod where error is now returned as undefined
instead of missing in the type. We should just handle this
but to avoid merge conflicts just pin the dependency for
now.

* Pin react-intl version

Pin version of react-intl to avoid tiny type issue where formatMessage
does not accept a generic any more. This will be fixed in a future
commit, but to avoid merge conflicts just pin for now.

* Pin typescript version

Temporarily pin version as newer versions as stricter and results in
a type error. Will be fixed in future commit after merge.

* Setup workspaces

* Add design-system as a monorepo package

* Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN

* Fix husky for monorepo setup

* Update netlify.toml

* Add lint script to root package.json

* Add stub readme

* Fix react-intl formatMessage types

* Test netlify.toml in root

* Remove root toml

* Update netlify.toml publish path

* Remove package-lock.json

* Update build for branch/preview builds


Approved-by: Linus Flood

apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Counter from "../Counter"
+
+import styles from "./adult-selector.module.css"
+
+import type { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function AdultSelector({
+  roomIndex = 0,
+  currentAdults,
+}: SelectorProps) {
+  const name = `rooms.${roomIndex}.adults`
+  const intl = useIntl()
+  const adultsLabel = intl.formatMessage({ id: "Adults" })
+  const { setValue } = useFormContext()
+
+  function increaseAdultsCount() {
+    if (currentAdults < 6) {
+      setValue(name, currentAdults + 1)
+    }
+  }
+
+  function decreaseAdultsCount() {
+    if (currentAdults > 1) {
+      setValue(name, currentAdults - 1)
+    }
+  }
+
+  return (
+    <section className={styles.container}>
+      <Caption color="uiTextHighContrast" type="bold">
+        {adultsLabel}
+      </Caption>
+      <Counter
+        count={currentAdults}
+        handleOnDecrease={decreaseAdultsCount}
+        handleOnIncrease={increaseAdultsCount}
+        disableDecrease={currentAdults == 1}
+        disableIncrease={currentAdults == 6}
+      />
+    </section>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { ErrorCircleIcon } from "@/components/Icons"
+import Select from "@/components/TempDesignSystem/Select"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./child-selector.module.css"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type {
+  ChildBed,
+  ChildInfoSelectorProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+const ageList = [...Array(13)].map((_, i) => ({
+  label: i.toString(),
+  value: i,
+}))
+
+const childDefaultValues = { age: -1, bed: -1 }
+
+export default function ChildInfoSelector({
+  child,
+  childrenInAdultsBed,
+  adults,
+  index = 0,
+  roomIndex = 0,
+}: ChildInfoSelectorProps) {
+  const ageFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.age`
+  const bedFieldName = `rooms.${roomIndex}.childrenInRoom.${index}.bed`
+  const intl = useIntl()
+  const ageLabel = intl.formatMessage({ id: "Age" })
+  const bedLabel = intl.formatMessage({ id: "Bed" })
+  const errorMessage = intl.formatMessage({ id: "Child age is required" })
+  const { setValue, formState } = useFormContext()
+
+  function updateSelectedBed(bed: number) {
+    setValue(`rooms.${roomIndex}.childrenInRoom.${index}.bed`, bed)
+  }
+
+  function updateSelectedAge(age: number) {
+    setValue(`rooms.${roomIndex}.childrenInRoom.${index}.age`, age)
+    const availableBedTypes = getAvailableBeds(age)
+    updateSelectedBed(availableBedTypes[0].value)
+  }
+
+  const allBedTypes: ChildBed[] = [
+    {
+      label: intl.formatMessage({ id: "In adults bed" }),
+      value: ChildBedMapEnum.IN_ADULTS_BED,
+    },
+    {
+      label: intl.formatMessage({ id: "In crib" }),
+      value: ChildBedMapEnum.IN_CRIB,
+    },
+    {
+      label: intl.formatMessage({ id: "In extra bed" }),
+      value: ChildBedMapEnum.IN_EXTRA_BED,
+    },
+  ]
+
+  function getAvailableBeds(age: number) {
+    let availableBedTypes: ChildBed[] = []
+    if (age <= 5 && (adults > childrenInAdultsBed || child.bed === 0)) {
+      availableBedTypes.push(allBedTypes[0])
+    }
+    if (age < 3) {
+      availableBedTypes.push(allBedTypes[1])
+    }
+    if (age > 2) {
+      availableBedTypes.push(allBedTypes[2])
+    }
+    return availableBedTypes
+  }
+
+  const roomErrors =
+    //@ts-expect-error: formState is typed with FormValues
+    formState.errors.rooms?.[roomIndex]?.childrenInRoom?.[index]
+
+  const ageError = roomErrors?.age
+  const bedError = roomErrors?.bed
+
+  return (
+    <>
+      <div key={index} className={styles.childInfoContainer}>
+        <div>
+          <Select
+            required={true}
+            items={ageList}
+            label={ageLabel}
+            aria-label={ageLabel}
+            value={child.age ?? childDefaultValues.age}
+            onSelect={(key) => {
+              updateSelectedAge(key as number)
+            }}
+            maxHeight={180}
+            name={ageFieldName}
+            isNestedInModal={true}
+          />
+        </div>
+        <div>
+          {child.age >= 0 ? (
+            <Select
+              items={getAvailableBeds(child.age)}
+              label={bedLabel}
+              aria-label={bedLabel}
+              value={child.bed ?? childDefaultValues.bed}
+              onSelect={(key) => {
+                updateSelectedBed(key as number)
+              }}
+              name={bedFieldName}
+              isNestedInModal={true}
+            />
+          ) : null}
+        </div>
+      </div>
+
+      {roomErrors && roomErrors.message ? (
+        <Caption color="red" className={styles.error}>
+          <ErrorCircleIcon color="red" />
+          {roomErrors.message}
+        </Caption>
+      ) : null}
+
+      {ageError || bedError ? (
+        <Caption color="red" className={styles.error}>
+          <ErrorCircleIcon color="red" />
+          {errorMessage}
+        </Caption>
+      ) : null}
+    </>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.captionBold {
+  font-weight: 600;
+}
+
+.childInfoContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr 2fr;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import Counter from "../Counter"
+import ChildInfoSelector from "./ChildInfoSelector"
+
+import styles from "./child-selector.module.css"
+
+import type { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildSelector({
+  roomIndex = 0,
+  currentAdults,
+  childrenInAdultsBed,
+  currentChildren,
+}: SelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({ id: "Children" })
+  const { setValue } = useFormContext()
+
+  function increaseChildrenCount(roomIndex: number) {
+    if (currentChildren.length < 5) {
+      setValue(`rooms.${roomIndex}.childrenInRoom.${currentChildren.length}`, {
+        age: undefined,
+        bed: undefined,
+      })
+    }
+  }
+  function decreaseChildrenCount(roomIndex: number) {
+    if (currentChildren.length > 0) {
+      currentChildren.pop()
+      setValue(`rooms.${roomIndex}.childrenInRoom`, currentChildren)
+    }
+  }
+
+  return (
+    <>
+      <section className={styles.container}>
+        <Caption color="uiTextHighContrast" type="bold">
+          {childrenLabel}
+        </Caption>
+        <Counter
+          count={currentChildren.length}
+          handleOnDecrease={() => {
+            decreaseChildrenCount(roomIndex)
+          }}
+          handleOnIncrease={() => {
+            increaseChildrenCount(roomIndex)
+          }}
+          disableDecrease={currentChildren.length == 0}
+          disableIncrease={currentChildren.length == 5}
+        />
+      </section>
+      {currentChildren.map((child, index) => (
+        <ChildInfoSelector
+          roomIndex={roomIndex}
+          index={index}
+          child={child}
+          adults={currentAdults}
+          key={"child_" + index}
+          childrenInAdultsBed={childrenInAdultsBed}
+        />
+      ))}
+    </>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/Counter/counter.module.css

@@ -0,0 +1,13 @@
+.counterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+}
+.counterBtn {
+  width: 40px;
+  height: 40px;
+}
+.counterBtn:not([disabled]) {
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}

apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { MinusIcon, PlusIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./counter.module.css"
+
+import type { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function Counter({
+  count,
+  handleOnIncrease,
+  handleOnDecrease,
+  disableIncrease,
+  disableDecrease,
+}: CounterProps) {
+  return (
+    <div className={styles.counterContainer}>
+      <Button
+        className={styles.counterBtn}
+        intent="inverted"
+        onClick={handleOnDecrease}
+        size="small"
+        theme="base"
+        variant="icon"
+        wrapping={true}
+        disabled={disableDecrease}
+      >
+        <MinusIcon color="burgundy" />
+      </Button>
+      <Body color="baseTextHighContrast" textAlign="center">
+        {count}
+      </Body>
+      <Button
+        className={styles.counterBtn}
+        onClick={handleOnIncrease}
+        intent="inverted"
+        variant="icon"
+        theme="base"
+        wrapping={true}
+        size="small"
+        disabled={disableIncrease}
+      >
+        <PlusIcon color="burgundy" />
+      </Button>
+    </div>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/Form.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { env } from "@/env/client"
+
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
+import Button from "../TempDesignSystem/Button"
+import { Tooltip } from "../TempDesignSystem/Tooltip"
+import { GuestsRoom } from "./GuestsRoom"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import type { TGuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+const MAX_ROOMS = 4
+
+interface GuestsRoomsPickerDialogProps {
+  rooms: TGuestsRoom[]
+  onClose: () => void
+  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
+}
+
+export default function GuestsRoomsPickerDialog({
+  rooms,
+  onClose,
+  isOverflowed = false,
+}: GuestsRoomsPickerDialogProps) {
+  const intl = useIntl()
+  const { getFieldState, trigger, setValue } =
+    useFormContext<BookingWidgetSchema>()
+  const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
+  const addRoomLabel = intl.formatMessage({ id: "Add room" })
+  const doneLabel = intl.formatMessage({ id: "Done" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "We're sorry",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Adding room is not available on the new website yet.",
+  })
+
+  const handleClose = useCallback(async () => {
+    const isValid = await trigger("rooms")
+    if (isValid) onClose()
+  }, [trigger, onClose])
+
+  const handleAddRoom = useCallback(() => {
+    setValue("rooms", [...roomsValue, { adults: 1, childrenInRoom: [] }], {
+      shouldValidate: true,
+    })
+  }, [roomsValue, setValue])
+
+  const handleRemoveRoom = useCallback(
+    (index: number) => {
+      setValue(
+        "rooms",
+        roomsValue.filter((_, i) => i !== index),
+        { shouldValidate: true }
+      )
+    },
+    [roomsValue, setValue]
+  )
+
+  // Validate rooms when they change
+  useEffect(() => {
+    const fieldState = getFieldState("rooms")
+    if (fieldState.invalid) trigger("rooms")
+  }, [roomsValue, getFieldState, trigger])
+
+  const isInvalid =
+    getFieldState("rooms").invalid ||
+    roomsValue.some((room) =>
+      room.childrenInRoom.some((child) => child.age === undefined)
+    )
+  const canAddRooms = rooms.length < MAX_ROOMS
+
+  return (
+    <>
+      <section className={styles.contentWrapper}>
+        <header className={styles.header}>
+          <button type="button" className={styles.close} onClick={onClose}>
+            <CloseLargeIcon />
+          </button>
+        </header>
+
+        <div className={styles.contentContainer}>
+          {rooms.map((room, index) => (
+            <GuestsRoom
+              key={index}
+              room={room}
+              index={index}
+              onRemove={handleRemoveRoom}
+            />
+          ))}
+
+          {env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
+            <div className={styles.addRoomMobileContainer}>
+              <Tooltip
+                heading={disabledBookingOptionsHeader}
+                text={disabledBookingOptionsText}
+                position="bottom"
+                arrow="left"
+              >
+                <Button
+                  intent="text"
+                  variant="icon"
+                  wrapping
+                  theme="base"
+                  fullWidth
+                  onPress={handleAddRoom}
+                  disabled
+                >
+                  <PlusIcon />
+                  {addRoomLabel}
+                </Button>
+              </Tooltip>
+            </div>
+          ) : (
+            canAddRooms && (
+              <div className={styles.addRoomMobileContainer}>
+                <Button
+                  intent="text"
+                  variant="icon"
+                  wrapping
+                  theme="base"
+                  fullWidth
+                  onPress={handleAddRoom}
+                >
+                  <PlusIcon />
+                  {addRoomLabel}
+                </Button>
+              </div>
+            )
+          )}
+        </div>
+      </section>
+      <footer className={styles.footer}>
+        {env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
+          <div className={styles.hideOnMobile}>
+            <Tooltip
+              heading={disabledBookingOptionsHeader}
+              text={disabledBookingOptionsText}
+              position={isOverflowed ? "top" : "bottom"}
+              arrow="left"
+            >
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                disabled
+                onPress={handleAddRoom}
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            </Tooltip>
+          </div>
+        ) : (
+          canAddRooms && (
+            <div className={styles.hideOnMobile}>
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                onPress={handleAddRoom}
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            </div>
+          )
+        )}
+        <Button
+          onPress={handleClose}
+          disabled={isInvalid}
+          className={styles.hideOnDesktop}
+          intent="tertiary"
+          theme="base"
+          size="large"
+        >
+          {doneLabel}
+        </Button>
+        <Button
+          onPress={handleClose}
+          disabled={isInvalid}
+          className={styles.hideOnMobile}
+          intent="tertiary"
+          theme="base"
+          size="small"
+        >
+          {doneLabel}
+        </Button>
+      </footer>
+    </>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -0,0 +1,72 @@
+import { useIntl } from "react-intl"
+
+import { DeleteIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import AdultSelector from "../AdultSelector"
+import ChildSelector from "../ChildSelector"
+
+import styles from "../guests-rooms-picker.module.css"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type { TGuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export function GuestsRoom({
+  room,
+  index,
+  onRemove,
+}: {
+  room: TGuestsRoom
+  index: number
+  onRemove: (index: number) => void
+}) {
+  const intl = useIntl()
+  const roomLabel = intl.formatMessage({ id: "Room" })
+
+  const childrenInAdultsBed = room.childrenInRoom.filter(
+    (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
+  ).length
+
+  return (
+    <div className={styles.roomContainer}>
+      <section className={styles.roomDetailsContainer}>
+        <Subtitle type="two" className={styles.roomHeading}>
+          {roomLabel} {index + 1}
+        </Subtitle>
+        <AdultSelector
+          roomIndex={index}
+          currentAdults={room.adults}
+          currentChildren={room.childrenInRoom}
+          childrenInAdultsBed={childrenInAdultsBed}
+        />
+        <ChildSelector
+          roomIndex={index}
+          currentAdults={room.adults}
+          currentChildren={room.childrenInRoom}
+          childrenInAdultsBed={childrenInAdultsBed}
+        />
+        {index !== 0 && (
+          <div className={styles.roomActions}>
+            <Button
+              intent="text"
+              variant="icon"
+              wrapping
+              theme="secondaryLight"
+              onPress={() => onRemove(index)}
+              size="small"
+              className={styles.roomActionsButton}
+            >
+              <DeleteIcon color="red" />
+              <span className={styles.roomActionsLabel}>
+                {intl.formatMessage({ id: "Remove room" })}
+              </span>
+            </Button>
+          </div>
+        )}
+      </section>
+      <Divider color="primaryLightSubtle" />
+    </div>
+  )
+}

apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -0,0 +1,195 @@
+.triggerDesktop {
+  display: none;
+}
+
+.pickerContainerMobile {
+  --header-height: 72px;
+  --sticky-button-height: 140px;
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 20px;
+  transition: top 300ms ease;
+  z-index: 100;
+}
+.contentWrapper {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "content";
+  grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
+}
+
+.pickerContainerDesktop {
+  display: none;
+}
+
+.roomContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+.roomDetailsContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding-bottom: var(--Spacing-x1);
+}
+.roomHeading {
+  margin-bottom: var(--Spacing-x1);
+}
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  text-align: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 20px var(--Spacing-x-one-and-half) 0;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+}
+
+.roomContainer {
+  padding: var(--Spacing-x2);
+}
+.roomContainer:last-of-type {
+  padding-bottom: calc(var(--sticky-button-height) + 20px);
+}
+
+.roomActionsButton {
+  margin-left: auto;
+  color: var(--Base-Text-Accent);
+}
+
+.footer button {
+  width: 100%;
+}
+
+@media screen and (max-width: 1366px) {
+  .contentContainer {
+    grid-area: content;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
+
+  .header {
+    display: grid;
+    grid-area: header;
+    padding: var(--Spacing-x3) var(--Spacing-x2) 0;
+  }
+
+  .close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-self: flex-end;
+    padding: 0;
+  }
+
+  .footer {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 7.5%,
+      #ffffff 82.5%
+    );
+    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x7);
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .footer .hideOnMobile {
+    display: none;
+  }
+
+  .addRoomMobileContainer {
+    display: grid;
+    width: 150px;
+    margin: 0 auto;
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    height: 24px;
+  }
+  .pickerContainerMobile {
+    display: none;
+  }
+  .contentWrapper {
+    grid-template-rows: auto;
+  }
+
+  .roomContainer {
+    padding: var(--Spacing-x2) 0 0 0;
+  }
+  .roomContainer:first-of-type {
+    padding-top: 0;
+  }
+
+  .roomContainer:last-of-type {
+    padding-bottom: 0;
+  }
+
+  .contentContainer {
+    overflow-y: visible;
+  }
+
+  .triggerMobile {
+    display: none;
+  }
+
+  .triggerDesktop {
+    display: block;
+  }
+
+  .pickerContainerDesktop {
+    --header-height: 72px;
+    --sticky-button-height: 140px;
+
+    background-color: var(--Main-Grey-White);
+    display: grid;
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    max-width: calc(100vw - 20px);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+    width: 360px;
+  }
+
+  .pickerContainerDesktop:focus-visible {
+    outline: none;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .footer {
+    grid-template-columns: auto auto;
+    padding-top: var(--Spacing-x2);
+  }
+
+  .footer button {
+    margin-left: auto;
+    width: 125px;
+  }
+
+  .footer .hideOnDesktop,
+  .addRoomMobileContainer {
+    display: none;
+  }
+}

apps/scandic-web/components/GuestsRoomsPicker/index.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  Modal,
+  Popover,
+} from "react-aria-components"
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import PickerForm from "./Form"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import type { TGuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPickerForm() {
+  const { watch, trigger } = useFormContext()
+  const rooms = watch("rooms") as TGuestsRoom[]
+
+  const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
+  const [isDesktop, setIsDesktop] = useState(true)
+  const [isOpen, setIsOpen] = useState(false)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const childCount =
+    rooms[0] && rooms[0].childrenInRoom ? rooms[0].childrenInRoom.length : 0 // ToDo Update for multiroom later
+
+  const htmlElement =
+    typeof window !== "undefined" ? document.querySelector("body") : null
+  //isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed".
+  async function setOverflowClip(isOpen: boolean) {
+    if (htmlElement) {
+      if (isOpen) {
+        htmlElement.style.overflow = "visible"
+      } else {
+        // !important needed to override 'overflow: hidden' set by react-aria.
+        // 'overflow: hidden' does not work in combination with other sticky positioned elements, which clip does.
+        htmlElement.style.overflow = "clip !important"
+      }
+    }
+    if (!isOpen) {
+      const state = await trigger("rooms")
+      if (state) {
+        setIsOpen(isOpen)
+      }
+    }
+  }
+
+  useEffect(() => {
+    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 innerContainerHeight = document
+        .querySelector(".guests_picker_popover")
+        ?.getBoundingClientRect().height
+      if (
+        maxHeight != containerHeight &&
+        innerContainerHeight &&
+        maxHeight <= innerContainerHeight
+      ) {
+        setContainerHeight(maxHeight)
+      } else if (
+        containerHeight &&
+        innerContainerHeight &&
+        maxHeight > innerContainerHeight
+      ) {
+        setContainerHeight(0)
+      }
+    }
+  }, [containerHeight])
+
+  useEffect(() => {
+    if (typeof window !== undefined && isDesktop && rooms.length > 0) {
+      updateHeight()
+    }
+  }, [childCount, isDesktop, updateHeight, rooms])
+
+  return isDesktop ? (
+    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
+      <Trigger
+        rooms={rooms}
+        className={styles.triggerDesktop}
+        triggerFn={() => {
+          setIsOpen(true)
+        }}
+      />
+      <Popover
+        className="guests_picker_popover"
+        placement="bottom start"
+        offset={36}
+        style={containerHeight ? { overflow: "auto" } : {}}
+      >
+        <Dialog className={styles.pickerContainerDesktop}>
+          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  ) : (
+    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
+      <Trigger
+        rooms={rooms}
+        className={styles.triggerMobile}
+        triggerFn={() => {
+          setIsOpen(true)
+        }}
+      />
+      <Modal>
+        <Dialog className={styles.pickerContainerMobile}>
+          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  )
+}
+
+function Trigger({
+  rooms,
+  className,
+  triggerFn,
+}: {
+  rooms: TGuestsRoom[]
+  className: string
+  triggerFn?: () => void
+}) {
+  const intl = useIntl()
+
+  const parts = [
+    intl.formatMessage(
+      { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
+      { totalRooms: rooms.length }
+    ),
+    intl.formatMessage(
+      { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+      { totalAdults: rooms.reduce((acc, room) => acc + room.adults, 0) }
+    ),
+  ]
+
+  if (rooms.some((room) => room.childrenInRoom.length > 0)) {
+    parts.push(
+      intl.formatMessage(
+        {
+          id: "{totalChildren, plural, one {# child} other {# children}}",
+        },
+        {
+          totalChildren: rooms.reduce(
+            (acc, room) => acc + room.childrenInRoom.length,
+            0
+          ),
+        }
+      )
+    )
+  }
+
+  return (
+    <Button
+      className={`${className} ${styles.btn}`}
+      type="button"
+      onPress={triggerFn}
+    >
+      <Body color="uiTextHighContrast">
+        <span>{parts.join(", ")}</span>
+      </Body>
+    </Button>
+  )
+}