@qite/tide-booking-component 1.4.93 → 1.4.95

package/src/qsm/index.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import QSMConfigurationContext from './qsm-configuration-context';
-import { QSMConfiguration } from './types';
-import QSMContainer from './components/QSMContainer/qsm-container';
-import { createQSMStore } from './store/qsm-store';
-
-interface QSMProps {
-  configuration: QSMConfiguration;
-}
-
-const QSM: React.FC<QSMProps> = ({ configuration }) => {
-  const store = React.useMemo(() => createQSMStore(), []);
-
-  return (
-    <div id="booking-qsm">
-      <Provider store={store}>
-        <QSMConfigurationContext.Provider value={configuration}>
-          <QSMContainer />
-        </QSMConfigurationContext.Provider>
-      </Provider>
-    </div>
-  );
-};
-
-export default QSM;
+import React from 'react';
+import { Provider } from 'react-redux';
+import QSMConfigurationContext from './qsm-configuration-context';
+import { QSMConfiguration } from './types';
+import QSMContainer from './components/QSMContainer/qsm-container';
+import { createQSMStore } from './store/qsm-store';
+
+interface QSMProps {
+  configuration: QSMConfiguration;
+}
+
+const QSM: React.FC<QSMProps> = ({ configuration }) => {
+  const store = React.useMemo(() => createQSMStore(), []);
+
+  return (
+    <div id="booking-qsm">
+      <Provider store={store}>
+        <QSMConfigurationContext.Provider value={configuration}>
+          <QSMContainer />
+        </QSMConfigurationContext.Provider>
+      </Provider>
+    </div>
+  );
+};
+
+export default QSM;

package/src/qsm/store/qsm-store.ts

@@ -1,13 +1,13 @@
-import { configureStore } from '@reduxjs/toolkit';
-import qsmReducer from './qsm-slice';
-
-export const createQSMStore = () =>
-  configureStore({
-    reducer: {
-      qsm: qsmReducer
-    }
-  });
-
-export type QSMStore = ReturnType<typeof createQSMStore>;
-export type QSMRootState = ReturnType<QSMStore['getState']>;
-export type QSMDispatch = QSMStore['dispatch'];
+import { configureStore } from '@reduxjs/toolkit';
+import qsmReducer from './qsm-slice';
+
+export const createQSMStore = () =>
+  configureStore({
+    reducer: {
+      qsm: qsmReducer
+    }
+  });
+
+export type QSMStore = ReturnType<typeof createQSMStore>;
+export type QSMRootState = ReturnType<QSMStore['getState']>;
+export type QSMDispatch = QSMStore['dispatch'];

package/src/search-results/components/flight/flight-card.tsx

@@ -1,38 +1,38 @@
-import React, { useContext } from 'react';
-import { FlightResult } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import FlightLegComponent from './flight-leg';
-
-interface FlightCardProps {
-  result: FlightResult;
-}
-
-const FlightCard: React.FC<FlightCardProps> = ({ result }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  return (
-    <div className="search__result search__result--flight">
-      {/* -------------------- flightcard -------------------- */}
-      <div className="search__flight-card">
-        {/* outbound part */}
-        <FlightLegComponent leg={result.outbound} />
-
-        {/* return part */}
-        <FlightLegComponent leg={result.return} />
-      </div>
-
-      {/* -------------------- pricecard -------------------- */}
-      <div className="search__price-card">
-        <div className="search__price-card-price-wrapper">
-          <p className="search__price-card-price">{result.price}</p>
-        </div>
-        <div>
-          <button className="search__price-card-button" onClick={() => console.log('clicked result with ID:', result.id)}>
-            {result.ctaText}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FlightCard;
+import React, { useContext } from 'react';
+import { FlightResult } from '../../types';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import FlightLegComponent from './flight-leg';
+
+interface FlightCardProps {
+  result: FlightResult;
+}
+
+const FlightCard: React.FC<FlightCardProps> = ({ result }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  return (
+    <div className="search__result search__result--flight">
+      {/* -------------------- flightcard -------------------- */}
+      <div className="search__flight-card">
+        {/* outbound part */}
+        <FlightLegComponent leg={result.outbound} />
+
+        {/* return part */}
+        <FlightLegComponent leg={result.return} />
+      </div>
+
+      {/* -------------------- pricecard -------------------- */}
+      <div className="search__price-card">
+        <div className="search__price-card-price-wrapper">
+          <p className="search__price-card-price">{result.price}</p>
+        </div>
+        <div>
+          <button className="search__price-card-button" onClick={() => console.log('clicked result with ID:', result.id)}>
+            {result.ctaText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlightCard;

package/src/search-results/components/flight/flight-leg.tsx

@@ -1,61 +1,61 @@
-import React from 'react';
-import { FlightLeg } from '../../types';
-import { formatDate, formatTime } from '../../../shared/utils/localization-util';
-import FlightPath from './flight-path';
-import FlightBannerComponent from './flight-banner';
-
-interface FlightLegProps {
-  leg: FlightLeg;
-}
-
-const FlightLegComponent: React.FC<FlightLegProps> = ({ leg }) => {
-  return leg ? (
-    <div className="search__flight-card-content-top">
-      <div className="search__flight-card-content">
-        <div className="search__flight-card-content-start">
-          <div className="search__flight-card-content-start-time">
-            <svg className="search__flight-card-content-icon" id="search-flightLeg-plane-depart-icon" viewBox="0 0 11.477 9.98" width={11.48} height={9.98}>
-              <path
-                id="connecting_airports_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                d="M106.978-871.035l-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
-                transform="translate(111.967 -871.035) rotate(180)"
-                fill="#57abb2"
-              />
-            </svg>
-            <h5>{formatTime(leg.departureDateTime)}</h5>
-          </div>
-          <p className="search__flight-card-content-start-destination">{leg.departureAirport}</p>
-          <p className="search__flight-card-content-start-date">{formatDate(leg.departureDateTime)}</p>
-        </div>
-
-        <div className="search__flight-card-content-stops">
-          <p className="search__flight-card-content-stops-info-hour">{leg.duration}</p>
-          <FlightPath stops={leg.stops} />
-          <div className="search__flight-card-content-stops-info">
-            <svg className="search__flight-card-content-icon" id="search-flightLeg-stop-icon" viewBox="0 0 14.969 10.978" width={14.97} height={10.98}>
-              <path
-                id="airline_stops_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                d="M101.738-733.022v-1.5h1.5a5.842,5.842,0,0,0-2.162-4.647A7.583,7.583,0,0,0,96-741.006v-1.5a9.357,9.357,0,0,1,4.709,1.237,7.929,7.929,0,0,1,3.275,3.5,8.25,8.25,0,0,1,2-2.692A20.272,20.272,0,0,1,108.7-742.5h-3.223V-744h5.489v5.489h-1.5v-2.724a13.531,13.531,0,0,0-3.327,2.838,5.83,5.83,0,0,0-1.414,3.878h1.5v1.5Z"
-                transform="translate(-96 744)"
-                fill="#57abb2"
-              />
-            </svg>
-            <p className="search__flight-card-content-stops-info-text">
-              {leg.stops} stop{leg.stops !== 1 ? 's' : ''}
-            </p>
-          </div>
-        </div>
-
-        <div className="search__flight-card-content-end">
-          <h5 className="search__flight-card-content-end-time">{formatTime(leg.arrivalDateTime)}</h5>
-          <p className="search__flight-card-content-end-destination">{leg.arrivalAirport}</p>
-          <p className="search__flight-card-content-end-date">{formatDate(leg.arrivalDateTime)}</p>
-        </div>
-      </div>
-
-      <FlightBannerComponent tag={leg.airline} luggageIncluded={leg.luggageIncluded} />
-    </div>
-  ) : null;
-};
-
-export default FlightLegComponent;
+import React from 'react';
+import { FlightLeg } from '../../types';
+import { formatDate, formatTime } from '../../../shared/utils/localization-util';
+import FlightPath from './flight-path';
+import FlightBannerComponent from './flight-banner';
+
+interface FlightLegProps {
+  leg: FlightLeg;
+}
+
+const FlightLegComponent: React.FC<FlightLegProps> = ({ leg }) => {
+  return leg ? (
+    <div className="search__flight-card-content-top">
+      <div className="search__flight-card-content">
+        <div className="search__flight-card-content-start">
+          <div className="search__flight-card-content-start-time">
+            <svg className="search__flight-card-content-icon" id="search-flightLeg-plane-depart-icon" viewBox="0 0 11.477 9.98" width={11.48} height={9.98}>
+              <path
+                id="connecting_airports_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
+                d="M106.978-871.035l-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
+                transform="translate(111.967 -871.035) rotate(180)"
+                fill="#57abb2"
+              />
+            </svg>
+            <h5>{formatTime(leg.departureDateTime)}</h5>
+          </div>
+          <p className="search__flight-card-content-start-destination">{leg.departureAirport}</p>
+          <p className="search__flight-card-content-start-date">{formatDate(leg.departureDateTime)}</p>
+        </div>
+
+        <div className="search__flight-card-content-stops">
+          <p className="search__flight-card-content-stops-info-hour">{leg.duration}</p>
+          <FlightPath stops={leg.stops} />
+          <div className="search__flight-card-content-stops-info">
+            <svg className="search__flight-card-content-icon" id="search-flightLeg-stop-icon" viewBox="0 0 14.969 10.978" width={14.97} height={10.98}>
+              <path
+                id="airline_stops_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
+                d="M101.738-733.022v-1.5h1.5a5.842,5.842,0,0,0-2.162-4.647A7.583,7.583,0,0,0,96-741.006v-1.5a9.357,9.357,0,0,1,4.709,1.237,7.929,7.929,0,0,1,3.275,3.5,8.25,8.25,0,0,1,2-2.692A20.272,20.272,0,0,1,108.7-742.5h-3.223V-744h5.489v5.489h-1.5v-2.724a13.531,13.531,0,0,0-3.327,2.838,5.83,5.83,0,0,0-1.414,3.878h1.5v1.5Z"
+                transform="translate(-96 744)"
+                fill="#57abb2"
+              />
+            </svg>
+            <p className="search__flight-card-content-stops-info-text">
+              {leg.stops} stop{leg.stops !== 1 ? 's' : ''}
+            </p>
+          </div>
+        </div>
+
+        <div className="search__flight-card-content-end">
+          <h5 className="search__flight-card-content-end-time">{formatTime(leg.arrivalDateTime)}</h5>
+          <p className="search__flight-card-content-end-destination">{leg.arrivalAirport}</p>
+          <p className="search__flight-card-content-end-date">{formatDate(leg.arrivalDateTime)}</p>
+        </div>
+      </div>
+
+      <FlightBannerComponent tag={leg.airline} luggageIncluded={leg.luggageIncluded} />
+    </div>
+  ) : null;
+};
+
+export default FlightLegComponent;

package/src/search-results/components/flight/flight-path.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-
-interface FlightPathProps {
-  stops?: number;
-}
-
-const FlightPath: React.FC<FlightPathProps> = ({ stops = 0 }) => {
-  return (
-    <div className="flight-path">
-      <div className="flight-path__point flight-path__point--start"></div>
-
-      <div className="flight-path__line">
-        {Array.from({ length: stops }, (_, index) => (
-          <div key={index} className="flight-path__stop"></div>
-        ))}
-      </div>
-
-      <div className="flight-path__point flight-path__point--end"></div>
-    </div>
-  );
-};
-
-export default FlightPath;
+import React from 'react';
+
+interface FlightPathProps {
+  stops?: number;
+}
+
+const FlightPath: React.FC<FlightPathProps> = ({ stops = 0 }) => {
+  return (
+    <div className="flight-path">
+      <div className="flight-path__point flight-path__point--start"></div>
+
+      <div className="flight-path__line">
+        {Array.from({ length: stops }, (_, index) => (
+          <div key={index} className="flight-path__stop"></div>
+        ))}
+      </div>
+
+      <div className="flight-path__point flight-path__point--end"></div>
+    </div>
+  );
+};
+
+export default FlightPath;

package/src/search-results/components/multi-range-filter.tsx

@@ -1,104 +1,104 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(selectedMin ?? min);
-  const [maxVal, setMaxVal] = useState(selectedMax ?? max);
-  const minGap = 5;
-
-  // Sync internal state with external selectedMin/selectedMax changes
-  useEffect(() => {
-    setMinVal(selectedMin ?? min);
-    setMaxVal(selectedMax ?? max);
-  }, [min, max, selectedMin, selectedMax]);
-
-  // Recalculate slider track whenever values change
-  useEffect(() => {
-    const range = max - min || 1;
-    const minPercent = ((minVal - min) / range) * 100;
-    const maxPercent = ((maxVal - min) / range) * 100;
-
-    setLeftPercentage(minPercent);
-    setRightPercentage(100 - maxPercent);
-  }, [minVal, maxVal, min, max]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value <= maxVal - minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value >= minVal + minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    // Notify parent with the final values
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        {/* Show currently selected range */}
-        <div className="min-box">{valueFormatter(minVal)}</div>
-        <div className="max-box">{valueFormatter(maxVal)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: `${leftPercentage}%`, right: `${rightPercentage}%` }} />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;
+import React, { ChangeEvent, useEffect, useState } from 'react';
+
+interface MultiRangeFilterProps {
+  min: number;
+  max: number;
+  selectedMin: number;
+  selectedMax: number;
+  valueFormatter: (value: number) => string;
+  onChange: (min: number, max: number) => void;
+}
+
+const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftPercentage, setLeftPercentage] = useState<number>(0);
+  const [rightPercentage, setRightPercentage] = useState<number>(0);
+  const [minVal, setMinVal] = useState(selectedMin ?? min);
+  const [maxVal, setMaxVal] = useState(selectedMax ?? max);
+  const minGap = 5;
+
+  // Sync internal state with external selectedMin/selectedMax changes
+  useEffect(() => {
+    setMinVal(selectedMin ?? min);
+    setMaxVal(selectedMax ?? max);
+  }, [min, max, selectedMin, selectedMax]);
+
+  // Recalculate slider track whenever values change
+  useEffect(() => {
+    const range = max - min || 1;
+    const minPercent = ((minVal - min) / range) * 100;
+    const maxPercent = ((maxVal - min) / range) * 100;
+
+    setLeftPercentage(minPercent);
+    setRightPercentage(100 - maxPercent);
+  }, [minVal, maxVal, min, max]);
+
+  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value <= maxVal - minGap) {
+      setMinVal(value);
+    }
+  };
+
+  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value >= minVal + minGap) {
+      setMaxVal(value);
+    }
+  };
+
+  const startDrag = () => {
+    setIsDragging(true);
+  };
+
+  const stopDrag = () => {
+    setIsDragging(false);
+    // Notify parent with the final values
+    onChange(minVal, maxVal);
+  };
+
+  return (
+    <div className="double-slider-box">
+      <div className="input-box">
+        {/* Show currently selected range */}
+        <div className="min-box">{valueFormatter(minVal)}</div>
+        <div className="max-box">{valueFormatter(maxVal)}</div>
+      </div>
+      <div className="range-slider">
+        <div className="slider-track" style={{ left: `${leftPercentage}%`, right: `${rightPercentage}%` }} />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={minVal}
+          onChange={slideMin}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="min-val"
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={maxVal}
+          onChange={slideMax}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="max-val"
+        />
+        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
+        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeFilter;

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

@@ -151,6 +151,7 @@ const SearchResultsContainer: React.FC = () => {
 
     var searchRequest = {
       officeId: 1,
+      agentId: context?.agentId,
       payload: {
         catalogueIds: context!.tideConnection.catalogueIds ?? [],
         serviceType:
@@ -228,6 +229,7 @@ const SearchResultsContainer: React.FC = () => {
 
     var searchRequest = {
       officeId: 1,
+      agentId: context?.agentId,
       payload: {
         catalogueIds: context!.tideConnection.catalogueIds ?? [],
         serviceType:
@@ -474,8 +476,6 @@ const SearchResultsContainer: React.FC = () => {
 
           searchRequest = rq;
         }
-
-        searchRequest.agentId = context.agentId;
         const packageSearchResults = await search(config, searchRequest);
 
         console.log('Search results', packageSearchResults);

package/src/search-results/index.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import SearchResultsConfigurationContext from './search-results-configuration-context';
-import { SearchResultsConfiguration } from './types';
-import SearchResultsContainer from './components/search-results-container/search-results-container';
-import { createSearchResultsStore } from './store/search-results-store';
-
-interface SearchResultsProps {
-  configuration: SearchResultsConfiguration;
-}
-
-const SearchResults: React.FC<SearchResultsProps> = ({ configuration }) => {
-  const store = React.useMemo(() => createSearchResultsStore(), []);
-
-  return (
-    <Provider store={store}>
-      <SearchResultsConfigurationContext.Provider value={configuration}>
-        <SearchResultsContainer />
-      </SearchResultsConfigurationContext.Provider>
-    </Provider>
-  );
-};
-
-export default SearchResults;
+import React from 'react';
+import { Provider } from 'react-redux';
+import SearchResultsConfigurationContext from './search-results-configuration-context';
+import { SearchResultsConfiguration } from './types';
+import SearchResultsContainer from './components/search-results-container/search-results-container';
+import { createSearchResultsStore } from './store/search-results-store';
+
+interface SearchResultsProps {
+  configuration: SearchResultsConfiguration;
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ configuration }) => {
+  const store = React.useMemo(() => createSearchResultsStore(), []);
+
+  return (
+    <Provider store={store}>
+      <SearchResultsConfigurationContext.Provider value={configuration}>
+        <SearchResultsContainer />
+      </SearchResultsConfigurationContext.Provider>
+    </Provider>
+  );
+};
+
+export default SearchResults;

package/src/search-results/search-results-configuration-context.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { SearchResultsConfiguration } from './types';
-
-const SearchResultsConfigurationContext = React.createContext<SearchResultsConfiguration | undefined>(undefined);
-
-export default SearchResultsConfigurationContext;
+import React from 'react';
+import { SearchResultsConfiguration } from './types';
+
+const SearchResultsConfigurationContext = React.createContext<SearchResultsConfiguration | undefined>(undefined);
+
+export default SearchResultsConfigurationContext;

package/src/search-results/store/search-results-store.ts

@@ -1,13 +1,13 @@
-import { configureStore } from '@reduxjs/toolkit';
-import searchResultsReducer from './search-results-slice';
-
-export const createSearchResultsStore = () =>
-  configureStore({
-    reducer: {
-      searchResults: searchResultsReducer
-    }
-  });
-
-export type SearchResultsStore = ReturnType<typeof createSearchResultsStore>;
-export type SearchResultsRootState = ReturnType<SearchResultsStore['getState']>;
-export type SearchResultsDispatch = SearchResultsStore['dispatch'];
+import { configureStore } from '@reduxjs/toolkit';
+import searchResultsReducer from './search-results-slice';
+
+export const createSearchResultsStore = () =>
+  configureStore({
+    reducer: {
+      searchResults: searchResultsReducer
+    }
+  });
+
+export type SearchResultsStore = ReturnType<typeof createSearchResultsStore>;
+export type SearchResultsRootState = ReturnType<SearchResultsStore['getState']>;
+export type SearchResultsDispatch = SearchResultsStore['dispatch'];