@qite/tide-booking-component 1.2.0 → 1.2.1

package/build/build-esm/shared/utils/localization-util.d.ts

@@ -10,7 +10,8 @@ export declare const getTranslations: (language: string) => {
         ERROR: string;
         PREVIOUS: string;
         NEXT: string;
-        SUBMIT: string;
+        SUBMIT_BOOKING: string;
+        SUBMIT_OFFER: string;
         COMPOSE: string;
         ROOM_OPTIONS: string;
         FLIGHT_OPTIONS: string;
@@ -58,6 +59,7 @@ export declare const getTranslations: (language: string) => {
         PER_NIGHT: string;
         PER_PERSON_PER_NIGHT: string;
         BOOK_NOW: string;
+        TO_YOUR_OFFER: string;
         NOT_AVAILABLE: string;
         NUMBER_OF_ROOMS: string;
         AGE_BY_DEPARTURE_DATE: string;
@@ -70,9 +72,11 @@ export declare const getTranslations: (language: string) => {
         RETURN_DATE: string;
         WHO_YOU_TRAVELING_WITH: string;
         TRAVEL_PERIOD: string;
+        CLOSE: string;
     };
     MAIN: {
         PREPARING_BOOKING: string;
+        PREPARING_OFFEr: string;
         PRODUCT_UNAVAILABLE: string;
     };
     SHARED: {
@@ -194,7 +198,8 @@ export declare const getTranslations: (language: string) => {
         MAIN_BOOKER: string;
         NOTIFICATIONS_TITLE: string;
         VALIDATE_TITLE: string;
-        VALIDATE_TEXT: string;
+        VALIDATE_TEXT_BOOKING: string;
+        VALIDATE_TEXT_OFFER: string;
         OPTIONS: string;
         REMARKS: string;
         VOUCHERS: string;
@@ -204,9 +209,239 @@ export declare const getTranslations: (language: string) => {
         VOUCHER_INVALID: string;
     };
     CONFIRMATION: {
-        TITLE_TEXT: string;
+        TITLE_TEXT_OFFER: string;
+        TITLE_TEXT_BOOKING: string;
+        MESSAGE_TEXT1: string;
+        MESSAGE_TEXT2_OFFER: string;
+        MESSAGE_TEXT2_BOOKING: string;
+        QUESTIONS_TEXT1: string;
+        QUESTIONS_TEXT2: string;
+        QUESTIONS_TEXT3: string;
+        QUESTIONS_ALT: string;
+        MAIL_SUBJECT: string;
+    };
+    ERROR: {
+        TRY_AGAIN: string;
         MESSAGE_TEXT1: string;
         MESSAGE_TEXT2: string;
+        ERROR_TEXT1: string;
+        ERROR_TEXT2: string;
+        ERROR_TEXT3: string;
+        ERROR_ALT: string;
+    };
+} | {
+    STEPS: {
+        PERSONAL_DETAILS: string;
+        EXTRA_OPTIONS: string;
+        SUMMARY: string;
+        CONFIRMATION: string;
+        ERROR: string;
+        PREVIOUS: string;
+        NEXT: string;
+        SUBMIT_BOOKING: string;
+        SUBMIT_OFFER: string;
+        COMPOSE: string;
+        ROOM_OPTIONS: string;
+        FLIGHT_OPTIONS: string;
+    };
+    INPUT: {
+        INCREASE: string;
+        DECREASE: string;
+    };
+    FLIGHTS_FORM: {
+        OUTWARD_FLIGHTS: string;
+        OUTWARD_FLIGHT: string;
+        RETURN_FLIGHTS: string;
+        RETURN_FLIGHT: string;
+        DIRECT_FLIGHT: string;
+        STOP: string;
+        STOPS: string;
+        FLIGHT_STOPS: string;
+        DIFFERENT_OPTION_WARNING: string;
+        FILTER_OPTIONS: string;
+        AIRLINES: string;
+        AIRPORTS: string;
+        NUMBER_OF_STOPS: string;
+        FLIGHT_OUTWARD: string;
+        DEPARTURE_TIME: string;
+        TRAVEL_DURATION: string;
+        CHANGE_TIME: string;
+        FLIGHT_RETURN: string;
+        NO_FLIGHTS_FOUND: string;
+        STARTING: string;
+        LOWEST_PRICE: string;
+        CHOOSE_YOUR_CLASS: string;
+        PLUS_ONE_DAY: string;
+        STOP_TIME: string;
+        NIGHT_DEPARTURE: string;
+        MORNING_DEPARTURE: string;
+        AFTERNOON_DEPARTURE: string;
+        EVENING_DEPARTURE: string;
+    };
+    PRODUCT: {
+        STAY_INCLUDED: string;
+        FLIGHT_INCLUDED: string;
+        TRANSFER_INCLUDED: string;
+        LOADING_PRICE: string;
+        PER_PERSON: string;
+        PER_NIGHT: string;
+        PER_PERSON_PER_NIGHT: string;
+        BOOK_NOW: string;
+        TO_YOUR_OFFER: string;
+        NOT_AVAILABLE: string;
+        NUMBER_OF_ROOMS: string;
+        AGE_BY_DEPARTURE_DATE: string;
+        YEAR: string;
+        APPLY: string;
+        EDIT: string;
+        DEPARTURE: string;
+        DEPARTURE_DATE: string;
+        RETURN: string;
+        RETURN_DATE: string;
+        WHO_YOU_TRAVELING_WITH: string;
+        TRAVEL_PERIOD: string;
+        CLOSE: string;
+    };
+    MAIN: {
+        PREPARING_BOOKING: string;
+        PREPARING_OFFER: string;
+        PRODUCT_UNAVAILABLE: string;
+    };
+    SHARED: {
+        ROOM: string;
+        ROOMS: string;
+        TOTAL_PRICE: string;
+        ADULTS: string;
+        CHILDREN: string;
+        SELECT: string;
+        SELECTED: string;
+    };
+    SIDEBAR: {
+        OVERVIEW: string;
+        SLIDE_TOTAL_PRICE: string;
+        SLIDE_DEPOSIT: string;
+        TRAVEL_INFO: string;
+        TRAVELERS: string;
+        TRAVELERS_ADULTS: string;
+        TRAVELERS_ADULT: string;
+        TRAVELERS_CHILDREN: string;
+        TRAVELERS_CHILD: string;
+        DEPARTURE: string;
+        DEPARTURE_SINGLE: string;
+        ARRIVAL: string;
+        FLIGHT: string;
+        ACCOMMODATION: string;
+        BASE_PRICE: string;
+        OPTIONS: string;
+        INCLUDED_COSTS: string;
+        EXTRA_COSTS: string;
+        DEPOSIT: string;
+        DEPOSIT_TEXT1: string;
+        DEPOSIT_TEXT2: string;
+        DEPOSIT_TEXT3: string;
+        DEPOSIT_TEXT4: string;
+        DEPOSIT_TEXT5: string;
+        DEPOSIT_TEXT6: string;
+        LUGGAGE_INCLUDED: string;
+        DEPARTURE_FLIGHT: string;
+        ARRIVAL_FLIGHT: string;
+        FLIGHT_DEPARTURE: string;
+        FLIGHT_ARRIVAL: string;
+        ON_REQUEST: string;
+        CHANGES: string;
+    };
+    TRAVELERS_FORM: {
+        TRAVELER: string;
+        ADULT: string;
+        ADULTS: string;
+        CHILD: string;
+        CHILDREN: string;
+        GENDER: string;
+        MALE: string;
+        FEMALE: string;
+        OTHER: string;
+        MAIN_BOOKER: string;
+        FIRST_NAME: string;
+        LAST_NAME: string;
+        BIRTHDATE: string;
+        STREET: string;
+        STREET_PLACEHOLDER: string;
+        HOUSE_NUMBER: string;
+        POST_BOX: string;
+        ZIPCODE: string;
+        CITY: string;
+        CITY_PLACEHOLDER: string;
+        COUNTRY: string;
+        SELECT_COUNTRY: string;
+        PHONE: string;
+        EMAIL: string;
+        REPEAT_EMAIL: string;
+        VALIDATION_MESSAGE: string;
+        BOOK_WITH_AGENT: string;
+        CHOOSE_OFFICE: string;
+        COUNTRIES: {
+            BELGIUM: string;
+            NETHERLANDS: string;
+            FRANCE: string;
+        };
+        CHOOSE_AGENT_PLACEHOLDER: string;
+        VALIDATION: {
+            TRAVELER_X_FIELD: string;
+            TRAVELER_X_IS_NO_ADULT: string;
+            TRAVELER_X_IS_NO_CHILD: string;
+            NO_MAIN_BOOKER_SELECTED: string;
+            MAIN_BOOKER_FIELD: string;
+            MAIN_BOOKER_EMAIL_IS_INVALID: string;
+            MAIN_BOOKER_EMAIL_DOES_NOT_MATCH: string;
+            AGENT_IS_REQUIRED: string;
+        };
+    };
+    OPTIONS_FORM: {
+        NO_OPTIONS_TITLE: string;
+        NO_OPTIONS_MESSAGE: string;
+        UNIT_TITLE: string;
+        PACKAGE: string;
+        DAY: string;
+        DAYS: string;
+        NIGHT: string;
+        NIGHTS: string;
+        PER_PAX_TITLE: string;
+        PER_BOOKING_TITLE: string;
+        PER_UNIT_TITLE: string;
+        NONE: string;
+    };
+    ROOM_OPTIONS_FORM: {
+        TRAVELER_GROUP: string;
+        ALTERNATIVES_TRAVELER_GROUP: string;
+        SHOW_ALTERNATIVES: string;
+    };
+    SUMMARY: {
+        PERSONAL_DETAILS: string;
+        TRAVELERS: string;
+        TRAVELER: string;
+        ADULTS: string;
+        ADULT: string;
+        CHILDREN: string;
+        CHILD: string;
+        MAIN_BOOKER: string;
+        NOTIFICATIONS_TITLE: string;
+        VALIDATE_TITLE: string;
+        VALIDATE_TEXT_BOOKING: string;
+        VALIDATE_TEXT_OFFER: string;
+        OPTIONS: string;
+        REMARKS: string;
+        VOUCHERS: string;
+        VOUCHER_VALIDATE: string;
+        ADD_VOUCHER: string;
+        VOUCHER_VALID: string;
+        VOUCHER_INVALID: string;
+    };
+    CONFIRMATION: {
+        TITLE_TEXT_OFFER: string;
+        TITLE_TEXT_BOOKING: string;
+        MESSAGE_TEXT1: string;
+        MESSAGE_TEXT2_OFFER: string;
+        MESSAGE_TEXT2_BOOKING: string;
         QUESTIONS_TEXT1: string;
         QUESTIONS_TEXT2: string;
         QUESTIONS_TEXT3: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

package/src/booking-product/components/amount-input.tsx

@@ -1,6 +1,8 @@
 import React, { useContext } from "react";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
+import { buildClassName } from "../../shared/utils/class-util";
+import Icon from "./icon";
 
 interface AmountInputProps {
   label: string;
@@ -35,39 +37,25 @@ const AmountInput: React.FC<AmountInputProps> = ({
     }
   };
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    if (onChange) {
-      const value =
-        event.target.valueAsNumber < (min ?? 0) ? min ?? 0 : event.target.valueAsNumber;
-      onChange(value);
-    }
-  };
-
   return (
-    <div className="decrement-increment">
+    <div className={buildClassName(["decrement-increment", disabled && "decrement-increment--disabled"])}>
       <label className="decrement-increment__label">{label}</label>
       <div className="decrement-increment__ui">
-        <button
+        {!disabled && (<button
           type="button"
           className="button button--decrement"
           title={translations.INPUT.DECREASE}
           disabled={disabled}
           onClick={handleDecreaseClick}
-        ></button>
-        <input
-          type="number"
-          min={min}
-          value={value}
-          className="decrement-increment__input"
-          onChange={handleInputChange}
-        />
-        <button
+        ><Icon name="ui-min" /></button>)}
+        <span>{value}</span>
+        {!disabled && (<button
           type="button"
           className="button button--increment"
           title={translations.INPUT.INCREASE}
           disabled={disabled}
           onClick={handleIncreaseClick}
-        ></button>
+        ><Icon name="ui-plus" /></button>)}
       </div>
     </div>
   );

package/src/booking-product/components/date-range-picker/calendar.tsx

@@ -14,11 +14,11 @@ import {
 } from "date-fns";
 import { chunk, isFunction, range } from "lodash";
 import React, { useContext } from "react";
-import Icon from "../../../booking-wizard/components/icon";
 import { buildClassName } from "../../../shared/utils/class-util";
 import { getLocale } from "../../../shared/utils/localization-util";
 import SettingsContext from "../../settings-context";
 import CalendarDay from "./calendar-day";
+import Icon from "../icon";
 
 interface CalendarProps {
   year?: number;
@@ -145,7 +145,7 @@ const Calendar: React.FC<CalendarProps> = ({
             ])}
             onClick={handlePreviousClick}
           >
-            <Icon name="ui-chevron-left" />
+            <Icon name="ui-chevron" />
           </div>
           <div className="calendar__current-month">
             {format(focusDate, "MMMM yyyy", { locale })}
@@ -157,7 +157,7 @@ const Calendar: React.FC<CalendarProps> = ({
             ])}
             onClick={handleNextClick}
           >
-            <Icon name="ui-chevron-right" />
+            <Icon name="ui-chevron" />
           </div>
         </div>
         <div className="calendar__day-labels">

package/src/booking-product/components/dates.tsx

@@ -35,7 +35,7 @@ const Dates: React.FC<DatesProps> = ({
       {
         name: "offset",
         options: {
-          offset: [0, 20],
+          offset: [0, -40],
         },
       },
       {
@@ -57,7 +57,7 @@ const Dates: React.FC<DatesProps> = ({
       setPanelActive(false);
     }
   };
-  
+
   useEffect(() => {
     document.addEventListener("mousedown", handleDocumentClick);
     return () => {
@@ -73,8 +73,8 @@ const Dates: React.FC<DatesProps> = ({
 
   return (
     <div className="booking-product__dates" ref={setReferenceElement}>
-      <div className="booking-product__dates-title">        
-        <Icon name="ui-calendar" />
+      <div className="booking-product__dates-title">
+        <Icon name="ui-calendar" width={25} height={25} />
         {translations.PRODUCT.TRAVEL_PERIOD}
       </div>
       <div className="form__group form__group--datepicker form__group--icon">
@@ -102,22 +102,28 @@ const Dates: React.FC<DatesProps> = ({
           />
         </div>
         <div
-        ref={setPopperElement}
-        className={buildClassName([
-          "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
-          panelActive && "qsm__panel--active",
-        ])}
-        style={mql?.matches ? styles.popper : undefined}
-        {...attributes.popper}
-      >
-        <DateRangePicker
-          fromDate={value?.fromDate}
-          toDate={value?.toDate}
-          duration={duration}
-          disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
-          onSelectionChange={handleSelectionChange}
-        />
-      </div>
+          ref={setPopperElement}
+          className={buildClassName([
+            "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
+            panelActive && "qsm__panel--active",
+            !mql?.matches && "qsm__panel--mobile"
+          ])}
+          style={mql?.matches ? styles.popper : undefined}
+          {...attributes.popper}
+        >
+          <DateRangePicker
+            fromDate={value?.fromDate}
+            toDate={value?.toDate}
+            duration={duration}
+            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
+            onSelectionChange={handleSelectionChange}
+          />
+          {!mql?.matches && (
+            <div className="qsm__close" onClick={() => setPanelActive(false)}>
+              <Icon name="ui-close" height={25} width={25} />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/booking-product/components/footer.tsx

@@ -6,12 +6,14 @@ import SettingsContext from "../settings-context";
 interface FooterProps {
   priceText: string | undefined;
   isLoading: boolean;
+  isOffer: boolean | undefined;
   handleBookClick: () => void;
 }
 
 const Footer: React.FC<FooterProps> = ({
   priceText,
   isLoading,
+  isOffer,
   handleBookClick
 }) => {
   const {
@@ -32,7 +34,7 @@ const Footer: React.FC<FooterProps> = ({
                 <div className="booking-product__footer-label">
                   {translations.SHARED.TOTAL_PRICE}
                 </div>
-                <div className="booking-summary__footer-price">
+                <div className="booking-product__footer-price">
                   {priceText}
                 </div>
               </div>
@@ -40,7 +42,7 @@ const Footer: React.FC<FooterProps> = ({
             <div className="booking-product_footer-actions">
               {priceText ? (
                 <button type="button" className="cta" onClick={handleBookClick}>
-                  {translations.PRODUCT.BOOK_NOW}
+                  {isOffer ? translations.PRODUCT.TO_YOUR_OFFER : translations.PRODUCT.BOOK_NOW}
                 </button>
               ) : ((alternativeActionText && alternativeAction)
                 ? (

package/src/booking-product/components/header.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import Loader from "../../shared/components/loader";
-import Rating from "../../shared/components/rating";
+import Rating from "./rating";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
 import Icon from "./icon";
@@ -44,17 +44,17 @@ const Header: React.FC<HeaderProps> = ({
               <div className="package-icons">
                 {priceText && (
                   <div className="package-icons__icon">
-                    <Icon name="ui-bed" title={translations.PRODUCT.STAY_INCLUDED} />
+                    <Icon name="ui-bed" title={translations.PRODUCT.STAY_INCLUDED} width={25} height={25} />
                   </div>
                 )}
                 {hasFlight && (
                   <div className="package-icons__icon">
-                    <Icon name="ui-flight" title={translations.PRODUCT.FLIGHT_INCLUDED} />
+                    <Icon name="ui-flight" title={translations.PRODUCT.FLIGHT_INCLUDED} width={25} height={25} />
                   </div>
                 )}
                 {hasTransfer && (
                   <div className="package-icons__icon">
-                    <Icon name="ui-transfer" title={translations.PRODUCT.TRANSFER_INCLUDED} />
+                    <Icon name="ui-transfer" title={translations.PRODUCT.TRANSFER_INCLUDED} width={25} height={25} />
                   </div>
                 )}
               </div>