@qite/tide-booking-component 1.0.1 → 1.0.2

package/build/build-cjs/booking-wizard/features/product-options/option-pax-card.d.ts

@@ -1,7 +1,11 @@
-import { BookingOptionPax } from "@qite/tide-client/build/types";
+import {
+  BookingOptionPax,
+  BookingPackagePax,
+} from "@qite/tide-client/build/types";
 import React from "react";
 interface OptionPaxCardProps {
   pax: BookingOptionPax[];
+  requestRoomsPax?: BookingPackagePax[];
   parentIndex?: number;
   onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
 }

package/build/build-cjs/index.js

@@ -9652,6 +9652,7 @@ var OptionPaxGroup = function (_a) {
 
 var OptionPaxCard = function (_a) {
   var pax = _a.pax,
+    requestRoomsPax = _a.requestRoomsPax,
     parentIndex = _a.parentIndex,
     onPaxChange = _a.onPaxChange;
   var _b = React.useState(),
@@ -9702,6 +9703,7 @@ var OptionPaxCard = function (_a) {
     React__default["default"].Fragment,
     null,
     pax.map(function (p, i) {
+      var _a, _b;
       return React__default["default"].createElement(
         "div",
         {
@@ -9719,6 +9721,25 @@ var OptionPaxCard = function (_a) {
             { className: "booking-card__body-heading" },
             getPaxName(p)
           ),
+          ((_a =
+            requestRoomsPax === null || requestRoomsPax === void 0
+              ? void 0
+              : requestRoomsPax.find(function (x) {
+                  return x.id == p.id;
+                })) === null || _a === void 0
+            ? void 0
+            : _a.age) &&
+            React__default["default"].createElement(
+              "p",
+              { className: "form__region-label" },
+              ((_b = requestRoomsPax.find(function (x) {
+                return x.id == p.id;
+              })) === null || _b === void 0
+                ? void 0
+                : _b.age) > CHILD_MAX_AGE
+                ? translations.TRAVELERS_FORM.ADULT
+                : translations.TRAVELERS_FORM.CHILD
+            ),
           React__default["default"].createElement(
             "div",
             { className: "booking-card__actions" },
@@ -10248,6 +10269,12 @@ var OptionsForm = function () {
     loaderComponent = _a.loaderComponent;
   var dispatch = useAppDispatch();
   var requestRooms = reactRedux.useSelector(selectRequestRooms);
+  var requestRoomsPax =
+    requestRooms === null || requestRooms === void 0
+      ? void 0
+      : requestRooms.flatMap(function (x) {
+          return x.pax;
+        });
   var pax = reactRedux.useSelector(selectBookingPackagePax);
   var packageRooms = reactRedux.useSelector(selectPackageRooms);
   var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
@@ -10444,6 +10471,7 @@ var OptionsForm = function () {
                   React__default["default"].createElement(OptionPaxCard, {
                     pax: optionPax,
                     onPaxChange: handleOnPaxChange,
+                    requestRoomsPax: requestRoomsPax,
                   })
                 )
               )

package/build/build-esm/booking-wizard/features/product-options/option-pax-card.d.ts

@@ -1,7 +1,11 @@
-import { BookingOptionPax } from "@qite/tide-client/build/types";
+import {
+  BookingOptionPax,
+  BookingPackagePax,
+} from "@qite/tide-client/build/types";
 import React from "react";
 interface OptionPaxCardProps {
   pax: BookingOptionPax[];
+  requestRoomsPax?: BookingPackagePax[];
   parentIndex?: number;
   onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
 }

package/build/build-esm/index.js

@@ -9619,6 +9619,7 @@ var OptionPaxGroup = function (_a) {
 
 var OptionPaxCard = function (_a) {
   var pax = _a.pax,
+    requestRoomsPax = _a.requestRoomsPax,
     parentIndex = _a.parentIndex,
     onPaxChange = _a.onPaxChange;
   var _b = useState(),
@@ -9669,6 +9670,7 @@ var OptionPaxCard = function (_a) {
     React.Fragment,
     null,
     pax.map(function (p, i) {
+      var _a, _b;
       return React.createElement(
         "div",
         {
@@ -9686,6 +9688,25 @@ var OptionPaxCard = function (_a) {
             { className: "booking-card__body-heading" },
             getPaxName(p)
           ),
+          ((_a =
+            requestRoomsPax === null || requestRoomsPax === void 0
+              ? void 0
+              : requestRoomsPax.find(function (x) {
+                  return x.id == p.id;
+                })) === null || _a === void 0
+            ? void 0
+            : _a.age) &&
+            React.createElement(
+              "p",
+              { className: "form__region-label" },
+              ((_b = requestRoomsPax.find(function (x) {
+                return x.id == p.id;
+              })) === null || _b === void 0
+                ? void 0
+                : _b.age) > CHILD_MAX_AGE
+                ? translations.TRAVELERS_FORM.ADULT
+                : translations.TRAVELERS_FORM.CHILD
+            ),
           React.createElement(
             "div",
             { className: "booking-card__actions" },
@@ -10188,6 +10209,12 @@ var OptionsForm = function () {
     loaderComponent = _a.loaderComponent;
   var dispatch = useAppDispatch();
   var requestRooms = useSelector(selectRequestRooms);
+  var requestRoomsPax =
+    requestRooms === null || requestRooms === void 0
+      ? void 0
+      : requestRooms.flatMap(function (x) {
+          return x.pax;
+        });
   var pax = useSelector(selectBookingPackagePax);
   var packageRooms = useSelector(selectPackageRooms);
   var bookingQueryString = useSelector(selectBookingQueryString);
@@ -10381,6 +10408,7 @@ var OptionsForm = function () {
                   React.createElement(OptionPaxCard, {
                     pax: optionPax,
                     onPaxChange: handleOnPaxChange,
+                    requestRoomsPax: requestRoomsPax,
                   })
                 )
               )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React BookingWizard component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

package/src/booking-wizard/features/product-options/option-pax-card.tsx

@@ -1,6 +1,7 @@
 import {
   BookingOptionGroup,
   BookingOptionPax,
+  BookingPackagePax,
   PerPaxPackageOption,
 } from "@qite/tide-client/build/types";
 import React, { useEffect, useState } from "react";
@@ -8,15 +9,19 @@ import { useSelector } from "react-redux";
 import { buildClassName } from "../../utils/class-util";
 import { selectBookingPackagePax } from "../booking/selectors";
 import OptionPaxGroup from "./option-pax-group";
+import translations from "../../translations/translations.json";
+import { CHILD_MAX_AGE } from "../travelers-form/travelers-form-slice";
 
 interface OptionPaxCardProps {
   pax: BookingOptionPax[];
+  requestRoomsPax?: BookingPackagePax[];
   parentIndex?: number;
   onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
 }
 
 const OptionPaxCard: React.FC<OptionPaxCardProps> = ({
   pax,
+  requestRoomsPax,
   parentIndex,
   onPaxChange,
 }) => {
@@ -68,6 +73,13 @@ const OptionPaxCard: React.FC<OptionPaxCardProps> = ({
         >
           <div className="booking-card__group-header">
             <h3 className="booking-card__body-heading">{getPaxName(p)}</h3>
+            {requestRoomsPax?.find((x) => x.id == p.id)?.age && (
+              <p className="form__region-label">
+                {requestRoomsPax.find((x) => x.id == p.id)?.age! > CHILD_MAX_AGE
+                  ? translations.TRAVELERS_FORM.ADULT
+                  : translations.TRAVELERS_FORM.CHILD}
+              </p>
+            )}
             <div className="booking-card__actions">
               <button
                 type="button"

package/src/booking-wizard/features/product-options/options-form.tsx

@@ -43,6 +43,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
 
   const dispatch = useAppDispatch();
   const requestRooms = useSelector(selectRequestRooms);
+  const requestRoomsPax = requestRooms?.flatMap((x) => x.pax);
   const pax = useSelector(selectBookingPackagePax);
   const packageRooms = useSelector(selectPackageRooms);
   const bookingQueryString = useSelector(selectBookingQueryString);
@@ -194,6 +195,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
                     <OptionPaxCard
                       pax={optionPax}
                       onPaxChange={handleOnPaxChange}
+                      requestRoomsPax={requestRoomsPax}
                     />
                   </div>
                 </div>