@travelswitchhq/flight-search-react 1.1.8 → 1.2.0

package/dist/index.cjs

@@ -80,7 +80,6 @@ var flightSearchWidgetStyles = `
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
-  background: var(--sw-widget-bg);
   *,
   *::before,
   *::after {
@@ -196,10 +195,10 @@ var flightSearchWidgetStyles = `
   min-width: 0; 
   overflow: visible; 
 }
-.sw-srh-form-fieldsw-is-invalid {
+.sw-srh-form-field.sw-is-invalid {
   box-shadow: inset 0 0 0 1px var(--sw-error);
 }
-.sw-srh-form-fieldsw-is-invalid label {
+.sw-srh-form-field.sw-is-invalid label {
   color: var(--sw-error);
 }
 .sw-custom-dropdown.sw-has-error .sw-custom-dropdown-trigger {
@@ -208,7 +207,7 @@ var flightSearchWidgetStyles = `
 .sw-custom-dropdown.sw-has-error .sw-custom-dropdown-trigger::placeholder {
   color: var(--sw-error) !important;
 }
-.sw-form-field label {
+.sw-srh-form-field label {
   display: block;
   width: 100%;
   margin: 0;
@@ -222,6 +221,13 @@ var flightSearchWidgetStyles = `
   text-overflow: ellipsis;
   text-align: initial;
 }
+.sw-field-error {
+  margin: 2px 0 0;
+  color: #f60b0b !important;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+}
 .p-button-label {
   flex: unset;
 }
@@ -317,6 +323,10 @@ padding-inline-start: 25px;
   border-radius: var(--sw-radius);
   box-shadow: var(--sw-widget-shadow);
 }
+.p-autocomplete-panel ul {
+  margin-bottom: 0 !important;
+  padding-left: 0 !important;
+}
 .sw-dropdown::-webkit-scrollbar {
   display: none;
 }
@@ -1005,6 +1015,9 @@ padding-inline-start: 25px;
   font-size: 12px;
   font-weight: 400;
 }
+.sw-airline-autocomplete .p-autocomplete-loader {
+  display: none !important;
+}
 .sw-fsrh-adv-cont {
   display: flex;
   align-items: center;
@@ -1487,6 +1500,10 @@ function formatDisplayDate(date) {
   if (!date || !(date instanceof Date) || isNaN(date.getTime())) return "Select date";
   return date.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
 }
+var isEmptyLocationValue = (value, placeholder) => {
+  const trimmed = (value ?? "").trim();
+  return trimmed.length === 0 || trimmed === placeholder;
+};
 function FlightSearchWidget({
   config,
   ssoUser
@@ -1549,6 +1566,8 @@ function FlightSearchWidget({
   const [isOriginDropdownOpen, setIsOriginDropdownOpen] = (0, import_react.useState)(false);
   const [isDestinationDropdownOpen, setIsDestinationDropdownOpen] = (0, import_react.useState)(false);
   const [isRoomsGuestsMenuOpen, setIsRoomsGuestsMenuOpen] = (0, import_react.useState)(false);
+  const [roundTripMinDate, setRoundTripMinDate] = (0, import_react.useState)(/* @__PURE__ */ new Date());
+  const [activeRoundTripField, setActiveRoundTripField] = (0, import_react.useState)("departure");
   const originDropdownRef = (0, import_react.useRef)(null);
   const firstOriginDesktopInputRef = (0, import_react.useRef)(null);
   const destinationDropdownRef = (0, import_react.useRef)(null);
@@ -1758,6 +1777,12 @@ function FlightSearchWidget({
       getAirlineListBySearch(value).then(setAirlineSuggestions);
     }, DEBOUNCE_MS);
   }, [getAirlineListBySearch]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(max-width: 768px)").matches) {
+      setIsOriginDropdownOpen(false);
+    }
+  }, []);
   (0, import_react.useEffect)(() => () => {
     if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
     if (airlineSearchDebounceRef.current) clearTimeout(airlineSearchDebounceRef.current);
@@ -2001,7 +2026,12 @@ function FlightSearchWidget({
   };
   const extractAirportCode = (location) => {
     const match = location.match(/\(([A-Z]{3})\)/);
-    return match ? match[1] : location;
+    return match ? match[1] : location.trim();
+  };
+  const getComparableLocation = (location) => {
+    const code = extractAirportCode(location).trim().toUpperCase();
+    if (code.length === 3 && /^[A-Z]{3}$/.test(code)) return code;
+    return location.trim().toLowerCase().replace(/\s+/g, " ");
   };
   const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const formatDate = (date) => {
@@ -2162,13 +2192,22 @@ function FlightSearchWidget({
     const segmentsToValidate = isMultiCityOrCustom ? segments : segments.slice(0, 1);
     const nextErrors = {};
     segmentsToValidate.forEach((segment, index) => {
-      const originInvalid = !isValidLocationValue(segment.origin, "Origin");
-      const destinationInvalid = !isValidLocationValue(segment.destination, "Destination");
+      const originValue = typeof segment.origin === "string" ? segment.origin : "";
+      const destinationValue = typeof segment.destination === "string" ? segment.destination : "";
+      const originInvalid = isEmptyLocationValue(originValue, "Origin");
+      const destinationInvalid = isEmptyLocationValue(destinationValue, "Destination");
       if (originInvalid || destinationInvalid) {
         nextErrors[index] = {
           origin: originInvalid,
           destination: destinationInvalid
         };
+        return;
+      }
+      if (getComparableLocation(originValue) === getComparableLocation(destinationValue)) {
+        nextErrors[index] = {
+          origin: true,
+          destination: true
+        };
       }
     });
     if (Object.keys(nextErrors).length > 0) {
@@ -2275,6 +2314,47 @@ function FlightSearchWidget({
     if (prev instanceof Date && !isNaN(prev.getTime())) return prev;
     return today;
   };
+  const openRoundTripCalendar = (mode) => {
+    const today = /* @__PURE__ */ new Date();
+    const selectedDeparture = segments[0]?.dateRange?.[0] ?? segments[0]?.departureDate ?? null;
+    const validDeparture = selectedDeparture instanceof Date && !isNaN(selectedDeparture.getTime()) ? selectedDeparture : today;
+    setActiveRoundTripField(mode);
+    setRoundTripMinDate(mode === "return" ? validDeparture : today);
+    dateRangeCalendarRef.current?.show?.();
+    mobileDateRangeCalendarRef.current?.show?.();
+  };
+  const applyRoundTripRangeChange = (range) => {
+    setSegments((prev) => {
+      const updated = [...prev];
+      if (!updated[0]) return prev;
+      const current = updated[0];
+      const currentDeparture = current.dateRange?.[0] ?? current.departureDate ?? /* @__PURE__ */ new Date();
+      if (activeRoundTripField === "return") {
+        const pickedReturn = range?.[1] ?? range?.[0] ?? currentDeparture;
+        const safeReturn = pickedReturn instanceof Date && pickedReturn.getTime() >= currentDeparture.getTime() ? pickedReturn : currentDeparture;
+        updated[0] = {
+          ...current,
+          dateRange: [currentDeparture, safeReturn],
+          departureDate: currentDeparture,
+          returnDate: safeReturn
+        };
+        return updated;
+      }
+      updated[0] = {
+        ...current,
+        dateRange: range,
+        departureDate: range?.[0] ?? /* @__PURE__ */ new Date(),
+        returnDate: range?.[1] ?? /* @__PURE__ */ new Date()
+      };
+      return updated;
+    });
+    if (activeRoundTripField === "return") {
+      setTimeout(() => {
+        dateRangeCalendarRef.current?.hide?.();
+        mobileDateRangeCalendarRef.current?.hide?.();
+      }, 50);
+    }
+  };
   const renderFlightSegment = (index, segment, isMultiCityOrCustom) => {
     const canRemove = segments.length > 2 && index > 0 && isMultiCityOrCustom;
     const originRef = (el) => {
@@ -2414,10 +2494,7 @@ function FlightSearchWidget({
         renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))
       ] }),
       (tripType === "round-trip" || tripType === "one-way") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-wrap sw-pos-rel mobiBox", children: tripType === "round-trip" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { cursor: "pointer" }, onClick: () => {
-          dateRangeCalendarRef.current?.show?.();
-          mobileDateRangeCalendarRef.current?.show?.();
-        }, className: "sw-srh-form-field sw-com-cal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { cursor: "pointer" }, onClick: () => openRoundTripCalendar("departure"), className: "sw-srh-form-field sw-com-cal", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: "Departure" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: segments[0]?.dateRange?.[0]?.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) })
@@ -2431,23 +2508,15 @@ function FlightSearchWidget({
               appendTo: "self",
               selectionMode: "range",
               value: segments[0]?.dateRange ?? null,
-              minDate: /* @__PURE__ */ new Date(),
+              minDate: roundTripMinDate,
               onChange: (e) => {
                 const range = e.value;
-                setSegments((prev) => {
-                  const u = [...prev];
-                  if (!u[0]) return prev;
-                  u[0] = {
-                    ...u[0],
-                    dateRange: range,
-                    departureDate: range?.[0] ?? /* @__PURE__ */ new Date(),
-                    returnDate: range?.[1] ?? /* @__PURE__ */ new Date()
-                  };
-                  return u;
-                });
-                if (range?.[0] && range?.[1]) setTimeout(() => {
-                  dateRangeCalendarRef.current?.hide?.();
-                }, 150);
+                applyRoundTripRangeChange(range);
+                if (activeRoundTripField === "departure" && range?.[0] && range?.[1]) {
+                  setTimeout(() => {
+                    dateRangeCalendarRef.current?.hide?.();
+                  }, 150);
+                }
               },
               dateFormat: "dd M yy",
               placeholder: "Select date range",
@@ -2463,20 +2532,10 @@ function FlightSearchWidget({
               appendTo: "self",
               selectionMode: "range",
               value: segments[0]?.dateRange ?? null,
-              minDate: /* @__PURE__ */ new Date(),
+              minDate: roundTripMinDate,
               onChange: (e) => {
                 const range = e.value;
-                setSegments((prev) => {
-                  const u = [...prev];
-                  if (!u[0]) return prev;
-                  u[0] = {
-                    ...u[0],
-                    dateRange: range,
-                    departureDate: range?.[0] ?? /* @__PURE__ */ new Date(),
-                    returnDate: range?.[1] ?? /* @__PURE__ */ new Date()
-                  };
-                  return u;
-                });
+                applyRoundTripRangeChange(range);
               },
               dateFormat: "dd M yy",
               placeholder: "Select date range",
@@ -2506,10 +2565,7 @@ function FlightSearchWidget({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { cursor: "pointer" }, className: "sw-srh-form-field sw-com-cal", onClick: () => {
-          dateRangeCalendarRef.current?.show?.();
-          mobileDateRangeCalendarRef.current?.show?.();
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { cursor: "pointer" }, className: "sw-srh-form-field sw-com-cal", onClick: () => openRoundTripCalendar("return"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: "Return" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (segments[0]?.dateRange?.[1] ?? segments[0]?.dateRange?.[0])?.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) })
         ] }) })
@@ -2770,6 +2826,7 @@ function FlightSearchWidget({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_autocomplete.AutoComplete,
         {
+          className: "sw-airline-autocomplete",
           value: selectedAirlines,
           suggestions: airlineSuggestions,
           completeMethod: (e) => {