@qite/tide-booking-component 1.4.111 → 1.4.113

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

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Voucher valideren",
     "ADD_VOUCHER": "Voucher toevoegen",
     "VOUCHER_VALID": "Voucher is geldig",
-    "VOUCHER_INVALID": "Voucher is ongeldig"
+    "VOUCHER_INVALID": "Voucher is ongeldig",
+    "REDIRECT": "Redirecten naar betalingsprovider...",
+    "PROCESS_BOOKING": "Even geduld, we verwerken je boeking"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Uw offerte met nummer {0} is aangevraagd",

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

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valider verdikupong",
     "ADD_VOUCHER": "Legg til verdikupong",
     "VOUCHER_VALID": "Verdikupongen er gyldig",
-    "VOUCHER_INVALID": "Verdikupongen er ugyldig"
+    "VOUCHER_INVALID": "Verdikupongen er ugyldig",
+    "REDIRECT": "Omdirigerer til betalingsleverandør...",
+    "PROCESS_BOOKING": "Vennligst vent, bestillingen din behandles"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Tilbudet ditt med nummer {0} er forespurt",

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

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Zweryfikuj voucher",
     "ADD_VOUCHER": "Dodaj voucher",
     "VOUCHER_VALID": "Voucher jest ważny",
-    "VOUCHER_INVALID": "Voucher jest nieważny"
+    "VOUCHER_INVALID": "Voucher jest nieważny",
+    "REDIRECT": "Przekierowanie do dostawcy płatności...",
+    "PROCESS_BOOKING": "Proszę czekać, Twoja rezerwacja jest przetwarzana"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Twoja wycena o numerze {0} została wysłana",

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

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validar voucher",
     "ADD_VOUCHER": "Adicionar voucher",
     "VOUCHER_VALID": "O voucher é válido",
-    "VOUCHER_INVALID": "O voucher não é válido"
+    "VOUCHER_INVALID": "O voucher não é válido",
+    "REDIRECT": "Redirecionando para o provedor de pagamento...",
+    "PROCESS_BOOKING": "Por favor, aguarde, sua reserva está sendo processada"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "O seu orçamento com o número {0} foi solicitado",

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

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validera voucher",
     "ADD_VOUCHER": "Lägg till voucher",
     "VOUCHER_VALID": "Vouchern är giltig",
-    "VOUCHER_INVALID": "Vouchern är ogiltig"
+    "VOUCHER_INVALID": "Vouchern är ogiltig",
+    "REDIRECT": "Omdirigerar till betalningsleverantör...",
+    "PROCESS_BOOKING": "Vänligen vänta, din bokning behandlas"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Din offert med nummer {0} har begärts",

package/styles/components/_booking.scss

@@ -44,31 +44,44 @@
 
   &__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 {
       width: 100%;
+
       @include media-xs {
         width: auto;
         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 +92,14 @@
     @include media-xl {
       padding-right: 40px;
     }
+
+    &__wrapper {
+      margin-bottom: 155px;
+
+      @include media-lg {
+        margin-bottom: 0px;
+      }
+    }
   }
 
   &__panel-heading {
@@ -141,6 +162,12 @@
     display: flex;
     align-items: center;
     background: var(--tide-booking-sidebar-header-background);
+
+    min-height: 80px;
+
+    @include media-xl {
+      min-height: 100px;
+    }
   }
 
   &__product-body {
@@ -221,8 +248,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 +267,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 +282,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 +608,7 @@
 
     &.booking-card__group--package {
       padding: 40px 10px 20px;
-      margin-top: -25px;
+      // margin-top: -25px;
       margin-bottom: 15px;
       transition: all 0.4s ease;
 
@@ -608,6 +633,7 @@
 
       .tree {
         padding-bottom: 0;
+
         @include media-lg {
           padding-bottom: 7.5px;
         }
@@ -620,6 +646,7 @@
 
       tr:last-child .tree {
         padding-bottom: 7.5px;
+
         @include media-lg {
           // empty but transition inherited
         }
@@ -721,7 +748,7 @@
 
   &__tag {
     position: absolute;
-    top: 0px;
+    top: 15px;
     left: 0;
     padding: 6px 5px 6px 10px;
     font-size: 14px;
@@ -851,6 +878,7 @@
         color: var(--tide-booking-invalid);
       }
     }
+
     .icon {
       width: 50px;
       height: 50px;

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/_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/_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 {