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
2025-01-08 15:09:29 +00:00
parent 85c9ec5b3b
commit b4060d720b
9 changed files with 266 additions and 143 deletions
--- a/components/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/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.child.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.child}
+          childrenInAdultsBed={childrenInAdultsBed}
+        />
+        <ChildSelector
+          roomIndex={index}
+          currentAdults={room.adults}
+          currentChildren={room.child}
+          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>
+  )
+}