@qite/tide-booking-component 1.4.34 → 1.4.35

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: ''
 });
 

package/src/qsm/types.ts

@@ -52,7 +52,6 @@ export interface QSMConfiguration {
   maxInfantAge?: number;
 
   onSubmit: (data: any) => void;
-  submitLabel: string;
   submitIcon: ReactNode;
 
   nationalities: Nationality[];

package/src/search-results/components/filters/filters.tsx

@@ -6,11 +6,12 @@ import { resetFilters, setFilters } from '../../store/search-results-slice';
 import { useDispatch } from 'react-redux';
 import Spinner from '../spinner/spinner';
 import Icon from '../icon';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 interface FiltersProps {
   filters: Filter[];
-  isMobileFiltersOpen: boolean;
-  handleSetIsMobileFiltersOpen: () => void;
+  isOpen: boolean;
+  handleSetIsOpen: () => void;
   handleApplyFilters: () => void;
   isLoading?: boolean;
 }
@@ -88,8 +89,9 @@ const initialFilters: Filter[] = [
   }
 ] as Filter[];
 
-const Filters: React.FC<FiltersProps> = ({ filters, isMobileFiltersOpen, handleSetIsMobileFiltersOpen, handleApplyFilters, isLoading }) => {
+const Filters: React.FC<FiltersProps> = ({ filters, isOpen, handleSetIsOpen, handleApplyFilters, isLoading }) => {
   const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
   const [pendingFilters, setPendingFilters] = useState<Filter[]>([]);
   useEffect(() => {
@@ -175,8 +177,8 @@ const Filters: React.FC<FiltersProps> = ({ filters, isMobileFiltersOpen, handleS
     context?.onFilterChange?.(pendingFilters);
     handleApplyFilters();
 
-    if (isMobileFiltersOpen) {
-      handleSetIsMobileFiltersOpen();
+    if (isOpen) {
+      handleSetIsOpen();
     }
   };
 
@@ -204,22 +206,19 @@ const Filters: React.FC<FiltersProps> = ({ filters, isMobileFiltersOpen, handleS
       {/* ---------------- Filters ---------------- */}
 
       {/* ---------------- Filters desktop ---------------- */}
-      <div className={`search__filters--modal ${isMobileFiltersOpen ? 'is-open' : ''}`}>
-        <div className="search__filters--background" onClick={() => handleSetIsMobileFiltersOpen()}></div>
-        <button className="search__filters--close" onClick={() => handleSetIsMobileFiltersOpen()}>
+      <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
+        <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
+        <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
           <Icon name="ui-close" height={24} />
         </button>
         <div className="search__filters">
           <div className="search__filter-row search__filter__header">
             <div className="search__filter-row-flex-title">
-              <p className="search__filter-small-title">
-                {/*  */}
-                Your trip summary
-              </p>
+              <p className="search__filter-small-title">{translations.SRP.FILTERS}</p>
             </div>
             {!isLoading && (
               <a className="search__filter-reset" onClick={() => handleFullReset()}>
-                {context.translations?.resetButton}
+                {translations.SRP.RESET}
               </a>
             )}
             {/* <Icon name="ui-info" height={16} /> */}
@@ -366,13 +365,13 @@ const Filters: React.FC<FiltersProps> = ({ filters, isMobileFiltersOpen, handleS
                       className="cta--secondary "
                       onClick={() => {
                         handleResetPendingChanges();
-                        handleSetIsMobileFiltersOpen();
+                        handleSetIsOpen();
                       }}
                       disabled={isLoading}>
-                      {context.translations?.cancel}
+                      {translations.SRP.CANCEL}
                     </button>
                     <button className="cta" onClick={() => applyFilters()} disabled={isLoading}>
-                      {context.translations?.apply}
+                      {translations.SRP.APPLY}
                     </button>
                   </div>
                 )}