@qite/tide-booking-component 1.2.5 → 1.3.1

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/message.tsx

@@ -1,34 +1,34 @@
-import Icon from "./icon";
-import React from "react";
-import { buildClassName } from "../../shared/utils/class-util";
-
-interface MessageProps {
-  type: "error" | "success";
-  title: string;
-  actionComponent?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-}
-
-const Message: React.FC<MessageProps> = ({
-  type,
-  title,
-  actionComponent,
-  children,
-}) => (
-  <div
-    className={buildClassName([
-      "booking-message",
-      type === "error" && "booking-message--error",
-      type === "success" && "booking-message--success",
-    ])}
-  >
-    {type === "error" && <Icon name="ui-error" />}
-    <h4 className="booking-message__heading">{title}</h4>
-    <div className="booking-message__text">{children}</div>
-    {actionComponent && (
-      <div className="booking-message__actions">{actionComponent}</div>
-    )}
-  </div>
-);
-
-export default Message;
+import Icon from "./icon";
+import React from "react";
+import { buildClassName } from "../../shared/utils/class-util";
+
+interface MessageProps {
+  type: "error" | "success";
+  title: string;
+  actionComponent?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+}
+
+const Message: React.FC<MessageProps> = ({
+  type,
+  title,
+  actionComponent,
+  children,
+}) => (
+  <div
+    className={buildClassName([
+      "booking-message",
+      type === "error" && "booking-message--error",
+      type === "success" && "booking-message--success",
+    ])}
+  >
+    {type === "error" && <Icon name="ui-error" />}
+    <h4 className="booking-message__heading">{title}</h4>
+    <div className="booking-message__text">{children}</div>
+    {actionComponent && (
+      <div className="booking-message__actions">{actionComponent}</div>
+    )}
+  </div>
+);
+
+export default Message;

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

@@ -1,113 +1,113 @@
-import React, { ChangeEvent, useEffect, useState } from "react";
-
-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;
+import React, { ChangeEvent, useEffect, useState } from "react";
+
+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/print-offer-button.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  BookingPackage,
+  Pax,
+} from "@qite/tide-client/build/types";
+import { useOfferPrinter } from "../use-offer-printer";
+
+interface PrintOfferButtonProps {
+  bookingPackage?: BookingPackage;
+
+  getPax: () => Pax[] | undefined;
+
+  tagIds?: number[];
+
+  printActionId?: number | null;
+
+  onPrinted?: (pdfUrl: string) => void;
+
+  labelIdle?: string;
+  labelCreating?: string;
+  labelPrinting?: string;
+  disabled?: boolean;
+  className?: string;
+  loader?: React.ReactNode;
+}
+
+const PrintOfferButton: React.FC<PrintOfferButtonProps> = ({
+  bookingPackage,
+  getPax,
+  tagIds,
+  printActionId = null,
+  onPrinted,
+  labelIdle = "Print offer",
+  labelCreating = "Generating offer…",
+  labelPrinting = "Generating PDF…",
+  disabled = false,
+  className,
+}) => {
+  const { handlePrint, stage, loading } = useOfferPrinter({
+    bookingPackage,
+    getPax,
+    tagIds,
+    onPrinted,
+    printActionId,
+  });
+
+  const label =
+    stage === "creating"
+      ? labelCreating
+      : stage === "printing"
+      ? labelPrinting
+      : labelIdle;
+
+  return (
+    <button
+      type='button'
+      onClick={handlePrint}
+      disabled={disabled || loading}
+      className={className}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default PrintOfferButton;