@travelswitchhq/flight-search-react 1.0.9 → 1.1.1

package/dist/index.cjs

@@ -37,7 +37,6 @@ var flightSearchWidgetStyles = `
 .sw-container {
   --sw-font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --sw-en-font-family: Arial, sans-serif;
-  --sw-secondary-bg-text: #ffffff;
   --sw-label-color: #66797F;
   --sw-body-text: #0B1215;
   --sw-btn-radius: 8px;
@@ -762,7 +761,7 @@ padding-inline-start: 25px;
   gap: 10px;
   cursor: pointer;
   user-select: none;
-  color: var(--sw-body-text);
+  color: var(--secondary-bg-text);
   font-size: 14px;
 }
 .sw-material-checkbox input {
@@ -815,10 +814,13 @@ padding-inline-start: 25px;
   background-color: var(--primary-light);
   color: var(--primary);
 }
+.sw-card-box .sw-srh-class .sw-tab-content {
+  border: 1px solid var(--sw-form-border);
+}
 .sw-card-box .sw-tab-content {
   height: 40px;
   padding: 6px 15px;
-  border: 1px solid var(--sw-secondary-bg-text);
+  border: 1px solid var(--secondary-bg-text);
   border-radius: var(--sw-radius);
   align-content: center;
 }
@@ -888,11 +890,11 @@ padding-inline-start: 25px;
   height: 40px;
 }
 .sw-srh-round-text .sw-tab-content{
-  color: var(--sw-secondary-bg-text);
+  color: var(--secondary-bg-text);
 }
 .sw-advanced-search-options .p-accordion-header-text,
 .sw-card-box .p-accordion-toggle-icon{
-  color: var(--sw-secondary-bg-text);
+  color: var(--secondary-bg-text);
 }
 .sw-remove-segment{
   fill: var(--primary);
@@ -971,10 +973,11 @@ padding-inline-start: 25px;
 }
 .p-autocomplete-multiple-container {
   width: 100%;
+  background-color: var(--sw-white);
   min-width: 270px;
   padding: 10px;
   padding-inline-end: 2rem;
-  border: 1px solid var(--sw-form-border);
+  border: 1px solid var(--secondary-bg-text);
   border-radius: var(--sw-radius);
   gap: 0.5rem;
   font-size: 14px;
@@ -1110,6 +1113,9 @@ padding-inline-start: 25px;
   font-size: 14px;
   line-height: 1;
 }
+.sw-container .sw-is-invalid{
+  border: 1px solid var(--sw-error);
+}
 .sw-checkbox-wrap .sw-star-checkbox {
   display: flex;
   align-items: center;
@@ -1180,6 +1186,7 @@ padding-inline-start: 25px;
             display: none;
         }
     }
+
     .sw-container .sw-form-field {
         border-radius: var(--sw-radius);
     }
@@ -1249,6 +1256,7 @@ padding-inline-start: 25px;
         width: 100%;
         max-height: 100vh;
         overflow: auto;
+        display: block !important;
         -webkit-overflow-scrolling: touch;
         scroll-behavior: smooth;
         padding: 0 !important;
@@ -1471,8 +1479,9 @@ function FlightSearchWidget({
 }) {
   const theme = config?.theme;
   const primaryColor = theme?.primary ?? "#2c0a82";
-  const secondaryColor = theme?.secondary ?? "#2c0a82";
   const primaryLightColor = theme?.primaryLight ?? "#f3e2ff";
+  const secondaryColor = theme?.secondary ?? "#2c0a82";
+  const secondaryBgText = theme?.secondaryBgText ?? "#ffffff";
   const fontName = config?.fontName;
   const redirectionDomain = config?.redirectionDomain;
   const env = config?.env ?? "dev";
@@ -1641,6 +1650,23 @@ function FlightSearchWidget({
       [segmentIndex]: { ...prev[segmentIndex] ?? {}, [dropdownType]: false }
     }));
     closeAirportDropdown(dropdownType, segmentIndex);
+    setValidationErrors((prev) => {
+      const next = { ...prev };
+      const clearForSegment = (segIndex, type) => {
+        const segErr = next[segIndex];
+        if (!segErr) return;
+        const updatedSegErr = { ...segErr };
+        if (type === "origin") delete updatedSegErr.origin;
+        else delete updatedSegErr.destination;
+        if (Object.keys(updatedSegErr).length === 0) delete next[segIndex];
+        else next[segIndex] = updatedSegErr;
+      };
+      clearForSegment(segmentIndex, dropdownType);
+      if ((tripType === "multi-city" || tripType === "custom-search") && dropdownType === "destination") {
+        clearForSegment(segmentIndex + 1, "origin");
+      }
+      return next;
+    });
   }, [closeAirportDropdown, tripType]);
   const updateSelectedIndex = (0, import_react.useCallback)((segmentIndex, dropdownType, newIndex) => {
     setPredictiveSearchList((prev) => {
@@ -1723,15 +1749,16 @@ function FlightSearchWidget({
     () => {
       const style = {
         ["--primary"]: primaryColor,
+        ["--primary-light"]: primaryLightColor,
         ["--secondary"]: secondaryColor,
-        ["--primary-light"]: primaryLightColor
+        ["--secondary-bg-text"]: secondaryBgText
       };
       if (fontName) {
         style["--font-family"] = fontName;
       }
       return style;
     },
-    [primaryColor, secondaryColor, primaryLightColor]
+    [primaryColor, secondaryColor, primaryLightColor, secondaryBgText]
   );
   (0, import_react.useEffect)(() => {
     ensureStylesInjected();
@@ -1873,19 +1900,6 @@ function FlightSearchWidget({
       }
       return updated;
     });
-    if (field === "origin" || field === "destination") {
-      setSegmentDropdowns((prev) => ({
-        ...prev,
-        [index]: { ...prev[index], [field]: false }
-      }));
-      const placeholder = field === "origin" ? "Origin" : "Destination";
-      if (isValidLocationValue(value, placeholder)) {
-        setValidationErrors((prev) => ({
-          ...prev,
-          [index]: { ...prev[index] ?? {}, [field]: false }
-        }));
-      }
-    }
   };
   const handleTravellerChange = (field, value) => {
     setSegments((prev) => {
@@ -1896,13 +1910,25 @@ function FlightSearchWidget({
     });
   };
   const toggleSegmentDropdown = (index, field) => {
-    setSegmentDropdowns((prev) => ({
-      ...prev,
-      [index]: {
-        ...prev[index] || { origin: false, destination: false },
-        [field]: !prev[index]?.[field]
+    setSegmentDropdowns((prev) => {
+      const shouldOpen = !prev[index]?.[field];
+      if (!shouldOpen) {
+        return {
+          ...prev,
+          [index]: {
+            ...prev[index] || { origin: false, destination: false },
+            [field]: false
+          }
+        };
       }
-    }));
+      const next = {};
+      Object.keys(prev).forEach((key) => {
+        const idx = Number.parseInt(key, 10);
+        next[idx] = { origin: false, destination: false };
+      });
+      next[index] = { origin: false, destination: false, [field]: true };
+      return next;
+    });
   };
   const swapSegmentLocations = (index) => {
     setSegments((prev) => {
@@ -2155,7 +2181,7 @@ function FlightSearchWidget({
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: isOrigin ? "Origin" : "Destination" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobileSrgInput MobileShow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "text", placeholder: `Search ${isOrigin ? "Origin" : "Destination"}`, value: value ?? "", onChange: (e) => {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobileSrgInput MobileShow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "search", placeholder: `Search ${isOrigin ? "Origin" : "Destination"}`, value: value ?? "", onChange: (e) => {
             const val = e.target.value;
             handleSegmentFieldChange(segmentIndex, dropdownType, val);
             triggerSearchAirport(segmentIndex, dropdownType, val);
@@ -2217,6 +2243,7 @@ function FlightSearchWidget({
               numberOfMonths: 2,
               id: `departure-${index}`,
               appendTo: "self",
+              readOnlyInput: true,
               value: segment.departureDate ?? null,
               onChange: (e) => {
                 const raw = e.value;
@@ -2239,6 +2266,10 @@ function FlightSearchWidget({
               numberOfMonths: 10,
               id: `departure-${index}`,
               appendTo: "self",
+              ref: (el) => {
+                segmentCalendarRefs.current[index] = el;
+              },
+              readOnlyInput: true,
               value: segment.departureDate ?? null,
               onChange: (e) => {
                 const raw = e.value;
@@ -2256,7 +2287,7 @@ function FlightSearchWidget({
               headerTemplate: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead MobileShow", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: (e) => {
                   e.stopPropagation();
-                  mobileDateRangeCalendarRef.current?.hide?.();
+                  segmentCalendarRefs.current[index]?.hide?.();
                 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -2270,7 +2301,7 @@ function FlightSearchWidget({
                   className: "sw-confirm-btn",
                   onClick: (e) => {
                     e.stopPropagation();
-                    mobileDateRangeCalendarRef.current?.hide?.();
+                    segmentCalendarRefs.current[index]?.hide?.();
                   },
                   children: "Confirm"
                 }