Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
2025-08-05 09:20:20 +00:00
parent 03c9244fdf
commit 1bd8fe6821
206 changed files with 1936 additions and 796 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Caption from "@scandic-hotels/design-system/Caption"
+
+import Counter from "../Counter"
+import ChildInfoSelector from "./ChildInfoSelector"
+
+import styles from "./child-selector.module.css"
+
+import type { Child } from "@scandic-hotels/trpc/types/child"
+
+type ChildSelectorProps = {
+  roomIndex: number
+  currentAdults: number
+  currentChildren: Child[]
+  childrenInAdultsBed: number
+}
+export default function ChildSelector({
+  roomIndex = 0,
+  currentAdults,
+  childrenInAdultsBed,
+  currentChildren,
+}: ChildSelectorProps) {
+  const intl = useIntl()
+  const childrenLabel = intl.formatMessage({
+    defaultMessage: "Children",
+  })
+  const { setValue } = useFormContext()
+
+  function increaseChildrenCount(roomIndex: number) {
+    if (currentChildren.length < 5) {
+      setValue(
+        `rooms.${roomIndex}.childrenInRoom.${currentChildren.length}`,
+        {
+          age: undefined,
+          bed: undefined,
+        },
+        { shouldDirty: true }
+      )
+    }
+  }
+  function decreaseChildrenCount(roomIndex: number) {
+    if (currentChildren.length > 0) {
+      currentChildren.pop()
+      setValue(`rooms.${roomIndex}.childrenInRoom`, currentChildren, {
+        shouldDirty: true,
+      })
+    }
+  }
+
+  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}
+        />
+      ))}
+    </>
+  )
+}