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

package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts

@@ -1,28 +1,27 @@
 import { PayloadAction, createSelector, createSlice } from "@reduxjs/toolkit";
-import { differenceInYears, parse } from "date-fns";
+import { differenceInYears } from "date-fns";
 
 import { RootState } from "../../store";
 import { TravelersFormValues } from "../../types";
 
 export interface TravelersFormState {
-  adultCount: number;
-  childCount: number;
   formValues?: TravelersFormValues;
 }
 
-const isDebug = true;
+export const CHILD_MAX_AGE = 17;
+const isDebug = false;
 
 const debugFormValues = {
   adults: [
     {
-      id: "1",
+      id: 1,
       firstName: "Jan",
       lastName: "Jansens",
       birthDate: "1984-05-20",
       gender: "m",
     },
     {
-      id: "2",
+      id: 2,
       firstName: "Leen",
       lastName: "Leenders",
       birthDate: "1986-08-09",
@@ -46,21 +45,21 @@ const debugFormValues = {
   //   },
   // ],
   children: [],
-  mainBookerId: "1",
+  mainBookerId: 1,
   street: "Nieuwstraat",
   houseNumber: "20",
   box: "A",
   zipCode: "9000",
   place: "Gent",
   country: "be",
-  email: "jan.jansens@fake.be",
-  emailConfirmation: "jan.jansens@fake.be",
+  email: "staging@qite.be",
+  emailConfirmation: "staging@qite.be",
   phone: "+32 471 12 34 56",
+  travelAgentId: 0,
+  travelAgentName: "",
 };
 
 const initialState: TravelersFormState = {
-  adultCount: 2,
-  childCount: 0,
   formValues: isDebug ? debugFormValues : undefined,
 };
 
@@ -68,25 +67,13 @@ const travelersFormSlice = createSlice({
   name: "travelersForm",
   initialState,
   reducers: {
-    setAdultCount(state, action: PayloadAction<number>) {
-      state.adultCount = action.payload;
-    },
-    setChildCount(state, action: PayloadAction<number>) {
-      state.childCount = action.payload;
-    },
     setFormValues(state, action: PayloadAction<TravelersFormValues>) {
       state.formValues = action.payload;
     },
   },
 });
 
-export const { setAdultCount, setChildCount, setFormValues } =
-  travelersFormSlice.actions;
-
-export const selectAdultCount = (state: RootState) =>
-  state.travelersForm.adultCount;
-export const selectChildCount = (state: RootState) =>
-  state.travelersForm.childCount;
+export const { setFormValues } = travelersFormSlice.actions;
 
 export const selectTravelersFormValues = (state: RootState) =>
   state.travelersForm.formValues;
@@ -101,40 +88,52 @@ export const selectChildren = createSelector(
   (formValues) => formValues?.children ?? []
 );
 
-export const selectTravelerAges = createSelector(
-  selectAdultCount,
-  selectChildCount,
+export const selectAgentId = createSelector(
   selectTravelersFormValues,
-  (adultCount, childCount, travelerFormValues) => {
-    if (!travelerFormValues) {
-      return [
-        ...new Array(adultCount).fill(30),
-        ...new Array(childCount).fill(6),
-      ];
-    }
-
-    return [
-      ...(travelerFormValues.adults ?? []).map((adult) => {
-        const diff = differenceInYears(
-          new Date(),
-          parse(adult.birthDate, "yyyy-MM-dd", new Date())
-        );
-        return isNaN(diff) ? 30 : diff;
-      }),
-      ...(travelerFormValues.children ?? []).map((traveler) => {
-        const diff = differenceInYears(
-          new Date(),
-          parse(traveler.birthDate, "yyyy-MM-dd", new Date())
-        );
-        return isNaN(diff) ? 6 : diff;
-      }),
-    ];
-  }
+  (formValues) => formValues?.travelAgentId
 );
 
-export const selectMainBookerId = createSelector(
-  selectTravelersFormValues,
-  (formValues) => formValues?.mainBookerId
-);
+const selectRequestRooms = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.requestRooms;
+
+export const selectAdultIds = createSelector(selectRequestRooms, (rooms) => {
+  const ids: number[] = [];
+  if (rooms) {
+    rooms.forEach((x) =>
+      x.pax.forEach((p) => {
+        if (p.age && p.age > CHILD_MAX_AGE) {
+          ids.push(p.id);
+        } else if (p.dateOfBirth) {
+          const diff = differenceInYears(new Date(), new Date(p.dateOfBirth));
+
+          if (diff > CHILD_MAX_AGE) {
+            ids.push(p.id);
+          }
+        }
+      })
+    );
+  }
+  return ids;
+});
+
+export const selectChildIds = createSelector(selectRequestRooms, (rooms) => {
+  const ids: number[] = [];
+  if (rooms) {
+    rooms.forEach((x) =>
+      x.pax.forEach((p) => {
+        if (p.age && p.age <= CHILD_MAX_AGE) {
+          ids.push(p.id);
+        } else if (p.dateOfBirth) {
+          const diff = differenceInYears(new Date(), new Date(p.dateOfBirth));
+
+          if (diff <= CHILD_MAX_AGE) {
+            ids.push(p.id);
+          }
+        }
+      })
+    );
+  }
+  return ids;
+});
 
 export default travelersFormSlice.reducer;

package/src/booking-wizard/features/travelers-form/travelers-form.tsx

@@ -1,14 +1,12 @@
-import React, { useContext } from "react";
-import { compact, get, range } from "lodash";
+import React, { useContext, useEffect, useState } from "react";
+import { compact, get, sortBy } from "lodash";
 import {
-  selectAdultCount,
-  selectChildCount,
+  selectAdultIds,
+  selectChildIds,
   selectTravelersFormValues,
-  setAdultCount,
-  setChildCount,
   setFormValues,
 } from "./travelers-form-slice";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import LabeledInput from "../../components/labeled-input";
 import LabeledSelect from "../../components/labeled-select";
@@ -16,27 +14,40 @@ import SettingsContext from "../../settings-context";
 import { TravelersFormValues } from "../../types";
 import { buildClassName } from "../../utils/class-util";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
-import { fetchProductOptions } from "../product-options/product-options-slice";
 import flat from "flat";
 import { navigate } from "@reach/router";
 import produce from "immer";
-import { selectBookingQueryString } from "../booking/booking-slice";
+import {
+  selectAgentAdressId,
+  selectAgents,
+  selectBookingQueryString,
+  selectStartDate,
+} from "../booking/selectors";
 import translations from "../../translations/translations.json";
 import { useFormik } from "formik";
-import { v4 as uuid } from "uuid";
 import validateForm from "./validate-form";
+import { format, parse } from "date-fns";
+import { useAppDispatch } from "../../store";
+import TypeAheadInput from "./type-ahead-input";
+import { setBookingType } from "../booking/booking-slice";
 
 interface TravelersFormProps {}
 
-function createTraveler() {
-  return { id: uuid(), firstName: "", lastName: "", birthDate: "", gender: "" };
+function createTraveler(id: number) {
+  return { id, firstName: "", lastName: "", birthDate: "", gender: "" };
 }
 
-function createInitialValues(adultCount = 2, childCount = 0) {
+function createInitialValues(
+  adultIds: number[],
+  childIds: number[],
+  startDate?: string,
+  agentAdressId?: number
+) {
   const initialValues = {
-    adults: range(0, adultCount).map(() => createTraveler()),
-    children: range(0, childCount).map(() => createTraveler()),
-    mainBookerId: "",
+    startDate: startDate,
+    adults: adultIds.map((id) => createTraveler(id)),
+    children: childIds.map((id) => createTraveler(id)),
+    mainBookerId: -1,
     street: "",
     houseNumber: "",
     box: "",
@@ -46,52 +57,76 @@ function createInitialValues(adultCount = 2, childCount = 0) {
     phone: "",
     email: "",
     emailConfirmation: "",
+    travelAgentId: agentAdressId ?? 0,
+    travelAgentName: "",
   };
 
-  initialValues.mainBookerId = initialValues.adults[0].id;
+  if (initialValues.adults && initialValues.adults.length) {
+    initialValues.mainBookerId = initialValues.adults[0].id;
+  }
 
   return initialValues;
 }
 
 const TravelersForm: React.FC<TravelersFormProps> = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const settings = useContext(SettingsContext);
   const bookingQueryString = useSelector(selectBookingQueryString);
-  const adultCount = useSelector(selectAdultCount);
-  const childCount = useSelector(selectChildCount);
+  const startDate = useSelector(selectStartDate);
+  const adultIds = useSelector(selectAdultIds);
+  const childIds = useSelector(selectChildIds);
+  const agents = useSelector(selectAgents);
+  const agentAdressId = useSelector(selectAgentAdressId);
+
   const initialValues =
     useSelector(selectTravelersFormValues) ??
-    createInitialValues(adultCount, childCount);
+    createInitialValues(adultIds, childIds, startDate, agentAdressId);
+
+  const [showAgents, setShowAgents] = useState<boolean>(
+    settings.agentRequired ?? false
+  );
+  const [showAgentSelection, setShowAgentSelection] = useState<boolean>(
+    !settings.agentAdressId && !settings.hideAgentSelection
+  );
+
+  const typeaheadAgents =
+    sortBy(
+      agents?.map((x) => ({
+        key: `${x.id}`,
+        value: `${x.name} (${x.postalCode} ${x.location})`,
+        text: `${x.name} (${x.postalCode} ${x.location})`,
+      })),
+      "value"
+    ) ?? [];
+
+  const [filteredAgents, setFilteredAgents] =
+    useState<{ key: string; value: string; text: string }[]>(typeaheadAgents);
 
   const formik = useFormik<TravelersFormValues>({
     initialValues,
-    validate: validateForm,
+    validate: (values) => validateForm(values, settings.agentRequired),
     onSubmit: (values) => {
       dispatch(setFormValues(values));
       dispatch(fetchPriceDetails());
 
       navigate(
-        `${settings.basePath}${settings.optionsPathSuffix}?${bookingQueryString}`
+        `${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`
       );
     },
   });
 
-  const handleAdultCountChange: React.FormEventHandler<HTMLSelectElement> = (
-    e
-  ) => {
-    const count = parseInt(e.currentTarget.value);
-    dispatch(setAdultCount(count));
-
+  useEffect(() => {
     const formValues = produce(formik.values, (values) => {
-      values.adults = range(0, count).map(
-        (i) => values.adults[i] ?? createTraveler()
+      values.adults = adultIds.map(
+        (id) => values.adults[id] ?? createTraveler(id)
       );
 
       if (
         values.adults.findIndex(
           (traveler) => traveler.id === values.mainBookerId
-        ) === -1
+        ) === -1 &&
+        values.adults.length
       ) {
         values.mainBookerId = values.adults[0].id;
       }
@@ -99,31 +134,89 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
 
     formik.setValues(formValues, false);
     dispatch(setFormValues(formValues));
+  }, [adultIds]);
 
-    dispatch(fetchProductOptions());
-  };
-
-  const handleChildCountChange: React.FormEventHandler<HTMLSelectElement> = (
-    e
-  ) => {
-    const count = parseInt(e.currentTarget.value);
-    dispatch(setChildCount(count));
-
+  useEffect(() => {
     const formValues = produce(formik.values, (values) => {
-      values.children = range(0, count).map(
-        (i) => values.children[i] ?? createTraveler()
+      values.children = childIds.map(
+        (id) => values.children[id] ?? createTraveler(id)
       );
     });
     formik.setValues(formValues, false);
     dispatch(setFormValues(formValues));
+  }, [childIds]);
 
-    dispatch(fetchProductOptions());
+  useEffect(() => {
+    dispatch(fetchPriceDetails());
+  }, []);
+
+  useEffect(() => {
+    if (agents && settings.affiliateSlug) {
+      const agent = agents.find(
+        (x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug
+      );
+      if (!agent) return;
+
+      const formValues = produce(formik.values, (values) => {
+        (values.travelAgentId = Number(agent.id)),
+          (values.travelAgentName = agent.name);
+      });
+      formik.setValues(formValues, false);
+      dispatch(setFormValues(formValues));
+      setShowAgentSelection(false);
+    }
+  }, [agents, settings.affiliateSlug]);
+
+  const handleMainBookerChange: React.FormEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    const id = parseInt(e.currentTarget.value);
+
+    formik.setFieldValue("mainBookerId", id);
   };
 
   const mainBooker = formik.values.adults.find(
     (traveler) => traveler.id === formik.values.mainBookerId
   );
 
+  const handleAgentChange = (value: string) => {
+    const filteredAgents = typeaheadAgents.filter(
+      (x) => x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1
+    );
+
+    setFilteredAgents(filteredAgents);
+    formik.setFieldValue("travelAgentName", value);
+  };
+
+  const handleAgentSelect = (key: string) => {
+    const agent = typeaheadAgents.find((x) => x.key === key);
+
+    formik.setFieldValue("travelAgentId", Number(agent?.key));
+    formik.setFieldValue("travelAgentName", agent?.value);
+
+    let bookingType = "b2b2c";
+    if (agentAdressId && agentAdressId != 0) {
+      bookingType = "b2b";
+    }
+    dispatch(setBookingType(bookingType));
+  };
+
+  const handleAgentClear = () => {
+    formik.setFieldValue("travelAgentId", 0);
+    formik.setFieldValue("travelAgentName", "");
+
+    dispatch(setBookingType("b2c"));
+  };
+
+  const toggleAgent = (value: boolean) => {
+    setShowAgents(value);
+
+    if (!value) {
+      handleAgentClear();
+      setFilteredAgents([]);
+    }
+  };
+
   const flatErrors: Record<string, string> = flat(formik.errors);
   const hasVisibleError = (key: string) =>
     get(formik.errors, key) && get(formik.touched, key);
@@ -131,6 +224,8 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
   return (
     <form
       className="form"
+      name="booking--step1"
+      id="booking--step1"
       noValidate
       onSubmit={formik.handleSubmit}
       onReset={formik.handleReset}
@@ -140,44 +235,21 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           <h5 className="form__region-heading">
             {translations.TRAVELERS_FORM.PERSONS}
           </h5>
-        </div>
-        <div className="form__row">
-          <label
-            className={buildClassName(["form__group", "form__group--sm-50"])}
-          >
-            <span className="form__label">
-              {translations.TRAVELERS_FORM.TRAVELER_COUNT} *
-            </span>
-            <div className="dropdown">
-              <select onChange={handleAdultCountChange} value={adultCount}>
-                {range(1, 11).map((i) => (
-                  <option key={i} value={i}>{`${i} ${
-                    i === 1
-                      ? translations.TRAVELERS_FORM.ADULT
-                      : translations.TRAVELERS_FORM.ADULTS
-                  }`}</option>
-                ))}
-              </select>
-            </div>
-          </label>
-          <label
-            className={buildClassName(["form__group", "form__group--sm-50"])}
-          >
-            <span className="form__label">
-              {translations.TRAVELERS_FORM.CHILDREN} *
-            </span>
-            <div className="dropdown">
-              <select onChange={handleChildCountChange} value={childCount}>
-                {range(0, 11).map((i) => (
-                  <option key={i} value={i}>{`${i} ${
-                    i === 1
-                      ? translations.TRAVELERS_FORM.CHILD
-                      : translations.TRAVELERS_FORM.CHILDREN
-                  }`}</option>
-                ))}
-              </select>
-            </div>
-          </label>
+          <p className="form__region-label">
+            {compact([
+              adultIds.length,
+              adultIds.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
+              adultIds.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
+              adultIds &&
+                adultIds.length &&
+                childIds &&
+                childIds.length &&
+                ", ",
+              childIds.length,
+              childIds.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
+              childIds.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`,
+            ]).join("")}
+          </p>
         </div>
       </div>
       {formik.values.adults.map((travelerValues, index) => (
@@ -195,7 +267,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                 <input
                   type="radio"
                   name="mainBookerId"
-                  onChange={formik.handleChange}
+                  onChange={handleMainBookerChange}
                   onBlur={formik.handleBlur}
                   value={travelerValues.id}
                   checked={formik.values.mainBookerId === travelerValues.id}
@@ -412,7 +484,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           <p className="form__region-label">
             {compact([
               compact([mainBooker?.firstName, mainBooker?.lastName]).join(" "),
-              mainBooker?.birthDate,
+              mainBooker?.birthDate &&
+                format(
+                  parse(mainBooker.birthDate, "yyyy-MM-dd", new Date()),
+                  "dd-MM-yyyy"
+                ),
             ]).join(", ")}
           </p>
         </div>
@@ -428,7 +504,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                 name="street"
                 onChange={formik.handleChange}
                 onBlur={formik.handleBlur}
-                placeholder="Jouw adres"
+                placeholder={translations.TRAVELERS_FORM.STREET_PLACEHOLDER}
                 value={formik.values.street}
               />
               <LabeledInput
@@ -471,7 +547,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                 label={translations.TRAVELERS_FORM.CITY}
                 required
                 name="place"
-                placeholder="Plaats"
+                placeholder={translations.TRAVELERS_FORM.CITY_PLACEHOLDER}
                 onChange={formik.handleChange}
                 onBlur={formik.handleBlur}
                 value={formik.values.place}
@@ -546,16 +622,48 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           />
         </div>
       </div>
-      {/* <div className="form__region">
-        <div className="form__region-header">
-          <h5 className="form__region-heading">Ik wens te boeken bij:</h5>
-        </div>
-        <div className="form__row">
-          <div className="form__group form__group--icon">
-            <TypeAheadInput value="" options={[]} name="agent" placeholder="Kies uw reisagent" />
+      {showAgentSelection && (
+        <div className="form__region">
+          <div className="form__region-header">
+            <h5 className="form__region-heading">
+              Ik wens te boeken bij mijn lokale reisagent
+            </h5>
+            <div className="checkbox" id="cbxChooseOffice">
+              <label className="checkbox__label">
+                <input
+                  type="checkbox"
+                  name="booking--mainbooker"
+                  defaultChecked={showAgents}
+                  onClick={() => toggleAgent(!showAgents)}
+                  className="checkbox__input"
+                />
+                Ik kies een kantoor
+              </label>
+            </div>
           </div>
+          {showAgents && (
+            <div className="form__row form__row--choose-office">
+              <div
+                className={buildClassName([
+                  "form__group",
+                  "form__group--icon",
+                  hasVisibleError("travelAgentId") && "form__group--error",
+                ])}
+              >
+                <TypeAheadInput
+                  value={formik.values.travelAgentName}
+                  options={filteredAgents}
+                  onChange={handleAgentChange}
+                  onSelect={handleAgentSelect}
+                  onClear={handleAgentClear}
+                  name="travelAgentName"
+                  placeholder="Kies uw reisagent"
+                />
+              </div>
+            </div>
+          )}
         </div>
-      </div> */}
+      )}
       {Object.keys(flatErrors).length > 0 && (
         <div className="form__region form__region--errors">
           <div className="form__row">

package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx

@@ -1,5 +1,5 @@
 import Icon from "../../components/icon";
-import React from "react";
+import React, { useState } from "react";
 
 interface TypeAheadInputProps {
   name?: string;
@@ -7,6 +7,7 @@ interface TypeAheadInputProps {
   placeholder?: string;
   options?: { key: string; value: string | number; text: string }[];
   onChange?: (value: string) => void;
+  onSelect?: (key: string) => void;
   onClear?: () => void;
 }
 
@@ -16,8 +17,11 @@ const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
   placeholder,
   options,
   onChange,
+  onSelect,
   onClear,
 }) => {
+  const [showItems, setShowItems] = useState<boolean>(false);
+
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     if (onChange) {
       onChange(e.target.value);
@@ -28,6 +32,7 @@ const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
     if (onClear) {
       onClear();
     }
+    setShowItems(false);
   };
 
   return (
@@ -42,6 +47,14 @@ const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
           onChange={handleChange}
           placeholder={placeholder}
           required
+          autoComplete="off"
+          onKeyDown={(e) => {
+            if (e.key === "Tab" && options && onSelect) {
+              onSelect(options[0].key);
+              setShowItems(false);
+            }
+          }}
+          onFocus={() => setShowItems(true)}
         />
         <button
           type="button"
@@ -49,7 +62,7 @@ const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
           onClick={handleClearClick}
         ></button>
       </div>
-      {options && options.length > 0 && (
+      {options && options.length > 0 && showItems && (
         <div className="typeahead__options">
           {(options ?? []).map((option) => {
             const matchIndex =
@@ -61,7 +74,14 @@ const TypeAheadInput: React.FC<TypeAheadInputProps> = ({
             return (
               <div className="typeahead__option" key={option.key}>
                 <div className="typeahead__option-header">
-                  <button type="button" className="button button--plain">
+                  <button
+                    onClick={() => {
+                      if (onSelect) onSelect(option.key);
+                      setShowItems(false);
+                    }}
+                    type="button"
+                    className="button button--plain"
+                  >
                     {prefix}
                     <span className="typeahead__option-highlight">
                       {highlight}