@qite/tide-booking-component/src/booking-wizard/features/travelers-form/travelers-form-slice.ts

React Booking wizard & Booking product component for Tide

import { PayloadAction, createSelector, createSlice } from "@reduxjs/toolkit";
import { differenceInYears } from "date-fns";

import { RootState } from "../../store";
import { TravelersFormValues, RoomTraveler } from "../../types";

export interface TravelersFormState {
  formValues?: TravelersFormValues;
}

export const CHILD_MAX_AGE = 17;
const isDebug = false;

const debugFormValues = {
  rooms: [
    {
      adults: [
        {
          id: 1,
          firstName: "Jan",
          lastName: "Jansens",
          birthDate: "1984-05-20",
          gender: "m",
        },
        {
          id: 2,
          firstName: "Leen",
          lastName: "Leenders",
          birthDate: "1986-08-09",
          gender: "f",
        },
      ],
      // children: [
      //   {
      //     id: "3",
      //     firstName: "Jonas",
      //     lastName: "Jansens",
      //     birthDate: "2015-06-14",
      //     gender: "m",
      //   },
      //   {
      //     id: "4",
      //     firstName: "Janne",
      //     lastName: "Jansens",
      //     birthDate: "2016-03-19",
      //     gender: "f",
      //   },
      // ],
      children: [],
    },
    {
      adults: [
        {
          id: 3,
          firstName: "Jan",
          lastName: "Jansens",
          birthDate: "1984-05-20",
          gender: "m",
        },
        {
          id: 4,
          firstName: "Leen",
          lastName: "Leenders",
          birthDate: "1986-08-09",
          gender: "f",
        },
      ],
      // children: [
      //   {
      //     id: "3",
      //     firstName: "Jonas",
      //     lastName: "Jansens",
      //     birthDate: "2015-06-14",
      //     gender: "m",
      //   },
      //   {
      //     id: "4",
      //     firstName: "Janne",
      //     lastName: "Jansens",
      //     birthDate: "2016-03-19",
      //     gender: "f",
      //   },
      // ],
      children: [],
    },
  ],
  mainBookerId: 1,
  street: "Nieuwstraat",
  houseNumber: "20",
  box: "A",
  zipCode: "9000",
  place: "Gent",
  country: "be",
  email: "staging@qite.be",
  emailConfirmation: "staging@qite.be",
  phone: "+32 471 12 34 56",
  travelAgentId: 0,
  travelAgentName: "",
};

const initialState: TravelersFormState = {
  formValues: isDebug ? debugFormValues : undefined,
};

const travelersFormSlice = createSlice({
  name: "travelersForm",
  initialState,
  reducers: {
    setFormValues(state, action: PayloadAction<TravelersFormValues>) {
      state.formValues = action.payload;
    },
  },
});

export const { setFormValues } = travelersFormSlice.actions;

export const selectTravelersFormValues = (state: RootState) =>
  state.travelersForm.formValues;

export const selectRooms = createSelector(
  selectTravelersFormValues,
  (formValues) => formValues?.rooms ?? []
);

export const selectAgentId = createSelector(
  selectTravelersFormValues,
  (formValues) => formValues?.travelAgentId
);

const selectRequestRooms = (state: RootState) =>
  state.booking.package?.options.find((x) => x.isSelected)?.requestRooms;

export const selectFormRooms = createSelector(selectRequestRooms, (rooms) => {
  const formRooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[] = [];
  if (rooms) {
    rooms.forEach((x) => {
      const formRoom: { adults: RoomTraveler[]; children: RoomTraveler[] } = {
        adults: [],
        children: [],
      };

      x.pax.forEach((p) => {
        if (p.age && p.age > CHILD_MAX_AGE) {
          formRoom.adults.push({ id: p.id, age: 30 });
        } else if (p.age && p.age <= CHILD_MAX_AGE) {
          formRoom.children.push({ id: p.id, age: p.age });
        } else if (p.dateOfBirth) {
          const age = differenceInYears(new Date(), new Date(p.dateOfBirth));

          if (age > CHILD_MAX_AGE) {
            formRoom.adults.push({ id: p.id, age: 30 });
          } else {
            formRoom.children.push({ id: p.id, age: age });
          }
        }
      });

      formRooms.push(formRoom);
    });
  }
  return formRooms;
});

export default travelersFormSlice.reducer;