@qite/tide-booking-component 1.4.33 → 1.4.35

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

@@ -615,7 +615,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                       <>
                         <div className="form__row">
                           <div className={buildClassName(['form__group', hasVisibleError(`rooms[${rIndex}].adults[${index}].gender`) && 'form__group--error'])}>
-                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER} *</label>
+                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
                             <div className="radiobutton-group">
                               <div className="radiobutton">
                                 <label className="radiobutton__label">
@@ -628,7 +628,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="m"
                                     checked={travelerValues.gender === 'm'}
                                   />
-                                  {translations.TRAVELERS_FORM.MALE}
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
                                 </label>
                               </div>
 
@@ -643,11 +643,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="f"
                                     checked={travelerValues.gender === 'f'}
                                   />
-                                  {translations.TRAVELERS_FORM.FEMALE}
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
                                 </label>
                               </div>
 
-                              <div className="radiobutton">
+                              {/* <div className="radiobutton">
                                 <label className="radiobutton__label">
                                   <input
                                     type="radio"
@@ -660,7 +660,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                   />
                                   {translations.TRAVELERS_FORM.OTHER}
                                 </label>
-                              </div>
+                              </div> */}
                             </div>
                           </div>
                         </div>
@@ -729,7 +729,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                         <div className="form__row">
                           <div
                             className={buildClassName(['form__group', hasVisibleError(`rooms[${rIndex}].children[${index}].gender`) && 'form__group--error'])}>
-                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER} *</label>
+                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
                             <div className="radiobutton-group">
                               <div className="radiobutton">
                                 <label className="radiobutton__label">
@@ -742,7 +742,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="m"
                                     checked={travelerValues.gender === 'm'}
                                   />
-                                  {translations.TRAVELERS_FORM.MALE}
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
                                 </label>
                               </div>
 
@@ -757,11 +757,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="f"
                                     checked={travelerValues.gender === 'f'}
                                   />
-                                  {translations.TRAVELERS_FORM.FEMALE}
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
                                 </label>
                               </div>
 
-                              <div className="radiobutton">
+                              {/* <div className="radiobutton">
                                 <label className="radiobutton__label">
                                   <input
                                     type="radio"
@@ -774,7 +774,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                   />
                                   {translations.TRAVELERS_FORM.OTHER}
                                 </label>
-                              </div>
+                              </div> */}
                             </div>
                           </div>
                         </div>

package/src/content/components/icon.tsx

@@ -530,7 +530,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
         </svg>
       );
 
-    case 'ui-comparator':
+    case 'ui-list':
       return (
         <svg
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}

package/src/content/features/content-page/content-page-self-contained.tsx

@@ -169,7 +169,6 @@ const configuration: QSMConfiguration = {
   maxInfantAge: 2,
 
   onSubmit: () => {},
-  submitLabel: 'Zoeken',
   submitIcon: ''
 };
 

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -1,218 +1,217 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import MobileFilterModal from '../mobile-filter-modal';
-import SearchInputGroup from '../search-input-group';
-import DoubleSearchInputGroup from '../double-search-input-group';
-import Dates from '../../../booking-product/components/dates';
-import TravelInputGroup from '../travel-input-group';
-import TravelClassPicker from '../travel-class-picker';
-import TravelTypePicker from '../travel-type-picker';
-import Icon from '../icon';
-import TravelNationalityPicker from '../travel-nationality-picker';
-import { addDays, addMonths } from 'date-fns';
-import { DateRange } from '../../../booking-product/types';
-import { QSMState, setFromDate, setToDate } from '../../store/qsm-slice';
-import { FieldConfig } from '../../types';
-
-const QSMContainer: React.FC = () => {
-  const dispatch = useDispatch();
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const qsmState = useSelector((state: QSMRootState) => state.qsm);
-  const { mobileFilterType, fromDate, toDate } = qsmState;
-  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = useContext(QSMConfigurationContext);
-
-  useEffect(() => {
-    if (fromDate || toDate) return;
-
-    const startDate = addMonths(new Date(), 1);
-    const endDate = addDays(startDate, 7);
-
-    dispatch(setFromDate(startDate.toISOString()));
-    dispatch(setToDate(endDate.toISOString()));
-  }, [fromDate, toDate, dispatch]);
-
-  const dateRange = useMemo<DateRange | undefined>(() => {
-    if (!fromDate || !toDate) return undefined;
-
-    return {
-      fromDate: new Date(fromDate),
-      toDate: new Date(toDate)
-    };
-  }, [fromDate, toDate]);
-
-  const handleDateChange = (value: DateRange) => {
-    dispatch(setFromDate(value.fromDate?.toISOString()));
-    dispatch(setToDate(value.toDate?.toISOString()));
-  };
-
-  const handleSubmit = () => {
-    if (!onSubmit) return;
-
-    const { fromDate, toDate, travelers, selectedTravelClass, selectedTravelType, selectedNationality, adults, kids, babies, rooms, selectedFlexRange } =
-      qsmState;
-
-    const payload = {
-      fromDate,
-      toDate,
-      travelers,
-      travelClass: selectedTravelClass,
-      travelType: selectedTravelType,
-      nationality: selectedNationality,
-      adults,
-      kids,
-      babies,
-      rooms,
-      dateFlexibility: selectedFlexRange
-    };
-
-    addSearchFieldsToPayload(payload, searchFields, qsmState);
-    onSubmit(payload);
-  };
-
-  const addSearchFieldsToPayload = (payload: any, fields: FieldConfig[], state: QSMState) => {
-    fields.forEach((field) => {
-      if (field.type === 'single') {
-        const key = field.fieldKey;
-        const option = field.options.find((opt) => opt.value === state[key]);
-        payload[key] = option ?? state[key];
-      }
-
-      if (field.type === 'double' && field.fields) {
-        // recursively add each nested field
-        field.fields.forEach((nestedField) => {
-          const key = nestedField.fieldKey;
-          const option = nestedField.options.find((opt) => opt.value === state[key]);
-          payload[key] = option ?? state[key];
-        });
-      }
-    });
-  };
-
-  return (
-    <div className="qsm">
-      <div className="qsm__content">
-        <div className="qsm__tabs">
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-location" height={16} />
-            </span>
-            Multidestination
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-suitcase" height={16} />
-            </span>
-            Packages
-          </button>
-          <button type="button" className="qsm__tab qsm__tab--active">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={14} />
-              +
-              <Icon name="ui-bed" height={14} />
-            </span>
-            Transport + hotel
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-bed" height={16} />
-            </span>
-            Accommodation
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-flight" height={16} />
-            </span>
-            Transports
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ticket" height={16} />
-            </span>
-            Ticket Only
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-car" height={16} />
-            </span>
-            Rent a car
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={16} />
-            </span>
-            Transfers
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ship" height={16} />
-            </span>
-            Cruises
-          </button>
-        </div>
-        <div className="qsm__filter">
-          <div className="radiobutton-group qsm__filter__inputgroup">
-            <div className="radiobutton">
-              <label className="radiobutton__label">
-                <input
-                  type="radio"
-                  name="mainBookerId"
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value=""
-                  // checked={formik.values.mainBookerId === travelerValues.id}
-                  checked={true}
-                  readOnly
-                  className="radiobutton__input"
-                />
-                <span>One accommodation</span>
-              </label>
-            </div>
-            <div className="radiobutton">
-              <label className="radiobutton__label">
-                <input
-                  type="radio"
-                  name="mainBookerId"
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value=""
-                  // checked={formik.values.mainBookerId === travelerValues.id}
-                  className="radiobutton__input"
-                  disabled={true}
-                />
-                <span>Multiple accommodations</span>
-              </label>
-            </div>
-          </div>
-          <div className="qsm__filter__classgroup">
-            <TravelClassPicker />
-            <TravelTypePicker />
-            <TravelNationalityPicker />
-          </div>
-        </div>
-        <div className="qsm__input-group">
-          {searchFields.map((field, idx) => {
-            if (field.type === 'double') {
-              return <DoubleSearchInputGroup key={idx} fieldKey={field.fieldKey} showReverse={field.showReverse} />;
-            }
-            return <SearchInputGroup key={idx} fieldKey={field.fieldKey} />;
-          })}
-
-          <Dates value={dateRange} onChange={handleDateChange} />
-
-          {askTravelers && <TravelInputGroup />}
-
-          <button type="button" className="cta" onClick={handleSubmit}>
-            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
-            <span>{submitLabel}</span>
-          </button>
-        </div>
-      </div>
-      {isMobile && mobileFilterType && <MobileFilterModal />}
-    </div>
-  );
-};
-
-export default QSMContainer;
+import React, { useContext, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { QSMRootState } from '../../store/qsm-store';
+import QSMConfigurationContext from '../../qsm-configuration-context';
+import useMediaQuery from '../../../shared/utils/use-media-query-util';
+import MobileFilterModal from '../mobile-filter-modal';
+import SearchInputGroup from '../search-input-group';
+import DoubleSearchInputGroup from '../double-search-input-group';
+import Dates from '../../../booking-product/components/dates';
+import TravelInputGroup from '../travel-input-group';
+import TravelClassPicker from '../travel-class-picker';
+import TravelTypePicker from '../travel-type-picker';
+import Icon from '../icon';
+import TravelNationalityPicker from '../travel-nationality-picker';
+import { addDays, addMonths } from 'date-fns';
+import { DateRange } from '../../../booking-product/types';
+import { QSMState, setFromDate, setToDate } from '../../store/qsm-slice';
+import { FieldConfig } from '../../types';
+import { getTranslations } from '../../../shared/utils/localization-util';
+
+const QSMContainer: React.FC = () => {
+  const dispatch = useDispatch();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const qsmState = useSelector((state: QSMRootState) => state.qsm);
+  const { mobileFilterType, fromDate, toDate } = qsmState;
+  const { searchFields, askTravelers, submitIcon, onSubmit, travelTypes, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  useEffect(() => {
+    if (fromDate || toDate) return;
+
+    const startDate = addMonths(new Date(), 1);
+    const endDate = addDays(startDate, 7);
+
+    dispatch(setFromDate(startDate.toISOString()));
+    dispatch(setToDate(endDate.toISOString()));
+  }, [fromDate, toDate, dispatch]);
+
+  const dateRange = useMemo<DateRange | undefined>(() => {
+    if (!fromDate || !toDate) return undefined;
+
+    return {
+      fromDate: new Date(fromDate),
+      toDate: new Date(toDate)
+    };
+  }, [fromDate, toDate]);
+
+  const handleDateChange = (value: DateRange) => {
+    dispatch(setFromDate(value.fromDate?.toISOString()));
+    dispatch(setToDate(value.toDate?.toISOString()));
+  };
+
+  const handleSubmit = () => {
+    if (!onSubmit) return;
+
+    const { fromDate, toDate, travelers, selectedTravelClass, selectedTravelType, selectedNationality, adults, kids, babies, rooms, selectedFlexRange } =
+      qsmState;
+
+    const selectedTravelTypeValue = travelTypes.find((t) => t.label === selectedTravelType);
+
+    const payload = {
+      fromDate,
+      toDate,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelTypeValue,
+      nationality: selectedNationality,
+      rooms
+    };
+
+    addSearchFieldsToPayload(payload, searchFields, qsmState);
+    onSubmit(payload);
+  };
+
+  const addSearchFieldsToPayload = (payload: any, fields: FieldConfig[], state: QSMState) => {
+    fields.forEach((field) => {
+      if (field.type === 'single') {
+        const key = field.fieldKey;
+        const option = field.options.find((opt) => opt.value === state[key]);
+        payload[key] = option ?? state[key];
+      }
+
+      if (field.type === 'double' && field.fields) {
+        // recursively add each nested field
+        field.fields.forEach((nestedField) => {
+          const key = nestedField.fieldKey;
+          const option = nestedField.options.find((opt) => opt.value === state[key]);
+          payload[key] = option ?? state[key];
+        });
+      }
+    });
+  };
+
+  return (
+    <div className="qsm">
+      <div className="qsm__content">
+        <div className="qsm__tabs">
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-location" height={16} />
+            </span>
+            {translations.QSM.MULTIDESTINATION}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-suitcase" height={16} />
+            </span>
+            {translations.QSM.PACKAGES}
+          </button>
+          <button type="button" className="qsm__tab qsm__tab--active">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={14} />
+              +
+              <Icon name="ui-bed" height={14} />
+            </span>
+            {translations.QSM.TRANSPORT_HOTEL}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-bed" height={16} />
+            </span>
+            {translations.QSM.ACCOMMODATION}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-flight" height={16} />
+            </span>
+            {translations.QSM.TRANSPORTS}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ticket" height={16} />
+            </span>
+            {translations.QSM.TICKET_ONLY}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-car" height={16} />
+            </span>
+            {translations.QSM.RENT_A_CAR}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={16} />
+            </span>
+            {translations.QSM.TRANSFERS}
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ship" height={16} />
+            </span>
+            {translations.QSM.CRUISES}
+          </button>
+        </div>
+        <div className="qsm__filter">
+          <div className="radiobutton-group qsm__filter__inputgroup">
+            <div className="radiobutton">
+              <label className="radiobutton__label">
+                <input
+                  type="radio"
+                  name="mainBookerId"
+                  // onChange={handleMainBookerChange}
+                  // onBlur={formik.handleBlur}
+                  value=""
+                  // checked={formik.values.mainBookerId === travelerValues.id}
+                  checked={true}
+                  readOnly
+                  className="radiobutton__input"
+                />
+                <span>{translations.QSM.ONE_ACCOMMODATION}</span>
+              </label>
+            </div>
+            <div className="radiobutton">
+              <label className="radiobutton__label">
+                <input
+                  type="radio"
+                  name="mainBookerId"
+                  // onChange={handleMainBookerChange}
+                  // onBlur={formik.handleBlur}
+                  value=""
+                  // checked={formik.values.mainBookerId === travelerValues.id}
+                  className="radiobutton__input"
+                  disabled={true}
+                />
+                <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
+              </label>
+            </div>
+          </div>
+          <div className="qsm__filter__classgroup">
+            <TravelClassPicker />
+            <TravelTypePicker />
+            <TravelNationalityPicker />
+          </div>
+        </div>
+        <div className="qsm__input-group">
+          {searchFields.map((field, idx) => {
+            if (field.type === 'double') {
+              return <DoubleSearchInputGroup key={idx} fieldKey={field.fieldKey} showReverse={field.showReverse} />;
+            }
+            return <SearchInputGroup key={idx} fieldKey={field.fieldKey} />;
+          })}
+
+          <Dates value={dateRange} onChange={handleDateChange} />
+
+          {askTravelers && <TravelInputGroup />}
+
+          <button type="button" className="cta" onClick={handleSubmit}>
+            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
+            <span>{translations.QSM.CONFIRM}</span>
+          </button>
+        </div>
+      </div>
+      {isMobile && mobileFilterType && <MobileFilterModal />}
+    </div>
+  );
+};
+
+export default QSMContainer;

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -15,9 +15,11 @@ import TravelInput from '../travel-input';
 import { format } from 'date-fns';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import { TypeaheadOption } from '../../types';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const MobileFilterModal: React.FC = () => {
-  const { datesIcon } = useContext(QSMConfigurationContext);
+  const { datesIcon, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const dispatch = useDispatch();
   const { mobileFilterType, mobileDatePickerMode, activeSearchFieldProps, fromDate, toDate } = useSelector((state: QSMRootState) => state.qsm);
 
@@ -103,7 +105,7 @@ const MobileFilterModal: React.FC = () => {
         {/* header */}
         <div className="mobile-qsm-filter__modal-header">
           <div className="mobile-qsm-filter__modal-header-row">
-            <span className="mobile-qsm-filter__modal-header-title">Kies data</span>
+            <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.CHOOSE_DATES}</span>
             <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
           </div>
         </div>
@@ -114,12 +116,12 @@ const MobileFilterModal: React.FC = () => {
           <div className="qsm__double-input__wrapper">
             <label className="qsm__input-wrapper">
               {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-              <span className="qsm__label">Vertrek</span>
+              <span className="qsm__label">{translations.QSM.DEPARTURE_DATE}</span>
               <input
                 type="text"
                 id="vertrek"
                 className="qsm__input u-ps-2"
-                placeholder="Datum"
+                placeholder={translations.QSM.DEPARTURE_DATE}
                 readOnly
                 value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''}
               />
@@ -130,12 +132,12 @@ const MobileFilterModal: React.FC = () => {
             {mobileDatePickerMode === 'range' && (
               <label className="qsm__input-wrapper">
                 {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-                <span className="qsm__label qsm__label--second-input-label">Retour</span>
+                <span className="qsm__label qsm__label--second-input-label">{translations.QSM.RETURN_DATE}</span>
                 <input
                   type="text"
                   id="retour"
                   className="qsm__input"
-                  placeholder="Datum"
+                  placeholder={translations.QSM.RETURN_DATE}
                   readOnly
                   value={toDate ? format(new Date(toDate), 'dd/MM/yyyy') : ''}
                 />
@@ -171,7 +173,7 @@ const MobileFilterModal: React.FC = () => {
                 closeModal();
               }
             }}>
-            Bevestigen
+            {translations.QSM.CONFIRM}
           </button>
         </div>
       </div>
@@ -215,7 +217,7 @@ const MobileFilterModal: React.FC = () => {
         </div>
         <div className="mobile-qsm-filter__modal-footer">
           <button className="cta" onClick={closeModal}>
-            Bevestigen
+            {translations.QSM.CONFIRM}
           </button>
         </div>
         {/* </div> */}
@@ -236,7 +238,7 @@ const MobileFilterModal: React.FC = () => {
       {/* header */}
       <div className="mobile-qsm-filter__modal-header">
         <div className="mobile-qsm-filter__modal-header-row">
-          <span className="mobile-qsm-filter__modal-header-title">Reizigers</span>
+          <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.TRAVELERS}</span>
           <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
         </div>
       </div>
@@ -249,7 +251,7 @@ const MobileFilterModal: React.FC = () => {
 
       <div className="mobile-qsm-filter__modal-footer">
         <button className="cta" onClick={closeModal}>
-          Bevestigen
+          {translations.QSM.CONFIRM}
         </button>
       </div>
     </div>