@qite/tide-booking-component 1.4.110 → 1.4.112

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/_booking.scss

@@ -44,17 +44,23 @@
 
   &__navigator {
     gap: 15px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: var(--tide-booking-white);
+    // outline: 2px solid var(--tide-booking-bg);
+    z-index: 11;
+    width: 100%;
 
     @include row--xs;
     justify-content: flex-end;
-    padding: 0 15px;
-    padding-top: 30px;
-    padding-bottom: 60px;
-    // background-color: $gray-light;
+    align-items: center;
+    padding: 15px;
 
     @include media-lg {
-      padding: 0 15px;
-      padding-top: 50px;
+      position: relative;
+      padding: 30px 15px;
+      background: var(--tide-booking-transparent);
     }
 
     .cta--secondary {
@@ -64,11 +70,17 @@
         margin-right: auto;
       }
     }
+
+    button {
+      @include media-xs {
+        max-width: 150px;
+      }
+    }
   }
 
   &__panel {
-    width: 1200px;
-    max-width: 100%;
+    width: 100%;
+    max-width: 1200px;
     @include column;
     border-radius: 15px * 0.3;
 
@@ -79,6 +91,14 @@
     @include media-xl {
       padding-right: 40px;
     }
+
+    &__wrapper {
+      margin-bottom: 155px;
+
+      @include media-lg {
+        margin-bottom: 0px;
+      }
+    }
   }
 
   &__panel-heading {
@@ -221,8 +241,8 @@
   &__sidebar {
     position: fixed;
     width: calc(100% - 0px);
-    max-height: calc(100vh - 90px);
-    bottom: 0;
+    max-height: calc(100dvh - 90px);
+    bottom: 75px;
     right: 0;
     transform: translate3D(0, calc(100% - 80px), 0);
     margin-left: auto;
@@ -240,11 +260,10 @@
     @include media-lg {
       position: sticky;
       width: 400px;
-      max-height: none;
+      height: calc(100vh - 86px);
       top: 40px;
       bottom: initial;
       transform: none;
-      min-height: 93vh;
     }
 
     .booking__product-heading {
@@ -256,7 +275,6 @@
   &__sidebar-frame {
     border-radius: var(--tide-booking-sidebar-frame-radius);
     background-color: var(--tide-booking-sidebar-body-background);
-    height: calc(100vh - 86px);
   }
 
   &__sidebar--active {
@@ -583,7 +601,7 @@
 
     &.booking-card__group--package {
       padding: 40px 10px 20px;
-      margin-top: -25px;
+      // margin-top: -25px;
       margin-bottom: 15px;
       transition: all 0.4s ease;
 
@@ -721,7 +739,7 @@
 
   &__tag {
     position: absolute;
-    top: 0px;
+    top: 15px;
     left: 0;
     padding: 6px 5px 6px 10px;
     font-size: 14px;

package/styles/components/_cta.scss

@@ -104,8 +104,8 @@
 
   &--filter {
     position: absolute;
-    right: 15px;
-    top: -70px;
+    right: 0px;
+    top: -55px;
     width: auto;
     display: flex;
     align-items: center;

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/_flight-option.scss

@@ -1031,7 +1031,7 @@
     gap: 20px;
     background: #fff;
     height: 100%;
-    max-height: 97.3vh;
+    max-height: 100dvh;
     width: calc(100vw - 40px);
     padding: 20px;
     box-shadow: 0px 0px 5px rgba(158, 158, 158, 0.447);

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 {

package/styles/components/_step-indicators.scss

@@ -3,8 +3,8 @@
   width: 100%;
   max-width: 100%;
   display: flex;
-  padding-bottom: 15px;
-  margin-bottom: 20px;
+  // padding-bottom: 15px;
+  // margin-bottom: 20px;
   overflow: hidden;
 
   &__items {
@@ -12,7 +12,7 @@
     width: 100%;
     max-width: 100vw;
     padding-bottom: 15px;
-    margin-bottom: 22.5px;
+    margin-bottom: 30px;
     display: flex;
     flex-grow: 0;
     justify-content: space-between;
@@ -24,8 +24,12 @@
       width: 95%;
       height: 0;
       left: 2.5%;
-      top: 20px;
+      top: 15px;
       border-bottom: var(--tide-booking-step-indicators-line-trough);
+
+      @include media-xs {
+        top: 20px;
+      }
     }
   }
 
@@ -70,14 +74,21 @@
         &:before {
           content: '';
           position: absolute;
-          width: 17px;
-          height: 6px;
-          margin-top: -5px;
-          margin-left: -2px;
+          width: 11px;
+          height: 5px;
+          margin-top: -6px;
+          margin-left: 0px;
           border-left: 2px solid;
           border-bottom: 2px solid;
           border-color: var(--tide-booking-step-indicators-icon-check-color-active);
           transform: rotate(-45deg);
+
+          @include media-xs {
+            width: 17px;
+            height: 6px;
+            margin-top: -5px;
+            margin-left: -2px;
+          }
         }
       }
 
@@ -106,14 +117,21 @@
       &:before {
         content: '';
         position: absolute;
-        width: 17px;
-        height: 6px;
-        margin-top: -5px;
-        margin-left: -2px;
+        width: 11px;
+        height: 5px;
+        margin-top: -6px;
+        margin-left: 0px;
         border-left: 2px solid;
         border-bottom: 2px solid;
         border-color: var(--tide-booking-step-indicators-icon-check-color-completed);
         transform: rotate(-45deg);
+
+        @include media-xs {
+          width: 17px;
+          height: 6px;
+          margin-top: -5px;
+          margin-left: -2px;
+        }
       }
     }
   }
@@ -121,17 +139,23 @@
   &__icon {
     @extend %reset;
     position: relative;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     padding-top: 2px;
     @include flex--centerXY;
-    flex: 0 0 40px;
+    flex: 0 0 30px;
     border-radius: var(--tide-booking-step-indicators-icon-border-radius);
     font-family: var(--tide-booking-step-indicators-icon-font-family);
     color: var(--tide-booking-step-indicators-icon-color);
     background-color: var(--tide-booking-step-indicators-icon-background);
     @extend %transition-easing;
     z-index: 1;
+
+    @include media-xs {
+      width: 40px;
+      height: 40px;
+      flex: 0 0 40px;
+    }
   }
 
   &__text {
@@ -144,6 +168,7 @@
     line-height: 1.2;
     text-overflow: ellipsis;
     overflow: hidden;
+    display: none;
 
     @include media-xs {
       font-size: 12px;
@@ -151,6 +176,7 @@
 
     @include media-sm {
       font-size: 14px;
+      display: block;
     }
 
     @include media-md {

package/styles/components/_tree.scss

@@ -348,11 +348,11 @@
   }
 
   .radiobutton {
-    padding: 2.5px 0 0 28px;
+    padding: 2.5px 0 2.5px 28px;
     flex-grow: 1;
 
     @include media-lg {
-      padding: 15px 0px 0 28px;
+      padding: 15px 0px 15px 28px;
     }
 
     &__input {