@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/search-results/components/excursions/day-by-day-excursions.tsx

@@ -1,168 +1,168 @@
-import React, { useContext, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getDatesBetween, getLocale, getTranslations } from '../../../shared/utils/localization-util';
-import { selectSelectedPackagingAccoResult } from '../../store/search-results-selectors';
-import { removeConfirmedExcursionForDay, setExcursionSearchParams, setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
-import { ExcursionSearchParams } from '../../types';
-import { format } from 'date-fns';
-import he from 'he';
-import Icon from '../../../shared/components/icon';
-import { PackagingAccommodationResponse } from '@qite/tide-client';
-
-interface DayByDayExcursionsProps {}
-
-const getExcursionContentWithUpdatedPrice = (contents: string | null | undefined, totalPrice: number, currencyCode?: string | null) => {
-  if (!contents) return '';
-
-  const decodedHtml = he.decode(contents);
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(decodedHtml, 'text/html');
-
-  const priceElement = doc.querySelector('[data-excursion-price]');
-
-  if (priceElement) {
-    priceElement.textContent = new Intl.NumberFormat('nl-BE', {
-      style: 'currency',
-      currency: currencyCode ?? 'EUR'
-    }).format(totalPrice);
-  }
-
-  return doc.body.innerHTML;
-};
-
-const DayByDayExcursions: React.FC<DayByDayExcursionsProps> = () => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const dispatch = useDispatch();
-
-  const { confirmedExcursionsByDay } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const selectedPackagingAccoResult = useSelector(selectSelectedPackagingAccoResult);
-
-  const stayDates = useMemo(() => {
-    if (!selectedPackagingAccoResult?.fromDate || !selectedPackagingAccoResult?.toDate) {
-      return [];
-    }
-
-    return getDatesBetween(selectedPackagingAccoResult.fromDate, selectedPackagingAccoResult.toDate);
-  }, [selectedPackagingAccoResult?.fromDate, selectedPackagingAccoResult?.toDate]);
-
-  const handleSearchExcursions = (day: Date) => {
-    if (!selectedPackagingAccoResult) {
-      return;
-    }
-
-    const searchParams: ExcursionSearchParams = {
-      date: day.toISOString(),
-      fromDate: day.toISOString(),
-      toDate: day.toISOString(),
-      countryId: selectedPackagingAccoResult.countryId,
-      regionId: selectedPackagingAccoResult.regionId,
-      oordId: selectedPackagingAccoResult.oordId,
-      locationId: selectedPackagingAccoResult.locationId,
-      locationName: selectedPackagingAccoResult.locationName,
-      accommodationCode: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationCode ?? null,
-      accommodationName: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationName ?? null,
-      hotelCode: selectedPackagingAccoResult.code,
-      hotelName: selectedPackagingAccoResult.name,
-      rooms: selectedPackagingAccoResult?.rooms ?? []
-    };
-
-    dispatch(setExcursionSearchParams(searchParams));
-    dispatch(setFlyInIsOpen(true));
-    dispatch(setFlyInType('excursion-results'));
-  };
-
-  const getSelectedOptionsSummary = (excursion: PackagingAccommodationResponse) => {
-    const options = excursion.rooms.flatMap((room) => room.options ?? []);
-    return options.filter((option) => option.isSelected);
-  };
-
-  if (!selectedPackagingAccoResult || stayDates.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {stayDates.map((day) => {
-        const dayKey = format(day, 'yyyy-MM-dd');
-        const confirmedExcursions = confirmedExcursionsByDay[dayKey] ?? [];
-
-        return (
-          <React.Fragment key={dayKey}>
-            <div className="search__results__label search__results__label--secondary">
-              <div className="search__results__label__date">
-                <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
-                <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
-              </div>
-              <div className="search__results__label__text">
-                <Icon name="ui-excursion" height={16} />
-                <h3>
-                  {translations.SRP.SELECT} <strong>{translations.SRP.EXCURSION}</strong>
-                </h3>
-              </div>
-            </div>
-
-            <div className="search__results__cards__actions">
-              <span>Accommodation for this day: {selectedPackagingAccoResult.name}</span>
-
-              <button type="button" className="cta cta--secondary" onClick={() => handleSearchExcursions(day)}>
-                {confirmedExcursions.length > 0 ? 'Add another excursion' : `${translations.SRP.SELECT} ${translations.SRP.EXCURSION}`}
-              </button>
-            </div>
-
-            <div className="search__results__cards search__results__cards--compact">
-              {confirmedExcursions &&
-                confirmedExcursions.length > 0 &&
-                confirmedExcursions.map((excursion) => {
-                  const selectedOptions = getSelectedOptionsSummary(excursion);
-                  const totalPrice = selectedOptions.reduce((sum: number, option: any) => sum + (option.price || 0), 0);
-                  const updatedContents = getExcursionContentWithUpdatedPrice(excursion.contents, totalPrice, excursion.currencyCode);
-                  return (
-                    <div
-                      key={excursion.code}
-                      className="search__result-card__wrapper search__result-card__wrapper--custom"
-                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-                      <div dangerouslySetInnerHTML={{ __html: updatedContents }}></div>
-                      <div className="search__result-card__content--extra">
-                        <div className="search__result-card__content__wrapper">
-                          <div className="search__result-card__options">
-                            {selectedOptions.length > 0 &&
-                              selectedOptions.map((option) => (
-                                <div className="search__result-card__option" key={option.guid}>
-                                  <Icon name="ui-ticket" width={14} height={14} aria-hidden="true" />
-                                  <span>
-                                    {option.accommodationName}
-                                    {/* {option.paxIds?.length > 0 && (
-                                    <>
-                                      {' '}(Traveller{option.paxIds.length > 1 ? 's' : ''}{' '}{option.paxIds.map((id) => id + 1).join(', ')})
-                                    </>
-                                  )} */}
-                                  </span>
-                                </div>
-                              ))}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="search__result-card__footer">
-                        <button
-                          type="button"
-                          className="cta cta--remove"
-                          onClick={() => dispatch(removeConfirmedExcursionForDay({ dayKey, excursionCode: excursion.code }))}>
-                          Remove
-                        </button>
-                      </div>
-                    </div>
-                  );
-                })}
-            </div>
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-export default DayByDayExcursions;
+import React, { useContext, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { getDatesBetween, getLocale, getTranslations } from '../../../shared/utils/localization-util';
+import { selectSelectedPackagingAccoResult } from '../../store/search-results-selectors';
+import { removeConfirmedExcursionForDay, setExcursionSearchParams, setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
+import { ExcursionSearchParams } from '../../types';
+import { format } from 'date-fns';
+import he from 'he';
+import Icon from '../../../shared/components/icon';
+import { PackagingAccommodationResponse } from '@qite/tide-client';
+
+interface DayByDayExcursionsProps {}
+
+const getExcursionContentWithUpdatedPrice = (contents: string | null | undefined, totalPrice: number, currencyCode?: string | null) => {
+  if (!contents) return '';
+
+  const decodedHtml = he.decode(contents);
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(decodedHtml, 'text/html');
+
+  const priceElement = doc.querySelector('[data-excursion-price]');
+
+  if (priceElement) {
+    priceElement.textContent = new Intl.NumberFormat('nl-BE', {
+      style: 'currency',
+      currency: currencyCode ?? 'EUR'
+    }).format(totalPrice);
+  }
+
+  return doc.body.innerHTML;
+};
+
+const DayByDayExcursions: React.FC<DayByDayExcursionsProps> = () => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const dispatch = useDispatch();
+
+  const { confirmedExcursionsByDay } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const selectedPackagingAccoResult = useSelector(selectSelectedPackagingAccoResult);
+
+  const stayDates = useMemo(() => {
+    if (!selectedPackagingAccoResult?.fromDate || !selectedPackagingAccoResult?.toDate) {
+      return [];
+    }
+
+    return getDatesBetween(selectedPackagingAccoResult.fromDate, selectedPackagingAccoResult.toDate);
+  }, [selectedPackagingAccoResult?.fromDate, selectedPackagingAccoResult?.toDate]);
+
+  const handleSearchExcursions = (day: Date) => {
+    if (!selectedPackagingAccoResult) {
+      return;
+    }
+
+    const searchParams: ExcursionSearchParams = {
+      date: day.toISOString(),
+      fromDate: day.toISOString(),
+      toDate: day.toISOString(),
+      countryId: selectedPackagingAccoResult.countryId,
+      regionId: selectedPackagingAccoResult.regionId,
+      oordId: selectedPackagingAccoResult.oordId,
+      locationId: selectedPackagingAccoResult.locationId,
+      locationName: selectedPackagingAccoResult.locationName,
+      accommodationCode: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationCode ?? null,
+      accommodationName: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationName ?? null,
+      hotelCode: selectedPackagingAccoResult.code,
+      hotelName: selectedPackagingAccoResult.name,
+      rooms: selectedPackagingAccoResult?.rooms ?? []
+    };
+
+    dispatch(setExcursionSearchParams(searchParams));
+    dispatch(setFlyInIsOpen(true));
+    dispatch(setFlyInType('excursion-results'));
+  };
+
+  const getSelectedOptionsSummary = (excursion: PackagingAccommodationResponse) => {
+    const options = excursion.rooms.flatMap((room) => room.options ?? []);
+    return options.filter((option) => option.isSelected);
+  };
+
+  if (!selectedPackagingAccoResult || stayDates.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {stayDates.map((day) => {
+        const dayKey = format(day, 'yyyy-MM-dd');
+        const confirmedExcursions = confirmedExcursionsByDay[dayKey] ?? [];
+
+        return (
+          <React.Fragment key={dayKey}>
+            <div className="search__results__label search__results__label--secondary">
+              <div className="search__results__label__date">
+                <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
+                <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
+              </div>
+              <div className="search__results__label__text">
+                <Icon name="ui-excursion" height={16} />
+                <h3>
+                  {translations.SRP.SELECT} <strong>{translations.SRP.EXCURSION}</strong>
+                </h3>
+              </div>
+            </div>
+
+            <div className="search__results__cards__actions">
+              <span>Accommodation for this day: {selectedPackagingAccoResult.name}</span>
+
+              <button type="button" className="cta cta--secondary" onClick={() => handleSearchExcursions(day)}>
+                {confirmedExcursions.length > 0 ? 'Add another excursion' : `${translations.SRP.SELECT} ${translations.SRP.EXCURSION}`}
+              </button>
+            </div>
+
+            <div className="search__results__cards search__results__cards--compact">
+              {confirmedExcursions &&
+                confirmedExcursions.length > 0 &&
+                confirmedExcursions.map((excursion) => {
+                  const selectedOptions = getSelectedOptionsSummary(excursion);
+                  const totalPrice = selectedOptions.reduce((sum: number, option: any) => sum + (option.price || 0), 0);
+                  const updatedContents = getExcursionContentWithUpdatedPrice(excursion.contents, totalPrice, excursion.currencyCode);
+                  return (
+                    <div
+                      key={excursion.code}
+                      className="search__result-card__wrapper search__result-card__wrapper--custom"
+                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
+                      <div dangerouslySetInnerHTML={{ __html: updatedContents }}></div>
+                      <div className="search__result-card__content--extra">
+                        <div className="search__result-card__content__wrapper">
+                          <div className="search__result-card__options">
+                            {selectedOptions.length > 0 &&
+                              selectedOptions.map((option) => (
+                                <div className="search__result-card__option" key={option.guid}>
+                                  <Icon name="ui-ticket" width={14} height={14} aria-hidden="true" />
+                                  <span>
+                                    {option.accommodationName}
+                                    {/* {option.paxIds?.length > 0 && (
+                                    <>
+                                      {' '}(Traveller{option.paxIds.length > 1 ? 's' : ''}{' '}{option.paxIds.map((id) => id + 1).join(', ')})
+                                    </>
+                                  )} */}
+                                  </span>
+                                </div>
+                              ))}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="search__result-card__footer">
+                        <button
+                          type="button"
+                          className="cta cta--remove"
+                          onClick={() => dispatch(removeConfirmedExcursionForDay({ dayKey, excursionCode: excursion.code }))}>
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+export default DayByDayExcursions;