@travelswitchhq/flight-search-react 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +489 -145
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +2 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.mjs +489 -145
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -101,7 +101,7 @@ var flightSearchWidgetStyles = `
101
101
  font-size: 12px;
102
102
  }
103
103
  .sw-container .sw-fw500 {
104
- font-weight: 500 !important;
104
+ font-weight: 500;
105
105
  }
106
106
  .sw-container .sw-flex {
107
107
  display: flex;
@@ -169,9 +169,6 @@ var flightSearchWidgetStyles = `
169
169
  min-width: 0;
170
170
  overflow: visible;
171
171
  }
172
- .sw-form-field .p-calendar {
173
- position: unset;
174
- }
175
172
  .sw-form-field label {
176
173
  display: block;
177
174
  width: 100%;
@@ -211,7 +208,7 @@ var flightSearchWidgetStyles = `
211
208
  .sw-form-swap {
212
209
  position: absolute;
213
210
  top: 50%;
214
- left: 50%;
211
+ inset-inline-end: 50%;
215
212
  z-index: 2;
216
213
  display: flex;
217
214
  align-items: center;
@@ -561,11 +558,11 @@ padding-inline-start: 25px;
561
558
  .sw-search-button .p-button-icon {
562
559
  flex-shrink: 0;
563
560
  }
564
- .p-calendar .p-datepicker {
565
- top: 100% !important;
561
+ .sw-com-cal .p-calendar .p-datepicker {
562
+ top: 100%;
566
563
  display: block;
567
564
  min-width: 100%;
568
- margin-top: 5px !important;
565
+ margin-top: 5px;
569
566
  padding: 15px;
570
567
  background-color: var(--sw-white);
571
568
  border: 1px solid var(--sw-form-border);
@@ -664,7 +661,7 @@ padding-inline-start: 25px;
664
661
  }
665
662
  .p-datepicker .p-highlight {
666
663
  position: relative;
667
- background: var(--primary) !important;
664
+ background: var(--primary-light) !important;
668
665
  color: var(--sw-white) !important;
669
666
  }
670
667
  .sw-product-tabs {
@@ -794,10 +791,15 @@ padding-inline-start: 25px;
794
791
  }
795
792
  .sw-dropdown,
796
793
  .sw-rooms-guests-menu,
797
- .p-calendar .p-datepicker {
794
+ .sw-com-cal .p-calendar .p-datepicker {
798
795
  will-change: transform, opacity;
799
796
  transform: translateZ(0);
800
797
  }
798
+ .tfsw-calendar-input{
799
+ position: absolute;
800
+ top: 100%;
801
+ inset-inline-start: 0;
802
+ }
801
803
  .sw-dropdown {
802
804
  -webkit-overflow-scrolling: touch;
803
805
  scroll-behavior: smooth;
@@ -1099,6 +1101,197 @@ padding-inline-start: 25px;
1099
1101
  .sw-srh-class .sw-tab-content {
1100
1102
  flex: 0 1 auto;
1101
1103
  min-width: fit-content;
1104
+ }
1105
+ .MobileShow{
1106
+ display: none;
1107
+ }
1108
+ .MobileHide{
1109
+ display: block;
1110
+ }
1111
+ @media screen and (max-width: 768px) {
1112
+ .MobileShow{
1113
+ display: block;
1114
+ }
1115
+ .MobileHide{
1116
+ display: none;
1117
+ }
1118
+ .sw-container{
1119
+ min-width: 100% !important;
1120
+ }
1121
+ .sw-srh-grid {
1122
+ grid-template-columns: 100% !important;
1123
+ }
1124
+ .sw-srh-wrap{
1125
+ flex-direction: column;
1126
+ }
1127
+ .sw-tab-content{
1128
+ white-space: nowrap;
1129
+ }
1130
+ .sw-srh-main-head{
1131
+ overflow: auto;
1132
+ scrollbar-width: none;
1133
+ -ms-overflow-style: none;
1134
+ &::-webkit-scrollbar {
1135
+ display: none;
1136
+ }
1137
+ }
1138
+ .sw-container .sw-form-field {
1139
+ border-radius: var(--sw-radius);
1140
+ }
1141
+ .sw-fsrh-adv-cont{
1142
+ flex-wrap: wrap;
1143
+ }
1144
+ .sw-container .sw-dropdown{
1145
+ position: fixed;
1146
+ inset: 0;
1147
+ height: 100vh;
1148
+ width: 100%;
1149
+ max-height: 100vh;
1150
+ border-radius: 0;
1151
+ z-index: calc(var(--sw-widget-z-index-base) + 10);
1152
+ }
1153
+ .sw-container .mobileHead{
1154
+ display: flex;
1155
+ align-items: center;
1156
+ gap: 10px;
1157
+ border-bottom: 1px;
1158
+ padding: 15px 10px;
1159
+ border-bottom: 1px solid var(--sw-form-border);
1160
+ a{
1161
+ display: flex;
1162
+ align-items: center;
1163
+ }
1164
+ h4{
1165
+ font-weight: 500;
1166
+ line-height: 1;
1167
+ }
1168
+ }
1169
+ .sw-container .sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-form-field.sw-pos-rel:last-child{
1170
+ padding-inline-start: 15px;
1171
+ }
1172
+ .sw-container .p-datepicker-group + .p-datepicker-group .mobileHead {
1173
+ display: none;
1174
+ }
1175
+ .sw-container .sw-form-swap{
1176
+ inset-inline-end: 0;
1177
+ width: 45px;
1178
+ height: 45px;
1179
+ transform: translate(-50%, -50%) rotate(-90deg);
1180
+ }
1181
+ .sw-dropdown .mobileSrgInput{
1182
+ padding: 15px;
1183
+ input{
1184
+ width: 100%;
1185
+ padding: 15px;
1186
+ border: 1px solid var(--sw-form-border);
1187
+ border-radius: var(--sw-btn-radius);
1188
+ outline: none;
1189
+ background: var(--sw-white);
1190
+ box-shadow: none;
1191
+ font-size: 14px;
1192
+ font-family: var(--sw-font-family);
1193
+ color: var(--sw-body-text);
1194
+ height: 50px;
1195
+ }
1196
+ }
1197
+ .sw-container .sw-dropdown-list-card h5{
1198
+ font-weight: 400;
1199
+ }
1200
+ .sw-container .p-calendar .p-datepicker{
1201
+ position: fixed !important;
1202
+ inset: 0 !important;
1203
+ height: 100vh;
1204
+ width: 100%;
1205
+ max-height: 100vh;
1206
+ overflow: auto;
1207
+ -webkit-overflow-scrolling: touch;
1208
+ scroll-behavior: smooth;
1209
+ padding: 0 !important;
1210
+ margin-top: 0 !important;
1211
+ border-radius: 0 !important;
1212
+ .p-datepicker-group-container{
1213
+ flex-direction: column;
1214
+ }
1215
+ }
1216
+ .sw-container .p-datepicker-group-container .p-datepicker-group:not(:last-child) {
1217
+ border-inline-end: 0 ;
1218
+ padding-inline-end: 0;
1219
+ margin-inline-end: 0;
1220
+ }
1221
+ .sw-com-cal{
1222
+ .p-datepicker-header{
1223
+ flex-wrap: wrap;
1224
+ .mobileHead {
1225
+ width: 100%;
1226
+ margin-bottom: 10px;
1227
+ }
1228
+ }
1229
+ .p-datepicker-footer{
1230
+ position: sticky;
1231
+ bottom: 0;
1232
+ z-index: 100;
1233
+ }
1234
+ }
1235
+ .sw-container .mobileFooter{
1236
+ position: sticky;
1237
+ bottom: 0;
1238
+ display: flex;
1239
+ padding: 15px;
1240
+ background: var(--sw-white);
1241
+ border-top: 1px solid var(--sw-form-border);
1242
+ z-index: 1;
1243
+ }
1244
+ .sw-container .mobileFooter .sw-confirm-btn{
1245
+ width: 100%;
1246
+ padding: 14px;
1247
+ background: var(--sw-primary-btn);
1248
+ color: var(--sw-primary-button-text);
1249
+ border: 1px solid var(--sw-button-primary-border);
1250
+ border-radius: var(--sw-btn-radius);
1251
+ font-size: var(--sw-size-md-3);
1252
+ font-family: var(--sw-font-family);
1253
+ font-weight: 600;
1254
+ cursor: pointer;
1255
+ text-align: center;
1256
+ }
1257
+ .sw-container .p-datepicker .p-datepicker-calendar-container td span{
1258
+ width: 100%;
1259
+ margin: 0;
1260
+ }
1261
+ .sw-container .sw-traveller .sw-rooms-guests-menu{
1262
+ width: 100%;
1263
+ position: fixed;
1264
+ bottom: 0;
1265
+ top: 0;
1266
+ height: 100vh;
1267
+ padding: 0;
1268
+ }
1269
+ .sw-rooms-guests-title{
1270
+ display: none !important;
1271
+ }
1272
+ .sw-rooms-guests-content{
1273
+ padding: 15px;
1274
+ }
1275
+ .sw-rooms-guests-footer{
1276
+ position: fixed;
1277
+ bottom: 0;
1278
+ padding: 15px;
1279
+ width: 100%;
1280
+ right: 0;
1281
+ }
1282
+ .sw-container .sw-srh-mc{
1283
+ display: flex;
1284
+ flex-direction: column;
1285
+ }
1286
+ .sw-srh-mc .sw-srh-mc-foot{
1287
+ margin: 10px 0;
1288
+ }
1289
+ .sw-srh-mc .sw-srh-wrap:nth-child(3){
1290
+ flex-direction: row;
1291
+ }
1292
+ .sw-container .sw-search-button{
1293
+ border-radius: var(--sw-btn-radius);
1294
+ }
1102
1295
  }
1103
1296
  `;
1104
1297
 
@@ -1278,6 +1471,7 @@ function FlightSearchWidget({
1278
1471
  const destinationDropdownRef = useRef(null);
1279
1472
  const roomsGuestsMenuRef = useRef(null);
1280
1473
  const dateRangeCalendarRef = useRef(null);
1474
+ const mobileDateRangeCalendarRef = useRef(null);
1281
1475
  const segmentCalendarRefs = useRef({});
1282
1476
  const getMaxSegments = () => {
1283
1477
  if (tripType === "custom-search") return 3;
@@ -1857,7 +2051,7 @@ function FlightSearchWidget({
1857
2051
  const label = isOrigin ? "From" : "To";
1858
2052
  const list = isOrigin ? getPredictiveState(segmentIndex).fromAirport : getPredictiveState(segmentIndex).toAirport;
1859
2053
  const selectedIndex = isOrigin ? getPredictiveState(segmentIndex).selectedFromIndex : getPredictiveState(segmentIndex).selectedToIndex;
1860
- return /* @__PURE__ */ jsxs("div", { className: `sw-form-field sw-pos-rel ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
2054
+ return /* @__PURE__ */ jsxs("div", { className: `sw-form-field sw-pos-rel${isOrigin ? " br-left" : ""} ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
1861
2055
  /* @__PURE__ */ jsx("label", { htmlFor: `${dropdownType}-${segmentIndex}`, children: label }),
1862
2056
  /* @__PURE__ */ jsxs("div", { className: `sw-custom-dropdown ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-has-error" : ""}`, ref: dropdownRef, children: [
1863
2057
  /* @__PURE__ */ jsx(
@@ -1881,25 +2075,39 @@ function FlightSearchWidget({
1881
2075
  onKeyDown: (e) => handleKeyDown(e, dropdownType, segmentIndex)
1882
2076
  }
1883
2077
  ),
1884
- isOpen && /* @__PURE__ */ jsx("div", { className: "sw-dropdown", children: /* @__PURE__ */ jsx("ul", { className: "sw-dropdown-list", children: list.length > 0 ? list.map((airport, i) => /* @__PURE__ */ jsx("li", { className: `sw-dropdown-list-item ${selectedIndex === i ? "highlight" : ""}`, onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("div", { className: "sw-dropdown-list-card", children: [
1885
- /* @__PURE__ */ jsx("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
1886
- /* @__PURE__ */ jsxs("div", { children: [
1887
- /* @__PURE__ */ jsx("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
1888
- /* @__PURE__ */ jsxs("h6", { className: "sw-text-label sw-text-ellipsis", children: [
1889
- airport.ct,
1890
- airport.cn ? `, ${airport.cn}` : ""
2078
+ isOpen && /* @__PURE__ */ jsxs("div", { className: "sw-dropdown", children: [
2079
+ /* @__PURE__ */ jsxs("div", { className: "mobileHead mobileShow", children: [
2080
+ /* @__PURE__ */ jsx("a", { type: "button", onClick: () => closeAirportDropdown(dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2081
+ /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
2082
+ /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
2083
+ ] }) }),
2084
+ /* @__PURE__ */ jsx("h4", { children: isOrigin ? "Origin" : "Destination" })
2085
+ ] }),
2086
+ /* @__PURE__ */ jsx("div", { className: "mobileSrgInput mobileShow", children: /* @__PURE__ */ jsx("input", { type: "text", placeholder: `Search ${isOrigin ? "Origin" : "Destination"}`, value: value ?? "", onChange: (e) => {
2087
+ const val = e.target.value;
2088
+ handleSegmentFieldChange(segmentIndex, dropdownType, val);
2089
+ triggerSearchAirport(segmentIndex, dropdownType, val);
2090
+ } }) }),
2091
+ /* @__PURE__ */ jsx("ul", { className: "sw-dropdown-list", children: list.length > 0 ? list.map((airport, i) => /* @__PURE__ */ jsx("li", { className: `sw-dropdown-list-item ${selectedIndex === i ? "highlight" : ""}`, onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("div", { className: "sw-dropdown-list-card", children: [
2092
+ /* @__PURE__ */ jsx("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
2093
+ /* @__PURE__ */ jsxs("div", { children: [
2094
+ /* @__PURE__ */ jsx("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
2095
+ /* @__PURE__ */ jsxs("h6", { className: "sw-text-label sw-text-ellipsis", children: [
2096
+ airport.ct,
2097
+ airport.cn ? `, ${airport.cn}` : ""
2098
+ ] })
1891
2099
  ] })
1892
- ] })
1893
- ] }) }, airport.id ?? airport.ac ?? i)) : DEFAULT_AIRPORTS.map((airport, i) => /* @__PURE__ */ jsx("li", { className: "sw-dropdown-list-item ", onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("div", { className: "sw-dropdown-list-card", children: [
1894
- /* @__PURE__ */ jsx("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
1895
- /* @__PURE__ */ jsxs("div", { children: [
1896
- /* @__PURE__ */ jsx("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
1897
- /* @__PURE__ */ jsxs("h6", { className: "sw-text-label sw-text-ellipsis", children: [
1898
- airport.ct,
1899
- airport.cn ? `, ${airport.cn}` : ""
2100
+ ] }) }, airport.id ?? airport.ac ?? i)) : DEFAULT_AIRPORTS.map((airport, i) => /* @__PURE__ */ jsx("li", { className: "sw-dropdown-list-item ", onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("div", { className: "sw-dropdown-list-card", children: [
2101
+ /* @__PURE__ */ jsx("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
2102
+ /* @__PURE__ */ jsxs("div", { children: [
2103
+ /* @__PURE__ */ jsx("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
2104
+ /* @__PURE__ */ jsxs("h6", { className: "sw-text-label sw-text-ellipsis", children: [
2105
+ airport.ct,
2106
+ airport.cn ? `, ${airport.cn}` : ""
2107
+ ] })
1900
2108
  ] })
1901
- ] })
1902
- ] }) }, airport.ac ?? i)) }) })
2109
+ ] }) }, airport.ac ?? i)) })
2110
+ ] })
1903
2111
  ] })
1904
2112
  ] });
1905
2113
  };
@@ -1949,7 +2157,29 @@ function FlightSearchWidget({
1949
2157
  },
1950
2158
  dateFormat: "dd M yy",
1951
2159
  placeholder: "29 Jan 2026",
1952
- className: "p-inputtext-sm",
2160
+ className: "p-inputtext-sm MobileHide",
2161
+ minDate: getMinDateForSegment(index)
2162
+ }
2163
+ ),
2164
+ /* @__PURE__ */ jsx(
2165
+ Calendar,
2166
+ {
2167
+ numberOfMonths: 10,
2168
+ id: `departure-${index}`,
2169
+ appendTo: "self",
2170
+ value: segment.departureDate ?? null,
2171
+ onChange: (e) => {
2172
+ const raw = e.value;
2173
+ const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
2174
+ handleSegmentFieldChange(
2175
+ index,
2176
+ "departureDate",
2177
+ nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
2178
+ );
2179
+ },
2180
+ dateFormat: "dd M yy",
2181
+ placeholder: "29 Jan 2026",
2182
+ className: "p-inputtext-sm MobileShow",
1953
2183
  minDate: getMinDateForSegment(index)
1954
2184
  }
1955
2185
  )
@@ -1986,7 +2216,7 @@ function FlightSearchWidget({
1986
2216
  /* @__PURE__ */ jsx("h5", { className: "sw-tab-content", children: option.label })
1987
2217
  ] }, option.value)) }) }) }),
1988
2218
  /* @__PURE__ */ jsxs("form", { className: `sw-srh-grid ${tripType === "multi-city" || tripType === "custom-search" ? "sw-srh-mc" : ""}`, onSubmit: handleSubmit, children: [
1989
- tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ jsxs("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel", children: [
2219
+ tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ jsxs("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel br-left", children: [
1990
2220
  renderAirportDropdown(0, "origin", originDropdownRef, isOriginDropdownOpen, () => setIsOriginDropdownOpen(true)),
1991
2221
  /* @__PURE__ */ jsx(
1992
2222
  "div",
@@ -2000,7 +2230,10 @@ function FlightSearchWidget({
2000
2230
  renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))
2001
2231
  ] }),
2002
2232
  (tripType === "round-trip" || tripType === "one-way") && /* @__PURE__ */ jsx("div", { className: "sw-srh-wrap sw-pos-rel ", children: tripType === "round-trip" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2003
- /* @__PURE__ */ jsxs("div", { style: { cursor: "pointer" }, onClick: () => dateRangeCalendarRef.current?.show?.(), className: "sw-form-field sw-com-cal", children: [
2233
+ /* @__PURE__ */ jsxs("div", { style: { cursor: "pointer" }, onClick: () => {
2234
+ dateRangeCalendarRef.current?.show?.();
2235
+ mobileDateRangeCalendarRef.current?.show?.();
2236
+ }, className: "sw-form-field sw-com-cal", children: [
2004
2237
  /* @__PURE__ */ jsxs("div", { children: [
2005
2238
  /* @__PURE__ */ jsx("label", { children: "Departure" }),
2006
2239
  /* @__PURE__ */ jsx("p", { children: segments[0]?.dateRange?.[0]?.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) })
@@ -2034,11 +2267,65 @@ function FlightSearchWidget({
2034
2267
  },
2035
2268
  dateFormat: "dd M yy",
2036
2269
  placeholder: "Select date range",
2037
- className: "p-inputtext-sm tfsw-calendar-input"
2270
+ className: "p-inputtext-sm tfsw-calendar-input MobileHide"
2271
+ }
2272
+ ),
2273
+ /* @__PURE__ */ jsx(
2274
+ Calendar,
2275
+ {
2276
+ numberOfMonths: 10,
2277
+ ref: mobileDateRangeCalendarRef,
2278
+ id: "dateRangeMobile",
2279
+ appendTo: "self",
2280
+ selectionMode: "range",
2281
+ value: segments[0]?.dateRange ?? null,
2282
+ minDate: /* @__PURE__ */ new Date(),
2283
+ onChange: (e) => {
2284
+ const range = e.value;
2285
+ setSegments((prev) => {
2286
+ const u = [...prev];
2287
+ if (!u[0]) return prev;
2288
+ u[0] = {
2289
+ ...u[0],
2290
+ dateRange: range,
2291
+ departureDate: range?.[0] ?? /* @__PURE__ */ new Date(),
2292
+ returnDate: range?.[1] ?? /* @__PURE__ */ new Date()
2293
+ };
2294
+ return u;
2295
+ });
2296
+ },
2297
+ dateFormat: "dd M yy",
2298
+ placeholder: "Select date range",
2299
+ className: "p-inputtext-sm tfsw-calendar-input MobileShow",
2300
+ headerTemplate: () => /* @__PURE__ */ jsxs("div", { className: "mobileHead MobileShow", children: [
2301
+ /* @__PURE__ */ jsx("a", { type: "button", onClick: (e) => {
2302
+ e.stopPropagation();
2303
+ mobileDateRangeCalendarRef.current?.hide?.();
2304
+ }, children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2305
+ /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2306
+ /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2307
+ ] }) }),
2308
+ /* @__PURE__ */ jsx("h4", { children: "Departure" })
2309
+ ] }),
2310
+ footerTemplate: () => /* @__PURE__ */ jsx("div", { className: "mobileFooter MobileShow", children: /* @__PURE__ */ jsx(
2311
+ "button",
2312
+ {
2313
+ type: "button",
2314
+ className: "sw-confirm-btn",
2315
+ onClick: (e) => {
2316
+ e.stopPropagation();
2317
+ mobileDateRangeCalendarRef.current?.hide?.();
2318
+ },
2319
+ children: "Confirm"
2320
+ }
2321
+ ) })
2038
2322
  }
2039
2323
  )
2040
2324
  ] }),
2041
- /* @__PURE__ */ jsx("div", { style: { cursor: "pointer" }, className: "sw-form-field sw-com-cal", onClick: () => dateRangeCalendarRef.current?.show?.(), children: /* @__PURE__ */ jsxs("div", { children: [
2325
+ /* @__PURE__ */ jsx("div", { style: { cursor: "pointer" }, className: "sw-form-field sw-com-cal", onClick: () => {
2326
+ dateRangeCalendarRef.current?.show?.();
2327
+ mobileDateRangeCalendarRef.current?.show?.();
2328
+ }, children: /* @__PURE__ */ jsxs("div", { children: [
2042
2329
  /* @__PURE__ */ jsx("label", { children: "Return" }),
2043
2330
  /* @__PURE__ */ jsx("p", { children: (segments[0]?.dateRange?.[1] ?? segments[0]?.dateRange?.[0])?.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) })
2044
2331
  ] }) })
@@ -2072,7 +2359,52 @@ function FlightSearchWidget({
2072
2359
  appendTo: "self",
2073
2360
  minDate: /* @__PURE__ */ new Date(),
2074
2361
  dateFormat: "dd M yy",
2075
- className: "p-inputtext-sm tfsw-calendar-input"
2362
+ className: "p-inputtext-sm tfsw-calendar-input MobileHide"
2363
+ }
2364
+ ),
2365
+ /* @__PURE__ */ jsx(
2366
+ Calendar,
2367
+ {
2368
+ numberOfMonths: 10,
2369
+ ref: (el) => {
2370
+ segmentCalendarRefs.current[0] = el;
2371
+ },
2372
+ value: segments[0]?.departureDate ?? null,
2373
+ onChange: (e) => {
2374
+ const raw = e.value;
2375
+ const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
2376
+ handleSegmentFieldChange(
2377
+ 0,
2378
+ "departureDate",
2379
+ nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
2380
+ );
2381
+ },
2382
+ appendTo: "self",
2383
+ minDate: /* @__PURE__ */ new Date(),
2384
+ dateFormat: "dd M yy",
2385
+ className: "p-inputtext-sm tfsw-calendar-input MobileShow",
2386
+ headerTemplate: () => /* @__PURE__ */ jsxs("div", { className: "mobileHead MobileShow", children: [
2387
+ /* @__PURE__ */ jsx("a", { type: "button", onClick: (e) => {
2388
+ e.stopPropagation();
2389
+ segmentCalendarRefs.current[0]?.hide?.();
2390
+ }, children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2391
+ /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2392
+ /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2393
+ ] }) }),
2394
+ /* @__PURE__ */ jsx("h4", { children: "Departure" })
2395
+ ] }),
2396
+ footerTemplate: () => /* @__PURE__ */ jsx("div", { className: "mobileFooter MobileShow", children: /* @__PURE__ */ jsx(
2397
+ "button",
2398
+ {
2399
+ type: "button",
2400
+ className: "sw-confirm-btn",
2401
+ onClick: (e) => {
2402
+ e.stopPropagation();
2403
+ segmentCalendarRefs.current[0]?.hide?.();
2404
+ },
2405
+ children: "Confirm"
2406
+ }
2407
+ ) })
2076
2408
  }
2077
2409
  )
2078
2410
  ]
@@ -2108,131 +2440,143 @@ function FlightSearchWidget({
2108
2440
  }
2109
2441
  ),
2110
2442
  isRoomsGuestsMenuOpen && /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-menu", children: [
2443
+ /* @__PURE__ */ jsxs("div", { className: "mobileHead MobileShow", children: [
2444
+ /* @__PURE__ */ jsx("a", { type: "button", onClick: (e) => {
2445
+ e.stopPropagation();
2446
+ setIsRoomsGuestsMenuOpen(false);
2447
+ }, children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2448
+ /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2449
+ /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2450
+ ] }) }),
2451
+ /* @__PURE__ */ jsx("h4", { children: "Number of Travellers" })
2452
+ ] }),
2111
2453
  /* @__PURE__ */ jsx("h3", { className: "sw-rooms-guests-title", children: "Number of Travellers" }),
2112
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2113
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2114
- /* @__PURE__ */ jsx("h3", { children: "Adults" }),
2115
- /* @__PURE__ */ jsx("p", { children: "Age (12+)" })
2454
+ /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-content", children: [
2455
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2456
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2457
+ /* @__PURE__ */ jsx("h3", { children: "Adults" }),
2458
+ /* @__PURE__ */ jsx("p", { children: "Age (12+)" })
2459
+ ] }),
2460
+ /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2461
+ const childCount = segments[0]?.childCount ?? 0;
2462
+ const infantCount = segments[0]?.infantCount ?? 0;
2463
+ const isDisabled = count + childCount > 9;
2464
+ return /* @__PURE__ */ jsx(
2465
+ "button",
2466
+ {
2467
+ type: "button",
2468
+ className: `sw-en-font ${(segments[0]?.adultCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2469
+ disabled: isDisabled,
2470
+ onClick: () => {
2471
+ const newChildCount = Math.min(childCount, 9 - count);
2472
+ setSegments((prev) => {
2473
+ const updated = [...prev];
2474
+ if (!updated[0]) return prev;
2475
+ updated[0] = {
2476
+ ...updated[0],
2477
+ adultCount: count,
2478
+ childCount: newChildCount,
2479
+ infantCount: Math.min(infantCount, count)
2480
+ };
2481
+ return updated;
2482
+ });
2483
+ },
2484
+ children: count
2485
+ },
2486
+ count
2487
+ );
2488
+ }) })
2116
2489
  ] }),
2117
- /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2118
- const childCount = segments[0]?.childCount ?? 0;
2119
- const infantCount = segments[0]?.infantCount ?? 0;
2120
- const isDisabled = count + childCount > 9;
2121
- return /* @__PURE__ */ jsx(
2122
- "button",
2123
- {
2124
- type: "button",
2125
- className: `sw-en-font ${(segments[0]?.adultCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2126
- disabled: isDisabled,
2127
- onClick: () => {
2128
- const newChildCount = Math.min(childCount, 9 - count);
2129
- setSegments((prev) => {
2130
- const updated = [...prev];
2131
- if (!updated[0]) return prev;
2132
- updated[0] = {
2133
- ...updated[0],
2134
- adultCount: count,
2135
- childCount: newChildCount,
2136
- infantCount: Math.min(infantCount, count)
2137
- };
2138
- return updated;
2139
- });
2490
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2491
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2492
+ /* @__PURE__ */ jsx("h3", { children: "Child" }),
2493
+ /* @__PURE__ */ jsx("p", { children: "Age (2-11)" })
2494
+ ] }),
2495
+ /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8].map((count) => {
2496
+ const adultCount = segments[0]?.adultCount ?? 0;
2497
+ const isDisabled = adultCount + count > 9;
2498
+ return /* @__PURE__ */ jsx(
2499
+ "button",
2500
+ {
2501
+ type: "button",
2502
+ className: `sw-en-font ${(segments[0]?.childCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2503
+ disabled: isDisabled,
2504
+ onClick: () => handleTravellerChange("childCount", count),
2505
+ children: count
2140
2506
  },
2141
- children: count
2142
- },
2143
- count
2144
- );
2145
- }) })
2146
- ] }),
2147
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2148
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2149
- /* @__PURE__ */ jsx("h3", { children: "Child" }),
2150
- /* @__PURE__ */ jsx("p", { children: "Age (2-11)" })
2507
+ count
2508
+ );
2509
+ }) })
2151
2510
  ] }),
2152
- /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8].map((count) => {
2153
- const adultCount = segments[0]?.adultCount ?? 0;
2154
- const isDisabled = adultCount + count > 9;
2155
- return /* @__PURE__ */ jsx(
2156
- "button",
2157
- {
2158
- type: "button",
2159
- className: `sw-en-font ${(segments[0]?.childCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2160
- disabled: isDisabled,
2161
- onClick: () => handleTravellerChange("childCount", count),
2162
- children: count
2163
- },
2164
- count
2165
- );
2166
- }) })
2167
- ] }),
2168
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2169
- /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2170
- /* @__PURE__ */ jsx("h3", { children: "Infant" }),
2171
- /* @__PURE__ */ jsx("p", { children: "Under 2 years" })
2511
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-pax", children: [
2512
+ /* @__PURE__ */ jsxs("div", { className: "sw-srh-common-adult", children: [
2513
+ /* @__PURE__ */ jsx("h3", { children: "Infant" }),
2514
+ /* @__PURE__ */ jsx("p", { children: "Under 2 years" })
2515
+ ] }),
2516
+ /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2517
+ const adultCount = segments[0]?.adultCount ?? 0;
2518
+ const isDisabled = count > adultCount;
2519
+ return /* @__PURE__ */ jsx(
2520
+ "button",
2521
+ {
2522
+ type: "button",
2523
+ className: `sw-en-font ${(segments[0]?.infantCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2524
+ disabled: isDisabled,
2525
+ onClick: () => handleTravellerChange("infantCount", count),
2526
+ children: count
2527
+ },
2528
+ count
2529
+ );
2530
+ }) })
2172
2531
  ] }),
2173
- /* @__PURE__ */ jsx("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2174
- const adultCount = segments[0]?.adultCount ?? 0;
2175
- const isDisabled = count > adultCount;
2176
- return /* @__PURE__ */ jsx(
2177
- "button",
2178
- {
2179
- type: "button",
2180
- className: `sw-en-font ${(segments[0]?.infantCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2181
- disabled: isDisabled,
2182
- onClick: () => handleTravellerChange("infantCount", count),
2183
- children: count
2184
- },
2185
- count
2186
- );
2187
- }) })
2188
- ] }),
2189
- /* @__PURE__ */ jsx("h3", { className: "sw-rooms-guests-title", children: "Travel Class" }),
2190
- /* @__PURE__ */ jsx("div", { className: "sw-srh-class", children: ["Economy", "Business", "First Class", "Premium Economy"].map((classOption) => /* @__PURE__ */ jsxs("label", { className: "sw-tab-checkbox", children: [
2191
- /* @__PURE__ */ jsx(
2192
- "input",
2193
- {
2194
- type: "radio",
2195
- name: "travel-class",
2196
- checked: (segments[0]?.travelerClass ?? "Economy") === classOption,
2197
- onChange: () => handleTravellerChange("travelerClass", classOption)
2198
- }
2199
- ),
2200
- /* @__PURE__ */ jsx("span", { className: "sw-tab-content", children: classOption })
2201
- ] }, classOption)) }),
2202
- /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-footer", children: [
2203
- /* @__PURE__ */ jsx("div", {}),
2204
- /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-cta", children: [
2532
+ /* @__PURE__ */ jsx("h3", { className: "sw-rooms-guests-title", children: "Travel Class" }),
2533
+ /* @__PURE__ */ jsx("div", { className: "sw-srh-class", children: ["Economy", "Business", "First Class", "Premium Economy"].map((classOption) => /* @__PURE__ */ jsxs("label", { className: "sw-tab-checkbox", children: [
2205
2534
  /* @__PURE__ */ jsx(
2206
- "button",
2535
+ "input",
2207
2536
  {
2208
- type: "button",
2209
- className: "sw-reset-button",
2210
- onClick: () => {
2211
- setSegments((prev) => {
2212
- const updated = [...prev];
2213
- if (!updated[0]) return prev;
2214
- updated[0] = { ...updated[0], adultCount: 1, childCount: 0, infantCount: 0, travelerClass: "Economy" };
2215
- return updated;
2216
- });
2217
- },
2218
- children: "Reset"
2537
+ type: "radio",
2538
+ name: "travel-class",
2539
+ checked: (segments[0]?.travelerClass ?? "Economy") === classOption,
2540
+ onChange: () => handleTravellerChange("travelerClass", classOption)
2219
2541
  }
2220
2542
  ),
2221
- /* @__PURE__ */ jsx(
2222
- "button",
2223
- {
2224
- type: "button",
2225
- className: "sw-apply-button",
2226
- onClick: () => setIsRoomsGuestsMenuOpen(false),
2227
- children: "Apply"
2228
- }
2229
- )
2543
+ /* @__PURE__ */ jsx("span", { className: "sw-tab-content", children: classOption })
2544
+ ] }, classOption)) }),
2545
+ /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-footer", children: [
2546
+ /* @__PURE__ */ jsx("div", {}),
2547
+ /* @__PURE__ */ jsxs("div", { className: "sw-rooms-guests-cta", children: [
2548
+ /* @__PURE__ */ jsx(
2549
+ "button",
2550
+ {
2551
+ type: "button",
2552
+ className: "sw-reset-button",
2553
+ onClick: () => {
2554
+ setSegments((prev) => {
2555
+ const updated = [...prev];
2556
+ if (!updated[0]) return prev;
2557
+ updated[0] = { ...updated[0], adultCount: 1, childCount: 0, infantCount: 0, travelerClass: "Economy" };
2558
+ return updated;
2559
+ });
2560
+ },
2561
+ children: "Reset"
2562
+ }
2563
+ ),
2564
+ /* @__PURE__ */ jsx(
2565
+ "button",
2566
+ {
2567
+ type: "button",
2568
+ className: "sw-apply-button",
2569
+ onClick: () => setIsRoomsGuestsMenuOpen(false),
2570
+ children: "Apply"
2571
+ }
2572
+ )
2573
+ ] })
2230
2574
  ] })
2231
2575
  ] })
2232
2576
  ] })
2233
2577
  ] })
2234
2578
  ] }),
2235
- /* @__PURE__ */ jsxs("button", { type: "submit", className: "sw-search-button", children: [
2579
+ /* @__PURE__ */ jsxs("button", { type: "submit", className: "sw-search-button br-right", children: [
2236
2580
  /* @__PURE__ */ jsx("span", { className: "pi pi-search", "aria-hidden": "true" }),
2237
2581
  "Search"
2238
2582
  ] })