@qite/tide-booking-component 1.4.95 → 1.4.97

package/src/search-results/components/flight/flight-selection/paired-flight-selection.tsx

@@ -1,38 +1,38 @@
-import React, { useContext } from 'react';
-import Icon from '../../icon';
-import { ExtendedFlightSearchResponseItem } from '../../../types';
-import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
-import { getTranslations } from '../../../../shared/utils/localization-util';
-import PairedFlightOption from './paired-flight-option';
-
-interface PairedFlightSelectionProps {
-  searchResults: ExtendedFlightSearchResponseItem[];
-}
-
-const PairedFlightSelection: React.FC<PairedFlightSelectionProps> = ({ searchResults }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  return (
-    <>
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          <Icon name="ui-flight" height={16} fill="white" />
-        </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong> {translations.SIDEBAR.FLIGHT}</strong>
-          </h3>
-        </div>
-      </div>
-
-      <div className="search__results__cards search__results__cards--extended">
-        {searchResults.map((result) => (
-          <PairedFlightOption key={`flight-${result.guid}`} item={result} />
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default PairedFlightSelection;
+import React, { useContext } from 'react';
+import Icon from '../../icon';
+import { ExtendedFlightSearchResponseItem } from '../../../types';
+import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
+import { getTranslations } from '../../../../shared/utils/localization-util';
+import PairedFlightOption from './paired-flight-option';
+
+interface PairedFlightSelectionProps {
+  searchResults: ExtendedFlightSearchResponseItem[];
+}
+
+const PairedFlightSelection: React.FC<PairedFlightSelectionProps> = ({ searchResults }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  return (
+    <>
+      <div className="search__results__label search__results__label--secondary">
+        <div className="search__results__label__date">
+          <Icon name="ui-flight" height={16} fill="white" />
+        </div>
+        <div className="search__results__label__text">
+          <h3>
+            {translations.SRP.SELECT} <strong> {translations.SIDEBAR.FLIGHT}</strong>
+          </h3>
+        </div>
+      </div>
+
+      <div className="search__results__cards search__results__cards--extended">
+        {searchResults.map((result) => (
+          <PairedFlightOption key={`flight-${result.guid}`} item={result} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default PairedFlightSelection;

package/src/search-results/components/group-tour/group-tour-card.tsx

@@ -1,105 +1,105 @@
-import React, { useContext } from 'react';
-import Icon from '../icon';
-import { BookingPackageItem } from '@qite/tide-client';
-import { format } from 'date-fns';
-import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useDispatch, useSelector } from 'react-redux';
-import { setSelectedSearchResult } from '../../store/search-results-slice';
-import he from 'he';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-interface GroupTourCardProps {
-  result: BookingPackageItem;
-  languageCode?: string;
-  cmsItem?: any;
-}
-
-const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  if (!context) {
-    return;
-  }
-  const dispatch = useDispatch();
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  const genders = result.allotment?.travellerGenders || [];
-  const maleCount = genders.filter((g) => g === 0).length;
-  const femaleCount = genders.filter((g) => g === 1).length;
-  const otherCount = genders.filter((g) => g === 2).length;
-
-  const handleChange = (result: BookingPackageItem) => {
-    dispatch(setSelectedSearchResult(result));
-  };
-
-  return (
-    <div className="search__result-card">
-      <div className="search__result-card__allotment">
-        <div className="search__result-card__allotment__img-wrapper">
-          <img src={cmsItem?.content?.images?.header?.url} alt={result.name} className="search__result-card__allotment__img" />
-        </div>
-        <div className="search__result-card__allotment__title__wrapper">
-          <h3 className="search__result-card__allotment__title">{result.name}</h3>
-          {cmsItem?.content?.introductie?.intro && (
-            <div
-              className="search__result-card__allotment__description"
-              dangerouslySetInnerHTML={{ __html: he.decode(cmsItem.content.introductie.intro) }}></div>
-          )}
-          <div className="search__result-card__allotment__container">
-            <div className="search__result-card__allotment__header">
-              <div className="search__result-card__allotment__wrapper">
-                <div className="search__result-card__allotment__date">
-                  <Icon name="ui-plane" height={16} />
-                  <div className="search__result-card__allotment__date--from">{format(new Date(result.fromDate), 'dd/MM/yyyy')}</div>
-                </div>
-                <div className="search__result-card__allotment__info">
-                  <span>
-                    <Icon name="ui-calendar" height={16} />
-                  </span>{' '}
-                  {calculateDays(result.stayFromDate, result.stayToDate)} {translations.PRODUCT.DAYS} -{' '}
-                  <span>
-                    <Icon name="ui-moon" height={16} />
-                  </span>
-                  {calculateNights(result.stayFromDate, result.stayToDate)} {translations.SRP.NIGHTS}
-                </div>
-              </div>
-            </div>
-            {result.allotment && (
-              <div className="search__result-card__allotment__info">
-                <span className="search__result-card__allotment__info__group">{translations?.SRP.TRAVEL_GROUP}</span>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>{maleCount} p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>{femaleCount} p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-other" width={16} height={16} />
-                    <span>{otherCount} p.</span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="search__result-card__allotment__footer">
-          <div className="search__result-card__allotment__price__wrapper">
-            <div className="search__result-card__allotment__price">
-              {formatPrice(result.price, result.currencyCode, languageCode)} {translations.PRODUCT.PER_PERSON}
-            </div>
-            {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
-          </div>
-          <button type="button" className={`cta ${selectedSearchResult === result ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result)}>
-            {selectedSearchResult === result ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default GroupTourCard;
+import React, { useContext } from 'react';
+import Icon from '../icon';
+import { BookingPackageItem } from '@qite/tide-client';
+import { format } from 'date-fns';
+import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSelectedSearchResult } from '../../store/search-results-slice';
+import he from 'he';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+
+interface GroupTourCardProps {
+  result: BookingPackageItem;
+  languageCode?: string;
+  cmsItem?: any;
+}
+
+const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  if (!context) {
+    return;
+  }
+  const dispatch = useDispatch();
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  const genders = result.allotment?.travellerGenders || [];
+  const maleCount = genders.filter((g) => g === 0).length;
+  const femaleCount = genders.filter((g) => g === 1).length;
+  const otherCount = genders.filter((g) => g === 2).length;
+
+  const handleChange = (result: BookingPackageItem) => {
+    dispatch(setSelectedSearchResult(result));
+  };
+
+  return (
+    <div className="search__result-card">
+      <div className="search__result-card__allotment">
+        <div className="search__result-card__allotment__img-wrapper">
+          <img src={cmsItem?.content?.images?.header?.url} alt={result.name} className="search__result-card__allotment__img" />
+        </div>
+        <div className="search__result-card__allotment__title__wrapper">
+          <h3 className="search__result-card__allotment__title">{result.name}</h3>
+          {cmsItem?.content?.introductie?.intro && (
+            <div
+              className="search__result-card__allotment__description"
+              dangerouslySetInnerHTML={{ __html: he.decode(cmsItem.content.introductie.intro) }}></div>
+          )}
+          <div className="search__result-card__allotment__container">
+            <div className="search__result-card__allotment__header">
+              <div className="search__result-card__allotment__wrapper">
+                <div className="search__result-card__allotment__date">
+                  <Icon name="ui-plane" height={16} />
+                  <div className="search__result-card__allotment__date--from">{format(new Date(result.fromDate), 'dd/MM/yyyy')}</div>
+                </div>
+                <div className="search__result-card__allotment__info">
+                  <span>
+                    <Icon name="ui-calendar" height={16} />
+                  </span>{' '}
+                  {calculateDays(result.stayFromDate, result.stayToDate)} {translations.PRODUCT.DAYS} -{' '}
+                  <span>
+                    <Icon name="ui-moon" height={16} />
+                  </span>
+                  {calculateNights(result.stayFromDate, result.stayToDate)} {translations.SRP.NIGHTS}
+                </div>
+              </div>
+            </div>
+            {result.allotment && (
+              <div className="search__result-card__allotment__info">
+                <span className="search__result-card__allotment__info__group">{translations?.SRP.TRAVEL_GROUP}</span>
+                <div className="search__result-card__allotment__persons">
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-men" width={16} height={16} />
+                    <span>{maleCount} p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-women" width={16} height={16} />
+                    <span>{femaleCount} p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-other" width={16} height={16} />
+                    <span>{otherCount} p.</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="search__result-card__allotment__footer">
+          <div className="search__result-card__allotment__price__wrapper">
+            <div className="search__result-card__allotment__price">
+              {formatPrice(result.price, result.currencyCode, languageCode)} {translations.PRODUCT.PER_PERSON}
+            </div>
+            {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
+          </div>
+          <button type="button" className={`cta ${selectedSearchResult === result ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result)}>
+            {selectedSearchResult === result ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupTourCard;

package/src/search-results/components/group-tour/group-tour-results.tsx

@@ -1,62 +1,62 @@
-import React, { useContext, useEffect } from 'react';
-import Spinner from '../spinner/spinner';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useDispatch, useSelector } from 'react-redux';
-import { isEmpty } from 'lodash';
-import GroupTourCard from './group-tour-card';
-import { setActiveTab } from '../../store/search-results-slice';
-
-interface GroupTourResultsProps {
-  isLoading: boolean;
-}
-
-const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return;
-  }
-
-  if (isLoading) {
-    return <>{context.customSpinner ?? <Spinner />}</>;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-  const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const dispatch = useDispatch();
-
-  if (isEmpty(filteredResults)) {
-    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
-  }
-
-  useEffect(() => {
-    if (activeTab === 'compact') {
-      dispatch(setActiveTab('list'));
-    }
-  }, [activeTab]);
-
-  const cmsMap = React.useMemo(() => {
-    const map = new Map();
-
-    context.cmsGroupTourData?.forEach((item) => {
-      const code = item?.content?.introductie?.data?.code;
-      if (code) {
-        map.set(code, item);
-      }
-    });
-
-    return map;
-  }, [context.cmsGroupTourData]);
-
-  return (
-    <div className={`search__results__cards search__results__cards--${activeTab}`}>
-      {filteredResults.map((result, index) => {
-        const cmsItem = cmsMap.get(result.code);
-        return <GroupTourCard key={index} result={result} cmsItem={cmsItem} />;
-      })}
-    </div>
-  );
-};
-
-export default GroupTourResults;
+import React, { useContext, useEffect } from 'react';
+import Spinner from '../spinner/spinner';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
+import GroupTourCard from './group-tour-card';
+import { setActiveTab } from '../../store/search-results-slice';
+
+interface GroupTourResultsProps {
+  isLoading: boolean;
+}
+
+const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  if (!context) {
+    return;
+  }
+
+  if (isLoading) {
+    return <>{context.customSpinner ?? <Spinner />}</>;
+  }
+
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+  const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const dispatch = useDispatch();
+
+  if (isEmpty(filteredResults)) {
+    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
+  }
+
+  useEffect(() => {
+    if (activeTab === 'compact') {
+      dispatch(setActiveTab('list'));
+    }
+  }, [activeTab]);
+
+  const cmsMap = React.useMemo(() => {
+    const map = new Map();
+
+    context.cmsGroupTourData?.forEach((item) => {
+      const code = item?.content?.introductie?.data?.code;
+      if (code) {
+        map.set(code, item);
+      }
+    });
+
+    return map;
+  }, [context.cmsGroupTourData]);
+
+  return (
+    <div className={`search__results__cards search__results__cards--${activeTab}`}>
+      {filteredResults.map((result, index) => {
+        const cmsItem = cmsMap.get(result.code);
+        return <GroupTourCard key={index} result={result} cmsItem={cmsItem} />;
+      })}
+    </div>
+  );
+};
+
+export default GroupTourResults;