@travelswitchhq/flight-search-react 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -121,6 +121,9 @@ var flightSearchWidgetStyles = `
 .sw-container h5 {
   font-size: 14px;
 }
+.sw-container .font14 {
+  font-size: 14px;
+}
 .sw-container h6,
 .sw-container small {
   font-size: 12px;
@@ -868,6 +871,7 @@ padding-inline-start: 25px;
   flex: 1 1 50%; 
   min-width: 0; 
   justify-content: center;
+  border: 1px solid transparent;
 }
 .sw-add-return-label label {
   color: var(--primary) !important;
@@ -1345,8 +1349,8 @@ padding-inline-start: 25px;
     .sw-fsrh-chk-main{
         flex-wrap: wrap;
     }
-    .sw-custom-dropdown-trigger{
-      pointer-events: none;
+    .mobiBox{
+        flex-direction: row;
     }
 }
 `;
@@ -1491,7 +1495,9 @@ function FlightSearchWidget({
   const urls = API_URLS[env];
   const airportSearchApiBaseUrl = urls.airport;
   const airlineSearchApiBaseUrl = urls.airline;
-  const langCode = "en";
+  const countryCodeConfig = (config?.countryCode ?? "").trim();
+  const languageCodeConfig = (config?.languageCode ?? "").trim();
+  const langCode = languageCodeConfig || "en";
   const [airlineQuery, setAirlineQuery] = (0, import_react.useState)("");
   const [airlineSuggestions, setAirlineSuggestions] = (0, import_react.useState)([]);
   const [selectedAirlines, setSelectedAirlines] = (0, import_react.useState)([]);
@@ -1537,6 +1543,7 @@ function FlightSearchWidget({
   const [isDestinationDropdownOpen, setIsDestinationDropdownOpen] = (0, import_react.useState)(false);
   const [isRoomsGuestsMenuOpen, setIsRoomsGuestsMenuOpen] = (0, import_react.useState)(false);
   const originDropdownRef = (0, import_react.useRef)(null);
+  const firstOriginDesktopInputRef = (0, import_react.useRef)(null);
   const destinationDropdownRef = (0, import_react.useRef)(null);
   const roomsGuestsMenuRef = (0, import_react.useRef)(null);
   const dateRangeCalendarRef = (0, import_react.useRef)(null);
@@ -1767,6 +1774,21 @@ function FlightSearchWidget({
     ensureStylesInjected();
     ensurePrimeIconsLoaded();
   }, []);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const focusFirstOrigin = () => {
+      const desktop = firstOriginDesktopInputRef.current;
+      desktop?.focus({ preventScroll: true });
+    };
+    let innerRaf = 0;
+    const outerRaf = window.requestAnimationFrame(() => {
+      innerRaf = window.requestAnimationFrame(focusFirstOrigin);
+    });
+    return () => {
+      window.cancelAnimationFrame(outerRaf);
+      if (innerRaf) window.cancelAnimationFrame(innerRaf);
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -2120,7 +2142,8 @@ function FlightSearchWidget({
     console.log("Query String:", queryString);
     const base = getNormalizedRedirectionBase();
     if (base) {
-      const url = `${base}/flight/listing?${queryString}`;
+      const listingPath = countryCodeConfig.length > 0 ? `/${countryCodeConfig.toUpperCase()}-${languageCodeConfig ? languageCodeConfig.toUpperCase() : "EN"}/flight/listing` : "/flight/listing";
+      const url = `${base}${listingPath}?${queryString}`;
       window.location.href = url;
     }
   };
@@ -2152,6 +2175,7 @@ function FlightSearchWidget({
     const label = isOrigin ? "From" : "To";
     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: [
       /* @__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: [
@@ -2159,8 +2183,9 @@ function FlightSearchWidget({
           "input",
           {
             type: "text",
+            readOnly: true,
             id: `${dropdownType}-${segmentIndex}`,
-            className: `sw-custom-dropdown-trigger MobileHide ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            className: `sw-custom-dropdown-trigger MobileShow ${value === placeholder || !value ? "sw-placeholder" : ""}`,
             value: value === placeholder ? "" : value ?? "",
             placeholder,
             onFocus: (e) => {
@@ -2180,9 +2205,9 @@ function FlightSearchWidget({
           "input",
           {
             type: "text",
-            readOnly: true,
             id: `${dropdownType}-${segmentIndex}`,
-            className: `sw-custom-dropdown-trigger MobileShow ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            ref: isFirstOrigin ? firstOriginDesktopInputRef : void 0,
+            className: `sw-custom-dropdown-trigger MobileHide ${value === placeholder || !value ? "sw-placeholder" : ""}`,
             value: value === placeholder ? "" : value ?? "",
             placeholder,
             onFocus: (e) => {
@@ -2260,7 +2285,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-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,
@@ -2379,7 +2404,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 ", children: tripType === "round-trip" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      (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?.();
@@ -2564,7 +2589,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: () => {
           setTripType("round-trip");
           setTimeout(() => document.getElementById("dateRange")?.querySelector("input")?.focus?.(), 100);
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: "Add return" }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "font14", children: "Add return" }) })
       ] }) }),
       (tripType === "multi-city" || tripType === "custom-search") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-mc-foot", children: segments.length < getMaxSegments() && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: "sw-srh-add-btn", onClick: addFlightSegment, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: [