@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;
  isTravelersFirst?: boolean;
}

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;