fix: remove guest picker store

2024-11-12 16:45:25 +01:00
parent 58678244fc
commit ca3819f7cc
17 changed files with 368 additions and 597 deletions
--- a/components/GuestsRoomsPicker/Form.tsx
+++ b/components/GuestsRoomsPicker/Form.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
+import Button from "../TempDesignSystem/Button"
+import Divider from "../TempDesignSystem/Divider"
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import { Tooltip } from "../TempDesignSystem/Tooltip"
+import AdultSelector from "./AdultSelector"
+import ChildSelector from "./ChildSelector"
+
+import styles from "./guests-rooms-picker.module.css"
+
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsPickerDialog({
+  rooms,
+  onClose,
+}: {
+  rooms: GuestsRoom[]
+  onClose: () => void
+}) {
+  const intl = useIntl()
+  const doneLabel = intl.formatMessage({ id: "Done" })
+  const roomLabel = intl.formatMessage({ id: "Room" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "Disabled booking options header",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Disabled adding room",
+  })
+  const addRoomLabel = intl.formatMessage({ id: "Add Room" })
+
+  const { getFieldState } = useFormContext<BookingWidgetSchema>()
+
+  return (
+    <>
+      <header className={styles.header}>
+        <button type="button" className={styles.close} onClick={onClose}>
+          <CloseLargeIcon />
+        </button>
+      </header>
+      <div className={styles.contentContainer}>
+        {rooms.map((room, index) => {
+          const currentAdults = room.adults
+          const currentChildren = room.child
+          const childrenInAdultsBed = currentChildren.filter(
+            (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
+          ).length
+
+          return (
+            <div className={styles.roomContainer} key={index}>
+              <section className={styles.roomDetailsContainer}>
+                <Subtitle type="two" className={styles.roomHeading}>
+                  {roomLabel} {index + 1}
+                </Subtitle>
+                <AdultSelector
+                  roomIndex={index}
+                  currentAdults={currentAdults}
+                  currentChildren={currentChildren}
+                  childrenInAdultsBed={childrenInAdultsBed}
+                />
+                <ChildSelector
+                  roomIndex={index}
+                  currentAdults={currentAdults}
+                  currentChildren={currentChildren}
+                  childrenInAdultsBed={childrenInAdultsBed}
+                />
+              </section>
+              <Divider color="primaryLightSubtle" />
+            </div>
+          )
+        })}
+        <div className={styles.addRoomMobileContainer}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+                fullWidth
+              >
+                <PlusIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
+      </div>
+      <footer className={styles.footer}>
+        <div className={styles.hideOnMobile}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
+        <Button
+          onPress={onClose}
+          disabled={getFieldState("rooms").invalid}
+          className={styles.hideOnMobile}
+          intent="tertiary"
+          theme="base"
+          size="small"
+        >
+          {doneLabel}
+        </Button>
+        <Button
+          onPress={onClose}
+          disabled={getFieldState("rooms").invalid}
+          className={styles.hideOnDesktop}
+          intent="tertiary"
+          theme="base"
+          size="large"
+        >
+          {doneLabel}
+        </Button>
+      </footer>
+    </>
+  )
+}