@qite/tide-booking-component 1.4.33 → 1.4.35

package/src/qsm/types.ts

@@ -1,145 +1,144 @@
-import { ReactNode } from 'react';
-
-export interface QSMConfiguration {
-  // Type specification and dedicated parameters
-  type: 'hotel' | 'roundTrip' | 'flight';
-  askRooms?: boolean; // hotel || roundTrip
-  askTravelType?: boolean; // hotel || roundTrip
-  allowOpenJaw?: boolean; // flight
-  allowMultiCity?: boolean; // flight
-  askTravelClass?: boolean; // flight
-  allowOneWay?: boolean; // flight
-  additionalFilters?: AdditionalFilters; // flight
-  askTravelers: boolean;
-
-  // Fields (form)
-  searchFields: FieldConfig[];
-
-  // Origins and destinations
-  origins: Origin[];
-  originTypeAhead: boolean;
-  onOriginChange: (origin: string) => void;
-  destinations: Destination[];
-  destinationTypeAhead: boolean;
-  destinationIcon: ReactNode;
-  onDestinationChange: (destination: string) => void;
-
-  // Airports
-  airports: Airport[];
-  airportTypeAhead: boolean;
-  airportIcon: ReactNode;
-  onAirportChange: (airport: string) => void;
-
-  // Travel types
-  travelTypes: TravelType[];
-  travelTypeIcon: ReactNode;
-
-  // Travel classes
-  travelClasses: TravelClass[];
-  travelClassIcon: ReactNode;
-
-  // Date flexibility
-  dateFlexibility?: DateFlexibility[];
-  minDate?: Date;
-  maxDate?: Date;
-  showReturnDate: boolean;
-  datesIcon: ReactNode;
-
-  // Travelers
-  defaultTravelers?: number;
-  maxTravelers?: number;
-  maxChildAge?: number;
-  maxInfantAge?: number;
-
-  onSubmit: (data: any) => void;
-  submitLabel: string;
-  submitIcon: ReactNode;
-
-  nationalities: Nationality[];
-  languageCode?: string;
-}
-
-export interface BaseFieldConfig {
-  fieldKey: string;
-  label: string;
-  placeholder: string;
-  options: TypeaheadOption[];
-  autoComplete?: boolean;
-}
-
-export interface TypeaheadOption {
-  key: string;
-  value: string;
-  iataCode?: string;
-  country?: string;
-  type: OptionType;
-}
-
-export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
-
-export interface SingleFieldConfig extends BaseFieldConfig {
-  type: 'single';
-}
-
-export interface DoubleFieldConfig {
-  type: 'double';
-  fieldKey: string;
-  showReverse?: boolean;
-  fields: BaseFieldConfig[];
-}
-
-export type FieldConfig = SingleFieldConfig | DoubleFieldConfig;
-
-export interface AdditionalFilters {
-  showDirectFlights: boolean;
-  includeLuggage: boolean;
-}
-
-export interface Origin {
-  key: string;
-  value: string;
-}
-
-export interface Destination {
-  key: string;
-  value: string;
-}
-
-export interface Airport {
-  key: string;
-  value: string;
-}
-
-export interface DateFlexibility {
-  name: string;
-  before: number;
-  after: number;
-}
-
-export type MobileFilterType = 'search' | 'date' | 'traveler' | null;
-
-export type TravelerType = 'adults' | 'kids' | 'babies';
-
-export interface Room {
-  adults: number;
-  kids: number;
-  babies: number;
-}
-
-export interface TravelType {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface TravelClass {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface Nationality {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export interface QSMConfiguration {
+  // Type specification and dedicated parameters
+  type: 'hotel' | 'roundTrip' | 'flight';
+  askRooms?: boolean; // hotel || roundTrip
+  askTravelType?: boolean; // hotel || roundTrip
+  allowOpenJaw?: boolean; // flight
+  allowMultiCity?: boolean; // flight
+  askTravelClass?: boolean; // flight
+  allowOneWay?: boolean; // flight
+  additionalFilters?: AdditionalFilters; // flight
+  askTravelers: boolean;
+
+  // Fields (form)
+  searchFields: FieldConfig[];
+
+  // Origins and destinations
+  origins: Origin[];
+  originTypeAhead: boolean;
+  onOriginChange: (origin: string) => void;
+  destinations: Destination[];
+  destinationTypeAhead: boolean;
+  destinationIcon: ReactNode;
+  onDestinationChange: (destination: string) => void;
+
+  // Airports
+  airports: Airport[];
+  airportTypeAhead: boolean;
+  airportIcon: ReactNode;
+  onAirportChange: (airport: string) => void;
+
+  // Travel types
+  travelTypes: TravelType[];
+  travelTypeIcon: ReactNode;
+
+  // Travel classes
+  travelClasses: TravelClass[];
+  travelClassIcon: ReactNode;
+
+  // Date flexibility
+  dateFlexibility?: DateFlexibility[];
+  minDate?: Date;
+  maxDate?: Date;
+  showReturnDate: boolean;
+  datesIcon: ReactNode;
+
+  // Travelers
+  defaultTravelers?: number;
+  maxTravelers?: number;
+  maxChildAge?: number;
+  maxInfantAge?: number;
+
+  onSubmit: (data: any) => void;
+  submitIcon: ReactNode;
+
+  nationalities: Nationality[];
+  languageCode?: string;
+}
+
+export interface BaseFieldConfig {
+  fieldKey: string;
+  label: string;
+  placeholder: string;
+  options: TypeaheadOption[];
+  autoComplete?: boolean;
+}
+
+export interface TypeaheadOption {
+  key: string;
+  value: string;
+  iataCode?: string;
+  country?: string;
+  type: OptionType;
+}
+
+export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
+
+export interface SingleFieldConfig extends BaseFieldConfig {
+  type: 'single';
+}
+
+export interface DoubleFieldConfig {
+  type: 'double';
+  fieldKey: string;
+  showReverse?: boolean;
+  fields: BaseFieldConfig[];
+}
+
+export type FieldConfig = SingleFieldConfig | DoubleFieldConfig;
+
+export interface AdditionalFilters {
+  showDirectFlights: boolean;
+  includeLuggage: boolean;
+}
+
+export interface Origin {
+  key: string;
+  value: string;
+}
+
+export interface Destination {
+  key: string;
+  value: string;
+}
+
+export interface Airport {
+  key: string;
+  value: string;
+}
+
+export interface DateFlexibility {
+  name: string;
+  before: number;
+  after: number;
+}
+
+export type MobileFilterType = 'search' | 'date' | 'traveler' | null;
+
+export type TravelerType = 'adults' | 'kids' | 'babies';
+
+export interface Room {
+  adults: number;
+  kids: number;
+  babies: number;
+}
+
+export interface TravelType {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface TravelClass {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface Nationality {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}

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>
                 )}