@qite/tide-booking-component 1.4.93 → 1.4.95

package/src/booking-wizard/features/room-options/room.tsx

@@ -1,123 +1,123 @@
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { getPriceDifferenceText } from '../../../shared/utils/localization-util';
-import { SelectableRoomAccommodation } from '../../types';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
-import { getDatePeriodText, getDateText } from '../sidebar/sidebar-util';
-import { buildClassName } from '../../../shared/utils/class-util';
-
-interface RoomOptionProps {
-  room: SelectableRoomAccommodation;
-  hasAlternatives?: boolean;
-  selectedRoomPrice?: number;
-  onAcommodationChange?: (accommodationCode: string, regimeCode: string) => void;
-  onRegimeChange?: (code: string) => void;
-  onToggleAlternatives?: () => void;
-}
-
-const RoomOption: React.FC<RoomOptionProps> = ({ room, hasAlternatives, selectedRoomPrice, onAcommodationChange, onRegimeChange, onToggleAlternatives }) => {
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-
-  const [roomPrice, setRoomPrice] = useState<number>(0);
-  const [roomRegimeCode, setRoomRegimeCode] = useState<string>(room.regimeCode);
-
-  useEffect(() => {
-    setRoomPrice(room.price);
-  }, [room.code, room.regimeCode]);
-
-  const getPriceDifference = (selectedPrice: number, currentPrice: number) => {
-    const priceDifference = (selectedPrice ?? 0) - currentPrice;
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference, currencyCode)})`;
-    } else {
-      return '';
-    }
-  };
-
-  const selectAccommodation = () => {
-    if (onAcommodationChange) {
-      onAcommodationChange(room.code, roomRegimeCode);
-    }
-  };
-
-  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
-    let regimeCode = e.currentTarget.value;
-
-    const option = room.regimes.find((x) => x.code === regimeCode || (x.code === null && regimeCode === ''))!;
-    setRoomRegimeCode(option.code);
-    setRoomPrice(option.price);
-
-    if (onRegimeChange) {
-      onRegimeChange(regimeCode);
-    }
-
-    e.preventDefault();
-  };
-
-  return (
-    <>
-      <div className="form__room">
-        {room.viewHtml && <div className="form__room__wrapper" dangerouslySetInnerHTML={{ __html: room.viewHtml }} />}
-        {!room.viewHtml && (
-          <div className="form__room__wrapper">
-            {room.image && (
-              <div className="form__room__image">
-                <img src={room.image} alt="" className="form__room__img" />
-              </div>
-            )}
-            <div className="form__room__body">
-              <div className="">
-                <h3 className="form__room__title">{room.title}</h3>
-                {room.description && <p className="form__room__text">{room.description}</p>}
-                <ul className="list--usps form__room__usps">
-                  {room.usps.map((usp, uspIndex) => (
-                    <li key={uspIndex} className="list__item">
-                      {usp}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="form__room__footer">
-          <div className="form__room__footer__top">
-            <p className="form__room__dates">
-              {getDateText(room.from)} - {getDateText(room.to)}
-            </p>
-            <span className="form__room__days">{getDatePeriodText(translations, room.from, room.to)}</span>
-          </div>
-          <div className="form__room__footer__bottom">
-            {selectedRoomPrice != undefined && (
-              <p className="form__room__price form__room__price--increase">
-                <span>{getPriceDifference(roomPrice, selectedRoomPrice)}</span>
-              </p>
-            )}
-            {hasAlternatives && onToggleAlternatives && (
-              <button type="button" onClick={onToggleAlternatives} className="form__room__alternatives__btn">
-                {translations.ROOM_OPTIONS_FORM.SHOW_ALTERNATIVES}
-              </button>
-            )}
-            <div className="select-wrapper">
-              <div className="select-wrapper__select">
-                <select defaultValue={roomRegimeCode} onChange={handleRegimeChange}>
-                  {room.regimes.map((regime) => (
-                    <option key={regime.code} value={regime.code ?? ''}>
-                      {regime.title} {getPriceDifference(regime.price, roomPrice)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            <button type="button" onClick={selectAccommodation} className={buildClassName(['cta', selectedRoomPrice ? 'cta--select' : 'cta--selected'])}>
-              {selectedRoomPrice ? translations.SHARED.SELECT : translations.SHARED.SELECTED}
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default RoomOption;
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { getPriceDifferenceText } from '../../../shared/utils/localization-util';
+import { SelectableRoomAccommodation } from '../../types';
+import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
+import { getDatePeriodText, getDateText } from '../sidebar/sidebar-util';
+import { buildClassName } from '../../../shared/utils/class-util';
+
+interface RoomOptionProps {
+  room: SelectableRoomAccommodation;
+  hasAlternatives?: boolean;
+  selectedRoomPrice?: number;
+  onAcommodationChange?: (accommodationCode: string, regimeCode: string) => void;
+  onRegimeChange?: (code: string) => void;
+  onToggleAlternatives?: () => void;
+}
+
+const RoomOption: React.FC<RoomOptionProps> = ({ room, hasAlternatives, selectedRoomPrice, onAcommodationChange, onRegimeChange, onToggleAlternatives }) => {
+  const translations = useSelector(selectTranslations);
+  const currencyCode = useSelector(selectCurrencyCode);
+
+  const [roomPrice, setRoomPrice] = useState<number>(0);
+  const [roomRegimeCode, setRoomRegimeCode] = useState<string>(room.regimeCode);
+
+  useEffect(() => {
+    setRoomPrice(room.price);
+  }, [room.code, room.regimeCode]);
+
+  const getPriceDifference = (selectedPrice: number, currentPrice: number) => {
+    const priceDifference = (selectedPrice ?? 0) - currentPrice;
+    if (priceDifference !== 0) {
+      return `(${getPriceDifferenceText(priceDifference, currencyCode)})`;
+    } else {
+      return '';
+    }
+  };
+
+  const selectAccommodation = () => {
+    if (onAcommodationChange) {
+      onAcommodationChange(room.code, roomRegimeCode);
+    }
+  };
+
+  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
+    let regimeCode = e.currentTarget.value;
+
+    const option = room.regimes.find((x) => x.code === regimeCode || (x.code === null && regimeCode === ''))!;
+    setRoomRegimeCode(option.code);
+    setRoomPrice(option.price);
+
+    if (onRegimeChange) {
+      onRegimeChange(regimeCode);
+    }
+
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <div className="form__room">
+        {room.viewHtml && <div className="form__room__wrapper" dangerouslySetInnerHTML={{ __html: room.viewHtml }} />}
+        {!room.viewHtml && (
+          <div className="form__room__wrapper">
+            {room.image && (
+              <div className="form__room__image">
+                <img src={room.image} alt="" className="form__room__img" />
+              </div>
+            )}
+            <div className="form__room__body">
+              <div className="">
+                <h3 className="form__room__title">{room.title}</h3>
+                {room.description && <p className="form__room__text">{room.description}</p>}
+                <ul className="list--usps form__room__usps">
+                  {room.usps.map((usp, uspIndex) => (
+                    <li key={uspIndex} className="list__item">
+                      {usp}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="form__room__footer">
+          <div className="form__room__footer__top">
+            <p className="form__room__dates">
+              {getDateText(room.from)} - {getDateText(room.to)}
+            </p>
+            <span className="form__room__days">{getDatePeriodText(translations, room.from, room.to)}</span>
+          </div>
+          <div className="form__room__footer__bottom">
+            {selectedRoomPrice != undefined && (
+              <p className="form__room__price form__room__price--increase">
+                <span>{getPriceDifference(roomPrice, selectedRoomPrice)}</span>
+              </p>
+            )}
+            {hasAlternatives && onToggleAlternatives && (
+              <button type="button" onClick={onToggleAlternatives} className="form__room__alternatives__btn">
+                {translations.ROOM_OPTIONS_FORM.SHOW_ALTERNATIVES}
+              </button>
+            )}
+            <div className="select-wrapper">
+              <div className="select-wrapper__select">
+                <select defaultValue={roomRegimeCode} onChange={handleRegimeChange}>
+                  {room.regimes.map((regime) => (
+                    <option key={regime.code} value={regime.code ?? ''}>
+                      {regime.title} {getPriceDifference(regime.price, roomPrice)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <button type="button" onClick={selectAccommodation} className={buildClassName(['cta', selectedRoomPrice ? 'cta--select' : 'cta--selected'])}>
+              {selectedRoomPrice ? translations.SHARED.SELECT : translations.SHARED.SELECTED}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default RoomOption;

package/src/booking-wizard/features/room-options/traveler-rooms.tsx

@@ -1,64 +1,64 @@
-import React, { useState } from 'react';
-import { SelectableRoom } from '../../types';
-import { useSelector } from 'react-redux';
-import { selectTranslations } from '../booking/selectors';
-import RoomOption from './room';
-import { isEmpty } from 'lodash';
-
-interface TravelerRoomsProps {
-  index: number;
-  room: SelectableRoom;
-  onRoomChange: (index: number, accommodationCode: string, regimeCode: string | null) => void;
-}
-
-const TravelerRooms: React.FC<TravelerRoomsProps> = ({ index, room, onRoomChange }) => {
-  const translations = useSelector(selectTranslations);
-  const [showAlternatives, setShowAlternatives] = useState<boolean>(false);
-
-  const selectedAccommodationCode = room.selected.code;
-
-  return (
-    <div key={room.index} className="form__room__container">
-      <div className="form__room__header">
-        <h5>
-          {translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP} {room.index + 1}
-        </h5>
-      </div>
-
-      <RoomOption
-        room={room.selected}
-        hasAlternatives={!isEmpty(room.alternatives)}
-        onRegimeChange={(regimeCode) => onRoomChange(index, selectedAccommodationCode, regimeCode)}
-        onToggleAlternatives={() => setShowAlternatives(!showAlternatives)}
-      />
-
-      {!isEmpty(room.alternatives) && showAlternatives && (
-        <div className="form__room__alternatives">
-          <div className="form__room__alternatives__header">
-            {translations.ROOM_OPTIONS_FORM.ALTERNATIVES_TRAVELER_GROUP} {room.index + 1}
-          </div>
-
-          {showAlternatives && (
-            <>
-              <div className="form__room__alternatives__content">
-                {room.alternatives.map((alternative, alternativeIndex) => (
-                  <RoomOption
-                    key={alternativeIndex}
-                    room={alternative}
-                    selectedRoomPrice={room.selected.price}
-                    onAcommodationChange={(accommodationCode, regimeCode) => {
-                      setShowAlternatives(false);
-                      onRoomChange(index, accommodationCode, regimeCode);
-                    }}
-                  />
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TravelerRooms;
+import React, { useState } from 'react';
+import { SelectableRoom } from '../../types';
+import { useSelector } from 'react-redux';
+import { selectTranslations } from '../booking/selectors';
+import RoomOption from './room';
+import { isEmpty } from 'lodash';
+
+interface TravelerRoomsProps {
+  index: number;
+  room: SelectableRoom;
+  onRoomChange: (index: number, accommodationCode: string, regimeCode: string | null) => void;
+}
+
+const TravelerRooms: React.FC<TravelerRoomsProps> = ({ index, room, onRoomChange }) => {
+  const translations = useSelector(selectTranslations);
+  const [showAlternatives, setShowAlternatives] = useState<boolean>(false);
+
+  const selectedAccommodationCode = room.selected.code;
+
+  return (
+    <div key={room.index} className="form__room__container">
+      <div className="form__room__header">
+        <h5>
+          {translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP} {room.index + 1}
+        </h5>
+      </div>
+
+      <RoomOption
+        room={room.selected}
+        hasAlternatives={!isEmpty(room.alternatives)}
+        onRegimeChange={(regimeCode) => onRoomChange(index, selectedAccommodationCode, regimeCode)}
+        onToggleAlternatives={() => setShowAlternatives(!showAlternatives)}
+      />
+
+      {!isEmpty(room.alternatives) && showAlternatives && (
+        <div className="form__room__alternatives">
+          <div className="form__room__alternatives__header">
+            {translations.ROOM_OPTIONS_FORM.ALTERNATIVES_TRAVELER_GROUP} {room.index + 1}
+          </div>
+
+          {showAlternatives && (
+            <>
+              <div className="form__room__alternatives__content">
+                {room.alternatives.map((alternative, alternativeIndex) => (
+                  <RoomOption
+                    key={alternativeIndex}
+                    room={alternative}
+                    selectedRoomPrice={room.selected.price}
+                    onAcommodationChange={(accommodationCode, regimeCode) => {
+                      setShowAlternatives(false);
+                      onRoomChange(index, accommodationCode, regimeCode);
+                    }}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TravelerRooms;

package/src/booking-wizard/features/sidebar/index.tsx

@@ -14,6 +14,7 @@ import { selectFormRooms } from '../travelers-form/travelers-form-slice';
 import {
   selectBasePrice,
   selectBasePricePerPaxType,
+  selectCommission,
   selectDeposit,
   selectIsFetchingPriceDetails,
   selectSeparateExtraPriceDetails,
@@ -61,6 +62,7 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
       departureFlightMetaData={departureFlightMetaData}
       returnFlightMetaData={returnFlightMetaData}
       basePrice={useSelector(selectBasePrice)}
+      commission={useSelector(selectCommission)}
       totalPrice={useSelector(selectTotalPrice)}
       includedCosts={useSelector(selectSeparatePackagePriceDetails)}
       extraCosts={useSelector(selectSeparateExtraPriceDetails)}

package/src/booking-wizard/features/sidebar/sidebar-flight.tsx

@@ -1,66 +1,66 @@
-import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
-import { first, last } from 'lodash';
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectTranslations } from '../booking/selectors';
-import { getAirlines, getDateText, parseFlightLines } from './sidebar-util';
-
-interface SidebarFlightProps {
-  title: string;
-  flightMetaData: BookingPackageFlightMetaData;
-}
-
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData }) => {
-  const flightLines = parseFlightLines(flightMetaData);
-  const firstFlight = first(flightLines);
-  const lastFlight = last(flightLines);
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="pricing-summary__group">
-      <h6 className="pricing-summary__title">{title}</h6>
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_DEPARTURE}</div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {firstFlight?.departureAirportDescription} ({firstFlight?.departureAirportIata})<br />
-          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
-          <br />
-          {firstFlight?.airlineCode}
-          {firstFlight?.number}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_ARRIVAL}</div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {lastFlight?.arrivalAirportDescription} ({lastFlight?.arrivalAirportIata})<br />
-          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
-          <br />
-          {lastFlight?.airlineCode}
-          {lastFlight?.number}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {flightMetaData.flightLines.length > 1 && (
-            <i>
-              {flightMetaData.flightLines.length - 1}
-              {'x '}
-              {translations.SIDEBAR.CHANGES}
-            </i>
-          )}
-        </div>
-        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
-      </div>
-      {flightMetaData.luggageIncluded && (
-        <div className="pricing-summary__row">
-          <div className="pricing-summary__property"></div>
-          <div className="pricing-summary__value">{translations.SIDEBAR.LUGGAGE_INCLUDED}</div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SidebarFlight;
+import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
+import { first, last } from 'lodash';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectTranslations } from '../booking/selectors';
+import { getAirlines, getDateText, parseFlightLines } from './sidebar-util';
+
+interface SidebarFlightProps {
+  title: string;
+  flightMetaData: BookingPackageFlightMetaData;
+}
+
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData }) => {
+  const flightLines = parseFlightLines(flightMetaData);
+  const firstFlight = first(flightLines);
+  const lastFlight = last(flightLines);
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="pricing-summary__group">
+      <h6 className="pricing-summary__title">{title}</h6>
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_DEPARTURE}</div>
+        <div className="pricing-summary__value pricing-summary__value--flight">
+          {firstFlight?.departureAirportDescription} ({firstFlight?.departureAirportIata})<br />
+          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
+          <br />
+          {firstFlight?.airlineCode}
+          {firstFlight?.number}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_ARRIVAL}</div>
+        <div className="pricing-summary__value pricing-summary__value--flight">
+          {lastFlight?.arrivalAirportDescription} ({lastFlight?.arrivalAirportIata})<br />
+          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
+          <br />
+          {lastFlight?.airlineCode}
+          {lastFlight?.number}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {flightMetaData.flightLines.length > 1 && (
+            <i>
+              {flightMetaData.flightLines.length - 1}
+              {'x '}
+              {translations.SIDEBAR.CHANGES}
+            </i>
+          )}
+        </div>
+        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
+      </div>
+      {flightMetaData.luggageIncluded && (
+        <div className="pricing-summary__row">
+          <div className="pricing-summary__property"></div>
+          <div className="pricing-summary__value">{translations.SIDEBAR.LUGGAGE_INCLUDED}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SidebarFlight;

package/src/booking-wizard/features/sidebar/sidebar.tsx

@@ -6,10 +6,11 @@ import { useSelector } from 'react-redux';
 import { buildClassName } from '../../../shared/utils/class-util';
 import { formatPrice } from '../../../shared/utils/localization-util';
 import ProductCard from '../../components/product-card';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
+import { selectAgentAdressId, selectCurrencyCode, selectTranslations } from '../booking/selectors';
 import SidebarFlight from './sidebar-flight';
 import { getDatePeriodText, getPaxTypeTranslation } from './sidebar-util';
 import { PricePerPaxType } from '../../types';
+import { selectAgentId } from '../travelers-form/travelers-form-slice';
 
 interface SidebarProps {
   productName: string;
@@ -21,6 +22,7 @@ interface SidebarProps {
   departureFlightMetaData?: BookingPackageFlightMetaData;
   returnFlightMetaData?: BookingPackageFlightMetaData;
   basePrice?: number;
+  commission?: number;
   totalPrice?: number;
   remainingAmountText?: string;
   includedCosts?: BookingPriceDetail[];
@@ -47,6 +49,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   departureFlightMetaData,
   returnFlightMetaData,
   basePrice,
+  commission,
   totalPrice,
   includedCosts,
   extraCosts,
@@ -64,6 +67,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   const [active, setActive] = useState<boolean>(false);
   const translations = useSelector(selectTranslations);
   const currencyCode = useSelector(selectCurrencyCode);
+  const isAgent = useSelector(selectAgentAdressId);
 
   const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !isEmpty(includedCosts) || !isEmpty(extraCosts);
   const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
@@ -250,6 +254,18 @@ const Sidebar: React.FC<SidebarProps> = ({
             <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
               {deposit && remainingAmount > 0 ? (
                 <div className="pricing-summary__group">
+                  {isAgent && (
+                    <div className="pricing-summary__row pricing-summary__row--total-price">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">{translations.SHARED.COMMISSION}</h6>
+                      </div>
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                   {totalPrice !== undefined && totalPrice > 0 && (
                     <div className="pricing-summary__row pricing-summary__row--total-price">
                       <div className="pricing-summary__property">

package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx

@@ -1,23 +1,23 @@
-import { BookingOptionPax } from '@qite/tide-client/build/types';
-import { isEmpty } from 'lodash';
-import React from 'react';
-import SummaryPerPaxOptionGroup from './summary-per-pax-option-group';
-
-interface SummaryBookingOptionPaxProps {
-  pax: BookingOptionPax;
-}
-
-const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps> = ({ pax }) => {
-  return (
-    <>
-      {pax.groups.map((y, i) => {
-        const paxOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty(paxOptions)) return;
-
-        return <SummaryPerPaxOptionGroup key={i} group={y} />;
-      })}
-    </>
-  );
-};
-
-export default SummaryBookingOptionPax;
+import { BookingOptionPax } from '@qite/tide-client/build/types';
+import { isEmpty } from 'lodash';
+import React from 'react';
+import SummaryPerPaxOptionGroup from './summary-per-pax-option-group';
+
+interface SummaryBookingOptionPaxProps {
+  pax: BookingOptionPax;
+}
+
+const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps> = ({ pax }) => {
+  return (
+    <>
+      {pax.groups.map((y, i) => {
+        const paxOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty(paxOptions)) return;
+
+        return <SummaryPerPaxOptionGroup key={i} group={y} />;
+      })}
+    </>
+  );
+};
+
+export default SummaryBookingOptionPax;