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

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;

package/src/booking-wizard/features/product-options/tree-level.tsx

@@ -1,118 +0,0 @@
-import { selectOptions, updateOption } from "./product-options-slice";
-import { useDispatch, useSelector } from "react-redux";
-
-import Checkbox from "./checkbox";
-import OptionDetails from "./option-details";
-import { ProductOption } from "./product-options-api";
-import RadioButton from "./radio-button";
-import React from "react";
-import _, { isEmpty } from "lodash";
-import { parseISO } from "date-fns";
-import { fetchPriceDetails } from "../price-details/price-details-slice";
-import { useState } from "react";
-
-interface TreeLevelProps {
-  productOption: ProductOption;
-}
-
-const TreeLevel: React.FC<TreeLevelProps> = ({ productOption }) => {
-  const dispatch = useDispatch();
-
-  const [collapsed, setCollapsed] = useState(false);
-
-  const productOptions = useSelector(selectOptions);
-
-  const childProductOptions = _.compact(
-    Object.values(productOptions).filter(
-      (p) => p?.parentCode === productOption.code
-    )
-  );
-
-  const optionDetails = (
-    <OptionDetails
-      startDate={parseISO(productOption.fromDate)}
-      endDate={parseISO(productOption.toDate)}
-      price={productOption.price}
-      onToggleCollapse={(collapsed) => setCollapsed(collapsed)}
-      collapsed={collapsed}
-      isCollapsible={
-        productOptions.filter(
-          (childOption) => childOption.parentCode === productOption.code
-        ).length > 0
-      }
-    />
-  );
-
-  const handleSelectedChange: React.ChangeEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    const updatedProductOption: ProductOption = {
-      ...productOption,
-      isSelected: e.target.checked,
-    };
-
-    dispatch(updateOption(updatedProductOption));
-    dispatch(fetchPriceDetails());
-  };
-
-  const options =
-    childProductOptions.length > 0 && productOption.isSelected && !collapsed ? (
-      <div className="tree__level">
-        <table className="table table--striped">
-          <thead>
-            <tr>
-              <th>
-                <h6 className="tree__level-heading">Opties</h6>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {childProductOptions.map((childProductOption) => (
-              <tr key={childProductOption.code}>
-                <td>
-                  <TreeLevel productOption={childProductOption} />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    ) : null;
-
-  const body = options ? <div className="tree__body">{options}</div> : null;
-
-  return (
-    <div className="tree__level">
-      <div className="tree__header">
-        <div className="tree__description-collapse">
-          {isEmpty(productOption.group) ? (
-            <Checkbox
-              text={productOption.name}
-              value=""
-              name=""
-              required={productOption.isRequired}
-              defaultChecked={productOption.isSelected}
-              onChange={handleSelectedChange}
-            >
-              {optionDetails}
-              {body}
-            </Checkbox>
-          ) : (
-            <RadioButton
-              text={productOption.name}
-              value=""
-              name={productOption.group ?? ""}
-              defaultChecked={productOption.isSelected}
-              onChange={handleSelectedChange}
-            >
-              {optionDetails}
-              {body}
-            </RadioButton>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TreeLevel;