@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/shared/components/flyin/accommodation-flyin.tsx

@@ -1,424 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import ItemPicker from '../../../qsm/components/item-picker';
-import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
-import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
-import { getTranslations } from '../../utils/localization-util';
-import { setPackagingAccoSearchDetails } from '../../../search-results/store/search-results-slice';
-import { PackageMainRoom, PortalQsmType } from '@qite/tide-client';
-import { PickerItem } from '../../types';
-import { first } from 'lodash';
-import Spinner from '../../../search-results/components/spinner/spinner';
-
-type AccommodationFlyInProps = {
-  isLoading: boolean;
-  handleConfirm: () => void;
-};
-
-type PackagingAccommodationResponse = {
-  code: string;
-  name: string;
-  price: number;
-  currencyCode: string;
-  rooms: PackageMainRoom[];
-};
-
-type GroupedAccommodation = {
-  accommodationCode: string;
-  accommodationName: string;
-  regimes: PickerItem[];
-};
-
-const formatPrice = (price?: number, currencyCode?: string | null) => {
-  if (typeof price !== 'number') return '';
-
-  const safeCurrency = currencyCode ?? 'EUR';
-
-  return new Intl.NumberFormat('nl-BE', {
-    style: 'currency',
-    currency: safeCurrency
-  }).format(price);
-};
-
-const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, handleConfirm }) => {
-  const dispatch = useDispatch();
-  const context = useContext(SearchResultsConfigurationContext);
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
-  if (isLoading) {
-    return <>{context?.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>;
-  }
-
-  const { packagingAccoSearchDetails, selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const selectedPackagingAccoSearchDetails = useMemo<PackagingAccommodationResponse | undefined>(() => {
-    return packagingAccoSearchDetails?.find((x) => x.code === selectedPackagingAccoResultCode);
-  }, [packagingAccoSearchDetails, selectedPackagingAccoResultCode]);
-
-  const groupedRooms = useMemo(() => {
-    if (!selectedPackagingAccoSearchDetails?.rooms) return [];
-
-    return selectedPackagingAccoSearchDetails.rooms.map((room) => {
-      const groupedMap = new Map<string, GroupedAccommodation>();
-
-      room.options.forEach((option) => {
-        const key = option.accommodationCode;
-
-        if (!groupedMap.has(key)) {
-          groupedMap.set(key, {
-            accommodationCode: option.accommodationCode,
-            accommodationName: option.accommodationName,
-            regimes: []
-          });
-        }
-
-        groupedMap.get(key)?.regimes.push({
-          id: option.guid,
-          label: option.regimeName
-        });
-      });
-
-      return Array.from(groupedMap.values());
-    });
-  }, [selectedPackagingAccoSearchDetails]);
-
-  const getSelectedOptionForRoom = (roomIndex: number) => {
-    return selectedPackagingAccoSearchDetails?.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
-  };
-
-  const getSelectedOptionForAccommodation = (roomIndex: number, accommodationCode: string) => {
-    return selectedPackagingAccoSearchDetails?.rooms?.[roomIndex]?.options?.find(
-      (option) => option.accommodationCode === accommodationCode && option.isSelected
-    );
-  };
-
-  const handlePick = (roomIndex: number, selectedGuid?: string) => {
-    if (!packagingAccoSearchDetails || !selectedPackagingAccoSearchDetails) return;
-
-    const updatedPackagingAccoSearchDetails = packagingAccoSearchDetails.map((product) => {
-      if (product.code !== selectedPackagingAccoSearchDetails.code) {
-        return product;
-      }
-
-      const updatedRooms = product.rooms.map((room, currentRoomIndex) => {
-        if (currentRoomIndex !== roomIndex) {
-          return room;
-        }
-
-        return {
-          ...room,
-          options: room.options.map((option) => ({
-            ...option,
-            isSelected: option.guid === selectedGuid
-          }))
-        };
-      });
-
-      return {
-        ...product,
-        rooms: updatedRooms
-      };
-    });
-
-    dispatch(setPackagingAccoSearchDetails(updatedPackagingAccoSearchDetails));
-  };
-
-  if (!selectedPackagingAccoSearchDetails) {
-    return null;
-  }
-
-  const calculateTotalPrice = () => {
-    const selectedOptions = selectedPackagingAccoSearchDetails.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
-    const totalPrice = selectedOptions.reduce((total, option) => total + (option.price || 0), 0);
-    return formatPrice(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
-  };
-
-  const getPriceDifference = (currentSelectedPrice: number | undefined, roomIndex: number, accommodationCode: string, regimeId?: string) => {
-    let targetPrice = 0;
-
-    const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
-
-    if (selectedOption?.price) {
-      targetPrice = selectedOption.price;
-    } else {
-      const firstOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find((option) => option.accommodationCode === accommodationCode);
-      targetPrice = firstOption?.price || 0;
-    }
-
-    if (regimeId) {
-      const regimeOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find((option) => option.guid === regimeId);
-      targetPrice = regimeOption?.price || 0;
-    }
-
-    return targetPrice - (currentSelectedPrice || 0);
-  };
-
-  const formatPriceDifference = (difference: number, currencyCode: string) => {
-    if (difference === 0) {
-      return null;
-    }
-
-    const formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
-    return `${difference > 0 ? '+' : '-'} ${formattedAbsoluteValue}`;
-  };
-
-  const getPriceDifferenceClassName = (difference: number) => {
-    if (difference < 0) {
-      return 'flyin__acco__price flyin__acco__price--decrease';
-    }
-
-    if (difference > 0) {
-      return 'flyin__acco__price flyin__acco__price--increase';
-    }
-
-    return 'flyin__acco__price';
-  };
-
-  const regimeFormatter = (roomIndex: number, accommodation: GroupedAccommodation, regimeId: string, label: string) => {
-    const roomOption = getSelectedOptionForRoom(roomIndex);
-
-    const difference = getPriceDifference(roomOption?.price, roomIndex, accommodation.accommodationCode, regimeId);
-
-    return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, selectedPackagingAccoSearchDetails.currencyCode)})` : ''}`;
-  };
-
-  return (
-    <>
-      <div className="flyin__content">
-        {groupedRooms.map((roomAccommodations, roomIndex) => {
-          const selectedRoomOption = getSelectedOptionForRoom(roomIndex);
-
-          return (
-            <div className="flyin__acco" key={`room-${roomIndex}`}>
-              <h3 className="flyin__acco__room-title">Room {roomIndex + 1}</h3>
-              <div className="flyin__acco__cards">
-                {roomAccommodations.map((accommodation) => {
-                  const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
-
-                  const priceDifference = getPriceDifference(selectedRoomOption?.price, roomIndex, accommodation.accommodationCode);
-                  return (
-                    <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
-                      <div className="flyin__acco__content">
-                        <h4 className="flyin__acco__title">{accommodation.accommodationName}</h4>
-                      </div>
-
-                      <div className="flyin__acco__footer">
-                        <ItemPicker
-                          items={accommodation.regimes}
-                          selection={selectedOption?.regimeName}
-                          label={''}
-                          placeholder={'Select regime'}
-                          classModifier=""
-                          onPick={(selected, selectedGuid) => handlePick(roomIndex, selectedGuid)}
-                          valueFormatter={(id, label) => regimeFormatter(roomIndex, accommodation, id, label)}
-                        />
-
-                        <div className="flyin__acco__footer__actions">
-                          <button
-                            className={
-                              selectedRoomOption?.accommodationCode == accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
-                            }
-                            onClick={() => {
-                              handlePick(roomIndex, selectedOption ? selectedOption.guid : first(accommodation.regimes)?.id);
-                            }}>
-                            {selectedRoomOption?.accommodationCode == accommodation.accommodationCode
-                              ? translations?.SHARED.SELECTED
-                              : translations?.SHARED.SELECT}
-                          </button>
-
-                          <div className="flyin__acco__price__wrapper">
-                            <span className={getPriceDifferenceClassName(priceDifference)}>
-                              {formatPriceDifference(priceDifference, selectedPackagingAccoSearchDetails.currencyCode)}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="flyin__footer">
-        <div className="flyin__footer__price">
-          {translations.SHARED.TOTAL_PRICE}: {calculateTotalPrice()}
-        </div>
-
-        <div className="flyin__button-wrapper">
-          <button className="cta cta--select" onClick={handleConfirm}>
-            {context?.searchConfiguration.qsmType == PortalQsmType.AccommodationAndFlight ? translations.QSM.CONFIRM : translations.PRODUCT.BOOK_NOW}
-          </button>
-        </div>
-      </div>
-    </>
-    // Slicing with image and usps, not available in the current API response.
-    // <>
-    //   <div className="flyin__content">
-    //     <div className="flyin__acco">
-    //       <div className="flyin__acco__cards">
-    //         <div className="flyin__acco__card">
-    //           <div className="flyin__acco__img__wrapper">
-    //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
-    //             <div className="flyin__acco__price__wrapper">
-    //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
-    //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__content">
-    //             <div className="flyin__acco__header">
-    //               <h4 className="flyin__acco__title">Deluxe Balcony Room</h4>
-    //               <div className="flyin__acco__usps">
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Sea sight</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Free wifi</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Breakfast included</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Air conditioning</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Private bathroom</span>
-    //                 </div>
-    //               </div>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__footer">
-    //             <ItemPicker
-    //               items={travelClasses}
-    //               selection={selectedTravelClass}
-    //               label=" "
-    //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
-    //               classModifier="travel-class-picker__items"
-    //               onPick={(item) => setSelectedTravelClass(item)}
-    //             />
-    //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
-    //           </div>
-    //         </div>
-
-    //         <div className="flyin__acco__card">
-    //           <div className="flyin__acco__img__wrapper">
-    //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
-    //             <div className="flyin__acco__price__wrapper">
-    //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
-    //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__content">
-    //             <div className="flyin__acco__header">
-    //               <h4 className="flyin__acco__title">Standard Room</h4>
-    //               <div className="flyin__acco__usps">
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Garden view</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Free wifi</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Double bed</span>
-    //                 </div>
-    //               </div>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__footer">
-    //             <ItemPicker
-    //               items={travelClasses}
-    //               selection={selectedTravelClass}
-    //               label=" "
-    //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
-    //               classModifier="travel-class-picker__items"
-    //               onPick={setSelectedTravelClass}
-    //             />
-    //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
-    //           </div>
-    //         </div>
-
-    //         <div className="flyin__acco__card">
-    //           <div className="flyin__acco__img__wrapper">
-    //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
-    //             <div className="flyin__acco__price__wrapper">
-    //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
-    //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__content">
-    //             <div className="flyin__acco__header">
-    //               <h4 className="flyin__acco__title">Suite</h4>
-    //               <div className="flyin__acco__usps">
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Sea sight</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Free wifi</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Breakfast included</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Jacuzzi</span>
-    //                 </div>
-    //                 <div className="flyin__acco__usp">
-    //                   <Icon name="ui-check" width={16} />
-    //                   <span className="flyin__acco__usp__text">Private terrace</span>
-    //                 </div>
-    //               </div>
-    //             </div>
-    //           </div>
-
-    //           <div className="flyin__acco__footer">
-    //             <ItemPicker
-    //               items={travelClasses}
-    //               selection={selectedTravelClass}
-    //               label=" "
-    //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
-    //               classModifier="travel-class-picker__items"
-    //               onPick={setSelectedTravelClass}
-    //             />
-    //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
-    //           </div>
-    //         </div>
-    //       </div>
-    //     </div>
-
-    //     {/* {isLoading && (
-    //       <Spinner />
-    //     )} */}
-    //   </div>
-
-    //   <div className="flyin__footer">
-    //     <div className="flyin__footer__price">{translations.SHARED.TOTAL_PRICE}: €</div>
-    //     <div className="flyin__button-wrapper">
-    //       <button className="cta cta--select" onClick={handleConfirm}>
-    //         Toevoegen
-    //       </button>
-    //     </div>
-    //   </div>
-    // </>
-  );
-};
-
-export default AccommodationFlyIn;