@qite/tide-booking-component 1.4.39 → 1.4.40

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 (79) hide show
  1. package/build/build-cjs/booking-wizard/types.d.ts +1 -0
  2. package/build/build-cjs/index.js +7173 -1533
  3. package/build/build-cjs/qsm/store/qsm-slice.d.ts +4 -2
  4. package/build/build-cjs/qsm/types.d.ts +2 -1
  5. package/build/build-cjs/search-results/components/filters/flight-filters.d.ts +8 -0
  6. package/build/build-cjs/search-results/components/flight/flight-accommodation-results.d.ts +4 -1
  7. package/build/build-cjs/search-results/components/flight/flight-option.d.ts +7 -0
  8. package/build/build-cjs/search-results/components/flight/flight-search-context/index.d.ts +36 -0
  9. package/build/build-cjs/search-results/components/icon.d.ts +1 -0
  10. package/build/build-cjs/search-results/components/item-picker/index.d.ts +5 -3
  11. package/build/build-cjs/search-results/components/search-results-container/flight-search-results.d.ts +6 -0
  12. package/build/build-cjs/search-results/store/search-results-slice.d.ts +2 -0
  13. package/build/build-cjs/search-results/types.d.ts +31 -1
  14. package/build/build-cjs/search-results/utils/flight-utils.d.ts +16 -0
  15. package/build/build-cjs/shared/components/flyin.d.ts +9 -0
  16. package/build/build-cjs/shared/types.d.ts +6 -0
  17. package/build/build-cjs/shared/utils/localization-util.d.ts +21 -0
  18. package/build/build-esm/booking-wizard/types.d.ts +1 -0
  19. package/build/build-esm/index.js +7157 -1485
  20. package/build/build-esm/qsm/store/qsm-slice.d.ts +4 -2
  21. package/build/build-esm/qsm/types.d.ts +2 -1
  22. package/build/build-esm/search-results/components/filters/flight-filters.d.ts +8 -0
  23. package/build/build-esm/search-results/components/flight/flight-accommodation-results.d.ts +4 -1
  24. package/build/build-esm/search-results/components/flight/flight-option.d.ts +7 -0
  25. package/build/build-esm/search-results/components/flight/flight-search-context/index.d.ts +36 -0
  26. package/build/build-esm/search-results/components/icon.d.ts +1 -0
  27. package/build/build-esm/search-results/components/item-picker/index.d.ts +5 -3
  28. package/build/build-esm/search-results/components/search-results-container/flight-search-results.d.ts +6 -0
  29. package/build/build-esm/search-results/store/search-results-slice.d.ts +2 -0
  30. package/build/build-esm/search-results/types.d.ts +31 -1
  31. package/build/build-esm/search-results/utils/flight-utils.d.ts +16 -0
  32. package/build/build-esm/shared/components/flyin.d.ts +9 -0
  33. package/build/build-esm/shared/types.d.ts +6 -0
  34. package/build/build-esm/shared/utils/localization-util.d.ts +21 -0
  35. package/package.json +4 -3
  36. package/rollup.config.js +2 -2
  37. package/src/booking-product/components/dates.tsx +1 -1
  38. package/src/booking-wizard/features/booking/booking-slice.ts +4 -2
  39. package/src/booking-wizard/types.ts +1 -0
  40. package/src/content/components/slider.tsx +1 -1
  41. package/src/qsm/components/QSMContainer/qsm-container.tsx +38 -26
  42. package/src/qsm/components/search-input-group/index.tsx +0 -1
  43. package/src/qsm/components/travel-input/index.tsx +4 -4
  44. package/src/qsm/components/travel-input-group/index.tsx +4 -3
  45. package/src/qsm/store/qsm-slice.ts +7 -1
  46. package/src/qsm/types.ts +3 -1
  47. package/src/search-results/components/filters/flight-filters.tsx +671 -0
  48. package/src/search-results/components/flight/flight-accommodation-results.tsx +20 -562
  49. package/src/search-results/components/flight/flight-option.tsx +243 -0
  50. package/src/search-results/components/flight/flight-search-context/index.tsx +508 -0
  51. package/src/search-results/components/hotel/hotel-card.tsx +0 -1
  52. package/src/search-results/components/icon.tsx +84 -44
  53. package/src/search-results/components/item-picker/index.tsx +16 -11
  54. package/src/search-results/components/search-results-container/flight-search-results.tsx +120 -0
  55. package/src/search-results/components/search-results-container/search-results-container.tsx +85 -70
  56. package/src/search-results/store/search-results-slice.ts +6 -0
  57. package/src/search-results/types.ts +37 -1
  58. package/src/search-results/utils/flight-utils.ts +106 -0
  59. package/src/shared/components/flyin.tsx +334 -0
  60. package/src/shared/translations/ar-SA.json +13 -1
  61. package/src/shared/translations/da-DK.json +13 -1
  62. package/src/shared/translations/de-DE.json +13 -1
  63. package/src/shared/translations/en-GB.json +13 -1
  64. package/src/shared/translations/es-ES.json +13 -1
  65. package/src/shared/translations/fr-BE.json +13 -1
  66. package/src/shared/translations/fr-FR.json +13 -1
  67. package/src/shared/translations/is-IS.json +13 -1
  68. package/src/shared/translations/it-IT.json +13 -1
  69. package/src/shared/translations/ja-JP.json +13 -1
  70. package/src/shared/translations/nl-BE.json +13 -1
  71. package/src/shared/translations/nl-NL.json +13 -1
  72. package/src/shared/translations/no-NO.json +13 -1
  73. package/src/shared/translations/pl-PL.json +13 -1
  74. package/src/shared/translations/pt-PT.json +13 -1
  75. package/src/shared/translations/sv-SE.json +13 -1
  76. package/src/shared/types.ts +7 -0
  77. package/src/shared/utils/localization-util.ts +71 -0
  78. package/styles/booking-search-results.scss +1 -0
  79. package/styles/components/_flyin.scss +550 -0
package/src/search-results/components/flight/flight-accommodation-results.tsx CHANGED
@@ -1,582 +1,40 @@
1
- import React from 'react';
1
+ import React, { useContext } from 'react';
2
2
  import Icon from '../icon';
3
+ import { ExtendedFlightSearchResponseItem } from '../../types';
4
+ import SearchResultsConfigurationContext from '../../search-results-configuration-context';
5
+ import { getTranslations } from '../../../shared/utils/localization-util';
6
+ import FlightOption from './flight-option';
7
+ import { groupBy } from 'lodash';
3
8
 
4
- interface FlightAccommodationResultsProps {}
9
+ interface FlightAccommodationResultsProps {
10
+ searchResults: ExtendedFlightSearchResponseItem[];
11
+ }
12
+
13
+ const FlightAccommodationResults: React.FC<FlightAccommodationResultsProps> = ({ searchResults }) => {
14
+ const groupedSearchResults = groupBy(searchResults, (result) => result.flightRouteId);
15
+ const context = useContext(SearchResultsConfigurationContext);
16
+ const translations = getTranslations(context?.languageCode ?? 'en-GB');
5
17
 
6
- const FlightAccommodationResults: React.FC<FlightAccommodationResultsProps> = () => {
7
18
  return (
8
19
  <>
9
20
  <div className="search__results__label search__results__label--secondary">
10
21
  <div className="search__results__label__date">
11
- <p className="search__results__label__date-date">19</p>
12
- <p>Jan</p>
22
+ <Icon name="ui-flight" height={16} fill="white" />
13
23
  </div>
14
24
  <div className="search__results__label__text">
15
25
  <h3>
16
- Select <strong>Accomodation</strong>
26
+ {translations.SRP.SELECT} <strong> {translations.SIDEBAR.FLIGHT}</strong>
17
27
  </h3>
18
28
  </div>
19
29
  </div>
20
30
 
21
31
  <div className="search__results__cards search__results__cards--extended">
22
- <div key={1} className="search__result-card">
23
- <div className="flight">
24
- <div className="flight__option">
25
- <div className="flight__content">
26
- <div className="flight__flights">
27
- <div className="flight__flight">
28
- <div className="flight__flight__header">
29
- <div className="flight__status__container"></div>
30
- <div className="flight__price">
31
- <span className="price price--increase">- € 375,98</span>
32
- <button type="button" className="cta cta--select">
33
- Select
34
- </button>
35
- </div>
36
- </div>
37
- </div>
38
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
39
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
40
- <div className="flight__flight">
41
- <div className="flight__flight__container">
42
- <div className="flight__flight__wrapper">
43
- <div className="flight__logo__wrapper">
44
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
45
- <span>Example Airline</span>
46
- </div>
47
- <div className="flight__info">
48
- <div className="flight__info__times">
49
- <strong>08:30 JFK</strong>
50
- <p>Mon 12 Feb 2025</p>
51
- </div>
52
- <div className="flight__info__duration">
53
- <p>7h 45m</p>
54
- <div className="flight__info__duration__stops">
55
- <div className="flight__info__duration__stop" />
56
- </div>
57
- <span>1 stop</span>
58
- </div>
59
- <div className="flight__info__times flight__info__times--arrival">
60
- <strong>22:15 AMS</strong>
61
- <p>Tue 13 Feb 2025</p>
62
- <span className="flight__info__times__days">+1 day</span>
63
- </div>
64
- </div>
65
- </div>
66
-
67
- <div className="flight__detail__btn__wrapper">
68
- <div className="flight__detail__btn">
69
- {/* Static icon, no click logic */}
70
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
71
- </div>
72
- </div>
73
- </div>
74
-
75
- {/* Detail section, always visible in this static version */}
76
- <div className="flight__detail">
77
- {/* Flight Line 1 */}
78
- <div className="flight__info">
79
- <div className="flight__info__times__wrapper">
80
- <div className="flight__info__times">
81
- <p>08:30</p>
82
- <strong>JFK</strong>
83
- <p>Mon 12 Feb 2025</p>
84
- </div>
85
- <div>
86
- <Icon name="ui-plane-depart" width={30} height={20} />
87
- </div>
88
- </div>
89
- <div className="flight__info__duration">
90
- <p>6h 20m</p>
91
- <div className="flight__info__duration__stops" />
92
- <span>Example Airline</span>
93
- <strong>EA123</strong>
94
- </div>
95
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
96
- <div>
97
- <Icon name="ui-plane-arrive" width={30} height={20} />
98
- </div>
99
- <div className="flight__info__times flight__info__times--arrival">
100
- <p>20:50</p>
101
- <strong>LHR</strong>
102
- <p>Mon 12 Feb 2025</p>
103
- </div>
104
- </div>
105
- </div>
106
-
107
- {/* Wait time */}
108
- <div className="flight__info">
109
- <div className="flight__info__times" />
110
- <div className="flight__info__duration flight__info__duration--waittime">
111
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
112
- <Icon name="ui-clock" width={24} height={24} />
113
- </div>
114
- <div className="flight__info__duration__stoptime">
115
- <span>Stop time</span>
116
- <strong>1h 15m</strong>
117
- </div>
118
- </div>
119
- <div className="flight__info__times flight__info__times--arrival" />
120
- </div>
121
-
122
- {/* Flight Line 2 */}
123
- <div className="flight__info">
124
- <div className="flight__info__times__wrapper">
125
- <div className="flight__info__times">
126
- <p>22:05</p>
127
- <strong>LHR</strong>
128
- <p>Mon 12 Feb 2025</p>
129
- </div>
130
- <div>
131
- <Icon name="ui-plane-depart" width={30} height={20} />
132
- </div>
133
- </div>
134
- <div className="flight__info__duration">
135
- <p>1h 10m</p>
136
- <div className="flight__info__duration__stops" />
137
- <span>Example Airline</span>
138
- <strong>EA456</strong>
139
- </div>
140
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
141
- <div>
142
- <Icon name="ui-plane-arrive" width={30} height={20} />
143
- </div>
144
- <div className="flight__info__times flight__info__times--arrival">
145
- <p>23:15</p>
146
- <strong>AMS</strong>
147
- <p>Mon 12 Feb 2025</p>
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
-
153
- {/* Rate section kept empty (original code was commented out) */}
154
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
155
- </div>
156
- </div>
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
- <div key={2} className="search__result-card">
162
- <div className="flight">
163
- <div className="flight__option">
164
- <div className="flight__content">
165
- <div className="flight__flights">
166
- <div className="flight__flight">
167
- <div className="flight__flight__header">
168
- <div className="flight__status__container"></div>
169
- <div className="flight__price">
170
- <span className="price price--increase">- € 375,98</span>
171
- <button type="button" className="cta cta--select">
172
- Select
173
- </button>
174
- </div>
175
- </div>
176
- </div>
177
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
178
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
179
- <div className="flight__flight">
180
- <div className="flight__flight__container">
181
- <div className="flight__flight__wrapper">
182
- <div className="flight__logo__wrapper">
183
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
184
- <span>Example Airline</span>
185
- </div>
186
- <div className="flight__info">
187
- <div className="flight__info__times">
188
- <strong>08:30 JFK</strong>
189
- <p>Mon 12 Feb 2025</p>
190
- </div>
191
- <div className="flight__info__duration">
192
- <p>7h 45m</p>
193
- <div className="flight__info__duration__stops">
194
- <div className="flight__info__duration__stop" />
195
- </div>
196
- <span>1 stop</span>
197
- </div>
198
- <div className="flight__info__times flight__info__times--arrival">
199
- <strong>22:15 AMS</strong>
200
- <p>Tue 13 Feb 2025</p>
201
- <span className="flight__info__times__days">+1 day</span>
202
- </div>
203
- </div>
204
- </div>
205
-
206
- <div className="flight__detail__btn__wrapper">
207
- <div className="flight__detail__btn">
208
- {/* Static icon, no click logic */}
209
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
210
- </div>
211
- </div>
212
- </div>
213
-
214
- {/* Detail section, always visible in this static version */}
215
- <div className="flight__detail">
216
- {/* Flight Line 1 */}
217
- <div className="flight__info">
218
- <div className="flight__info__times__wrapper">
219
- <div className="flight__info__times">
220
- <p>08:30</p>
221
- <strong>JFK</strong>
222
- <p>Mon 12 Feb 2025</p>
223
- </div>
224
- <div>
225
- <Icon name="ui-plane-depart" width={30} height={20} />
226
- </div>
227
- </div>
228
- <div className="flight__info__duration">
229
- <p>6h 20m</p>
230
- <div className="flight__info__duration__stops" />
231
- <span>Example Airline</span>
232
- <strong>EA123</strong>
233
- </div>
234
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
235
- <div>
236
- <Icon name="ui-plane-arrive" width={30} height={20} />
237
- </div>
238
- <div className="flight__info__times flight__info__times--arrival">
239
- <p>20:50</p>
240
- <strong>LHR</strong>
241
- <p>Mon 12 Feb 2025</p>
242
- </div>
243
- </div>
244
- </div>
245
-
246
- {/* Wait time */}
247
- <div className="flight__info">
248
- <div className="flight__info__times" />
249
- <div className="flight__info__duration flight__info__duration--waittime">
250
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
251
- <Icon name="ui-clock" width={24} height={24} />
252
- </div>
253
- <div className="flight__info__duration__stoptime">
254
- <span>Stop time</span>
255
- <strong>1h 15m</strong>
256
- </div>
257
- </div>
258
- <div className="flight__info__times flight__info__times--arrival" />
259
- </div>
260
-
261
- {/* Flight Line 2 */}
262
- <div className="flight__info">
263
- <div className="flight__info__times__wrapper">
264
- <div className="flight__info__times">
265
- <p>22:05</p>
266
- <strong>LHR</strong>
267
- <p>Mon 12 Feb 2025</p>
268
- </div>
269
- <div>
270
- <Icon name="ui-plane-depart" width={30} height={20} />
271
- </div>
272
- </div>
273
- <div className="flight__info__duration">
274
- <p>1h 10m</p>
275
- <div className="flight__info__duration__stops" />
276
- <span>Example Airline</span>
277
- <strong>EA456</strong>
278
- </div>
279
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
280
- <div>
281
- <Icon name="ui-plane-arrive" width={30} height={20} />
282
- </div>
283
- <div className="flight__info__times flight__info__times--arrival">
284
- <p>23:15</p>
285
- <strong>AMS</strong>
286
- <p>Mon 12 Feb 2025</p>
287
- </div>
288
- </div>
289
- </div>
290
- </div>
291
-
292
- {/* Rate section kept empty (original code was commented out) */}
293
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
294
- </div>
295
- </div>
296
- </div>
297
- </div>
298
- </div>
299
- </div>
300
- <div key={3} className="search__result-card">
301
- <div className="flight">
302
- <div className="flight__option">
303
- <div className="flight__content">
304
- <div className="flight__flights">
305
- <div className="flight__flight">
306
- <div className="flight__flight__header">
307
- <div className="flight__status__container"></div>
308
- <div className="flight__price">
309
- <span className="price price--increase">- € 375,98</span>
310
- <button type="button" className="cta cta--select">
311
- Select
312
- </button>
313
- </div>
314
- </div>
315
- </div>
316
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
317
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
318
- <div className="flight__flight">
319
- <div className="flight__flight__container">
320
- <div className="flight__flight__wrapper">
321
- <div className="flight__logo__wrapper">
322
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
323
- <span>Example Airline</span>
324
- </div>
325
- <div className="flight__info">
326
- <div className="flight__info__times">
327
- <strong>08:30 JFK</strong>
328
- <p>Mon 12 Feb 2025</p>
329
- </div>
330
- <div className="flight__info__duration">
331
- <p>7h 45m</p>
332
- <div className="flight__info__duration__stops">
333
- <div className="flight__info__duration__stop" />
334
- </div>
335
- <span>1 stop</span>
336
- </div>
337
- <div className="flight__info__times flight__info__times--arrival">
338
- <strong>22:15 AMS</strong>
339
- <p>Tue 13 Feb 2025</p>
340
- <span className="flight__info__times__days">+1 day</span>
341
- </div>
342
- </div>
343
- </div>
344
-
345
- <div className="flight__detail__btn__wrapper">
346
- <div className="flight__detail__btn">
347
- {/* Static icon, no click logic */}
348
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
349
- </div>
350
- </div>
351
- </div>
352
-
353
- {/* Detail section, always visible in this static version */}
354
- <div className="flight__detail">
355
- {/* Flight Line 1 */}
356
- <div className="flight__info">
357
- <div className="flight__info__times__wrapper">
358
- <div className="flight__info__times">
359
- <p>08:30</p>
360
- <strong>JFK</strong>
361
- <p>Mon 12 Feb 2025</p>
362
- </div>
363
- <div>
364
- <Icon name="ui-plane-depart" width={30} height={20} />
365
- </div>
366
- </div>
367
- <div className="flight__info__duration">
368
- <p>6h 20m</p>
369
- <div className="flight__info__duration__stops" />
370
- <span>Example Airline</span>
371
- <strong>EA123</strong>
372
- </div>
373
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
374
- <div>
375
- <Icon name="ui-plane-arrive" width={30} height={20} />
376
- </div>
377
- <div className="flight__info__times flight__info__times--arrival">
378
- <p>20:50</p>
379
- <strong>LHR</strong>
380
- <p>Mon 12 Feb 2025</p>
381
- </div>
382
- </div>
383
- </div>
384
-
385
- {/* Wait time */}
386
- <div className="flight__info">
387
- <div className="flight__info__times" />
388
- <div className="flight__info__duration flight__info__duration--waittime">
389
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
390
- <Icon name="ui-clock" width={24} height={24} />
391
- </div>
392
- <div className="flight__info__duration__stoptime">
393
- <span>Stop time</span>
394
- <strong>1h 15m</strong>
395
- </div>
396
- </div>
397
- <div className="flight__info__times flight__info__times--arrival" />
398
- </div>
399
-
400
- {/* Flight Line 2 */}
401
- <div className="flight__info">
402
- <div className="flight__info__times__wrapper">
403
- <div className="flight__info__times">
404
- <p>22:05</p>
405
- <strong>LHR</strong>
406
- <p>Mon 12 Feb 2025</p>
407
- </div>
408
- <div>
409
- <Icon name="ui-plane-depart" width={30} height={20} />
410
- </div>
411
- </div>
412
- <div className="flight__info__duration">
413
- <p>1h 10m</p>
414
- <div className="flight__info__duration__stops" />
415
- <span>Example Airline</span>
416
- <strong>EA456</strong>
417
- </div>
418
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
419
- <div>
420
- <Icon name="ui-plane-arrive" width={30} height={20} />
421
- </div>
422
- <div className="flight__info__times flight__info__times--arrival">
423
- <p>23:15</p>
424
- <strong>AMS</strong>
425
- <p>Mon 12 Feb 2025</p>
426
- </div>
427
- </div>
428
- </div>
429
- </div>
430
-
431
- {/* Rate section kept empty (original code was commented out) */}
432
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
433
- </div>
434
- </div>
435
- </div>
436
- </div>
437
- </div>
438
- </div>
439
- <div key={4} className="search__result-card">
440
- <div className="flight">
441
- <div className="flight__option">
442
- <div className="flight__content">
443
- <div className="flight__flights">
444
- <div className="flight__flight">
445
- <div className="flight__flight__header">
446
- <div className="flight__status__container"></div>
447
- <div className="flight__price">
448
- <span className="price price--increase">- € 375,98</span>
449
- <button type="button" className="cta cta--select">
450
- Select
451
- </button>
452
- </div>
453
- </div>
454
- </div>
455
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
456
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
457
- <div className="flight__flight">
458
- <div className="flight__flight__container">
459
- <div className="flight__flight__wrapper">
460
- <div className="flight__logo__wrapper">
461
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
462
- <span>Example Airline</span>
463
- </div>
464
- <div className="flight__info">
465
- <div className="flight__info__times">
466
- <strong>08:30 JFK</strong>
467
- <p>Mon 12 Feb 2025</p>
468
- </div>
469
- <div className="flight__info__duration">
470
- <p>7h 45m</p>
471
- <div className="flight__info__duration__stops">
472
- <div className="flight__info__duration__stop" />
473
- </div>
474
- <span>1 stop</span>
475
- </div>
476
- <div className="flight__info__times flight__info__times--arrival">
477
- <strong>22:15 AMS</strong>
478
- <p>Tue 13 Feb 2025</p>
479
- <span className="flight__info__times__days">+1 day</span>
480
- </div>
481
- </div>
482
- </div>
483
-
484
- <div className="flight__detail__btn__wrapper">
485
- <div className="flight__detail__btn">
486
- {/* Static icon, no click logic */}
487
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
488
- </div>
489
- </div>
490
- </div>
491
-
492
- {/* Detail section, always visible in this static version */}
493
- <div className="flight__detail">
494
- {/* Flight Line 1 */}
495
- <div className="flight__info">
496
- <div className="flight__info__times__wrapper">
497
- <div className="flight__info__times">
498
- <p>08:30</p>
499
- <strong>JFK</strong>
500
- <p>Mon 12 Feb 2025</p>
501
- </div>
502
- <div>
503
- <Icon name="ui-plane-depart" width={30} height={20} />
504
- </div>
505
- </div>
506
- <div className="flight__info__duration">
507
- <p>6h 20m</p>
508
- <div className="flight__info__duration__stops" />
509
- <span>Example Airline</span>
510
- <strong>EA123</strong>
511
- </div>
512
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
513
- <div>
514
- <Icon name="ui-plane-arrive" width={30} height={20} />
515
- </div>
516
- <div className="flight__info__times flight__info__times--arrival">
517
- <p>20:50</p>
518
- <strong>LHR</strong>
519
- <p>Mon 12 Feb 2025</p>
520
- </div>
521
- </div>
522
- </div>
523
-
524
- {/* Wait time */}
525
- <div className="flight__info">
526
- <div className="flight__info__times" />
527
- <div className="flight__info__duration flight__info__duration--waittime">
528
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
529
- <Icon name="ui-clock" width={24} height={24} />
530
- </div>
531
- <div className="flight__info__duration__stoptime">
532
- <span>Stop time</span>
533
- <strong>1h 15m</strong>
534
- </div>
535
- </div>
536
- <div className="flight__info__times flight__info__times--arrival" />
537
- </div>
538
-
539
- {/* Flight Line 2 */}
540
- <div className="flight__info">
541
- <div className="flight__info__times__wrapper">
542
- <div className="flight__info__times">
543
- <p>22:05</p>
544
- <strong>LHR</strong>
545
- <p>Mon 12 Feb 2025</p>
546
- </div>
547
- <div>
548
- <Icon name="ui-plane-depart" width={30} height={20} />
549
- </div>
550
- </div>
551
- <div className="flight__info__duration">
552
- <p>1h 10m</p>
553
- <div className="flight__info__duration__stops" />
554
- <span>Example Airline</span>
555
- <strong>EA456</strong>
556
- </div>
557
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
558
- <div>
559
- <Icon name="ui-plane-arrive" width={30} height={20} />
560
- </div>
561
- <div className="flight__info__times flight__info__times--arrival">
562
- <p>23:15</p>
563
- <strong>AMS</strong>
564
- <p>Mon 12 Feb 2025</p>
565
- </div>
566
- </div>
567
- </div>
568
- </div>
569
-
570
- {/* Rate section kept empty (original code was commented out) */}
571
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
572
- </div>
573
- </div>
574
- </div>
575
- </div>
576
- </div>
577
- </div>
32
+ {searchResults.map((result) => (
33
+ <FlightOption key={`flight-${result.guid}`} item={result} />
34
+ ))}
578
35
  </div>
579
36
  </>
580
37
  );
581
38
  };
39
+
582
40
  export default FlightAccommodationResults;