@qite/tide-booking-component 1.1.3 → 1.2.0

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

@@ -21,10 +21,33 @@ export declare const getTranslations: (language: 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;
@@ -58,6 +81,8 @@ export declare const getTranslations: (language: string) => {
         TOTAL_PRICE: string;
         ADULTS: string;
         CHILDREN: string;
+        SELECT: string;
+        SELECTED: string;
     };
     SIDEBAR: {
         OVERVIEW: string;
@@ -139,6 +164,11 @@ export declare const getTranslations: (language: string) => {
             AGENT_IS_REQUIRED: string;
         };
     };
+    ROOM_OPTIONS_FORM: {
+        TRAVELER_GROUP: string;
+        ALTERNATIVES_TRAVELER_GROUP: string;
+        SHOW_ALTERNATIVES: string;
+    };
     OPTIONS_FORM: {
         NO_OPTIONS_TITLE: string;
         NO_OPTIONS_MESSAGE: string;
@@ -177,8 +207,6 @@ export declare const getTranslations: (language: string) => {
         TITLE_TEXT: string;
         MESSAGE_TEXT1: string;
         MESSAGE_TEXT2: string;
-        MESSAGE_TEXT3: string;
-        MESSAGE_TEXT4: string;
         QUESTIONS_TEXT1: string;
         QUESTIONS_TEXT2: string;
         QUESTIONS_TEXT3: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -49,7 +49,7 @@
     "rollup": "^2.53.2",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "0.36.0",
     "tslib": "^2.3.1",
     "typescript": "^4.3.5",
     "uuid": "^8.3.2"
@@ -71,6 +71,6 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "^1.1.44"
+    "@qite/tide-client": "^1.1.57"
   }
 }

package/rollup.config.js

@@ -1,23 +1,23 @@
-import commonjs from "@rollup/plugin-commonjs";
-import del from "rollup-plugin-delete";
-import json from "@rollup/plugin-json";
-import nodeResolve from "@rollup/plugin-node-resolve";
-import packageJson from "./package.json";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import typescript from "rollup-plugin-typescript2";
-
-export default {
-  input: "src/index.ts",
-  output: [
-    { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
-    { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    json(),
-    nodeResolve(),
-    commonjs(),
-    typescript(),
-    del({ targets: ["build/*"] }),
-  ],
-};
+import commonjs from "@rollup/plugin-commonjs";
+import del from "rollup-plugin-delete";
+import json from "@rollup/plugin-json";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import packageJson from "./package.json";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import typescript from "rollup-plugin-typescript2";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
+    { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    json(),
+    nodeResolve(),
+    commonjs(),
+    typescript(),
+    del({ targets: ["build/*"] }),
+  ],
+};

package/src/booking-product/components/multi-range-filter.css

@@ -0,0 +1,115 @@
+/* .double-slider-box {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  width: 100%;
+  max-width: 300px;
+  margin: auto;
+}
+
+.range-slider {
+  position: relative;
+  width: 100%;
+  height: 5px;
+  margin: 30px 0;
+  background-color: #8a8a8a;
+  border-radius: 5px;
+}
+
+.slider-track {
+  height: 100%;
+  position: absolute;
+  background-color: #fe696a;
+  left: 0;
+  right: 100%;
+  border-radius: 5px;
+}
+
+.range-slider input[type="range"] {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  transform: translateY(-50%);
+  background: none;
+  pointer-events: none;
+  appearance: none;
+  height: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  background: #fe696a;
+  pointer-events: auto;
+  appearance: none;
+  cursor: pointer;
+  box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
+  position: relative;
+  z-index: 2;
+}
+
+input[type="range"]::-moz-range-thumb {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  background: #fe696a;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
+  position: relative;
+  z-index: 2;
+}
+
+.input-box {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.min-box,
+.max-box {
+  width: 50%;
+}
+
+.min-box {
+  margin-right: 10px;
+}
+
+.max-box {  
+  text-align: right;
+}
+
+input[type="number"] {
+  width: 40px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.min-tooltip,
+.max-tooltip {
+  position: absolute;
+  top: -35px;
+  font-size: 12px;
+  color: #555;
+  background-color: #fff;
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.min-tooltip {
+  left: 0;
+  transform: translateX(-50%);
+}
+
+.max-tooltip {
+  right: 0;
+  transform: translateX(50%);
+} */

package/src/booking-product/components/multi-range-filter.tsx

@@ -0,0 +1,114 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import "./multi-range-filter.css";
+
+interface MultiRangeFilterProps {
+  min: number;
+  max: number;
+  selectedMin: number;
+  selectedMax: number;
+
+  valueFormatter: (value: number) => string;
+  onChange: (min: number, max: number) => void;
+}
+
+const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({
+  min,
+  max,
+  selectedMin,
+  selectedMax,
+  valueFormatter,
+  onChange
+}) => {
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftPercentage, setLeftPercentage] = useState<number>(0);
+  const [rightPercentage, setRightPercentage] = useState<number>(0);
+  const [minVal, setMinVal] = useState(min);
+  const [maxVal, setMaxVal] = useState(max);
+  const minGap = 5;
+
+  useEffect(() => {
+    setSliderTrack();
+  }, [minVal, maxVal]);
+
+  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+    if (value >= min && selectedMax - value >= minGap) {
+      setMinVal(value);
+    }
+  };
+
+  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+    if (value <= max && value - selectedMin >= minGap) {
+      setMaxVal(value);
+    }
+  };
+
+  const setSliderTrack = () => {
+    const range = document.querySelector(".slider-track");
+
+    if (range) {
+      const minPercent = ((minVal - min) / (max - min)) * 100;
+      const maxPercent = ((maxVal - min) / (max - min)) * 100;
+
+      setLeftPercentage(minPercent);
+      setRightPercentage(100 - maxPercent);
+    }
+  };
+
+  const startDrag = () => {
+    setIsDragging(true);
+  };
+
+  const stopDrag = () => {
+    setIsDragging(false);
+    onChange(minVal, maxVal);
+  };
+
+  return (
+    <div className="double-slider-box">
+      <div className="input-box">
+        <div className="min-box">
+          {valueFormatter(min)}
+        </div>
+        <div className="max-box">
+          {valueFormatter(max)}
+        </div>
+      </div>
+      <div className="range-slider">
+        <div className="slider-track"
+          style={{ 'left': leftPercentage + '%', right: rightPercentage + '%' }}>
+        </div>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={minVal}
+          onChange={slideMin}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="min-val"
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={maxVal}
+          onChange={slideMax}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="max-val"
+        />
+        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
+        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default MultiRangeFilter;

package/src/booking-wizard/components/labeled-input.tsx

@@ -1,64 +1,64 @@
-import React from "react";
-import { buildClassName } from "../../shared/utils/class-util";
-import { compact } from "lodash";
-
-interface LabeledInputProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  min?: string | number;
-  max?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-
-const LabeledInput: React.FC<LabeledInputProps> = ({
-  name,
-  type,
-  required,
-  value,
-  defaultValue,
-  min,
-  max,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  onChange,
-  onBlur,
-}) => {
-  return (
-    <label
-      className={buildClassName([
-        "form__group",
-        extraClassName,
-        hasError && "form__group--error",
-      ])}
-    >
-      <span className="form__label">
-        {compact([label, required && "*"]).join(" ")}
-      </span>
-      <input
-        name={name}
-        type={type ?? "text"}
-        required={required}
-        className="form__input"
-        min={min}
-        max={max}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        defaultValue={defaultValue}
-      />
-    </label>
-  );
-};
-
-export default LabeledInput;
+import React from "react";
+import { buildClassName } from "../../shared/utils/class-util";
+import { compact } from "lodash";
+
+interface LabeledInputProps {
+  name: string;
+  type?: string;
+  required?: boolean;
+  value?: string | number;
+  defaultValue?: string | number;
+  min?: string | number;
+  max?: string | number;
+  label?: string;
+  placeholder?: string;
+  hasError?: boolean;
+  extraClassName?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+
+const LabeledInput: React.FC<LabeledInputProps> = ({
+  name,
+  type,
+  required,
+  value,
+  defaultValue,
+  min,
+  max,
+  label,
+  placeholder,
+  extraClassName,
+  hasError,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <label
+      className={buildClassName([
+        "form__group",
+        extraClassName,
+        hasError && "form__group--error",
+      ])}
+    >
+      <span className="form__label">
+        {compact([label, required && "*"]).join(" ")}
+      </span>
+      <input
+        name={name}
+        type={type ?? "text"}
+        required={required}
+        className="form__input"
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        defaultValue={defaultValue}
+      />
+    </label>
+  );
+};
+
+export default LabeledInput;

package/src/booking-wizard/components/labeled-select.tsx

@@ -1,69 +1,69 @@
-import React from "react";
-import { buildClassName } from "../../shared/utils/class-util";
-import { compact } from "lodash";
-
-interface LabeledSelectProps {
-  name: string;
-  id?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  label?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  extraDropdownClassName?: string;
-  options?: {
-    key: string;
-    value: string | number | undefined;
-    label: string;
-  }[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-}
-
-const LabeledSelect: React.FC<LabeledSelectProps> = ({
-  name,
-  id,
-  required,
-  value,
-  defaultValue,
-  label,
-  extraClassName,
-  extraDropdownClassName,
-  hasError,
-  options,
-  onChange,
-  onBlur,
-}) => {
-  return (
-    <label
-      className={buildClassName([
-        "form__group",
-        extraClassName,
-        hasError && "form__group--error",
-      ])}
-    >
-      <span className="form__label">
-        {compact([label, required && "*"]).join(" ")}
-      </span>
-      <div className={buildClassName(["dropdown", extraDropdownClassName])}>
-        <select
-          name={name}
-          id={id}
-          defaultValue={defaultValue}
-          value={value}
-          onBlur={onBlur}
-          onChange={onChange}
-        >
-          {options?.map((option) => (
-            <option key={option.key} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </div>
-    </label>
-  );
-};
-
-export default LabeledSelect;
+import React from "react";
+import { buildClassName } from "../../shared/utils/class-util";
+import { compact } from "lodash";
+
+interface LabeledSelectProps {
+  name: string;
+  id?: string;
+  required?: boolean;
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  hasError?: boolean;
+  extraClassName?: string;
+  extraDropdownClassName?: string;
+  options?: {
+    key: string;
+    value: string | number | undefined;
+    label: string;
+  }[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
+}
+
+const LabeledSelect: React.FC<LabeledSelectProps> = ({
+  name,
+  id,
+  required,
+  value,
+  defaultValue,
+  label,
+  extraClassName,
+  extraDropdownClassName,
+  hasError,
+  options,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <label
+      className={buildClassName([
+        "form__group",
+        extraClassName,
+        hasError && "form__group--error",
+      ])}
+    >
+      <span className="form__label">
+        {compact([label, required && "*"]).join(" ")}
+      </span>
+      <div className={buildClassName(["dropdown", extraDropdownClassName])}>
+        <select
+          name={name}
+          id={id}
+          defaultValue={defaultValue}
+          value={value}
+          onBlur={onBlur}
+          onChange={onChange}
+        >
+          {options?.map((option) => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </label>
+  );
+};
+
+export default LabeledSelect;

package/src/booking-wizard/components/step-indicator.tsx

@@ -13,12 +13,12 @@ const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
   const translations = useSelector(selectTranslations);  
 
   const allSteps = [];
-  if (!roomOptions.isHidden) {
-    allSteps.push(translations.STEPS.ROOM_OPTIONS);
-  }
   if (!flightOptions.isHidden) {
     allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
   }
+  if (!roomOptions.isHidden) {
+    allSteps.push(translations.STEPS.ROOM_OPTIONS);
+  }
 
   allSteps.push(translations.STEPS.EXTRA_OPTIONS);
   allSteps.push(translations.STEPS.PERSONAL_DETAILS);

package/src/booking-wizard/features/booking/api.ts

@@ -1,9 +1,10 @@
-import { agents, details } from "@qite/tide-client";
+import { agents, details, generateBookingAccommodations } from "@qite/tide-client";
 import {
   BookingPackage,
   BookingPackageDetailsRequest,
   BookingPackageRequest,
   BookingTravelAgent,
+  GenerateBookingAccommodationRequest,
   TideResponse,
 } from "@qite/tide-client/build/types";
 import { ApiSettingsState } from "../../../shared/types";
@@ -27,8 +28,18 @@ const fetchAgents = async (
   return await agents(tideClientConfig, signal);
 };
 
+const fetchAccommodationViews = async (
+  request: GenerateBookingAccommodationRequest,
+  signal: AbortSignal,
+  apiSettings?: ApiSettingsState
+) => {
+  const tideClientConfig = buildTideClientConfig(apiSettings);
+  return await generateBookingAccommodations(tideClientConfig, request, signal);
+}
+
 const packageApi = {
   fetchDetails,
   fetchAgents,
+  fetchAccommodationViews
 };
 export default packageApi;