@travelswitchhq/flight-search-react 1.1.7 → 1.1.9

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 {
@@ -186,7 +185,7 @@ var flightSearchWidgetStyles = `
 .sw-com-cal .p-disabled{
   opacity: 0.3;
 }
-.sw-form-field {
+.sw-srh-form-field {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto; 
@@ -196,10 +195,10 @@ var flightSearchWidgetStyles = `
   min-width: 0; 
   overflow: visible; 
 }
-.sw-form-field.sw-is-invalid {
+.sw-srh-form-field.sw-is-invalid {
   box-shadow: inset 0 0 0 1px var(--sw-error);
 }
-.sw-form-field.sw-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,11 +221,18 @@ 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;
 }
-.sw-form-field input,
-.sw-form-field .p-inputtext {
+.sw-srh-form-field input,
+.sw-srh-form-field .p-inputtext {
   display: block;
   width: 100%;
   margin: 0;
@@ -240,8 +246,8 @@ var flightSearchWidgetStyles = `
   font-size: 14px;
   font-weight: 500;
 }
-.sw-form-field input::placeholder,
-.sw-form-field .p-inputtext::placeholder {
+.sw-srh-form-field input::placeholder,
+.sw-srh-form-field .p-inputtext::placeholder {
   color: var(--sw-label-color) !important;
 }
 .sw-form-swap {
@@ -259,7 +265,7 @@ var flightSearchWidgetStyles = `
   cursor: pointer;
   transform: translate(50%, -50%);
 }
-.sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-form-field.sw-pos-rel:last-child {
+.sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-srh-form-field.sw-pos-rel:last-child {
 padding-inline-start: 25px;
 }
 .sw-custom-dropdown {
@@ -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;
 }
@@ -875,7 +885,7 @@ padding-inline-start: 25px;
   min-width: 0; 
   overflow: visible; 
 }
-.sw-srh-wrap .sw-form-field {
+.sw-srh-wrap .sw-srh-form-field {
   flex: 1 1 50%; 
   min-width: 0; 
   justify-content: center;
@@ -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;
@@ -1198,8 +1211,7 @@ padding-inline-start: 25px;
             display: none;
         }
     }
-
-    .sw-container .sw-form-field {
+    .sw-container .sw-srh-form-field {
         border-radius: var(--sw-radius);
     }
     .sw-fsrh-adv-cont{
@@ -1230,7 +1242,7 @@ padding-inline-start: 25px;
             line-height: 1;
         }
     }
-    .sw-container .sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-form-field.sw-pos-rel:last-child{
+    .sw-container .sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-srh-form-field.sw-pos-rel:last-child{
         padding-inline-start: 15px;
     }
     .sw-container .p-datepicker-group + .p-datepicker-group .mobileHead {
@@ -1488,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
@@ -1550,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);
@@ -1759,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);
@@ -2002,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) => {
@@ -2021,7 +2050,7 @@ function FlightSearchWidget({
       case "multi-city":
         return 3;
       case "custom-search":
-        return 4;
+        return 1;
       default:
         return 2;
     }
@@ -2163,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) {
@@ -2186,7 +2224,7 @@ function FlightSearchWidget({
     const list = isOrigin ? getPredictiveState(segmentIndex).fromAirport : getPredictiveState(segmentIndex).toAirport;
     const selectedIndex = isOrigin ? getPredictiveState(segmentIndex).selectedFromIndex : getPredictiveState(segmentIndex).selectedToIndex;
     const isFirstOrigin = segmentIndex === 0 && isOrigin;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-form-field sw-pos-rel${isOrigin ? " br-left" : ""} ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-srh-form-field sw-pos-rel${isOrigin ? " br-left" : ""} ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${dropdownType}-${segmentIndex}`, children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-custom-dropdown ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-has-error" : ""}`, ref: dropdownRef, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -2276,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) => {
@@ -2295,7 +2374,7 @@ function FlightSearchWidget({
         renderAirportDropdown(index, "destination", destinationDropdownRef || destinationRef, isDestOpen, () => toggleSegmentDropdown(index, "destination"))
       ] }, index),
       isMultiCityOrCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-pos-rel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-form-field sw-com-cal ", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-form-field sw-com-cal", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `departure-${index}`, children: "Departure" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_calendar.Calendar,
@@ -2415,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-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" }) })
@@ -2432,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",
@@ -2464,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",
@@ -2507,10 +2565,7 @@ function FlightSearchWidget({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { cursor: "pointer" }, className: "sw-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" }) })
         ] }) })
@@ -2518,7 +2573,7 @@ function FlightSearchWidget({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: "sw-form-field sw-pos-rel sw-com-cal",
+            className: "sw-srh-form-field sw-pos-rel sw-com-cal",
             style: { cursor: "pointer" },
             onClick: () => {
               oneWayDesktopCalendarRef.current?.show?.();
@@ -2596,7 +2651,7 @@ function FlightSearchWidget({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-form-field sw-pos-rel sw-com-cal sw-add-return-label", style: { cursor: "pointer" }, onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-form-field sw-pos-rel sw-com-cal sw-add-return-label", style: { cursor: "pointer" }, onClick: () => {
           setTripType("round-trip");
           setTimeout(() => document.getElementById("dateRange")?.querySelector("input")?.focus?.(), 100);
         }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "font14", children: "Add return" }) })
@@ -2608,7 +2663,7 @@ function FlightSearchWidget({
         ] }),
         "Add Another Flight"
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-form-field sw-traveller sw-pos-rel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-form-field sw-traveller sw-pos-rel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "rooms", children: "Travellers and Class" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-custom-dropdown", ref: roomsGuestsMenuRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -2771,6 +2826,7 @@ function FlightSearchWidget({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_autocomplete.AutoComplete,
         {
+          className: "sw-airline-autocomplete",
           value: selectedAirlines,
           suggestions: airlineSuggestions,
           completeMethod: (e) => {