@qite/tide-booking-component 1.4.33 → 1.4.35

package/src/qsm/components/travel-class-picker/index.tsx

@@ -4,17 +4,19 @@ import { QSMRootState } from '../../store/qsm-store';
 import { setSelectedTravelClass } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import ItemPicker from '../item-picker';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelClassPicker: React.FC = () => {
-  const { travelClasses } = useContext(QSMConfigurationContext);
+  const { travelClasses, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedTravelClass } = useSelector((state: QSMRootState) => state.qsm);
 
   return (
     <ItemPicker
       items={travelClasses}
       selection={selectedTravelClass}
-      label="Reisklasse"
-      placeholder="Selecteer reisklasse"
+      label={translations.QSM.TRAVEL_CLASS_LABEL}
+      placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
       classModifier="travel-class-picker__items"
       onPick={setSelectedTravelClass}
     />

package/src/qsm/components/travel-input/index.tsx

@@ -3,16 +3,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { QSMRootState } from '../../store/qsm-store';
 import { setAdults, setKids, setBabies, setRooms, addRoom, removeRoom, updateRoomTraveler } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
+import { getTranslations } from '../../../shared/utils/localization-util';
 import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
 
 const TravelInput: React.FC = () => {
-  const { type, askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass } = useContext(QSMConfigurationContext);
+  const { type, askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
+    useContext(QSMConfigurationContext);
   const areTravelersInRooms = type !== 'flight' && askRooms;
 
   const dispatch = useDispatch();
   const { adults, kids, babies, rooms } = useSelector((state: QSMRootState) => state.qsm);
+  const translations = getTranslations(languageCode ?? 'en-GB');
 
   const getTravelerButtonClass = (disabled: boolean) => `button button--increment ${disabled ? 'button--disabled' : ''}`;
 
@@ -67,9 +70,9 @@ const TravelInput: React.FC = () => {
 
   // Compute age labels dynamically
   const ageLabels = {
-    adults: maxChildAge ? `${maxChildAge + 1}+ jaar` : '12+ jaar',
-    kids: maxChildAge && maxInfantAge ? `${maxInfantAge + 1}-${maxChildAge} jaar` : '2-11 jaar',
-    babies: maxInfantAge !== undefined ? `0-${maxInfantAge} jaar` : '0-1 jaar'
+    adults: maxChildAge ? `${maxChildAge + 1}+ ${translations.PRODUCT.YEAR}` : `12+ ${translations.PRODUCT.YEAR}`,
+    kids: maxChildAge && maxInfantAge ? `${maxInfantAge + 1}-${maxChildAge} ${translations.PRODUCT.YEAR}` : `2-11 ${translations.PRODUCT.YEAR}`,
+    babies: maxInfantAge !== undefined ? `0-${maxInfantAge} ${translations.PRODUCT.YEAR}` : `0-1 ${translations.PRODUCT.YEAR}`
   };
 
   return (
@@ -78,7 +81,7 @@ const TravelInput: React.FC = () => {
         <div>
           <div className="passenger-picker__rooms-header">
             <h4 className="passenger-picker__rooms-header-title">
-              Kamers: <span className="passenger-picker__rooms-header-count">{rooms.length}</span>
+              {translations.SHARED.ROOMS}: <span className="passenger-picker__rooms-header-count">{rooms.length}</span>
             </h4>
             {rooms.length < 4 && (
               <div
@@ -88,7 +91,7 @@ const TravelInput: React.FC = () => {
                     handleAddRoom();
                   }
                 }}>
-                Kamer toevoegen
+                {translations.QSM.ADD_ROOM}
               </div>
             )}
           </div>
@@ -129,7 +132,7 @@ const TravelInput: React.FC = () => {
                 {rooms.length > 1 && (
                   <div className="passenger-picker__remove-room">
                     <button type="button" className="cta--remove" onClick={() => handleRemoveRoom(idx)}>
-                      Verwijder kamer
+                      {translations.QSM.REMOVE_ROOM}
                     </button>
                   </div>
                 )}
@@ -143,7 +146,7 @@ const TravelInput: React.FC = () => {
                         transform="translate(-96 864)"
                       />
                     </svg>
-                    <span className="passenger-picker__info-message-explanation">Je zit aan het maximale aantal personen</span>
+                    <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
                   </div>
                 )}
 
@@ -158,7 +161,7 @@ const TravelInput: React.FC = () => {
             {/* Adults */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Volwassenen</span>
+                <span>{translations.QSM.ADULTS}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.adults}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -177,7 +180,7 @@ const TravelInput: React.FC = () => {
             {/* Children */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Kinderen</span>
+                <span>{translations.QSM.CHILDREN}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.kids}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -194,7 +197,7 @@ const TravelInput: React.FC = () => {
             {/* Babies */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Baby&squot;s</span>
+                <span>{translations.QSM.BABIES}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.babies}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -220,7 +223,7 @@ const TravelInput: React.FC = () => {
                   transform="translate(-96 864)"
                 />
               </svg>
-              <span className="passenger-picker__info-message-explanation">Je zit aan het maximale aantal personen</span>
+              <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
             </div>
           )}
 

package/src/qsm/components/travel-input-group/index.tsx

@@ -6,6 +6,7 @@ import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import { QSMRootState } from '../../store/qsm-store';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import Icon from '../icon';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const selectTravelerSummary = (state: QSMRootState, areTravelersInRooms: boolean | undefined) => {
   const { adults, kids, babies, rooms, selectedTravelType } = state.qsm;
@@ -29,7 +30,9 @@ const TravelInputGroup: React.FC = () => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const [isOpen, setIsOpen] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { type, askRooms, defaultTravelers, maxTravelers } = useContext(QSMConfigurationContext);
+  const { type, askRooms, defaultTravelers, maxTravelers, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
   const areTravelersInRooms = type !== 'flight' && askRooms;
 
   const { adults, rooms } = useSelector((s: QSMRootState) => s.qsm);
@@ -86,8 +89,16 @@ const TravelInputGroup: React.FC = () => {
     <div ref={wrapperRef} className="qsm__single-input-wrapper qsm__single-input-wrapper--travel">
       <Icon name="ui-user" height={16} />
 
-      <span className="qsm__label">Met wie ga je?</span>
-      <input type="text" id="traveler" className="qsm__input u-ps-2" placeholder="Met wie ga je?" readOnly onClick={handleClick} value={travelerSummary} />
+      <span className="qsm__label">{translations.QSM.TRAVELERS_LABEL}</span>
+      <input
+        type="text"
+        id="traveler"
+        className="qsm__input u-ps-2"
+        placeholder={translations.QSM.TRAVELERS_LABEL}
+        readOnly
+        onClick={handleClick}
+        value={travelerSummary}
+      />
 
       {!isSmallScreen && isOpen && (
         <div>

package/src/qsm/components/travel-nationality-picker/index.tsx

@@ -4,17 +4,19 @@ import { QSMRootState } from '../../store/qsm-store';
 import { setSelectedNationality } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import ItemPicker from '../item-picker';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelNationalityPicker: React.FC = () => {
-  const { nationalities } = useContext(QSMConfigurationContext);
+  const { nationalities, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedNationality } = useSelector((state: QSMRootState) => state.qsm);
 
   return (
     <ItemPicker
       items={nationalities}
       selection={selectedNationality}
-      label="Nationaliteit"
-      placeholder="Selecteer nationaliteit"
+      label={translations.QSM.NATIONALITY_LABEL}
+      placeholder={translations.QSM.NATIONALITY_PLACEHOLDER}
       classModifier="travel-class-picker__items"
       onPick={setSelectedNationality}
     />

package/src/qsm/components/travel-type-picker/index.tsx

@@ -4,17 +4,19 @@ import { QSMRootState } from '../../store/qsm-store';
 import { setSelectedTravelType } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import ItemPicker from '../item-picker';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelTypePicker: React.FC = () => {
-  const { travelTypes } = useContext(QSMConfigurationContext);
+  const { travelTypes, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedTravelType } = useSelector((state: QSMRootState) => state.qsm);
 
   return (
     <ItemPicker
       items={travelTypes}
       selection={selectedTravelType}
-      label="Reistype"
-      placeholder="Selecteer reistype"
+      label={translations.QSM.TRAVEL_TYPE_LABEL}
+      placeholder={translations.QSM.TRAVEL_TYPE_PLACEHOLDER}
       classModifier="travel-type-picker__items"
       onPick={setSelectedTravelType}
     />

package/src/qsm/qsm-configuration-context.ts

@@ -34,7 +34,6 @@ const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   datesIcon: '',
 
   onSubmit: () => {},
-  submitLabel: 'Zoeken',
   submitIcon: ''
 });