@qite/tide-booking-component 1.4.110 → 1.4.111

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

@@ -127,11 +127,10 @@ const FlyIn: React.FC<FlyInProps> = ({
 
   return (
     <div
-      className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${
-        isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
-          ? 'flyin--large'
-          : ''
-      } ${flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : ''}`}>
+      className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow || flyInType === 'acco-results' ? 'flyin--large' : ''} ${
+        flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : ''
+      }
+      ${flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' ? 'flyin--flight' : ''}`}>
       <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
         <div className="flyin__content">
           <div className="flyin__content-title-row">
@@ -179,6 +178,10 @@ const FlyIn: React.FC<FlyInProps> = ({
             />
             <div className="search__results__wrapper">
               <div className="search__result-row">
+                <div className="cta cta--filter" onClick={() => toggleFilters && toggleFilters()}>
+                  <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                  {translations.SRP.FILTERS}
+                </div>
                 <span className="search__result-row-text">
                   {!isLoading && (
                     <>
@@ -187,10 +190,6 @@ const FlyIn: React.FC<FlyInProps> = ({
                     </>
                   )}
                 </span>
-                <div className="cta cta--filter" onClick={() => toggleFilters && toggleFilters()}>
-                  <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
-                  {translations.SRP.FILTERS}
-                </div>
                 {sortByTypes && sortByTypes.length > 0 && (
                   <div className="search__result-row-filter">
                     <ItemPicker

package/src/shared/components/flyin/packaging-flights-flyin.tsx

@@ -98,14 +98,14 @@ const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen
             />
             <div className="search__results__wrapper">
               <div className="search__result-row">
-                <span className="search__result-row-text">
-                  {uniqueOutwardFlights?.length && uniqueOutwardFlights.length}
-                  &nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}&nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}
-                </span>
                 <div className="cta cta--filter" onClick={() => toggleFilters && toggleFilters()}>
                   <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
                   {translations.SRP.FILTERS}
                 </div>
+                <span className="search__result-row-text">
+                  {uniqueOutwardFlights?.length && uniqueOutwardFlights.length}
+                  &nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}&nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}
+                </span>
                 {sortByTypes && sortByTypes.length > 0 && (
                   <div className="search__result-row-filter">
                     <ItemPicker

package/src/shared/utils/booking-summary.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { compact, groupBy, isEmpty } from 'lodash';
+import { getDateText } from '../../booking-wizard/features/sidebar/sidebar-util';
+
+export const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry: any, priceDetails: any, translations: any) => {
+  const priceDetailsByProduct = groupBy(priceDetails?.details ?? [], (detail: any) => `${detail.productCode}|${detail.accommodationCode}`);
+
+  return (editablePackagingEntry?.lines ?? []).map((line: any) => {
+    const groupedPriceDetails = priceDetailsByProduct[`${line.productCode}|${line.accommodationCode}`] ?? [];
+    const visiblePriceDetails = groupedPriceDetails.filter((detail: any) => detail.showPrice || detail.isSeparate);
+
+    return (
+      <li key={line.guid}>
+        <h6>{line.productName}</h6>
+        <ul>
+          <li className="list__item">{compact([line.accommodationName, line.regimeName]).join(', ')}</li>
+
+          {line.flightInformation?.flightLines?.map((flightLine: any, index: number) => (
+            <li className="list__item" key={`${line.guid}-${index}`}>
+              {flightLine.departureAirportCode} {flightLine.departureTime?.slice(0, 5)} &gt; {flightLine.arrivalAirportCode}{' '}
+              {flightLine.arrivalTime?.slice(0, 5)} ({flightLine.operatingFlightNumber || `${flightLine.airlineCode}${flightLine.flightNumber}`})
+            </li>
+          ))}
+
+          {!isEmpty(visiblePriceDetails) &&
+            visiblePriceDetails.map((detail: any, index: number) => (
+              <li className="list__item" key={`${line.guid}-price-${index}`}>
+                {detail.priceDescription}: {detail.total?.toLocaleString(undefined, { style: 'currency', currency: 'EUR' })}
+              </li>
+            ))}
+        </ul>
+        <p>
+          (
+          {line.from === line.to ? (
+            getDateText(line.from)
+          ) : (
+            <>
+              {getDateText(line.from)} &gt; {getDateText(line.to)}
+            </>
+          )}
+          )
+        </p>
+      </li>
+    );
+  });
+};

package/src/shared/utils/tide-api-utils.ts

@@ -11,8 +11,8 @@ export const tideConnection = {
 };
 
 export function buildTideClientConfig(settings?: ApiSettingsState): TideClientConfig {
-  const HOST = settings?.apiUrl || process.env.REACT_APP_BOOKING_HOST;
-  const API_KEY = settings?.apiKey || process.env.REACT_APP_BOOKING_API_KEY;
+  const HOST = settings?.apiUrl || tideConnection.host;
+  const API_KEY = settings?.apiKey || tideConnection.apiKey;
   const token = selectAgentToken();
 
   if (isNil(HOST)) {

package/styles/components/_dropdown.scss

@@ -13,6 +13,7 @@
     border-left: 1.5px solid;
     border-color: var(--tide-booking-dropdown-arrow-color);
     transform: rotate(-45deg) translateY(-50%);
+    pointer-events: none;
     @include transitionEasing($duration: 0.2s);
   }
 
@@ -61,6 +62,10 @@
         }
       }
     }
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   &--small {

package/styles/components/_flyin.scss

@@ -52,6 +52,29 @@
     }
   }
 
+  &--flight {
+    .flyin__panel {
+      @include mixins.media-sm {
+        width: 100%;
+        max-width: 1200px;
+      }
+    }
+
+    .flyin__content {
+      gap: 30px;
+    }
+
+    .search__results__cards {
+      @include mixins.media-md {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      @include mixins.media-lg {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+
   &__panel {
     background: var(--tide-booking-gray-xlight);
     height: 100%;
@@ -570,6 +593,26 @@
         align-content: flex-start;
       }
     }
+
+    .cta--filter {
+      @include mixins.media-lg {
+        display: none;
+      }
+    }
+
+    .search__result {
+      &-row {
+        justify-content: flex-start;
+        gap: 15px;
+        flex-wrap: wrap;
+
+        &-filter {
+          @include mixins.media-xs {
+            margin-left: auto;
+          }
+        }
+      }
+    }
   }
 
   &__button {

package/styles/components/_search.scss

@@ -238,6 +238,11 @@
       margin-bottom: 15px;
       margin-top: 0;
       padding-top: 15px;
+      padding-right: 60px;
+
+      @include mixins.media-lg {
+        padding-right: 15px;
+      }
     }
 
     &-link {