@qite/tide-booking-component 1.4.2 → 1.4.4

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

@@ -1,6 +1,6 @@
 import { FormikErrors } from "formik";
 import { isEmpty, set } from "lodash";
-import { TravelersFormValues } from "../../types";
+import { FormField, TravelersFormValues } from "../../types";
 import { CHILD_MAX_AGE } from "./travelers-form-slice";
 import { format } from "../../../shared/utils/localization-util";
 
@@ -24,70 +24,71 @@ const validateForm = (
   values: TravelersFormValues,
   agentRequired?: boolean,
   bookingType?: string,
-  translations?: any
+  translations?: any,
+  formFields?: FormField[],
+  mainBookerFormFields?: FormField[],
 ) => {
   const errors: FormikErrors<TravelersFormValues> = {};
+  const isFormFieldPresent = (type: string) => {
+    return formFields?.some((f) => f.type === type) ?? true;
+  }
+  const isMainBookerFormFieldPresent = (type: string) => {
+    return mainBookerFormFields?.some((f) => f.type === type) ?? true;
+  }
+
+  const formatTravelerField = (room: number, pax: number, field: string) => {
+    return values.rooms.length > 1 ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [room, pax, field]) : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_FIELD, [pax, field]);
+  }
+  const formatTravelerIsNoAdult = (room: number, pax: number) => {
+    return values.rooms.length > 1 ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_ADULT, [room, pax]) : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT, [pax]);
+  }
+  const formatTravelerIsNoChild = (room: number, pax: number) => {
+    return values.rooms.length > 1 ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_CHILD, [room, pax]) : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD, [pax]);
+  }
 
   values.rooms.forEach((r, rIndex) =>
     r.adults.forEach((adult, index) => {
-      if (isEmpty(adult.gender)) {
+      if (isEmpty(adult.gender) && isFormFieldPresent("gender")) {
         set(
           errors,
           `rooms[${rIndex}].adults[${index}].gender`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            index + 1,
-            translations.TRAVELERS_FORM.GENDER,
-          ])
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.GENDER)
         );
       }
 
-      if (isEmpty(adult.firstName)) {
+      if (isEmpty(adult.firstName) && isFormFieldPresent("firstName")) {
         set(
           errors,
           `rooms[${rIndex}].adults[${index}].firstName`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            index + 1,
-            translations.TRAVELERS_FORM.FIRST_NAME,
-          ])
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
         );
       }
 
-      if (isEmpty(adult.lastName)) {
+      if (isEmpty(adult.lastName) && isFormFieldPresent("lastName")) {
         set(
           errors,
           `rooms[${rIndex}].adults[${index}].lastName`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            index + 1,
-            translations.TRAVELERS_FORM.LAST_NAME,
-          ])
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.LAST_NAME)
         );
       }
 
-      if (isEmpty(adult.birthDate)) {
-        set(
-          errors,
-          `rooms[${rIndex}].adults[${index}].birthDate`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            index + 1,
-            translations.TRAVELERS_FORM.BIRTHDATE,
-          ])
-        );
-      } else if (values.startDate) {
-        const age = getAge(adult.birthDate, values.startDate);
-
-        if (age <= CHILD_MAX_AGE) {
+      if (isFormFieldPresent("birthDate")) {
+        if (isEmpty(adult.birthDate)) {
           set(
             errors,
             `rooms[${rIndex}].adults[${index}].birthDate`,
-            format(
-              translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_ADULT,
-              [rIndex + 1, index + 1]
-            )
+            formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
           );
+        } else if (values.startDate) {
+          const age = getAge(adult.birthDate, values.startDate);
+
+          if (age <= CHILD_MAX_AGE) {
+            set(
+              errors,
+              `rooms[${rIndex}].adults[${index}].birthDate`,
+              formatTravelerIsNoAdult(rIndex + 1, index + 1)
+            );
+          }
         }
       }
     })
@@ -95,64 +96,47 @@ const validateForm = (
 
   values.rooms.forEach((r, rIndex) =>
     r.children.forEach((child, index) => {
-      if (isEmpty(child.gender)) {
+      if (isEmpty(child.gender) && isFormFieldPresent("gender")) {
         set(
           errors,
           `rooms[${rIndex}].children[${index}].gender`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            r.adults.length + index + 1,
-            translations.TRAVELERS_FORM.GENDER,
-          ])
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.GENDER)
         );
       }
 
-      if (isEmpty(child.firstName)) {
+      if (isEmpty(child.firstName) && isFormFieldPresent("firstName")) {
         set(
           errors,
           `children[${index}].firstName`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            r.adults.length + index + 1,
-            translations.TRAVELERS_FORM.FIRST_NAME,
-          ])
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
         );
       }
 
-      if (isEmpty(child.lastName)) {
+      if (isEmpty(child.lastName) && isFormFieldPresent("lastName")) {
         set(
           errors,
           `rooms[${rIndex}].children[${index}].lastName`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            r.adults.length + index + 1,
-            translations.TRAVELERS_FORM.LAST_NAME,
-          ])
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.LAST_NAME)
         );
       }
 
-      if (isEmpty(child.birthDate)) {
-        set(
-          errors,
-          `rooms[${rIndex}].children[${index}].birthDate`,
-          format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [
-            rIndex + 1,
-            r.adults.length + index + 1,
-            translations.TRAVELERS_FORM.BIRTHDATE,
-          ])
-        );
-      } else if (values.startDate) {
-        const age = getAge(child.birthDate, values.startDate);
-
-        if (age > CHILD_MAX_AGE) {
+      if (isFormFieldPresent("birthDate")) {
+        if (isEmpty(child.birthDate)) {
           set(
             errors,
             `rooms[${rIndex}].children[${index}].birthDate`,
-            format(
-              translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_CHILD,
-              [rIndex + 1, r.adults.length + index + 1]
-            )
+            formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
           );
+        } else if (values.startDate) {
+          const age = getAge(child.birthDate, values.startDate);
+
+          if (age > CHILD_MAX_AGE) {
+            set(
+              errors,
+              `rooms[${rIndex}].children[${index}].birthDate`,
+              formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1)
+            );
+          }
         }
       }
     })
@@ -163,63 +147,65 @@ const validateForm = (
       translations.TRAVELERS_FORM.VALIDATION.NO_MAIN_BOOKER_SELECTED;
   }
 
-  if (bookingType != "b2b") {
-    if (isEmpty(values.street)) {
+  if (bookingType != "b2b" || mainBookerFormFields?.length) {
+    if (isEmpty(values.street) && isMainBookerFormFieldPresent("street")) {
       errors.street = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.STREET]
       );
     }
 
-    if (isEmpty(values.houseNumber)) {
+    if (isEmpty(values.houseNumber) && isMainBookerFormFieldPresent("houseNumber")) {
       errors.houseNumber = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.HOUSE_NUMBER]
       );
     }
 
-    if (isEmpty(values.zipCode)) {
+    if (isEmpty(values.zipCode) && isMainBookerFormFieldPresent("zipCode")) {
       errors.zipCode = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.ZIPCODE]
       );
     }
 
-    if (isEmpty(values.place)) {
+    if (isEmpty(values.place) && isMainBookerFormFieldPresent("place")) {
       errors.place = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.CITY]
       );
     }
 
-    if (isEmpty(values.email)) {
-      errors.email = format(
-        translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
-        [translations.TRAVELERS_FORM.EMAIL]
-      );
-    } else if (isValidEmail(values.email)) {
-      errors.email =
-        translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_IS_INVALID;
-    }
+    if (isMainBookerFormFieldPresent("email")) {
+      if (isEmpty(values.email)) {
+        errors.email = format(
+          translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
+          [translations.TRAVELERS_FORM.EMAIL]
+        );
+      } else if (isValidEmail(values.email)) {
+        errors.email =
+          translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_IS_INVALID;
+      }
 
-    if (isEmpty(values.emailConfirmation)) {
-      errors.emailConfirmation = format(
-        translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
-        [translations.TRAVELERS_FORM.REPEAT_EMAIL]
-      );
-    } else if (values.emailConfirmation !== values.email) {
-      errors.emailConfirmation =
-        translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_DOES_NOT_MATCH;
+      if (isEmpty(values.emailConfirmation)) {
+        errors.emailConfirmation = format(
+          translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
+          [translations.TRAVELERS_FORM.REPEAT_EMAIL]
+        );
+      } else if (values.emailConfirmation !== values.email) {
+        errors.emailConfirmation =
+          translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_DOES_NOT_MATCH;
+      }
     }
 
-    if (isEmpty(values.country)) {
+    if (isEmpty(values.country) && isMainBookerFormFieldPresent("country")) {
       errors.country = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.COUNTRY]
       );
     }
 
-    if (isEmpty(values.phone)) {
+    if (isEmpty(values.phone) && isMainBookerFormFieldPresent("phone")) {
       errors.phone = format(
         translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD,
         [translations.TRAVELERS_FORM.PHONE]

package/src/booking-wizard/types.ts

@@ -22,6 +22,9 @@ export interface Settings {
   travellers: {
     pathSuffix: string;
     compactForm?: boolean;
+    formFields?: FormField[];
+    mainBookerFormFields?: FormField[];
+    countries?: Country[];
   };
   summary: {
     pathSuffix: string;
@@ -68,6 +71,16 @@ export interface Settings {
   customValidateText?: string;
 }
 
+export interface FormField {
+  type: string;
+}
+
+export interface Country {
+  iso2: string;
+  name: string;
+  phonePrefix: string;  
+}
+
 export interface BookingOptions {
   b2b: BookingOptionsDetail;
   b2b2c: BookingOptionsDetail;
@@ -170,6 +183,8 @@ export interface FlightLine {
   airlineDescription?: string;
   airlineNumber?: string;
   travelClass?: string;
+  number?: string;
+  airlineCode?: string;
 }
 
 export interface AccommodationContent {

package/src/shared/translations/en-GB.json

@@ -163,8 +163,11 @@
     "CHOOSE_AGENT_PLACEHOLDER": "Choose your travel agent",
     "VALIDATION": {
       "TRAVELER_X_FIELD": "Room {0} - Traveler {1}: {2}",
+      "SINGLE_ROOM_TRAVELER_X_FIELD": "Traveler {0}: {1}",
       "TRAVELER_X_IS_NO_ADULT": "Room {0} - Traveler {1}: is not an adult",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT": "Traveler {0}: is not an adult",
       "TRAVELER_X_IS_NO_CHILD": "Room {0} - Traveler {1}: is not a child",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD": "Traveler {0}: is not a child",
       "NO_MAIN_BOOKER_SELECTED": "No main booker has been selected",
       "MAIN_BOOKER_FIELD": "Main booker: {0}",
       "MAIN_BOOKER_EMAIL_IS_INVALID": "Main booker: email is invalid",

package/src/shared/translations/fr-BE.json

@@ -163,8 +163,11 @@
     "CHOOSE_AGENT_PLACEHOLDER": "Choisissez votre agent de voyage",
     "VALIDATION": {
       "TRAVELER_X_FIELD": "Chambre {0} - Voyageur {1} : {2}",
+      "SINGLE_ROOM_TRAVELER_X_FIELD": "Voyageur {0} : {1}",
       "TRAVELER_X_IS_NO_ADULT": "Chambre {0} - Voyageur {1} : n'est pas un adulte",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT": "Voyageur {0} : n'est pas un adulte",
       "TRAVELER_X_IS_NO_CHILD": "Chambre {0} - Voyageur {1} : n'est pas un enfant",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD": "Voyageur {0} : n'est pas un enfant",
       "NO_MAIN_BOOKER_SELECTED": "Aucun réservant principal n'a été sélectionné",
       "MAIN_BOOKER_FIELD": "Principal réservant : {0}",
       "MAIN_BOOKER_EMAIL_IS_INVALID": "Principal réservant : e-mail invalide",

package/src/shared/translations/nl-BE.json

@@ -163,8 +163,11 @@
     "CHOOSE_AGENT_PLACEHOLDER": "Kies uw reisagent",
     "VALIDATION": {
       "TRAVELER_X_FIELD": "Kamer {0} - Reiziger {1}: {2}",
+      "SINGLE_ROOM_TRAVELER_X_FIELD": "Reiziger {0}: {1}",
       "TRAVELER_X_IS_NO_ADULT": "Kamer {0} - Reiziger {1}: is geen volwassene",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT": "Reiziger {0}: is geen volwassene",
       "TRAVELER_X_IS_NO_CHILD": "Kamer {0} - Reiziger {1}: is geen kind",
+      "SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD": "Reiziger {0}: is geen kind",
       "NO_MAIN_BOOKER_SELECTED": "Er werd geen hoofdboeker geselecteerd",
       "MAIN_BOOKER_FIELD": "Hoofdboeker: {0}",
       "MAIN_BOOKER_EMAIL_IS_INVALID": "Hoofdboeker: e-mail is ongeldig",

package/styles/booking-wizard.scss

@@ -23,6 +23,7 @@
   @import "./components/input";
   @import "./components/date-list";
   @import "./components/typeahead";
+  @import "./components/phone-input";
 
   @extend %reset;
   @include body;

package/styles/components/_phone-input.scss

@@ -0,0 +1,8 @@
+.phone-input {
+    display: flex;
+    gap: 5px;
+
+    .dropdown {
+        width: 40%;
+    }
+}