feat: SW-276 Implemented Guests and rooms picker

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  align-items: center;
+}
+
+.textCenter {
+  text-align: center;
+}

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx

@@ -0,0 +1,44 @@
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./adult-selector.module.css"
+
+import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function AdultSelector({
+  adults = 1,
+  updateAdults = (count: number) => {},
+}: AdultSelectorProps) {
+  const intl = useIntl()
+  const adultsLabel = intl.formatMessage({ id: "Adults" })
+
+  function decreaseAdults() {
+    if (adults <= 1) {
+      return
+    }
+    adults = adults - 1
+    updateAdults(adults)
+  }
+  function increaseAdults() {
+    if (adults > 5) {
+      return
+    }
+    adults = adults + 1
+    updateAdults(adults)
+  }
+
+  return (
+    <section className={styles.container}>
+      <Caption>{adultsLabel}</Caption>
+      <Button onClick={decreaseAdults} intent="text" size="small">
+        -
+      </Button>
+      <span className={styles.textCenter}>{adults}</span>
+      <Button onClick={increaseAdults} intent="text" size="small">
+        +
+      </Button>
+    </section>
+  )
+}

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/ChildInfoSelector.tsx

@@ -0,0 +1,83 @@
+import { useIntl } from "react-intl"
+
+import Select from "@/components/TempDesignSystem/Select"
+
+import {
+  Child,
+  ChildBed,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+type ChildSelectorProps = {
+  child: Child
+  index: number
+  availableBedTypes?: ChildBed[]
+  updateChild: (child: Child, index: number) => void
+}
+
+export default function ChildInfoSelector({
+  child = { age: -1, bed: -1 },
+  index = 0,
+  availableBedTypes = [
+    { label: "In adults bed", value: 0 },
+    { label: "In crib", value: 1 },
+    { label: "In extra bed", value: 2 },
+  ],
+  updateChild = (child: Child, index: number) => {},
+}: ChildSelectorProps) {
+  const intl = useIntl()
+  const ageLabel = intl.formatMessage({ id: "Age" })
+  const bedLabel = intl.formatMessage({ id: "Bed" })
+
+  const ageList = [
+    { label: "0", value: 0 },
+    { label: "1", value: 1 },
+    { label: "2", value: 2 },
+    { label: "3", value: 3 },
+    { label: "4", value: 4 },
+    { label: "5", value: 5 },
+    { label: "6", value: 6 },
+    { label: "7", value: 7 },
+    { label: "8", value: 8 },
+    { label: "9", value: 9 },
+    { label: "10", value: 10 },
+    { label: "11", value: 11 },
+    { label: "12", value: 12 },
+  ]
+
+  function handleOnSelect(selectedKey: any, childInfo: string) {
+    if (childInfo == "age") {
+      child.age = selectedKey
+    } else if (childInfo == "bed") {
+      child.bed = selectedKey
+    }
+    updateChild(child, index)
+  }
+
+  return (
+    <>
+      <Select
+        size={2}
+        items={ageList}
+        label={ageLabel}
+        aria-label={ageLabel}
+        value={child.age}
+        onSelect={(key) => {
+          handleOnSelect(key, "age")
+        }}
+        name="age"
+      />
+      {child.age !== -1 ? (
+        <Select
+          items={availableBedTypes}
+          label={bedLabel}
+          aria-label={bedLabel}
+          value={child.bed}
+          onSelect={(key) => {
+            handleOnSelect(key, "bed")
+          }}
+          name="bed"
+        />
+      ) : null}
+    </>
+  )
+}

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/child-selector.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  align-items: center;
+}
+
+.childInfoContainer {
+  display: flex;
+  gap: 20px;
+}
+
+.textCenter {
+  text-align: center;
+}

components/GuestsRoomsPicker/GuestsRoomPicker/ChildSelector/index.tsx

@@ -0,0 +1,101 @@
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import ChildInfoSelector from "./ChildInfoSelector"
+
+import styles from "./child-selector.module.css"
+
+import {
+  Child,
+  ChildBed,
+  ChildSelectorProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function ChildSelector({
+  roomChildren = [],
+  adultCount = 1,
+  updateChildren = (children: Child[]) => {},
+}: ChildSelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({ id: "Children" })
+
+  function decreaseChildren() {
+    if (roomChildren.length < 1) {
+      return
+    }
+    roomChildren.pop()
+    updateChildren(roomChildren)
+  }
+
+  function increaseChildren() {
+    if (roomChildren.length > 5) {
+      return
+    }
+    roomChildren.push({ age: -1, bed: -1 })
+    updateChildren(roomChildren)
+  }
+
+  function updateChildInfo(child: Child, index: number) {
+    roomChildren[index] = child
+    updateChildren(roomChildren)
+  }
+
+  const childInAdultsBedIndices: number[] = []
+  let availableInAdultsBed = adultCount
+  const availableBedTypes: ChildBed[] = [
+    { label: intl.formatMessage({ id: "In adults bed" }), value: 0 },
+    { label: intl.formatMessage({ id: "In crib" }), value: 1 },
+    { label: intl.formatMessage({ id: "In extra bed" }), value: 2 },
+  ]
+
+  const childBedTypes: ChildBed[][] = []
+  for (let i = 0; i < roomChildren.length; i++) {
+    if (roomChildren[i].bed == 0 && availableInAdultsBed > 0) {
+      childInAdultsBedIndices.push(i)
+      availableInAdultsBed = availableInAdultsBed - 1
+    }
+  }
+  roomChildren.forEach((child, index) => {
+    let types: typeof availableBedTypes = []
+    if (
+      child.age <= 5 &&
+      (availableInAdultsBed > 0 || childInAdultsBedIndices.indexOf(index) != -1)
+    ) {
+      types.push(availableBedTypes[0])
+    }
+    if (child.age < 3) {
+      types.push(availableBedTypes[1])
+    }
+    if (child.age > 2) {
+      types.push(availableBedTypes[2])
+    }
+    childBedTypes[index] = types
+  })
+
+  return (
+    <>
+      <section className={styles.container}>
+        <Caption>{childrenLabel}</Caption>
+        <Button intent="text" size="small" onClick={decreaseChildren}>
+          -
+        </Button>
+        <span className={styles.textCenter}>{roomChildren.length}</span>
+        <Button intent="text" size="small" onClick={increaseChildren}>
+          +
+        </Button>
+      </section>
+      {roomChildren.map((child, index) => (
+        <div key={index} className={styles.childInfoContainer}>
+          <ChildInfoSelector
+            index={index}
+            child={child}
+            availableBedTypes={childBedTypes[index]}
+            updateChild={updateChildInfo}
+          />
+        </div>
+      ))}
+    </>
+  )
+}

components/GuestsRoomsPicker/GuestsRoomPicker/guests-room-picker.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 280px;
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding-bottom: var(--Spacing-x1);
+}

components/GuestsRoomsPicker/GuestsRoomPicker/index.tsx

@@ -0,0 +1,47 @@
+import { useIntl } from "react-intl"
+
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import AdultSelector from "./AdultSelector"
+import ChildSelector from "./ChildSelector"
+
+import styles from "./guests-room-picker.module.css"
+
+import {
+  Child,
+  GuestsRoom,
+  GuestsRoomPickerProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomPicker({
+  handleOnSelect = (selected: GuestsRoom, index: number) => {},
+  room = { adults: 1, children: [] },
+  index = 1,
+}: GuestsRoomPickerProps) {
+  const intl = useIntl()
+  const roomLabel = intl.formatMessage({ id: "Room" })
+
+  function updateAdults(count: number) {
+    room.adults = count
+    handleOnSelect(room, index)
+  }
+
+  function updateChildren(children: Child[]) {
+    room.children = children
+    handleOnSelect(room, index)
+  }
+
+  return (
+    <section className={styles.container}>
+      <Subtitle>
+        {roomLabel} {index + 1}
+      </Subtitle>
+      <AdultSelector adults={room.adults} updateAdults={updateAdults} />
+      <ChildSelector
+        roomChildren={room.children}
+        adultCount={room.adults}
+        updateChildren={updateChildren}
+      />
+    </section>
+  )
+}

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -0,0 +1,89 @@
+"use client"
+import { useState } from "react"
+
+import useLang from "@/hooks/useLang"
+
+import Button from "../TempDesignSystem/Button"
+import Divider from "../TempDesignSystem/Divider"
+import GuestsRoomPicker from "./GuestsRoomPicker"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import {
+  GuestsRoom,
+  GuestsRoomsPickerProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPicker({
+  handleOnSelect,
+  initialSelected = [
+    {
+      adults: 1,
+      children: [],
+    },
+  ],
+  closePicker,
+}: GuestsRoomsPickerProps) {
+  const lang = useLang()
+  const [selectedGuests, setSelectedGuests] =
+    useState<GuestsRoom[]>(initialSelected)
+
+  function handleSelectRoomGuests(
+    selectedGuestsRoom: GuestsRoom,
+    index: number
+  ) {
+    let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
+    updatedSelectedGuests[index] = selectedGuestsRoom
+    handleOnSelect(updatedSelectedGuests)
+    setSelectedGuests(updatedSelectedGuests)
+  }
+
+  function addRoom() {
+    if (selectedGuests.length < 4) {
+      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
+      updatedSelectedGuests.push({
+        adults: 1,
+        children: [],
+      })
+      setSelectedGuests(updatedSelectedGuests)
+      handleOnSelect(updatedSelectedGuests)
+    }
+  }
+
+  function removeRoom(index: number) {
+    if (selectedGuests.length > 1) {
+      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
+      updatedSelectedGuests.splice(index, 1)
+      setSelectedGuests(updatedSelectedGuests)
+      handleOnSelect(updatedSelectedGuests)
+    }
+  }
+
+  return (
+    <>
+      {selectedGuests.map((room, index) => (
+        <section key={index}>
+          <GuestsRoomPicker
+            room={room}
+            handleOnSelect={handleSelectRoomGuests}
+            index={index}
+          />
+          <Divider></Divider>
+          {index > 0 ? (
+            <Button intent="text" onClick={() => removeRoom(index)}>
+              Remove Room
+            </Button>
+          ) : null}
+        </section>
+      ))}
+      <div className={styles.footer}>
+        {selectedGuests.length < 4 ? (
+          <Button intent="text" onClick={addRoom}>
+            Add Room
+          </Button>
+        ) : null}
+        <Button onClick={closePicker}>Done</Button>
+      </div>
+    </>
+  )
+}

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -0,0 +1,34 @@
+.container {
+  overflow: hidden;
+  position: relative;
+  z-index: 10;
+  &[data-isopen="true"] {
+    overflow: visible;
+  }
+}
+.hideWrapper {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.08);
+  padding: var(--Spacing-x-one-and-half);
+  position: absolute;
+  /** BookingWidget padding + border-width */
+  top: calc(100% + var(--Spacing-x2) + 1px);
+}
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+.body {
+  opacity: 0.8;
+}
+.footer {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: auto auto;
+  margin: 10px 0 0;
+}

components/GuestsRoomsPicker/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import GuestsRoomsPicker from "./GuestsRoomsPicker"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import {
+  GuestsRoom,
+  GuestsRoomsFormProps,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPickerForm({
+  name = "rooms",
+}: GuestsRoomsFormProps) {
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const selectedGuests = useWatch({ name })
+  const { register, setValue } = useFormContext()
+  const ref = useRef<HTMLDivElement | null>(null)
+  function handleOnClick() {
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+  }
+  function handleSelectGuest(selected: GuestsRoom[]) {
+    setValue(name, selected)
+  }
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (ref.current && target && !ref.current.contains(target)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("click", handleClickOutside)
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [setIsOpen])
+
+  let selectedAdultsCount = 0
+  let selectedChildrenCount = 0
+  selectedGuests.forEach((room: GuestsRoom) => {
+    selectedAdultsCount = selectedAdultsCount + room.adults
+    selectedChildrenCount =
+      selectedChildrenCount + (room.children ? room.children.length : 0)
+  })
+  const selectedRoomsCount = selectedGuests.length
+  const childCountLabel =
+    (selectedChildrenCount > 1
+      ? intl.formatMessage({ id: "Children" })
+      : intl.formatMessage({ id: "Child" })) + ", "
+
+  return (
+    <div className={styles.container} data-isopen={isOpen} ref={ref}>
+      <button className={styles.btn} onClick={handleOnClick} type="button">
+        <Body className={styles.body}>
+          {selectedAdultsCount}{" "}
+          {selectedAdultsCount > 1
+            ? intl.formatMessage({ id: "Adults" })
+            : intl.formatMessage({ id: "Adult" })}{" "}
+          {", "}
+          {selectedChildrenCount > 0
+            ? selectedChildrenCount + " " + childCountLabel
+            : null}
+          {selectedRoomsCount}{" "}
+          {selectedRoomsCount > 1
+            ? intl.formatMessage({ id: "Rooms" })
+            : intl.formatMessage({ id: "Room" })}
+        </Body>
+      </button>
+      <div aria-modal className={styles.hideWrapper} role="dialog">
+        <GuestsRoomsPicker
+          handleOnSelect={handleSelectGuest}
+          initialSelected={selectedGuests}
+          closePicker={handleOnClick}
+        />
+      </div>
+    </div>
+  )
+}