@qite/tide-booking-component 0.0.2-preview.8 → 1.0.0-preview

package/build/build-cjs/booking-wizard/features/product-options/rooms-slice.d.ts

@@ -1,12 +0,0 @@
-import { PackageRoom } from "@qite/tide-client";
-export declare const selectRooms: (state: {
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<import("./product-options-api").ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}) => PackageRoom[];
-export declare const setRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<readonly PackageRoom[] | Record<import("@reduxjs/toolkit").EntityId, PackageRoom>, string>;
-declare const _default: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<PackageRoom>, import("redux").AnyAction>;
-export default _default;

package/build/build-cjs/booking-wizard/features/product-options/tree-level.d.ts

@@ -1,7 +0,0 @@
-import { ProductOption } from "./product-options-api";
-import React from "react";
-interface TreeLevelProps {
-    productOption: ProductOption;
-}
-declare const TreeLevel: React.FC<TreeLevelProps>;
-export default TreeLevel;

package/build/build-esm/booking-wizard/features/product-options/checkbox.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-interface CheckboxProps {
-    text: string;
-    value: string;
-    name: string;
-    required: boolean;
-    defaultChecked: boolean;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-declare const Checkbox: React.FC<CheckboxProps>;
-export default Checkbox;

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

@@ -1,11 +0,0 @@
-import React from "react";
-interface OptionDetailsProps {
-    startDate?: Date;
-    endDate?: Date;
-    price?: number;
-    isCollapsible?: boolean;
-    collapsed?: boolean;
-    onToggleCollapse?: (collapsed: boolean) => void;
-}
-declare const OptionDetails: React.FC<OptionDetailsProps>;
-export default OptionDetails;

package/build/build-esm/booking-wizard/features/product-options/product-options-api.d.ts

@@ -1,26 +0,0 @@
-import { PackageOption, PackageRoom } from "@qite/tide-client";
-export interface ProductOptionsRequest {
-    officeId: number;
-    catalogId: number;
-    productId: number;
-    accommodationCode?: string;
-    regimeCode?: string;
-    startDate: Date;
-    endDate: Date;
-    adultCount: number;
-    childCount: number;
-}
-export interface ProductOptionsResult {
-    productOptions?: ProductOption[];
-    rooms?: PackageRoom[];
-    cacheKey?: string;
-}
-export interface ProductOption extends Omit<PackageOption, "options" | "fromDate" | "toDate"> {
-    parentCode: string;
-    fromDate: string;
-    toDate: string;
-}
-declare const productOptionsApi: {
-    fetchProductOptions: (request: ProductOptionsRequest) => Promise<ProductOptionsResult | undefined>;
-};
-export default productOptionsApi;

package/build/build-esm/booking-wizard/features/product-options/product-options-slice.d.ts

@@ -1,37 +0,0 @@
-import { ProductOption } from "./product-options-api";
-export declare const fetchProductOptions: import("@reduxjs/toolkit").AsyncThunk<import("./product-options-api").ProductOptionsResult | undefined, void, {}>;
-export declare const selectOptions: (state: {
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}) => ProductOption[];
-export declare const selectSelectedOptions: import("reselect").OutputSelector<{
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}, ProductOption[], (res: ProductOption[]) => ProductOption[]>;
-export declare const selectDepartureFlight: import("reselect").OutputSelector<{
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}, ProductOption | undefined, (res: ProductOption[]) => ProductOption | undefined>;
-export declare const selectReturnFlight: import("reselect").OutputSelector<{
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}, ProductOption | undefined, (res: ProductOption[]) => ProductOption | undefined>;
-export declare const updateOption: import("@reduxjs/toolkit").ActionCreatorWithPayload<ProductOption, string>;
-declare const _default: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<ProductOption>, import("redux").AnyAction>;
-export default _default;

package/build/build-esm/booking-wizard/features/product-options/radio-button.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface RadioButtonProps {
-    text: string;
-    name: string;
-    value: string;
-    defaultChecked?: boolean;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-declare const RadioButton: React.FC<RadioButtonProps>;
-export default RadioButton;

package/build/build-esm/booking-wizard/features/product-options/rooms-slice.d.ts

@@ -1,12 +0,0 @@
-import { PackageRoom } from "@qite/tide-client";
-export declare const selectRooms: (state: {
-    booking: import("../booking/booking-slice").BookingState;
-    travelersForm: import("../travelers-form/travelers-form-slice").TravelersFormState;
-    productOptions: import("@reduxjs/toolkit").EntityState<import("./product-options-api").ProductOption>;
-    priceDetails: import("@reduxjs/toolkit").EntityState<import("@qite/tide-client").PriceDetail>;
-    rooms: import("@reduxjs/toolkit").EntityState<PackageRoom>;
-    summary: import("../summary/summary-slice").SummaryState;
-}) => PackageRoom[];
-export declare const setRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<readonly PackageRoom[] | Record<import("@reduxjs/toolkit").EntityId, PackageRoom>, string>;
-declare const _default: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<PackageRoom>, import("redux").AnyAction>;
-export default _default;

package/build/build-esm/booking-wizard/features/product-options/tree-level.d.ts

@@ -1,7 +0,0 @@
-import { ProductOption } from "./product-options-api";
-import React from "react";
-interface TreeLevelProps {
-    productOption: ProductOption;
-}
-declare const TreeLevel: React.FC<TreeLevelProps>;
-export default TreeLevel;

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

@@ -1,38 +0,0 @@
-import React from "react";
-
-interface CheckboxProps {
-  text: string;
-  value: string;
-  name: string;
-  required: boolean;
-  defaultChecked: boolean;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  text,
-  required,
-  defaultChecked,
-  onChange,
-  children,
-}) => (
-  <div className="checkbox">
-    <label className="checkbox__label">
-      {!required && (
-        <input
-          type="checkbox"
-          value="optionA"
-          name="excursion"
-          className="checkbox__input"
-          disabled={required}
-          defaultChecked={defaultChecked}
-          onChange={onChange}
-        />
-      )}
-      <span className="checkbox__label-text">{text}</span>
-      {children}
-    </label>
-  </div>
-);
-
-export default Checkbox;

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

@@ -1,65 +0,0 @@
-import React from "react";
-import { format } from "date-fns";
-import { formatPrice } from "../../utils/localization-util";
-
-interface OptionDetailsProps {
-  startDate?: Date;
-  endDate?: Date;
-  price?: number;
-  isCollapsible?: boolean;
-  collapsed?: boolean;
-  onToggleCollapse?: (collapsed: boolean) => void;
-}
-
-const OptionDetails: React.FC<OptionDetailsProps> = ({
-  startDate,
-  endDate,
-  price,
-  isCollapsible,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  const handleToggleCollapse: React.ChangeEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    if (onToggleCollapse) {
-      onToggleCollapse(e.target.checked);
-    }
-  };
-
-  return (
-    <div className="tree__columns-actions">
-      <div className="tree__columns">
-        <div className="tree__column">
-          <div className="date-list">
-            {startDate && (
-              <span className="date-list__item">
-                {format(startDate, "dd/MM/yyyy")}
-              </span>
-            )}
-            {endDate && (
-              <span className="date-list__item">
-                {format(endDate, "dd/MM/yyyy")}
-              </span>
-            )}
-          </div>
-        </div>
-        <div className="tree__column tree__column--price">
-          {price !== undefined ? formatPrice(price) : ""}
-        </div>
-      </div>
-      {isCollapsible && (
-        <div className="tree__actions">
-          <input
-            type="checkbox"
-            className="tree__collapse"
-            defaultChecked={collapsed}
-            onChange={handleToggleCollapse}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default OptionDetails;

package/src/booking-wizard/features/product-options/product-options-api.ts

@@ -1,148 +0,0 @@
-import {
-  CachedPackageSearchResult,
-  PackageOption,
-  PackageRoom,
-  PackageSearchRequest,
-  PackageSearchRequestDate,
-  PackageSearchRequestRoom,
-  searchPackages,
-  ServiceType,
-} from "@qite/tide-client";
-import { formatISO } from "date-fns";
-import { compact, concat, omit } from "lodash";
-import { buildTideClientConfig } from "../../utils/tide-api-utils";
-
-export interface ProductOptionsRequest {
-  officeId: number;
-  catalogId: number;
-  productId: number;
-  accommodationCode?: string;
-  regimeCode?: string;
-  startDate: Date;
-  endDate: Date;
-  adultCount: number;
-  childCount: number;
-}
-
-export interface ProductOptionsResult {
-  productOptions?: ProductOption[];
-  rooms?: PackageRoom[];
-  cacheKey?: string;
-}
-
-export interface ProductOption
-  extends Omit<PackageOption, "options" | "fromDate" | "toDate"> {
-  parentCode: string;
-  fromDate: string;
-  toDate: string;
-}
-
-const fetchProductOptions = async (
-  request: ProductOptionsRequest
-): Promise<ProductOptionsResult | undefined> => {
-  // Fetch Tide productOptions
-  const packageSearchResults = await fetchTidePackageOptions(request);
-
-  // Select product
-  if (!packageSearchResults?.length) {
-    return undefined;
-  }
-
-  const cachedPackageSearchResult = packageSearchResults[0];
-
-  const cacheKey = cachedPackageSearchResult.cacheKey;
-
-  // Process product and productOptions
-  const productOptions = processPackageOptions(cachedPackageSearchResult);
-
-  return <ProductOptionsResult>{
-    cacheKey,
-    productOptions,
-    rooms: cachedPackageSearchResult.packageSearchResult.rooms,
-  };
-};
-
-const fetchTidePackageOptions = async (
-  productOptionsRequest: ProductOptionsRequest
-) => {
-  const tideClientConfig = buildTideClientConfig();
-
-  const packageSearchRequest: PackageSearchRequest = {
-    productIds: [productOptionsRequest.productId],
-    accommodationCodes: compact([productOptionsRequest.accommodationCode]),
-    regimeCodes: compact([productOptionsRequest.regimeCode]),
-    officeId: 1,
-    catalogId: 1,
-    productType: ServiceType.package,
-    onlyPreferredHotels: false,
-    includeLuggage: true,
-    rooms: [
-      <PackageSearchRequestRoom>{
-        adultCount: productOptionsRequest.adultCount,
-        childCount: productOptionsRequest.childCount,
-      },
-    ],
-    departure: <PackageSearchRequestDate>{
-      date: productOptionsRequest.startDate,
-      timeRange: [0, 24],
-    },
-    arrival: <PackageSearchRequestDate>{
-      date: productOptionsRequest.endDate,
-      timeRange: [0, 24],
-    },
-  };
-
-  return await searchPackages(tideClientConfig, packageSearchRequest);
-};
-
-const processPackageOptions = (
-  cachedPackageSearchResult: CachedPackageSearchResult
-): ProductOption[] | undefined => {
-  if (!cachedPackageSearchResult?.packageSearchResult?.options?.length) {
-    // No options found
-    return undefined;
-  }
-
-  const processedProductOptions =
-    cachedPackageSearchResult.packageSearchResult.options.flatMap(
-      (packageOption) => processPackageOption(packageOption)
-    );
-
-  return processedProductOptions;
-};
-
-const processPackageOption = (
-  packageOption: PackageOption,
-  parentCode?: string
-): ProductOption[] => {
-  // Process main option
-  const fromDate = formatISO(packageOption.fromDate);
-  const toDate = formatISO(packageOption.toDate);
-
-  let processedProductOptions: ProductOption[] = [
-    <ProductOption>{
-      ...omit(packageOption, "options", "fromDate", "toDate"),
-      fromDate,
-      toDate,
-      parentCode,
-    },
-  ];
-
-  // Process sub options
-  if (packageOption.options?.length) {
-    packageOption.options.forEach((subProductOption) => {
-      processedProductOptions = concat(
-        processedProductOptions,
-        processPackageOption(subProductOption, packageOption.code)
-      );
-    });
-  }
-
-  return processedProductOptions;
-};
-
-const productOptionsApi = {
-  fetchProductOptions,
-};
-
-export default productOptionsApi;

package/src/booking-wizard/features/product-options/product-options-slice.ts

@@ -1,149 +0,0 @@
-import { PackagePriceDetailsRequest, ServiceType } from "@qite/tide-client";
-import {
-  PayloadAction,
-  createAsyncThunk,
-  createEntityAdapter,
-  createSelector,
-  createSlice,
-} from "@reduxjs/toolkit";
-import { find, findLast, isNil } from "lodash";
-import productOptionsApi, {
-  ProductOption,
-  ProductOptionsRequest,
-} from "./product-options-api";
-import {
-  selectAdultCount,
-  selectChildCount,
-  selectTravelerAges,
-} from "../travelers-form/travelers-form-slice";
-import {
-  selectBookingAttributes,
-  selectOfficeId,
-  selectProductAttributes,
-  setCacheKey,
-} from "../booking/booking-slice";
-
-import { RootState } from "../../store";
-import { fetchPriceDetails } from "../price-details/price-details-slice";
-import { parseISO } from "date-fns";
-import { setRooms } from "./rooms-slice";
-
-export const fetchProductOptions = createAsyncThunk(
-  "productOptions/fetchProductOptions",
-  async (_, { dispatch, getState }) => {
-    const state = getState() as RootState;
-
-    const officeId = selectOfficeId(state);
-    const productAttributes = selectProductAttributes(state);
-    const bookingAttributes = selectBookingAttributes(state);
-    const adultCount = selectAdultCount(state);
-    const childCount = selectChildCount(state);
-    const travelerAges = selectTravelerAges(state);
-
-    if (isNil(productAttributes)) {
-      throw Error("productAttributes could not be found");
-    }
-
-    if (isNil(bookingAttributes)) {
-      throw Error("bookingAttributes could not be found");
-    }
-
-    const request: ProductOptionsRequest = {
-      officeId,
-      catalogId: bookingAttributes.catalog,
-      productId: productAttributes.productId,
-      startDate: parseISO(bookingAttributes.startDate),
-      endDate: parseISO(bookingAttributes.endDate),
-      accommodationCode: bookingAttributes.accommodation,
-      regimeCode: bookingAttributes.regime,
-      adultCount: adultCount,
-      childCount: childCount,
-    };
-
-    const productOptionsResult = await productOptionsApi.fetchProductOptions(
-      request
-    );
-
-    const cacheKey = productOptionsResult?.cacheKey;
-    const rooms = productOptionsResult?.rooms;
-
-    if (cacheKey && rooms) {
-      dispatch(setCacheKey(cacheKey));
-      dispatch(setRooms(rooms));
-
-      if (rooms.length === 0) {
-        throw Error("No rooms present in response.");
-      }
-
-      const priceDetailsRequest: PackagePriceDetailsRequest = {
-        packageSearchResultCacheKey: cacheKey,
-        officeId: 1,
-        language: "nl-BE",
-        optionGuids:
-          productOptionsResult?.productOptions
-            ?.filter((option) => option.isSelected)
-            ?.map((option) => option.guid) ?? [],
-        rooms: [
-          {
-            id: rooms[0].id,
-            travelerAges: travelerAges,
-          },
-        ],
-      };
-
-      dispatch(fetchPriceDetails(priceDetailsRequest));
-    }
-
-    return productOptionsResult;
-  }
-);
-
-const productOptionsAdapter = createEntityAdapter<ProductOption>({
-  selectId: (productOption) => productOption.code,
-  sortComparer: (a, b) => {
-    if (a.fromDate === b.fromDate) {
-      return a.code.localeCompare(b.code);
-    }
-
-    return a.fromDate.localeCompare(b.fromDate);
-  },
-});
-
-const productOptionsSlice = createSlice({
-  name: "productOptions",
-  initialState: productOptionsAdapter.getInitialState(),
-  reducers: {
-    updateOption: (state, action: PayloadAction<ProductOption>) => {
-      productOptionsAdapter.upsertOne(state, action.payload);
-    },
-  },
-  extraReducers: (builder) => {
-    builder.addCase(fetchProductOptions.fulfilled, (state, action) => {
-      productOptionsAdapter.setAll(state, action.payload?.productOptions ?? []);
-    });
-  },
-});
-
-const productOptionsSelectors = productOptionsAdapter.getSelectors<RootState>(
-  (state) => {
-    return state.productOptions;
-  }
-);
-
-export const selectOptions = productOptionsSelectors.selectAll;
-
-export const selectSelectedOptions = createSelector(selectOptions, (options) =>
-  options.filter((option) => option.isSelected)
-);
-
-export const selectDepartureFlight = createSelector(selectOptions, (options) =>
-  find(options, (option) => option.productType === ServiceType.flight)
-);
-
-export const selectReturnFlight = createSelector(selectOptions, (options) =>
-  findLast(options, (option) => option.productType === ServiceType.flight)
-);
-
-export const { updateOption } = productOptionsSlice.actions;
-
-export default productOptionsSlice.reducer;

package/src/booking-wizard/features/product-options/radio-button.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-interface RadioButtonProps {
-  text: string;
-  name: string;
-  value: string;
-  defaultChecked?: boolean;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  text,
-  name,
-  value,
-  defaultChecked,
-  children,
-  onChange,
-}) => (
-  <div className="radiobutton">
-    <label className="radiobutton__label">
-      <input
-        type="radio"
-        value={value}
-        name={name}
-        className="radiobutton__input"
-        defaultChecked={defaultChecked}
-        onChange={onChange}
-      />
-      <span className="radiobutton__label-text">{text}</span>
-      {children}
-    </label>
-  </div>
-);
-
-export default RadioButton;

package/src/booking-wizard/features/product-options/rooms-slice.ts

@@ -1,28 +0,0 @@
-import { createEntityAdapter, createSlice } from "@reduxjs/toolkit";
-
-import { PackageRoom } from "@qite/tide-client";
-import { RootState } from "../../store";
-
-const productOptionsAdapter = createEntityAdapter<PackageRoom>({
-  selectId: (room) => room.id,
-});
-
-const roomsSlice = createSlice({
-  name: "rooms",
-  initialState: productOptionsAdapter.getInitialState(),
-  reducers: {
-    setRooms: productOptionsAdapter.setAll,
-  },
-});
-
-const roomsSelectors = productOptionsAdapter.getSelectors<RootState>(
-  (state) => {
-    return state.rooms;
-  }
-);
-
-export const selectRooms = roomsSelectors.selectAll;
-
-export const { setRooms } = roomsSlice.actions;
-
-export default roomsSlice.reducer;