@qite/tide-booking-component 1.4.108 → 1.4.110

package/build/build-esm/src/booking-wizard/components/step-route.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-interface StepRoute {
+interface StepRouteProps {
   number: number;
   title: string;
   component: JSX.Element;
 }
-declare const StepRoute: React.FC<StepRoute>;
+declare const StepRoute: React.FC<StepRouteProps>;
 export default StepRoute;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar-flight.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 interface SidebarFlightProps {
   title: string;
   flightMetaData: BookingPackageFlightMetaData;
+  translations?: any;
 }
 declare const SidebarFlight: React.FC<SidebarFlightProps>;
 export default SidebarFlight;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar-util.d.ts

@@ -4,7 +4,8 @@ export declare const getTravelersText: (
   rooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
-  }[]
+  }[],
+  translations: any
 ) => string[];
 export declare const getDateText: (date: string | undefined, hideYear?: boolean) => string | undefined;
 export declare const getDatePeriodText: (translations: Record<string, any>, from?: string, to?: string, nightsOnly?: boolean) => string | undefined;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar.d.ts

@@ -1,31 +0,0 @@
-import { BookingPackageFlightMetaData, BookingPackageRoom, BookingPriceDetail } from '@qite/tide-client/build/types';
-import React from 'react';
-import { PricePerPaxType } from '../../types';
-interface SidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-  isLoading: boolean;
-  travelerRooms?: string[];
-  startDateText?: string;
-  endDateText?: string;
-  departureFlightMetaData?: BookingPackageFlightMetaData;
-  returnFlightMetaData?: BookingPackageFlightMetaData;
-  basePrice?: number;
-  commission?: number;
-  totalPrice?: number;
-  remainingAmountText?: string;
-  includedCosts?: BookingPriceDetail[];
-  extraCosts?: BookingPriceDetail[];
-  deposit?: number;
-  accommodations?: BookingPackageRoom[];
-  includedServiceTypes?: number[];
-  isOnRequest?: boolean;
-  headerComponent?: JSX.Element;
-  footerComponent?: JSX.Element;
-  loaderComponent?: JSX.Element;
-  isUnavailable?: boolean;
-  basePricePerPaxType?: PricePerPaxType[];
-  seperateExtraPricePerPaxType?: PricePerPaxType[];
-}
-declare const Sidebar: React.FC<SidebarProps>;
-export default Sidebar;

package/build/build-esm/src/search-results/components/book-packaging-entry/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SearchSeed } from '../../types';
+interface BookPackagingEntryProps {
+  activeSearchSeed: SearchSeed | null;
+}
+declare const BookPackagingEntry: React.FC<BookPackagingEntryProps>;
+export default BookPackagingEntry;

package/build/build-esm/src/search-results/components/book-packaging-entry/wl-sidebar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SearchSeed } from '../../types';
+interface WLSidebarProps {
+  activeSearchSeed: SearchSeed | null;
+}
+declare const WLSidebar: React.FC<WLSidebarProps>;
+export default WLSidebar;

package/build/build-esm/src/search-results/components/spinner/spinner.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const Spinner: React.FC;
+type SpinnerProps = {
+  label?: string;
+};
+declare const Spinner: React.FC<SpinnerProps>;
 export default Spinner;

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -43,6 +43,8 @@ export interface SearchResultsState {
   excursionSearchParams: ExcursionSearchParams | null;
   selectedExcursionSearchResult: PackagingAccommodationResponse | null;
   confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
+  bookPackagingEntry: boolean;
+  currentStep: number;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -127,6 +129,8 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
       dayKey: string;
     },
     'searchResults/clearConfirmedExcursionsForDay'
-  >;
+  >,
+  setBookPackagingEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setBookPackagingEntry'>,
+  setCurrentStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentStep'>;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;

package/build/build-esm/src/shared/booking/BookingPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface BookingPanelProps {
+  currentStep: number;
+  stepLabels: string[];
+  renderTitle: (step: number) => React.ReactNode;
+  children: React.ReactNode;
+  StepIndicatorsComponent: React.ComponentType<{
+    currentStep: number;
+    stepLabels: string[];
+  }>;
+}
+declare const BookingPanel: React.FC<BookingPanelProps>;
+export default BookingPanel;

package/build/build-esm/src/shared/booking/Sidebar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BookingPackageRoom, PackagingEntryLine } from '@qite/tide-client';
+import { PricePerPaxType } from '../../booking-wizard/types';
+interface SharedSidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading?: boolean;
+  travelerRooms?: string[];
+  startDateText?: string;
+  endDateText?: string;
+  departureFlightMetaData?: any;
+  returnFlightMetaData?: any;
+  basePrice?: number;
+  commission?: number;
+  totalPrice?: number;
+  remainingAmountText?: string;
+  includedCosts?: any[];
+  extraCosts?: any[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  packagingAccommodations?: PackagingEntryLine[];
+  includedServiceTypes?: number[];
+  isOnRequest?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  loaderComponent?: React.ReactNode;
+  isUnavailable?: boolean;
+  basePricePerPaxType?: PricePerPaxType[];
+  seperateExtraPricePerPaxType?: PricePerPaxType[];
+  translations: any;
+  agent?: number;
+}
+declare const SharedSidebar: React.FC<SharedSidebarProps>;
+export default SharedSidebar;

package/build/build-esm/src/shared/booking/StepIndicators.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface StepIndicatorsProps {
+  currentStep: number;
+  stepLabels: string[];
+}
+declare const StepIndicators: React.FC<StepIndicatorsProps>;
+export default StepIndicators;

package/build/build-esm/src/shared/components/flyin/flyin.d.ts

@@ -13,6 +13,8 @@ type FlyInProps = {
   isPackageEditFlow?: boolean;
   sortByTypes?: SortByType[];
   activeSearchSeed?: SearchSeed | null;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/build/build-esm/src/shared/components/flyin/packaging-flights-flyin.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 type FlightsFlyInProps = {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 declare const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps>;
 export default PackageingFlightsFlyIn;

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -429,3 +429,4 @@ export declare const calculateDays: (fromDate: Date, toDate: Date) => number;
 export declare const getSortingName: (translations: any, sortByType: SortByType) => string;
 export declare const findSortByType: (sortByTypes: SortByType[], sortKey: string, direction: string) => SortByType;
 export declare const getDatesBetween: (fromDate: string, toDate: string) => Date[];
+export declare const getDateOnlyTime: (date?: string | Date | null) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.108",
+  "version": "1.4.110",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/booking-wizard/components/step-indicator.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
-import { buildClassName } from '../../shared/utils/class-util';
 import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
 import SettingsContext from '../settings-context';
+import SharedStepIndicators from '../../shared/booking/StepIndicators';
 
 interface StepIndicatorsProps {
   currentStep: number;
@@ -10,48 +10,27 @@ interface StepIndicatorsProps {
 
 const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
   const { flightOptions, roomOptions } = useContext(SettingsContext);
-
   const translations = useSelector(selectTranslations);
   const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
-  const allSteps = [];
-
+  const stepLabels: string[] = [];
   if (travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
   }
   if (!flightOptions.isHidden) {
-    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
   }
   if (!roomOptions.isHidden) {
-    allSteps.push(translations.STEPS.ROOM_OPTIONS);
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
   }
-
-  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
-
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
   if (!travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
   }
-  allSteps.push(translations.STEPS.SUMMARY);
-  allSteps.push(translations.STEPS.CONFIRMATION);
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
 
-  return (
-    <div className="step-indicators">
-      <div className="step-indicators__items">
-        {allSteps.map((stepName, index) => (
-          <div
-            key={`${index + 1}-${stepName}`}
-            className={buildClassName([
-              'step-indicators__item',
-              currentStep === index + 1 && 'step-indicators__item--active',
-              currentStep > index + 1 && 'step-indicators__item--completed'
-            ])}>
-            <div className="step-indicators__icon step-indicators__icon">{index + 1}</div>
-            <div className="step-indicators__text">{stepName}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+  return <SharedStepIndicators currentStep={currentStep} stepLabels={stepLabels} />;
 };
 
 export default StepIndicators;

package/src/booking-wizard/components/step-route.tsx

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import StepIndicators from './step-indicator';
+import BookingPanel from '../../shared/booking/BookingPanel';
+import SettingsContext from '../settings-context';
+import { useSelector } from 'react-redux';
+import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
 
-interface StepRoute {
+interface StepRouteProps {
   number: number;
   title: string;
   component: JSX.Element;
 }
 
-const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
+const StepRoute: React.FC<StepRouteProps> = ({ number, title, component }) => {
+  const { flightOptions, roomOptions } = useContext(SettingsContext);
+  const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+
+  const stepLabels: string[] = [];
+  if (travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  if (!flightOptions.isHidden) {
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
+  }
+  if (!roomOptions.isHidden) {
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
+  }
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
+  if (!travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
+
   return (
-    <>
-      <StepIndicators currentStep={number} />
-      <div className="booking__panel-frame booking__panel-frame--transparent">
-        <div className="booking__panel-heading">
-          <h4 className="booking__panel-title">
-            {number}. {title}
-          </h4>
-        </div>
-        <div className="booking__panel-body">{component}</div>
-      </div>
-    </>
+    <BookingPanel
+      currentStep={number}
+      stepLabels={stepLabels}
+      StepIndicatorsComponent={StepIndicators}
+      renderTitle={(step) => (
+        <>
+          {step + 1}. {stepLabels[step]}
+        </>
+      )}>
+      {component}
+    </BookingPanel>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import {
+  selectAgentAdressId,
   selectDepartureFlight,
   selectIncludedServiceTypes,
   selectIsFetchingProductOptions,
@@ -7,7 +8,8 @@ import {
   selectPackageRooms,
   selectReturnFlight,
   selectRoomOptionDepartureFlightsMetaData,
-  selectRoomOptionReturnFlightsMetaData
+  selectRoomOptionReturnFlightsMetaData,
+  selectTranslations
 } from '../booking/selectors';
 import { getDateText, getTravelersText } from './sidebar-util';
 import { selectFormRooms } from '../travelers-form/travelers-form-slice';
@@ -26,7 +28,7 @@ import { useSelector } from 'react-redux';
 
 import React from 'react';
 import SettingsContext from '../../settings-context';
-import Sidebar from './sidebar';
+import SharedSidebar from '../../../shared/booking/Sidebar';
 import { selectBookingAttributes } from '../booking/selectors';
 import { useContext } from 'react';
 
@@ -39,7 +41,8 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
   const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType } = useContext(SettingsContext);
   const bookingAttributes = useSelector(selectBookingAttributes);
   const rooms = useSelector(selectFormRooms);
-  const travelerRooms = getTravelersText(rooms);
+  const translations = useSelector(selectTranslations);
+  const travelerRooms = getTravelersText(rooms, translations);
   const departureFlight = useSelector(selectDepartureFlight);
   const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
   const returnFlight = useSelector(selectReturnFlight);
@@ -50,9 +53,10 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
   const includedServiceTypes = useSelector(selectIncludedServiceTypes);
   const isUnavailable = useSelector(selectIsUnavailable) || false;
   const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
+  const agent = useSelector(selectAgentAdressId);
 
   return (
-    <Sidebar
+    <SharedSidebar
       productName={productName}
       thumbnailUrl={thumbnailUrl}
       isLoading={isLoading}
@@ -76,6 +80,8 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
       isUnavailable={isUnavailable}
       basePricePerPaxType={showPricesPerPaxType ? useSelector(selectBasePricePerPaxType) : undefined}
       seperateExtraPricePerPaxType={showPricesPerPaxType ? useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined}
+      translations={translations}
+      agent={agent}
     />
   );
 };

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

@@ -8,13 +8,13 @@ import { getAirlines, getDateText, parseFlightLines } from './sidebar-util';
 interface SidebarFlightProps {
   title: string;
   flightMetaData: BookingPackageFlightMetaData;
+  translations?: any;
 }
 
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData }) => {
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData, translations }) => {
   const flightLines = parseFlightLines(flightMetaData);
   const firstFlight = first(flightLines);
   const lastFlight = last(flightLines);
-  const translations = useSelector(selectTranslations);
 
   return (
     <div className="pricing-summary__group">

package/src/booking-wizard/features/sidebar/sidebar-util.ts

@@ -1,13 +1,9 @@
 import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
 import { differenceInCalendarDays, format, parseISO } from 'date-fns';
 import { compact, orderBy, uniq } from 'lodash';
-import { useSelector } from 'react-redux';
 import { FlightLine, RoomTraveler } from '../../types';
-import { selectTranslations } from '../booking/selectors';
-
-export const getTravelersText = (rooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[]): string[] => {
-  const translations = useSelector(selectTranslations);
 
+export const getTravelersText = (rooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[], translations: any): string[] => {
   return rooms.map((r) =>
     compact([
       r.adults.length,