@qite/tide-booking-component 1.4.81 → 1.4.83

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

@@ -1,9 +1,12 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
+import Icon from '../icon';
 import { useSelector } from 'react-redux';
+import ItemPicker from '../../../qsm/components/item-picker';
 import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
 import Spinner from '../../../search-results/components/spinner/spinner';
 import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
 import { getTranslations } from '../../utils/localization-util';
+import { TravelClass } from '../../../shared/types';
 
 type AccommodationFlyInProps = {
   isLoading: boolean;
@@ -11,6 +14,14 @@ type AccommodationFlyInProps = {
   setIsOpen: (open: boolean) => void;
 };
 
+const travelClasses: TravelClass[] = [
+  { id: 1, label: 'Standard Room' },
+  { id: 2, label: 'Deluxe Balcony Room' },
+  { id: 3, label: 'Superior Room' },
+  { id: 4, label: 'Family Room' },
+  { id: 5, label: 'Suite' }
+];
+
 const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const language = context?.languageCode ?? 'en-GB';
@@ -18,7 +29,8 @@ const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOp
 
   const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  // TODO: go to booking page?
+  const [selectedTravelClass, setSelectedTravelClass] = useState<string | undefined>('Standard Room');
+
   const handleConfirm = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -28,11 +40,165 @@ const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOp
   return (
     <>
       <div className="flyin__content">
-        TODO
+        <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={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">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">Total price: €</div>
+        <div className="flyin__button-wrapper">
+          <button className="cta cta--select" onClick={handleConfirm}>
+            Toevoegen
+          </button>
+        </div>
+      </div>
     </>
   );
 };

package/src/shared/translations/ar-SA.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "بلجيكا",
       "NETHERLANDS": "هولندا",
-      "FRANCE": "فرنسا"
+      "FRANCE": "فرنسا",
+      "DENMARK": "الدنمارك",
+      "ITALY": "إيطاليا"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "اختر وكيل السفر الخاص بك",
     "VALIDATION": {

package/src/shared/translations/da-DK.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgien",
       "NETHERLANDS": "Nederlandene",
-      "FRANCE": "Frankrig"
+      "FRANCE": "Frankrig",
+      "DENMARK": "Danmark",
+      "ITALY": "Italien"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Vælg din rejseagent",
     "VALIDATION": {

package/src/shared/translations/de-DE.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgien",
       "NETHERLANDS": "Niederlande",
-      "FRANCE": "Frankreich"
+      "FRANCE": "Frankreich",
+      "DENMARK": "änemark",
+      "ITALY": "Italien"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Wählen Sie Ihren Reiseberater",
     "VALIDATION": {

package/src/shared/translations/en-GB.json

@@ -170,7 +170,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgium",
       "NETHERLANDS": "Netherlands",
-      "FRANCE": "France"
+      "FRANCE": "France",
+      "DENMARK": "Denmark",
+      "ITALY": "Italy"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Choose your travel agent",
     "VALIDATION": {

package/src/shared/translations/es-ES.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Bélgica",
       "NETHERLANDS": "Países Bajos",
-      "FRANCE": "Francia"
+      "FRANCE": "Francia",
+      "DENMARK": "Dinamarca",
+      "ITALY": "Italia"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Elija su agente de viajes",
     "VALIDATION": {

package/src/shared/translations/fr-BE.json

@@ -170,7 +170,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgique",
       "NETHERLANDS": "Pays-Bas",
-      "FRANCE": "France"
+      "FRANCE": "France",
+      "DENMARK": "Danemark",
+      "ITALY": "Italie"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Choisissez votre agent de voyage",
     "VALIDATION": {

package/src/shared/translations/fr-FR.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgique",
       "NETHERLANDS": "Pays-Bas",
-      "FRANCE": "France"
+      "FRANCE": "France",
+      "DENMARK": "Danemark",
+      "ITALY": "Italie"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Choisissez votre agent de voyage",
     "VALIDATION": {

package/src/shared/translations/is-IS.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgía",
       "NETHERLANDS": "Holland",
-      "FRANCE": "Frakkland"
+      "FRANCE": "Frakkland",
+      "DENMARK": "Danmörk",
+      "ITALY": "Ítalía"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Veldu ferðaskrifstofu",
     "VALIDATION": {

package/src/shared/translations/it-IT.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgio",
       "NETHERLANDS": "Paesi Bassi",
-      "FRANCE": "Francia"
+      "FRANCE": "Francia",
+      "DENMARK": "Danimarca",
+      "ITALY": "Italia"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Scegli la tua agenzia di viaggi",
     "VALIDATION": {

package/src/shared/translations/ja-JP.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "ベルギー",
       "NETHERLANDS": "オランダ",
-      "FRANCE": "フランス"
+      "FRANCE": "フランス",
+      "DENMARK": "デンマーク",
+      "ITALY": "イタリア"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "旅行代理店を選択",
     "VALIDATION": {

package/src/shared/translations/nl-BE.json

@@ -170,7 +170,9 @@
     "COUNTRIES": {
       "BELGIUM": "België",
       "NETHERLANDS": "Nederland",
-      "FRANCE": "Frankrijk"
+      "FRANCE": "Frankrijk",
+      "DENMARK": "Denemarken",
+      "ITALY": "Italië"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Kies uw reisagent",
     "VALIDATION": {

package/src/shared/translations/nl-NL.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "België",
       "NETHERLANDS": "Nederland",
-      "FRANCE": "Frankrijk"
+      "FRANCE": "Frankrijk",
+      "DENMARK": "Denemarken",
+      "ITALY": "Italië"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Kies uw reisagent",
     "VALIDATION": {

package/src/shared/translations/no-NO.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgia",
       "NETHERLANDS": "Nederland",
-      "FRANCE": "Frankrike"
+      "FRANCE": "Frankrike",
+      "DENMARK": "Danmark",
+      "ITALY": "Italia"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Velg reisebyrå",
     "VALIDATION": {

package/src/shared/translations/pl-PL.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgia",
       "NETHERLANDS": "Niderlandy",
-      "FRANCE": "Francja"
+      "FRANCE": "Francja",
+      "DENMARK": "Dania",
+      "ITALY": "Włochy"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Wybierz biuro podróży",
     "VALIDATION": {

package/src/shared/translations/pt-PT.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Bélgica",
       "NETHERLANDS": "Países Baixos",
-      "FRANCE": "França"
+      "FRANCE": "França",
+      "DENMARK": "Dinamarca",
+      "ITALY": "Itália"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Escolha a sua agência de viagens",
     "VALIDATION": {

package/src/shared/translations/sv-SE.json

@@ -166,7 +166,9 @@
     "COUNTRIES": {
       "BELGIUM": "Belgien",
       "NETHERLANDS": "Nederländerna",
-      "FRANCE": "Frankrike"
+      "FRANCE": "Frankrike",
+      "DENMARK": "Danmark",
+      "ITALY": "Italien"
     },
     "CHOOSE_AGENT_PLACEHOLDER": "Välj din resebyrå",
     "VALIDATION": {

package/src/shared/utils/localization-util.ts

@@ -49,6 +49,7 @@ import svJson from '../translations/sv-SE.json';
 import jaJson from '../translations/ja-JP.json';
 import { DateStruct } from '@qite/tide-client';
 import { DepartureRange } from '../types';
+import { SortByType } from '../../search-results/types';
 
 export const getTranslations = (language: string) => {
   switch (language) {
@@ -255,3 +256,20 @@ export const calculateNights = (fromDate: Date, toDate: Date): number => {
 export const calculateDays = (fromDate: Date, toDate: Date): number => {
   return calculateNights(fromDate, toDate) + 1;
 };
+
+export const getSortingName = (translations: any, sortByType: SortByType): string => {
+  switch (sortByType.label) {
+    case 'price':
+      return sortByType.direction === 'asc' ? translations.SRP.PRICE_ASC : translations.SRP.PRICE_DESC;
+    case 'departureTime':
+      return sortByType.direction === 'asc' ? translations.SRP.DEPARTURE_TIME_ASC : translations.SRP.DEPARTURE_TIME_DESC;
+    case 'durationInTicks':
+      return sortByType.direction === 'asc' ? translations.SRP.DURATION_ASC : translations.SRP.DURATION_DESC;
+    default:
+      return sortByType.label;
+  }
+};
+
+export const findSortByType = (sortByTypes: SortByType[], sortKey: string, direction: string) => {
+  return sortByTypes.find((s) => s.label === sortKey && s.direction === direction) || sortByTypes[0];
+};

package/styles/booking-search-results-variables.scss

@@ -643,7 +643,7 @@
   //SEARCH HOTEL CARD ALLOTMENTS
   --tide-booking-search-hotel-card-allotments-background: var(--tide-booking-white);
   --tide-booking-search-hotel-card-allotments-border: none;
-  --tide-booking-search-hotel-card-allotments-border-radius: 10px;
+  --tide-booking-search-hotel-card-allotments-border-radius: 24px;
   --tide-booking-search-hotel-card-allotments-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   --tide-booking-search-hotel-card-allotments-font-weight: 400;
   --tide-booking-search-hotel-card-allotments-color: var(--tide-booking-invalid);

package/styles/components/_content.scss

@@ -197,10 +197,17 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     gap: 10px;
     flex-grow: 1;
   }
 
+  &__top {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
   &__title {
     color: var(--tide-booking-image-card-title-color);
     font-family: var(--tide-booking-image-card-title-font-family);

package/styles/components/_flyin.scss

@@ -42,7 +42,7 @@
     }
 
     @include mixins.media-lg {
-      width: 50%;
+      width: 850px;
     }
 
     &--active {
@@ -566,6 +566,7 @@
     background: var(--tide-booking-white);
 
     @include mixins.media-sm {
+      margin-top: auto;
       padding: 30px;
     }
 
@@ -575,4 +576,123 @@
       color: var(--tide-booking-black);
     }
   }
+
+  &__acco {
+    padding-bottom: 30px;
+    &__cards {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      gap: 30px;
+
+      @include mixins.media-sm {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      // @include mixins.media-xxl {
+      //   grid-template-columns: repeat(3, 1fr);
+      // }
+    }
+
+    &__card {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      border-radius: 24px;
+      background: var(--tide-booking-white);
+      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+      padding-bottom: 20px;
+    }
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+
+      &__wrapper {
+        position: relative;
+        width: 100%;
+        height: 200px;
+        overflow: hidden;
+        border-radius: 24px 24px 0 0;
+        background-color: #f5f5f5;
+      }
+    }
+
+    &__usps {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px;
+    }
+
+    &__usp {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    &__price {
+      font-family: var(--tide-booking-search-hotel-card-price-font-family);
+      font-weight: var(--tide-booking-search-hotel-card-price-font-weight);
+      color: var(--tide-booking-search-hotel-card-price-color);
+      font-size: 20px;
+
+      &__wrapper {
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        background: var(--tide-booking-search-hotel-card-price-background-color);
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 5px 20px;
+        border-radius: 5px 0 0 0;
+        box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
+      }
+
+      &__label {
+        font-size: 12px;
+        font-weight: var(--tide-booking-search-hotel-card-price-label-font-weight);
+        color: var(--tide-booking-search-hotel-card-price-label-color);
+      }
+
+      &--increase {
+        color: var(--tide-booking-price-increase);
+      }
+
+      &--decrease {
+        color: var(--tide-booking-price-decrease);
+      }
+    }
+
+    &__content {
+      padding: 0px 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    &__footer {
+      margin-top: auto;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .dropdown {
+      width: 100%;
+
+      &-menu {
+        top: 45px;
+      }
+
+      &::after {
+        content: '';
+        display: none;
+      }
+    }
+  }
 }