Merged in feat/SW-716-multiroom-guest-picker (pull request #1084)

feat(SW-716) Added UI to add more rooms in guest/room picker

* feat(SW-716) Added UI to add more rooms in guest/room picker

* feat(SW-716) Renamed GuestRoom Type and updated html structure

* Feat(SW-716): Created a BookingFlowIteration1 folder

* feat(SW-716) Moved forms/bookingwidget to new flow

* feat(SW-716) Added new ENABLE_BOOKING_FLOW_ITERATION_1 and ENABLE_BOOKING_FLOW_ITERATION_2

* feat(SW-716) Re added booking widget into interaction1 of how it looks now in prod

* Revert "feat(SW-716) Re added booking widget into interaction1 of how it looks now in prod"

This reverts commit 9a5514e8e71b1487e610bf64986ca77a538c0023.

* Revert "feat(SW-716) Added new ENABLE_BOOKING_FLOW_ITERATION_1 and ENABLE_BOOKING_FLOW_ITERATION_2"

This reverts commit b00bfc08cb7878d91483220ba3e8322671c145e4.

* Revert "feat(SW-716) Moved forms/bookingwidget to new flow"

This reverts commit 6c81635fe929a71fb3a42d8f174706787d8578ed.

* Revert "Feat(SW-716): Created a BookingFlowIteration1 folder"

This reverts commit db41f1c7fcd8e3adf15713d5d36f0da11e03e3a4.

* feat(SW-716): Added NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE

* feat(SW-716) Readded Tooltip if NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE is true

* feat(SW-716) remove log


Approved-by: Niclas Edenvin
Approved-by: Christian Andolf

components/GuestsRoomsPicker/Form.tsx

@@ -1,61 +1,77 @@
 "use client"
 
-import { useEffect } from "react"
+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 Divider from "../TempDesignSystem/Divider"
-import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import { Tooltip } from "../TempDesignSystem/Tooltip"
-import AdultSelector from "./AdultSelector"
-import ChildSelector from "./ChildSelector"
+import { GuestsRoom } from "./GuestsRoom"
 
 import styles from "./guests-rooms-picker.module.css"
 
 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
-import type { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+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,
-}: {
-  rooms: GuestsRoom[]
-  onClose: () => void
-  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
-}) {
+}: 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 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, trigger } = useFormContext<BookingWidgetSchema>()
+  const handleClose = useCallback(async () => {
+    const isValid = await trigger("rooms")
+    if (isValid) onClose()
+  }, [trigger, onClose])
 
-  const roomsValue = useWatch({ name: "rooms" })
+  const handleAddRoom = useCallback(() => {
+    setValue("rooms", [...roomsValue, { adults: 1, child: [] }], {
+      shouldValidate: true,
+    })
+  }, [roomsValue, setValue])
 
-  async function handleOnClose() {
-    const state = await trigger("rooms")
-    if (state) {
-      onClose()
-    }
-  }
-
-  const fieldState = getFieldState("rooms")
+  const handleRemoveRoom = useCallback(
+    (index: number) => {
+      setValue(
+        "rooms",
+        roomsValue.filter((_, i) => i !== index),
+        { shouldValidate: true }
+      )
+    },
+    [roomsValue, setValue]
+  )
 
+  // Validate rooms when they change
   useEffect(() => {
-    if (fieldState.invalid) {
-      trigger("rooms")
-    }
-  }, [roomsValue, fieldState.invalid, trigger])
+    const fieldState = getFieldState("rooms")
+    if (fieldState.invalid) trigger("rooms")
+  }, [roomsValue, getFieldState, trigger])
+
+  const isInvalid = getFieldState("rooms").invalid
+  const canAddRooms = rooms.length < MAX_ROOMS
 
   return (
     <>
@@ -65,97 +81,99 @@ export default function GuestsRoomsPickerDialog({
             <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 ?? 0
 
-            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="bottom"
-              arrow="left"
-            >
-              {rooms.length < 4 ? (
+        <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
-                  disabled
                   theme="base"
                   fullWidth
+                  onPress={handleAddRoom}
+                  disabled
                 >
                   <PlusIcon />
                   {addRoomLabel}
                 </Button>
-              ) : null}
-            </Tooltip>
-          </div>
+              </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}>
-        <div className={styles.hideOnMobile}>
-          <Tooltip
-            heading={disabledBookingOptionsHeader}
-            text={disabledBookingOptionsText}
-            position={isOverflowed ? "top" : "bottom"}
-            arrow="left"
-          >
-            {rooms.length < 4 ? (
+        {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
-                disabled
                 theme="base"
+                disabled
+                onPress={handleAddRoom}
               >
                 <PlusCircleIcon />
                 {addRoomLabel}
               </Button>
-            ) : null}
-          </Tooltip>
-        </div>
+            </Tooltip>
+          </div>
+        ) : (
+          canAddRooms && (
+            <div className={styles.hideOnMobile}>
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                onPress={handleAddRoom}
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            </div>
+          )
+        )}
         <Button
-          onPress={handleOnClose}
-          disabled={getFieldState("rooms").invalid}
-          className={styles.hideOnMobile}
-          intent="tertiary"
-          theme="base"
-          size="small"
-        >
-          {doneLabel}
-        </Button>
-        <Button
-          onPress={handleOnClose}
-          disabled={getFieldState("rooms").invalid}
+          onPress={handleClose}
+          disabled={isInvalid}
           className={styles.hideOnDesktop}
           intent="tertiary"
           theme="base"
@@ -163,6 +181,16 @@ export default function GuestsRoomsPickerDialog({
         >
           {doneLabel}
         </Button>
+        <Button
+          onPress={handleClose}
+          disabled={isInvalid}
+          className={styles.hideOnMobile}
+          intent="tertiary"
+          theme="base"
+          size="small"
+        >
+          {doneLabel}
+        </Button>
       </footer>
     </>
   )