@travelswitchhq/flight-search-react 1.0.2 → 1.0.4

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.cjs CHANGED
@@ -127,7 +127,7 @@ var flightSearchWidgetStyles = `
127
127
  font-size: 12px;
128
128
  }
129
129
  .sw-container .sw-fw500 {
130
- font-weight: 500 !important;
130
+ font-weight: 500;
131
131
  }
132
132
  .sw-container .sw-flex {
133
133
  display: flex;
@@ -195,9 +195,6 @@ var flightSearchWidgetStyles = `
195
195
  min-width: 0;
196
196
  overflow: visible;
197
197
  }
198
- .sw-form-field .p-calendar {
199
- position: unset;
200
- }
201
198
  .sw-form-field label {
202
199
  display: block;
203
200
  width: 100%;
@@ -237,7 +234,7 @@ var flightSearchWidgetStyles = `
237
234
  .sw-form-swap {
238
235
  position: absolute;
239
236
  top: 50%;
240
- left: 50%;
237
+ inset-inline-end: 50%;
241
238
  z-index: 2;
242
239
  display: flex;
243
240
  align-items: center;
@@ -587,11 +584,11 @@ padding-inline-start: 25px;
587
584
  .sw-search-button .p-button-icon {
588
585
  flex-shrink: 0;
589
586
  }
590
- .p-calendar .p-datepicker {
591
- top: 100% !important;
587
+ .sw-com-cal .p-calendar .p-datepicker {
588
+ top: 100%;
592
589
  display: block;
593
590
  min-width: 100%;
594
- margin-top: 5px !important;
591
+ margin-top: 5px;
595
592
  padding: 15px;
596
593
  background-color: var(--sw-white);
597
594
  border: 1px solid var(--sw-form-border);
@@ -690,7 +687,7 @@ padding-inline-start: 25px;
690
687
  }
691
688
  .p-datepicker .p-highlight {
692
689
  position: relative;
693
- background: var(--primary) !important;
690
+ background: var(--primary-light) !important;
694
691
  color: var(--sw-white) !important;
695
692
  }
696
693
  .sw-product-tabs {
@@ -820,10 +817,15 @@ padding-inline-start: 25px;
820
817
  }
821
818
  .sw-dropdown,
822
819
  .sw-rooms-guests-menu,
823
- .p-calendar .p-datepicker {
820
+ .sw-com-cal .p-calendar .p-datepicker {
824
821
  will-change: transform, opacity;
825
822
  transform: translateZ(0);
826
823
  }
824
+ .tfsw-calendar-input{
825
+ position: absolute;
826
+ top: 100%;
827
+ inset-inline-start: 0;
828
+ }
827
829
  .sw-dropdown {
828
830
  -webkit-overflow-scrolling: touch;
829
831
  scroll-behavior: smooth;
@@ -1125,6 +1127,197 @@ padding-inline-start: 25px;
1125
1127
  .sw-srh-class .sw-tab-content {
1126
1128
  flex: 0 1 auto;
1127
1129
  min-width: fit-content;
1130
+ }
1131
+ .MobileShow{
1132
+ display: none;
1133
+ }
1134
+ .MobileHide{
1135
+ display: block;
1136
+ }
1137
+ @media screen and (max-width: 768px) {
1138
+ .MobileShow{
1139
+ display: block;
1140
+ }
1141
+ .MobileHide{
1142
+ display: none;
1143
+ }
1144
+ .sw-container{
1145
+ min-width: 100% !important;
1146
+ }
1147
+ .sw-srh-grid {
1148
+ grid-template-columns: 100% !important;
1149
+ }
1150
+ .sw-srh-wrap{
1151
+ flex-direction: column;
1152
+ }
1153
+ .sw-tab-content{
1154
+ white-space: nowrap;
1155
+ }
1156
+ .sw-srh-main-head{
1157
+ overflow: auto;
1158
+ scrollbar-width: none;
1159
+ -ms-overflow-style: none;
1160
+ &::-webkit-scrollbar {
1161
+ display: none;
1162
+ }
1163
+ }
1164
+ .sw-container .sw-form-field {
1165
+ border-radius: var(--sw-radius);
1166
+ }
1167
+ .sw-fsrh-adv-cont{
1168
+ flex-wrap: wrap;
1169
+ }
1170
+ .sw-container .sw-dropdown{
1171
+ position: fixed;
1172
+ inset: 0;
1173
+ height: 100vh;
1174
+ width: 100%;
1175
+ max-height: 100vh;
1176
+ border-radius: 0;
1177
+ z-index: calc(var(--sw-widget-z-index-base) + 10);
1178
+ }
1179
+ .sw-container .mobileHead{
1180
+ display: flex;
1181
+ align-items: center;
1182
+ gap: 10px;
1183
+ border-bottom: 1px;
1184
+ padding: 15px 10px;
1185
+ border-bottom: 1px solid var(--sw-form-border);
1186
+ a{
1187
+ display: flex;
1188
+ align-items: center;
1189
+ }
1190
+ h4{
1191
+ font-weight: 500;
1192
+ line-height: 1;
1193
+ }
1194
+ }
1195
+ .sw-container .sw-srh-wrap.sw-srh-box.sw-pos-rel .sw-form-field.sw-pos-rel:last-child{
1196
+ padding-inline-start: 15px;
1197
+ }
1198
+ .sw-container .p-datepicker-group + .p-datepicker-group .mobileHead {
1199
+ display: none;
1200
+ }
1201
+ .sw-container .sw-form-swap{
1202
+ inset-inline-end: 0;
1203
+ width: 45px;
1204
+ height: 45px;
1205
+ transform: translate(-50%, -50%) rotate(-90deg);
1206
+ }
1207
+ .sw-dropdown .mobileSrgInput{
1208
+ padding: 15px;
1209
+ input{
1210
+ width: 100%;
1211
+ padding: 15px;
1212
+ border: 1px solid var(--sw-form-border);
1213
+ border-radius: var(--sw-btn-radius);
1214
+ outline: none;
1215
+ background: var(--sw-white);
1216
+ box-shadow: none;
1217
+ font-size: 14px;
1218
+ font-family: var(--sw-font-family);
1219
+ color: var(--sw-body-text);
1220
+ height: 50px;
1221
+ }
1222
+ }
1223
+ .sw-container .sw-dropdown-list-card h5{
1224
+ font-weight: 400;
1225
+ }
1226
+ .sw-container .p-calendar .p-datepicker{
1227
+ position: fixed !important;
1228
+ inset: 0 !important;
1229
+ height: 100vh;
1230
+ width: 100%;
1231
+ max-height: 100vh;
1232
+ overflow: auto;
1233
+ -webkit-overflow-scrolling: touch;
1234
+ scroll-behavior: smooth;
1235
+ padding: 0 !important;
1236
+ margin-top: 0 !important;
1237
+ border-radius: 0 !important;
1238
+ .p-datepicker-group-container{
1239
+ flex-direction: column;
1240
+ }
1241
+ }
1242
+ .sw-container .p-datepicker-group-container .p-datepicker-group:not(:last-child) {
1243
+ border-inline-end: 0 ;
1244
+ padding-inline-end: 0;
1245
+ margin-inline-end: 0;
1246
+ }
1247
+ .sw-com-cal{
1248
+ .p-datepicker-header{
1249
+ flex-wrap: wrap;
1250
+ .mobileHead {
1251
+ width: 100%;
1252
+ margin-bottom: 10px;
1253
+ }
1254
+ }
1255
+ .p-datepicker-footer{
1256
+ position: sticky;
1257
+ bottom: 0;
1258
+ z-index: 100;
1259
+ }
1260
+ }
1261
+ .sw-container .mobileFooter{
1262
+ position: sticky;
1263
+ bottom: 0;
1264
+ display: flex;
1265
+ padding: 15px;
1266
+ background: var(--sw-white);
1267
+ border-top: 1px solid var(--sw-form-border);
1268
+ z-index: 1;
1269
+ }
1270
+ .sw-container .mobileFooter .sw-confirm-btn{
1271
+ width: 100%;
1272
+ padding: 14px;
1273
+ background: var(--sw-primary-btn);
1274
+ color: var(--sw-primary-button-text);
1275
+ border: 1px solid var(--sw-button-primary-border);
1276
+ border-radius: var(--sw-btn-radius);
1277
+ font-size: var(--sw-size-md-3);
1278
+ font-family: var(--sw-font-family);
1279
+ font-weight: 600;
1280
+ cursor: pointer;
1281
+ text-align: center;
1282
+ }
1283
+ .sw-container .p-datepicker .p-datepicker-calendar-container td span{
1284
+ width: 100%;
1285
+ margin: 0;
1286
+ }
1287
+ .sw-container .sw-traveller .sw-rooms-guests-menu{
1288
+ width: 100%;
1289
+ position: fixed;
1290
+ bottom: 0;
1291
+ top: 0;
1292
+ height: 100vh;
1293
+ padding: 0;
1294
+ }
1295
+ .sw-rooms-guests-title{
1296
+ display: none !important;
1297
+ }
1298
+ .sw-rooms-guests-content{
1299
+ padding: 15px;
1300
+ }
1301
+ .sw-rooms-guests-footer{
1302
+ position: fixed;
1303
+ bottom: 0;
1304
+ padding: 15px;
1305
+ width: 100%;
1306
+ right: 0;
1307
+ }
1308
+ .sw-container .sw-srh-mc{
1309
+ display: flex;
1310
+ flex-direction: column;
1311
+ }
1312
+ .sw-srh-mc .sw-srh-mc-foot{
1313
+ margin: 10px 0;
1314
+ }
1315
+ .sw-srh-mc .sw-srh-wrap:nth-child(3){
1316
+ flex-direction: row;
1317
+ }
1318
+ .sw-container .sw-search-button{
1319
+ border-radius: var(--sw-btn-radius);
1320
+ }
1128
1321
  }
1129
1322
  `;
1130
1323
 
@@ -1304,6 +1497,7 @@ function FlightSearchWidget({
1304
1497
  const destinationDropdownRef = (0, import_react.useRef)(null);
1305
1498
  const roomsGuestsMenuRef = (0, import_react.useRef)(null);
1306
1499
  const dateRangeCalendarRef = (0, import_react.useRef)(null);
1500
+ const mobileDateRangeCalendarRef = (0, import_react.useRef)(null);
1307
1501
  const segmentCalendarRefs = (0, import_react.useRef)({});
1308
1502
  const getMaxSegments = () => {
1309
1503
  if (tripType === "custom-search") return 3;
@@ -1883,7 +2077,7 @@ function FlightSearchWidget({
1883
2077
  const label = isOrigin ? "From" : "To";
1884
2078
  const list = isOrigin ? getPredictiveState(segmentIndex).fromAirport : getPredictiveState(segmentIndex).toAirport;
1885
2079
  const selectedIndex = isOrigin ? getPredictiveState(segmentIndex).selectedFromIndex : getPredictiveState(segmentIndex).selectedToIndex;
1886
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-form-field sw-pos-rel ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-is-invalid" : ""}`, children: [
2080
+ 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: [
1887
2081
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${dropdownType}-${segmentIndex}`, children: label }),
1888
2082
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `sw-custom-dropdown ${validationErrors[segmentIndex]?.[dropdownType] ? "sw-has-error" : ""}`, ref: dropdownRef, children: [
1889
2083
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1907,25 +2101,39 @@ function FlightSearchWidget({
1907
2101
  onKeyDown: (e) => handleKeyDown(e, dropdownType, segmentIndex)
1908
2102
  }
1909
2103
  ),
1910
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "sw-dropdown-list", children: list.length > 0 ? list.map((airport, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: `sw-dropdown-list-item ${selectedIndex === i ? "highlight" : ""}`, onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown-list-card", children: [
1911
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
1912
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
1913
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
1914
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h6", { className: "sw-text-label sw-text-ellipsis", children: [
1915
- airport.ct,
1916
- airport.cn ? `, ${airport.cn}` : ""
2104
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown", children: [
2105
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead mobileShow", children: [
2106
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: () => closeAirportDropdown(dropdownType, segmentIndex), 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: [
2107
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
2108
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
2109
+ ] }) }),
2110
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: isOrigin ? "Origin" : "Destination" })
2111
+ ] }),
2112
+ /* @__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) => {
2113
+ const val = e.target.value;
2114
+ handleSegmentFieldChange(segmentIndex, dropdownType, val);
2115
+ triggerSearchAirport(segmentIndex, dropdownType, val);
2116
+ } }) }),
2117
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "sw-dropdown-list", children: list.length > 0 ? list.map((airport, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: `sw-dropdown-list-item ${selectedIndex === i ? "highlight" : ""}`, onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown-list-card", children: [
2118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
2119
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
2120
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
2121
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h6", { className: "sw-text-label sw-text-ellipsis", children: [
2122
+ airport.ct,
2123
+ airport.cn ? `, ${airport.cn}` : ""
2124
+ ] })
1917
2125
  ] })
1918
- ] })
1919
- ] }) }, airport.id ?? airport.ac ?? i)) : DEFAULT_AIRPORTS.map((airport, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "sw-dropdown-list-item ", onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown-list-card", children: [
1920
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
1921
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
1922
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
1923
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h6", { className: "sw-text-label sw-text-ellipsis", children: [
1924
- airport.ct,
1925
- airport.cn ? `, ${airport.cn}` : ""
2126
+ ] }) }, airport.id ?? airport.ac ?? i)) : DEFAULT_AIRPORTS.map((airport, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "sw-dropdown-list-item ", onClick: () => selectAirport(airport, dropdownType, segmentIndex), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown-list-card", children: [
2127
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: "sw-dropdown-item-badge sw-en-font", children: getAirportCode(airport) }),
2128
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
2129
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-fw500 sw-text-ellipsis", children: formatAirportDisplay(airport) }),
2130
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h6", { className: "sw-text-label sw-text-ellipsis", children: [
2131
+ airport.ct,
2132
+ airport.cn ? `, ${airport.cn}` : ""
2133
+ ] })
1926
2134
  ] })
1927
- ] })
1928
- ] }) }, airport.ac ?? i)) }) })
2135
+ ] }) }, airport.ac ?? i)) })
2136
+ ] })
1929
2137
  ] })
1930
2138
  ] });
1931
2139
  };
@@ -1975,7 +2183,29 @@ function FlightSearchWidget({
1975
2183
  },
1976
2184
  dateFormat: "dd M yy",
1977
2185
  placeholder: "29 Jan 2026",
1978
- className: "p-inputtext-sm",
2186
+ className: "p-inputtext-sm MobileHide",
2187
+ minDate: getMinDateForSegment(index)
2188
+ }
2189
+ ),
2190
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2191
+ import_calendar.Calendar,
2192
+ {
2193
+ numberOfMonths: 10,
2194
+ id: `departure-${index}`,
2195
+ appendTo: "self",
2196
+ value: segment.departureDate ?? null,
2197
+ onChange: (e) => {
2198
+ const raw = e.value;
2199
+ const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
2200
+ handleSegmentFieldChange(
2201
+ index,
2202
+ "departureDate",
2203
+ nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
2204
+ );
2205
+ },
2206
+ dateFormat: "dd M yy",
2207
+ placeholder: "29 Jan 2026",
2208
+ className: "p-inputtext-sm MobileShow",
1979
2209
  minDate: getMinDateForSegment(index)
1980
2210
  }
1981
2211
  )
@@ -2012,7 +2242,7 @@ function FlightSearchWidget({
2012
2242
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-tab-content", children: option.label })
2013
2243
  ] }, option.value)) }) }) }),
2014
2244
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: `sw-srh-grid ${tripType === "multi-city" || tripType === "custom-search" ? "sw-srh-mc" : ""}`, onSubmit: handleSubmit, children: [
2015
- tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel", children: [
2245
+ tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel br-left", children: [
2016
2246
  renderAirportDropdown(0, "origin", originDropdownRef, isOriginDropdownOpen, () => setIsOriginDropdownOpen(true)),
2017
2247
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2018
2248
  "div",
@@ -2026,7 +2256,10 @@ function FlightSearchWidget({
2026
2256
  renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))
2027
2257
  ] }),
2028
2258
  (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: [
2029
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { cursor: "pointer" }, onClick: () => dateRangeCalendarRef.current?.show?.(), className: "sw-form-field sw-com-cal", children: [
2259
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { cursor: "pointer" }, onClick: () => {
2260
+ dateRangeCalendarRef.current?.show?.();
2261
+ mobileDateRangeCalendarRef.current?.show?.();
2262
+ }, className: "sw-form-field sw-com-cal", children: [
2030
2263
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
2031
2264
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: "Departure" }),
2032
2265
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: segments[0]?.dateRange?.[0]?.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }) })
@@ -2060,11 +2293,65 @@ function FlightSearchWidget({
2060
2293
  },
2061
2294
  dateFormat: "dd M yy",
2062
2295
  placeholder: "Select date range",
2063
- className: "p-inputtext-sm tfsw-calendar-input"
2296
+ className: "p-inputtext-sm tfsw-calendar-input MobileHide"
2297
+ }
2298
+ ),
2299
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2300
+ import_calendar.Calendar,
2301
+ {
2302
+ numberOfMonths: 10,
2303
+ ref: mobileDateRangeCalendarRef,
2304
+ id: "dateRangeMobile",
2305
+ appendTo: "self",
2306
+ selectionMode: "range",
2307
+ value: segments[0]?.dateRange ?? null,
2308
+ minDate: /* @__PURE__ */ new Date(),
2309
+ onChange: (e) => {
2310
+ const range = e.value;
2311
+ setSegments((prev) => {
2312
+ const u = [...prev];
2313
+ if (!u[0]) return prev;
2314
+ u[0] = {
2315
+ ...u[0],
2316
+ dateRange: range,
2317
+ departureDate: range?.[0] ?? /* @__PURE__ */ new Date(),
2318
+ returnDate: range?.[1] ?? /* @__PURE__ */ new Date()
2319
+ };
2320
+ return u;
2321
+ });
2322
+ },
2323
+ dateFormat: "dd M yy",
2324
+ placeholder: "Select date range",
2325
+ className: "p-inputtext-sm tfsw-calendar-input MobileShow",
2326
+ headerTemplate: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead MobileShow", children: [
2327
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: (e) => {
2328
+ e.stopPropagation();
2329
+ mobileDateRangeCalendarRef.current?.hide?.();
2330
+ }, 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: [
2331
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2332
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2333
+ ] }) }),
2334
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Departure" })
2335
+ ] }),
2336
+ footerTemplate: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobileFooter MobileShow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2337
+ "button",
2338
+ {
2339
+ type: "button",
2340
+ className: "sw-confirm-btn",
2341
+ onClick: (e) => {
2342
+ e.stopPropagation();
2343
+ mobileDateRangeCalendarRef.current?.hide?.();
2344
+ },
2345
+ children: "Confirm"
2346
+ }
2347
+ ) })
2064
2348
  }
2065
2349
  )
2066
2350
  ] }),
2067
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { cursor: "pointer" }, className: "sw-form-field sw-com-cal", onClick: () => dateRangeCalendarRef.current?.show?.(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
2351
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { cursor: "pointer" }, className: "sw-form-field sw-com-cal", onClick: () => {
2352
+ dateRangeCalendarRef.current?.show?.();
2353
+ mobileDateRangeCalendarRef.current?.show?.();
2354
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
2068
2355
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { children: "Return" }),
2069
2356
  /* @__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" }) })
2070
2357
  ] }) })
@@ -2098,7 +2385,52 @@ function FlightSearchWidget({
2098
2385
  appendTo: "self",
2099
2386
  minDate: /* @__PURE__ */ new Date(),
2100
2387
  dateFormat: "dd M yy",
2101
- className: "p-inputtext-sm tfsw-calendar-input"
2388
+ className: "p-inputtext-sm tfsw-calendar-input MobileHide"
2389
+ }
2390
+ ),
2391
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2392
+ import_calendar.Calendar,
2393
+ {
2394
+ numberOfMonths: 10,
2395
+ ref: (el) => {
2396
+ segmentCalendarRefs.current[0] = el;
2397
+ },
2398
+ value: segments[0]?.departureDate ?? null,
2399
+ onChange: (e) => {
2400
+ const raw = e.value;
2401
+ const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
2402
+ handleSegmentFieldChange(
2403
+ 0,
2404
+ "departureDate",
2405
+ nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
2406
+ );
2407
+ },
2408
+ appendTo: "self",
2409
+ minDate: /* @__PURE__ */ new Date(),
2410
+ dateFormat: "dd M yy",
2411
+ className: "p-inputtext-sm tfsw-calendar-input MobileShow",
2412
+ headerTemplate: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead MobileShow", children: [
2413
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: (e) => {
2414
+ e.stopPropagation();
2415
+ segmentCalendarRefs.current[0]?.hide?.();
2416
+ }, 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: [
2417
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2418
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2419
+ ] }) }),
2420
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Departure" })
2421
+ ] }),
2422
+ footerTemplate: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobileFooter MobileShow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2423
+ "button",
2424
+ {
2425
+ type: "button",
2426
+ className: "sw-confirm-btn",
2427
+ onClick: (e) => {
2428
+ e.stopPropagation();
2429
+ segmentCalendarRefs.current[0]?.hide?.();
2430
+ },
2431
+ children: "Confirm"
2432
+ }
2433
+ ) })
2102
2434
  }
2103
2435
  )
2104
2436
  ]
@@ -2134,131 +2466,143 @@ function FlightSearchWidget({
2134
2466
  }
2135
2467
  ),
2136
2468
  isRoomsGuestsMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-menu", children: [
2469
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead MobileShow", children: [
2470
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: (e) => {
2471
+ e.stopPropagation();
2472
+ setIsRoomsGuestsMenuOpen(false);
2473
+ }, 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: [
2474
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2475
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2476
+ ] }) }),
2477
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Number of Travellers" })
2478
+ ] }),
2137
2479
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "sw-rooms-guests-title", children: "Number of Travellers" }),
2138
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2139
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2140
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Adults" }),
2141
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Age (12+)" })
2480
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-content", children: [
2481
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2482
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2483
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Adults" }),
2484
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Age (12+)" })
2485
+ ] }),
2486
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2487
+ const childCount = segments[0]?.childCount ?? 0;
2488
+ const infantCount = segments[0]?.infantCount ?? 0;
2489
+ const isDisabled = count + childCount > 9;
2490
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2491
+ "button",
2492
+ {
2493
+ type: "button",
2494
+ className: `sw-en-font ${(segments[0]?.adultCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2495
+ disabled: isDisabled,
2496
+ onClick: () => {
2497
+ const newChildCount = Math.min(childCount, 9 - count);
2498
+ setSegments((prev) => {
2499
+ const updated = [...prev];
2500
+ if (!updated[0]) return prev;
2501
+ updated[0] = {
2502
+ ...updated[0],
2503
+ adultCount: count,
2504
+ childCount: newChildCount,
2505
+ infantCount: Math.min(infantCount, count)
2506
+ };
2507
+ return updated;
2508
+ });
2509
+ },
2510
+ children: count
2511
+ },
2512
+ count
2513
+ );
2514
+ }) })
2142
2515
  ] }),
2143
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2144
- const childCount = segments[0]?.childCount ?? 0;
2145
- const infantCount = segments[0]?.infantCount ?? 0;
2146
- const isDisabled = count + childCount > 9;
2147
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2148
- "button",
2149
- {
2150
- type: "button",
2151
- className: `sw-en-font ${(segments[0]?.adultCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2152
- disabled: isDisabled,
2153
- onClick: () => {
2154
- const newChildCount = Math.min(childCount, 9 - count);
2155
- setSegments((prev) => {
2156
- const updated = [...prev];
2157
- if (!updated[0]) return prev;
2158
- updated[0] = {
2159
- ...updated[0],
2160
- adultCount: count,
2161
- childCount: newChildCount,
2162
- infantCount: Math.min(infantCount, count)
2163
- };
2164
- return updated;
2165
- });
2516
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2517
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2518
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Child" }),
2519
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Age (2-11)" })
2520
+ ] }),
2521
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8].map((count) => {
2522
+ const adultCount = segments[0]?.adultCount ?? 0;
2523
+ const isDisabled = adultCount + count > 9;
2524
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2525
+ "button",
2526
+ {
2527
+ type: "button",
2528
+ className: `sw-en-font ${(segments[0]?.childCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2529
+ disabled: isDisabled,
2530
+ onClick: () => handleTravellerChange("childCount", count),
2531
+ children: count
2166
2532
  },
2167
- children: count
2168
- },
2169
- count
2170
- );
2171
- }) })
2172
- ] }),
2173
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2174
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2175
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Child" }),
2176
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Age (2-11)" })
2533
+ count
2534
+ );
2535
+ }) })
2177
2536
  ] }),
2178
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8].map((count) => {
2179
- const adultCount = segments[0]?.adultCount ?? 0;
2180
- const isDisabled = adultCount + count > 9;
2181
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2182
- "button",
2183
- {
2184
- type: "button",
2185
- className: `sw-en-font ${(segments[0]?.childCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2186
- disabled: isDisabled,
2187
- onClick: () => handleTravellerChange("childCount", count),
2188
- children: count
2189
- },
2190
- count
2191
- );
2192
- }) })
2193
- ] }),
2194
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2195
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2196
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Infant" }),
2197
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Under 2 years" })
2537
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-pax", children: [
2538
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-common-adult", children: [
2539
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Infant" }),
2540
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Under 2 years" })
2541
+ ] }),
2542
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2543
+ const adultCount = segments[0]?.adultCount ?? 0;
2544
+ const isDisabled = count > adultCount;
2545
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2546
+ "button",
2547
+ {
2548
+ type: "button",
2549
+ className: `sw-en-font ${(segments[0]?.infantCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2550
+ disabled: isDisabled,
2551
+ onClick: () => handleTravellerChange("infantCount", count),
2552
+ children: count
2553
+ },
2554
+ count
2555
+ );
2556
+ }) })
2198
2557
  ] }),
2199
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-button-wrapper", children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((count) => {
2200
- const adultCount = segments[0]?.adultCount ?? 0;
2201
- const isDisabled = count > adultCount;
2202
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2203
- "button",
2204
- {
2205
- type: "button",
2206
- className: `sw-en-font ${(segments[0]?.infantCount ?? 0) === count ? "sw-active-button" : ""} ${isDisabled ? "disabled" : ""}`,
2207
- disabled: isDisabled,
2208
- onClick: () => handleTravellerChange("infantCount", count),
2209
- children: count
2210
- },
2211
- count
2212
- );
2213
- }) })
2214
- ] }),
2215
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "sw-rooms-guests-title", children: "Travel Class" }),
2216
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-class", children: ["Economy", "Business", "First Class", "Premium Economy"].map((classOption) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "sw-tab-checkbox", children: [
2217
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2218
- "input",
2219
- {
2220
- type: "radio",
2221
- name: "travel-class",
2222
- checked: (segments[0]?.travelerClass ?? "Economy") === classOption,
2223
- onChange: () => handleTravellerChange("travelerClass", classOption)
2224
- }
2225
- ),
2226
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sw-tab-content", children: classOption })
2227
- ] }, classOption)) }),
2228
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-footer", children: [
2229
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
2230
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-cta", children: [
2558
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "sw-rooms-guests-title", children: "Travel Class" }),
2559
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-class", children: ["Economy", "Business", "First Class", "Premium Economy"].map((classOption) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "sw-tab-checkbox", children: [
2231
2560
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2232
- "button",
2561
+ "input",
2233
2562
  {
2234
- type: "button",
2235
- className: "sw-reset-button",
2236
- onClick: () => {
2237
- setSegments((prev) => {
2238
- const updated = [...prev];
2239
- if (!updated[0]) return prev;
2240
- updated[0] = { ...updated[0], adultCount: 1, childCount: 0, infantCount: 0, travelerClass: "Economy" };
2241
- return updated;
2242
- });
2243
- },
2244
- children: "Reset"
2563
+ type: "radio",
2564
+ name: "travel-class",
2565
+ checked: (segments[0]?.travelerClass ?? "Economy") === classOption,
2566
+ onChange: () => handleTravellerChange("travelerClass", classOption)
2245
2567
  }
2246
2568
  ),
2247
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2248
- "button",
2249
- {
2250
- type: "button",
2251
- className: "sw-apply-button",
2252
- onClick: () => setIsRoomsGuestsMenuOpen(false),
2253
- children: "Apply"
2254
- }
2255
- )
2569
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sw-tab-content", children: classOption })
2570
+ ] }, classOption)) }),
2571
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-footer", children: [
2572
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
2573
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-rooms-guests-cta", children: [
2574
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2575
+ "button",
2576
+ {
2577
+ type: "button",
2578
+ className: "sw-reset-button",
2579
+ onClick: () => {
2580
+ setSegments((prev) => {
2581
+ const updated = [...prev];
2582
+ if (!updated[0]) return prev;
2583
+ updated[0] = { ...updated[0], adultCount: 1, childCount: 0, infantCount: 0, travelerClass: "Economy" };
2584
+ return updated;
2585
+ });
2586
+ },
2587
+ children: "Reset"
2588
+ }
2589
+ ),
2590
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2591
+ "button",
2592
+ {
2593
+ type: "button",
2594
+ className: "sw-apply-button",
2595
+ onClick: () => setIsRoomsGuestsMenuOpen(false),
2596
+ children: "Apply"
2597
+ }
2598
+ )
2599
+ ] })
2256
2600
  ] })
2257
2601
  ] })
2258
2602
  ] })
2259
2603
  ] })
2260
2604
  ] }),
2261
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "submit", className: "sw-search-button", children: [
2605
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "submit", className: "sw-search-button br-right", children: [
2262
2606
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pi pi-search", "aria-hidden": "true" }),
2263
2607
  "Search"
2264
2608
  ] })