@qite/tide-booking-component 1.4.34 → 1.4.35

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 (62) hide show
  1. package/build/build-cjs/index.js +1627 -374
  2. package/build/build-cjs/qsm/types.d.ts +0 -1
  3. package/build/build-cjs/search-results/components/filters/filters.d.ts +2 -2
  4. package/build/build-cjs/search-results/components/flight/flight-results.d.ts +2 -0
  5. package/build/build-cjs/search-results/components/hotel/hotel-card.d.ts +1 -0
  6. package/build/build-cjs/search-results/components/itinerary/index.d.ts +2 -2
  7. package/build/build-cjs/search-results/store/search-results-slice.d.ts +11 -2
  8. package/build/build-cjs/search-results/types.d.ts +0 -14
  9. package/build/build-esm/index.js +1627 -374
  10. package/build/build-esm/qsm/types.d.ts +0 -1
  11. package/build/build-esm/search-results/components/filters/filters.d.ts +2 -2
  12. package/build/build-esm/search-results/components/flight/flight-results.d.ts +2 -0
  13. package/build/build-esm/search-results/components/hotel/hotel-card.d.ts +1 -0
  14. package/build/build-esm/search-results/components/itinerary/index.d.ts +2 -2
  15. package/build/build-esm/search-results/store/search-results-slice.d.ts +11 -2
  16. package/build/build-esm/search-results/types.d.ts +0 -14
  17. package/package.json +2 -2
  18. package/src/booking-wizard/features/booking/booking-self-contained.tsx +0 -1
  19. package/src/booking-wizard/features/travelers-form/controls/gender-control.tsx +5 -5
  20. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +10 -10
  21. package/src/content/components/icon.tsx +1 -1
  22. package/src/content/features/content-page/content-page-self-contained.tsx +0 -1
  23. package/src/qsm/components/QSMContainer/qsm-container.tsx +15 -13
  24. package/src/qsm/components/mobile-filter-modal/index.tsx +12 -10
  25. package/src/qsm/components/travel-class-picker/index.tsx +5 -3
  26. package/src/qsm/components/travel-input/index.tsx +15 -12
  27. package/src/qsm/components/travel-input-group/index.tsx +14 -3
  28. package/src/qsm/components/travel-nationality-picker/index.tsx +5 -3
  29. package/src/qsm/components/travel-type-picker/index.tsx +5 -3
  30. package/src/qsm/qsm-configuration-context.ts +0 -1
  31. package/src/qsm/types.ts +0 -1
  32. package/src/search-results/components/filters/filters.tsx +15 -16
  33. package/src/search-results/components/flight/flight-results.tsx +168 -1099
  34. package/src/search-results/components/hotel/hotel-accommodation-results.tsx +21 -24
  35. package/src/search-results/components/hotel/hotel-card.tsx +4 -3
  36. package/src/search-results/components/icon.tsx +1 -1
  37. package/src/search-results/components/itinerary/index.tsx +229 -129
  38. package/src/search-results/components/round-trip/round-trip-results.tsx +1 -1
  39. package/src/search-results/components/search-results-container/search-results-container.tsx +45 -33
  40. package/src/search-results/components/spinner/spinner.tsx +3 -1
  41. package/src/search-results/components/tab-views/index.tsx +13 -7
  42. package/src/search-results/features/flights/flight-search-results-self-contained.tsx +1 -14
  43. package/src/search-results/features/hotels/hotel-search-results-self-contained.tsx +1 -14
  44. package/src/search-results/store/search-results-slice.ts +37 -3
  45. package/src/search-results/types.ts +0 -15
  46. package/src/shared/translations/ar-SA.json +70 -0
  47. package/src/shared/translations/da-DK.json +70 -0
  48. package/src/shared/translations/de-DE.json +70 -0
  49. package/src/shared/translations/en-GB.json +71 -1
  50. package/src/shared/translations/es-ES.json +70 -0
  51. package/src/shared/translations/fr-BE.json +71 -1
  52. package/src/shared/translations/fr-FR.json +70 -0
  53. package/src/shared/translations/is-IS.json +72 -2
  54. package/src/shared/translations/it-IT.json +70 -0
  55. package/src/shared/translations/ja-JP.json +72 -2
  56. package/src/shared/translations/nl-BE.json +70 -0
  57. package/src/shared/translations/nl-NL.json +70 -0
  58. package/src/shared/translations/no-NO.json +72 -2
  59. package/src/shared/translations/pl-PL.json +70 -0
  60. package/src/shared/translations/pt-PT.json +70 -0
  61. package/src/shared/translations/sv-SE.json +72 -2
  62. package/styles/components/_search.scss +7 -1
package/src/search-results/components/flight/flight-results.tsx CHANGED
@@ -1,1135 +1,204 @@
1
- import React from 'react';
1
+ import React, { useContext, useState } from 'react';
2
2
  import Icon from '../icon';
3
+ import { BookingPackageFlight } from '@qite/tide-client';
4
+ import { parseISO, format } from 'date-fns';
5
+ import { useDispatch } from 'react-redux';
6
+ import { selectFlight } from '../../store/search-results-slice';
7
+ import { getTranslations } from '../../../shared/utils/localization-util';
8
+ import SearchResultsConfigurationContext from '../../search-results-configuration-context';
3
9
 
4
10
  interface FlightResultsProps {
11
+ flights: BookingPackageFlight[];
5
12
  isDeparture?: boolean;
6
13
  }
7
14
 
8
- const FlightResults: React.FC<FlightResultsProps> = ({ isDeparture }) => {
15
+ const ticksToMinutes = (ticks: number) => Math.floor(ticks / 600000000);
16
+
17
+ const formatDuration = (ticks: number) => {
18
+ const minutes = ticksToMinutes(ticks);
19
+ const h = Math.floor(minutes / 60);
20
+ const m = minutes % 60;
21
+ return `${h}h ${m}m`;
22
+ };
23
+
24
+ const FlightResults: React.FC<FlightResultsProps> = ({ flights, isDeparture }) => {
25
+ const context = useContext(SearchResultsConfigurationContext);
26
+ const translations = getTranslations(context?.languageCode ?? 'en-GB');
27
+
28
+ const dispatch = useDispatch();
29
+
30
+ const [activeDetailId, setActiveDetailId] = useState<string | null>(null);
31
+
32
+ const handleDetailClick = (flightOptionId: string) => {
33
+ setActiveDetailId((prev) => (prev === flightOptionId ? null : flightOptionId));
34
+ };
35
+
36
+ const firstResult = flights?.[0];
37
+ const firstResultDate = firstResult?.startDateTime ? parseISO(firstResult.startDateTime) : null;
38
+
9
39
  return (
10
40
  <>
41
+ {/* Header */}
11
42
  <div className="search__results__label">
12
43
  <div className="search__results__label__date">
13
- <p className="search__results__label__date-date">{isDeparture ? '19' : '26'}</p>
14
- <p>Jan</p>
44
+ {firstResultDate && (
45
+ <>
46
+ <p className="search__results__label__date-date">{format(firstResultDate, 'd')}</p>
47
+ <p>{format(firstResultDate, 'MMM')}</p>
48
+ </>
49
+ )}
15
50
  </div>
16
51
  <div className="search__results__label__text">
17
52
  <h3>
18
- Select <strong>{isDeparture ? 'Departure' : 'Return'}</strong>
53
+ {translations.SRP.SELECT} <strong>{isDeparture ? translations.SRP.DEPARTURE : translations.SRP.RETURN}</strong>
19
54
  </h3>
20
55
  </div>
21
56
  </div>
22
57
 
23
- {isDeparture && (
24
- <div className="search__results__cards search__results__cards--extended">
25
- <div className="flight">
26
- <div className="flight__option">
27
- <div className="flight__content">
28
- <div className="flight__flights">
29
- <div className="flight__flight">
30
- <div className="flight__flight__header">
31
- <div className="flight__status__container"></div>
32
- <div className="flight__price">
33
- <span className="price price--decrease"></span>
34
- <button type="button" className="cta cta--selected">
35
- Selected
36
- </button>
37
- </div>
38
- </div>
39
- </div>
40
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
41
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
42
- <div className="flight__flight">
43
- <div className="flight__flight__container">
44
- <div className="flight__flight__wrapper">
45
- <div className="flight__logo__wrapper">
46
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
47
- <span>Example Airline</span>
48
- </div>
49
- <div className="flight__info">
50
- <div className="flight__info__times">
51
- <strong>08:30 JFK</strong>
52
- <p>Mon 12 Feb 2025</p>
53
- </div>
54
- <div className="flight__info__duration">
55
- <p>7h 45m</p>
56
- <div className="flight__info__duration__stops">
57
- <div className="flight__info__duration__stop" />
58
- </div>
59
- <span>1 stop</span>
60
- </div>
61
- <div className="flight__info__times flight__info__times--arrival">
62
- <strong>22:15 AMS</strong>
63
- <p>Tue 13 Feb 2025</p>
64
- <span className="flight__info__times__days">+1 day</span>
65
- </div>
66
- </div>
67
- </div>
68
-
69
- <div className="flight__detail__btn__wrapper">
70
- <div className="flight__detail__btn">
71
- {/* Static icon, no click logic */}
72
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
73
- </div>
74
- </div>
75
- </div>
76
-
77
- {/* Detail section, always visible in this static version */}
78
- <div className="flight__detail">
79
- {/* Flight Line 1 */}
80
- <div className="flight__info">
81
- <div className="flight__info__times__wrapper">
82
- <div className="flight__info__times">
83
- <p>08:30</p>
84
- <strong>JFK</strong>
85
- <p>Mon 12 Feb 2025</p>
86
- </div>
87
- <div>
88
- <Icon name="ui-plane-depart" width={30} height={20} />
89
- </div>
90
- </div>
91
- <div className="flight__info__duration">
92
- <p>6h 20m</p>
93
- <div className="flight__info__duration__stops" />
94
- <span>Example Airline</span>
95
- <strong>EA123</strong>
96
- </div>
97
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
98
- <div>
99
- <Icon name="ui-plane-arrive" width={30} height={20} />
100
- </div>
101
- <div className="flight__info__times flight__info__times--arrival">
102
- <p>20:50</p>
103
- <strong>LHR</strong>
104
- <p>Mon 12 Feb 2025</p>
105
- </div>
106
- </div>
107
- </div>
108
-
109
- {/* Wait time */}
110
- <div className="flight__info">
111
- <div className="flight__info__times" />
112
- <div className="flight__info__duration flight__info__duration--waittime">
113
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
114
- <Icon name="ui-clock" width={24} height={24} />
115
- </div>
116
- <div className="flight__info__duration__stoptime">
117
- <span>Stop time</span>
118
- <strong>1h 15m</strong>
119
- </div>
120
- </div>
121
- <div className="flight__info__times flight__info__times--arrival" />
122
- </div>
123
-
124
- {/* Flight Line 2 */}
125
- <div className="flight__info">
126
- <div className="flight__info__times__wrapper">
127
- <div className="flight__info__times">
128
- <p>22:05</p>
129
- <strong>LHR</strong>
130
- <p>Mon 12 Feb 2025</p>
131
- </div>
132
- <div>
133
- <Icon name="ui-plane-depart" width={30} height={20} />
134
- </div>
135
- </div>
136
- <div className="flight__info__duration">
137
- <p>1h 10m</p>
138
- <div className="flight__info__duration__stops" />
139
- <span>Example Airline</span>
140
- <strong>EA456</strong>
141
- </div>
142
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
143
- <div>
144
- <Icon name="ui-plane-arrive" width={30} height={20} />
145
- </div>
146
- <div className="flight__info__times flight__info__times--arrival">
147
- <p>23:15</p>
148
- <strong>AMS</strong>
149
- <p>Mon 12 Feb 2025</p>
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
-
155
- {/* Rate section kept empty (original code was commented out) */}
156
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
- </div>
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--decrease">- € 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 className="flight">
300
- <div className="flight__option">
301
- <div className="flight__content">
302
- <div className="flight__flights">
303
- <div className="flight__flight">
304
- <div className="flight__flight__header">
305
- <div className="flight__status__container"></div>
306
- <div className="flight__price">
307
- <span className="price price--decrease">- € 375,98</span>
308
- <button type="button" className="cta cta--select">
309
- Select
310
- </button>
311
- </div>
312
- </div>
313
- </div>
314
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
315
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
316
- <div className="flight__flight">
317
- <div className="flight__flight__container">
318
- <div className="flight__flight__wrapper">
319
- <div className="flight__logo__wrapper">
320
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
321
- <span>Example Airline</span>
322
- </div>
323
- <div className="flight__info">
324
- <div className="flight__info__times">
325
- <strong>08:30 JFK</strong>
326
- <p>Mon 12 Feb 2025</p>
327
- </div>
328
- <div className="flight__info__duration">
329
- <p>7h 45m</p>
330
- <div className="flight__info__duration__stops">
331
- <div className="flight__info__duration__stop" />
332
- </div>
333
- <span>1 stop</span>
334
- </div>
335
- <div className="flight__info__times flight__info__times--arrival">
336
- <strong>22:15 AMS</strong>
337
- <p>Tue 13 Feb 2025</p>
338
- <span className="flight__info__times__days">+1 day</span>
339
- </div>
340
- </div>
341
- </div>
342
-
343
- <div className="flight__detail__btn__wrapper">
344
- <div className="flight__detail__btn">
345
- {/* Static icon, no click logic */}
346
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
347
- </div>
348
- </div>
349
- </div>
350
-
351
- {/* Detail section, always visible in this static version */}
352
- <div className="flight__detail">
353
- {/* Flight Line 1 */}
354
- <div className="flight__info">
355
- <div className="flight__info__times__wrapper">
356
- <div className="flight__info__times">
357
- <p>08:30</p>
358
- <strong>JFK</strong>
359
- <p>Mon 12 Feb 2025</p>
360
- </div>
361
- <div>
362
- <Icon name="ui-plane-depart" width={30} height={20} />
363
- </div>
364
- </div>
365
- <div className="flight__info__duration">
366
- <p>6h 20m</p>
367
- <div className="flight__info__duration__stops" />
368
- <span>Example Airline</span>
369
- <strong>EA123</strong>
370
- </div>
371
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
372
- <div>
373
- <Icon name="ui-plane-arrive" width={30} height={20} />
374
- </div>
375
- <div className="flight__info__times flight__info__times--arrival">
376
- <p>20:50</p>
377
- <strong>LHR</strong>
378
- <p>Mon 12 Feb 2025</p>
379
- </div>
380
- </div>
381
- </div>
382
-
383
- {/* Wait time */}
384
- <div className="flight__info">
385
- <div className="flight__info__times" />
386
- <div className="flight__info__duration flight__info__duration--waittime">
387
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
388
- <Icon name="ui-clock" width={24} height={24} />
389
- </div>
390
- <div className="flight__info__duration__stoptime">
391
- <span>Stop time</span>
392
- <strong>1h 15m</strong>
393
- </div>
394
- </div>
395
- <div className="flight__info__times flight__info__times--arrival" />
396
- </div>
397
-
398
- {/* Flight Line 2 */}
399
- <div className="flight__info">
400
- <div className="flight__info__times__wrapper">
401
- <div className="flight__info__times">
402
- <p>22:05</p>
403
- <strong>LHR</strong>
404
- <p>Mon 12 Feb 2025</p>
405
- </div>
406
- <div>
407
- <Icon name="ui-plane-depart" width={30} height={20} />
408
- </div>
409
- </div>
410
- <div className="flight__info__duration">
411
- <p>1h 10m</p>
412
- <div className="flight__info__duration__stops" />
413
- <span>Example Airline</span>
414
- <strong>EA456</strong>
415
- </div>
416
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
417
- <div>
418
- <Icon name="ui-plane-arrive" width={30} height={20} />
419
- </div>
420
- <div className="flight__info__times flight__info__times--arrival">
421
- <p>23:15</p>
422
- <strong>AMS</strong>
423
- <p>Mon 12 Feb 2025</p>
424
- </div>
425
- </div>
426
- </div>
427
- </div>
428
-
429
- {/* Rate section kept empty (original code was commented out) */}
430
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
431
- </div>
432
- </div>
433
- </div>
434
- </div>
435
- </div>
436
- <div className="flight">
437
- <div className="flight__option">
438
- <div className="flight__content">
439
- <div className="flight__flights">
440
- <div className="flight__flight">
441
- <div className="flight__flight__header">
442
- <div className="flight__status__container"></div>
443
- <div className="flight__price">
444
- <span className="price price--decrease">- € 375,98</span>
445
- <button type="button" className="cta cta--select">
446
- Select
447
- </button>
448
- </div>
449
- </div>
450
- </div>
451
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
452
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
453
- <div className="flight__flight">
454
- <div className="flight__flight__container">
455
- <div className="flight__flight__wrapper">
456
- <div className="flight__logo__wrapper">
457
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
458
- <span>Example Airline</span>
459
- </div>
460
- <div className="flight__info">
461
- <div className="flight__info__times">
462
- <strong>08:30 JFK</strong>
463
- <p>Mon 12 Feb 2025</p>
464
- </div>
465
- <div className="flight__info__duration">
466
- <p>7h 45m</p>
467
- <div className="flight__info__duration__stops">
468
- <div className="flight__info__duration__stop" />
469
- </div>
470
- <span>1 stop</span>
471
- </div>
472
- <div className="flight__info__times flight__info__times--arrival">
473
- <strong>22:15 AMS</strong>
474
- <p>Tue 13 Feb 2025</p>
475
- <span className="flight__info__times__days">+1 day</span>
476
- </div>
477
- </div>
478
- </div>
479
-
480
- <div className="flight__detail__btn__wrapper">
481
- <div className="flight__detail__btn">
482
- {/* Static icon, no click logic */}
483
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
484
- </div>
485
- </div>
486
- </div>
487
-
488
- {/* Detail section, always visible in this static version */}
489
- <div className="flight__detail">
490
- {/* Flight Line 1 */}
491
- <div className="flight__info">
492
- <div className="flight__info__times__wrapper">
493
- <div className="flight__info__times">
494
- <p>08:30</p>
495
- <strong>JFK</strong>
496
- <p>Mon 12 Feb 2025</p>
497
- </div>
498
- <div>
499
- <Icon name="ui-plane-depart" width={30} height={20} />
500
- </div>
501
- </div>
502
- <div className="flight__info__duration">
503
- <p>6h 20m</p>
504
- <div className="flight__info__duration__stops" />
505
- <span>Example Airline</span>
506
- <strong>EA123</strong>
507
- </div>
508
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
509
- <div>
510
- <Icon name="ui-plane-arrive" width={30} height={20} />
511
- </div>
512
- <div className="flight__info__times flight__info__times--arrival">
513
- <p>20:50</p>
514
- <strong>LHR</strong>
515
- <p>Mon 12 Feb 2025</p>
516
- </div>
517
- </div>
518
- </div>
519
-
520
- {/* Wait time */}
521
- <div className="flight__info">
522
- <div className="flight__info__times" />
523
- <div className="flight__info__duration flight__info__duration--waittime">
524
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
525
- <Icon name="ui-clock" width={24} height={24} />
526
- </div>
527
- <div className="flight__info__duration__stoptime">
528
- <span>Stop time</span>
529
- <strong>1h 15m</strong>
530
- </div>
531
- </div>
532
- <div className="flight__info__times flight__info__times--arrival" />
533
- </div>
534
-
535
- {/* Flight Line 2 */}
536
- <div className="flight__info">
537
- <div className="flight__info__times__wrapper">
538
- <div className="flight__info__times">
539
- <p>22:05</p>
540
- <strong>LHR</strong>
541
- <p>Mon 12 Feb 2025</p>
542
- </div>
543
- <div>
544
- <Icon name="ui-plane-depart" width={30} height={20} />
545
- </div>
546
- </div>
547
- <div className="flight__info__duration">
548
- <p>1h 10m</p>
549
- <div className="flight__info__duration__stops" />
550
- <span>Example Airline</span>
551
- <strong>EA456</strong>
552
- </div>
553
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
554
- <div>
555
- <Icon name="ui-plane-arrive" width={30} height={20} />
556
- </div>
557
- <div className="flight__info__times flight__info__times--arrival">
558
- <p>23:15</p>
559
- <strong>AMS</strong>
560
- <p>Mon 12 Feb 2025</p>
561
- </div>
562
- </div>
563
- </div>
564
- </div>
565
-
566
- {/* Rate section kept empty (original code was commented out) */}
567
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
568
- </div>
569
- </div>
570
- </div>
571
- </div>
572
- </div>
573
- </div>
574
- )}
575
-
576
- {!isDeparture && (
577
- <div className="search__results__cards search__results__cards--extended">
578
- <div className="flight">
579
- <div className="flight__option">
580
- <div className="flight__content">
581
- <div className="flight__flights">
582
- <div className="flight__flight">
583
- <div className="flight__flight__header">
584
- <div className="flight__status__container"></div>
585
- <div className="flight__price">
586
- <span className="price price--decrease"></span>
587
- <button type="button" className="cta cta--selected">
588
- Selected
589
- </button>
590
- </div>
591
- </div>
592
- </div>
593
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
594
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
595
- <div className="flight__flight">
596
- <div className="flight__flight__container">
597
- <div className="flight__flight__wrapper">
598
- <div className="flight__logo__wrapper">
599
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
600
- <span>Example Airline</span>
601
- </div>
602
- <div className="flight__info">
603
- <div className="flight__info__times">
604
- <strong>08:30 JFK</strong>
605
- <p>Mon 12 Feb 2025</p>
606
- </div>
607
- <div className="flight__info__duration">
608
- <p>7h 45m</p>
609
- <div className="flight__info__duration__stops">
610
- <div className="flight__info__duration__stop" />
611
- </div>
612
- <span>1 stop</span>
613
- </div>
614
- <div className="flight__info__times flight__info__times--arrival">
615
- <strong>22:15 AMS</strong>
616
- <p>Tue 13 Feb 2025</p>
617
- <span className="flight__info__times__days">+1 day</span>
618
- </div>
619
- </div>
620
- </div>
621
-
622
- <div className="flight__detail__btn__wrapper">
623
- <div className="flight__detail__btn">
624
- {/* Static icon, no click logic */}
625
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
626
- </div>
627
- </div>
628
- </div>
629
-
630
- {/* Detail section, always visible in this static version */}
631
- <div className="flight__detail">
632
- {/* Flight Line 1 */}
633
- <div className="flight__info">
634
- <div className="flight__info__times__wrapper">
635
- <div className="flight__info__times">
636
- <p>08:30</p>
637
- <strong>JFK</strong>
638
- <p>Mon 12 Feb 2025</p>
639
- </div>
640
- <div>
641
- <Icon name="ui-plane-depart" width={30} height={20} />
642
- </div>
643
- </div>
644
- <div className="flight__info__duration">
645
- <p>6h 20m</p>
646
- <div className="flight__info__duration__stops" />
647
- <span>Example Airline</span>
648
- <strong>EA123</strong>
649
- </div>
650
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
651
- <div>
652
- <Icon name="ui-plane-arrive" width={30} height={20} />
653
- </div>
654
- <div className="flight__info__times flight__info__times--arrival">
655
- <p>20:50</p>
656
- <strong>LHR</strong>
657
- <p>Mon 12 Feb 2025</p>
658
- </div>
659
- </div>
660
- </div>
661
-
662
- {/* Wait time */}
663
- <div className="flight__info">
664
- <div className="flight__info__times" />
665
- <div className="flight__info__duration flight__info__duration--waittime">
666
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
667
- <Icon name="ui-clock" width={24} height={24} />
668
- </div>
669
- <div className="flight__info__duration__stoptime">
670
- <span>Stop time</span>
671
- <strong>1h 15m</strong>
672
- </div>
673
- </div>
674
- <div className="flight__info__times flight__info__times--arrival" />
675
- </div>
676
-
677
- {/* Flight Line 2 */}
678
- <div className="flight__info">
679
- <div className="flight__info__times__wrapper">
680
- <div className="flight__info__times">
681
- <p>22:05</p>
682
- <strong>LHR</strong>
683
- <p>Mon 12 Feb 2025</p>
684
- </div>
685
- <div>
686
- <Icon name="ui-plane-depart" width={30} height={20} />
687
- </div>
688
- </div>
689
- <div className="flight__info__duration">
690
- <p>1h 10m</p>
691
- <div className="flight__info__duration__stops" />
692
- <span>Example Airline</span>
693
- <strong>EA456</strong>
694
- </div>
695
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
696
- <div>
697
- <Icon name="ui-plane-arrive" width={30} height={20} />
698
- </div>
699
- <div className="flight__info__times flight__info__times--arrival">
700
- <p>23:15</p>
701
- <strong>AMS</strong>
702
- <p>Mon 12 Feb 2025</p>
703
- </div>
704
- </div>
705
- </div>
706
- </div>
707
-
708
- {/* Rate section kept empty (original code was commented out) */}
709
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
710
- </div>
711
- </div>
712
- </div>
713
- </div>
714
- </div>
715
- <div className="flight">
716
- <div className="flight__option">
717
- <div className="flight__content">
718
- <div className="flight__flights">
719
- <div className="flight__flight">
720
- <div className="flight__flight__header">
721
- <div className="flight__status__container"></div>
722
- <div className="flight__price">
723
- <span className="price price--decrease">- € 375,98</span>
724
- <button type="button" className="cta cta--select">
725
- Select
726
- </button>
727
- </div>
728
- </div>
729
- </div>
730
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
731
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
732
- <div className="flight__flight">
733
- <div className="flight__flight__container">
734
- <div className="flight__flight__wrapper">
735
- <div className="flight__logo__wrapper">
736
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
737
- <span>Example Airline</span>
738
- </div>
739
- <div className="flight__info">
740
- <div className="flight__info__times">
741
- <strong>08:30 JFK</strong>
742
- <p>Mon 12 Feb 2025</p>
743
- </div>
744
- <div className="flight__info__duration">
745
- <p>7h 45m</p>
746
- <div className="flight__info__duration__stops">
747
- <div className="flight__info__duration__stop" />
58
+ <div className="search__results__cards search__results__cards--extended">
59
+ {flights.map((flight, index) => {
60
+ const lines = flight.flightMetaData.flightLines;
61
+ const firstLine = lines[0];
62
+ const lastLine = lines[lines.length - 1];
63
+ const stops = lines.length - 1;
64
+
65
+ return (
66
+ <div className="flight" key={`flight-${flight.flightId}-${index}`}>
67
+ <div className="flight__option">
68
+ <div className="flight__content">
69
+ <div className="flight__flights">
70
+ {/* HEADER */}
71
+ <div className="flight__flight">
72
+ <div className="flight__flight__header">
73
+ <div className="flight__status__container" />
74
+ <div className="flight__price">
75
+ <span className="price">€ {flight.price.toFixed(2)}</span>
76
+
77
+ <button
78
+ type="button"
79
+ className={`cta ${flight.isSelected ? 'cta--selected' : 'cta--select'}`}
80
+ onClick={() => dispatch(selectFlight({ flightOptionId: flight.flightOptionId, isDeparture: !!isDeparture }))}>
81
+ {flight.isSelected ? 'Selected' : 'Select'}
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ {/* SUMMARY */}
88
+ <div className="flight__flight">
89
+ <div className="flight__flight__container">
90
+ <div className="flight__flight__wrapper">
91
+ <div className="flight__logo__wrapper">
92
+ <img
93
+ src={`https://media.tidesoftware.be/media/shared/Airlines/${firstLine.airlineCode}.png?height=256`}
94
+ alt={flight.airlineDescription}
95
+ className="flight__logo"
96
+ />
97
+ <span>{flight.airlineDescription}</span>
98
+ </div>
99
+
100
+ <div className="flight__info">
101
+ <div className="flight__info__times">
102
+ <strong>
103
+ {firstLine.departureTime} {firstLine.departureAirport}
104
+ </strong>
105
+ <p>{format(parseISO(firstLine.departureDate), 'EEE dd MMM yyyy')}</p>
748
106
  </div>
749
- <span>1 stop</span>
750
- </div>
751
- <div className="flight__info__times flight__info__times--arrival">
752
- <strong>22:15 AMS</strong>
753
- <p>Tue 13 Feb 2025</p>
754
- <span className="flight__info__times__days">+1 day</span>
755
- </div>
756
- </div>
757
- </div>
758
107
 
759
- <div className="flight__detail__btn__wrapper">
760
- <div className="flight__detail__btn">
761
- {/* Static icon, no click logic */}
762
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
763
- </div>
764
- </div>
765
- </div>
108
+ <div className="flight__info__duration">
109
+ <p>{formatDuration(flight.flightMetaData.durationInTicks)}</p>
766
110
 
767
- {/* Detail section, always visible in this static version */}
768
- <div className="flight__detail">
769
- {/* Flight Line 1 */}
770
- <div className="flight__info">
771
- <div className="flight__info__times__wrapper">
772
- <div className="flight__info__times">
773
- <p>08:30</p>
774
- <strong>JFK</strong>
775
- <p>Mon 12 Feb 2025</p>
776
- </div>
777
- <div>
778
- <Icon name="ui-plane-depart" width={30} height={20} />
779
- </div>
780
- </div>
781
- <div className="flight__info__duration">
782
- <p>6h 20m</p>
783
- <div className="flight__info__duration__stops" />
784
- <span>Example Airline</span>
785
- <strong>EA123</strong>
786
- </div>
787
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
788
- <div>
789
- <Icon name="ui-plane-arrive" width={30} height={20} />
790
- </div>
791
- <div className="flight__info__times flight__info__times--arrival">
792
- <p>20:50</p>
793
- <strong>LHR</strong>
794
- <p>Mon 12 Feb 2025</p>
795
- </div>
796
- </div>
797
- </div>
798
-
799
- {/* Wait time */}
800
- <div className="flight__info">
801
- <div className="flight__info__times" />
802
- <div className="flight__info__duration flight__info__duration--waittime">
803
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
804
- <Icon name="ui-clock" width={24} height={24} />
805
- </div>
806
- <div className="flight__info__duration__stoptime">
807
- <span>Stop time</span>
808
- <strong>1h 15m</strong>
809
- </div>
810
- </div>
811
- <div className="flight__info__times flight__info__times--arrival" />
812
- </div>
813
-
814
- {/* Flight Line 2 */}
815
- <div className="flight__info">
816
- <div className="flight__info__times__wrapper">
817
- <div className="flight__info__times">
818
- <p>22:05</p>
819
- <strong>LHR</strong>
820
- <p>Mon 12 Feb 2025</p>
821
- </div>
822
- <div>
823
- <Icon name="ui-plane-depart" width={30} height={20} />
824
- </div>
825
- </div>
826
- <div className="flight__info__duration">
827
- <p>1h 10m</p>
828
- <div className="flight__info__duration__stops" />
829
- <span>Example Airline</span>
830
- <strong>EA456</strong>
831
- </div>
832
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
833
- <div>
834
- <Icon name="ui-plane-arrive" width={30} height={20} />
835
- </div>
836
- <div className="flight__info__times flight__info__times--arrival">
837
- <p>23:15</p>
838
- <strong>AMS</strong>
839
- <p>Mon 12 Feb 2025</p>
840
- </div>
841
- </div>
842
- </div>
843
- </div>
111
+ <div className="flight__info__duration__stops">{stops > 0 && <div className="flight__info__duration__stop" />}</div>
844
112
 
845
- {/* Rate section kept empty (original code was commented out) */}
846
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
847
- </div>
848
- </div>
849
- </div>
850
- </div>
851
- </div>
852
- <div className="flight">
853
- <div className="flight__option">
854
- <div className="flight__content">
855
- <div className="flight__flights">
856
- <div className="flight__flight">
857
- <div className="flight__flight__header">
858
- <div className="flight__status__container"></div>
859
- <div className="flight__price">
860
- <span className="price price--decrease">- € 375,98</span>
861
- <button type="button" className="cta cta--select">
862
- Select
863
- </button>
864
- </div>
865
- </div>
866
- </div>
867
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
868
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
869
- <div className="flight__flight">
870
- <div className="flight__flight__container">
871
- <div className="flight__flight__wrapper">
872
- <div className="flight__logo__wrapper">
873
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
874
- <span>Example Airline</span>
875
- </div>
876
- <div className="flight__info">
877
- <div className="flight__info__times">
878
- <strong>08:30 JFK</strong>
879
- <p>Mon 12 Feb 2025</p>
880
- </div>
881
- <div className="flight__info__duration">
882
- <p>7h 45m</p>
883
- <div className="flight__info__duration__stops">
884
- <div className="flight__info__duration__stop" />
113
+ <span>{stops === 0 ? translations.SRP.DIRECT : `${stops} ${translations.SRP.STOP}${stops > 1 ? 's' : ''}`}</span>
885
114
  </div>
886
- <span>1 stop</span>
887
- </div>
888
- <div className="flight__info__times flight__info__times--arrival">
889
- <strong>22:15 AMS</strong>
890
- <p>Tue 13 Feb 2025</p>
891
- <span className="flight__info__times__days">+1 day</span>
892
- </div>
893
- </div>
894
- </div>
895
-
896
- <div className="flight__detail__btn__wrapper">
897
- <div className="flight__detail__btn">
898
- {/* Static icon, no click logic */}
899
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
900
- </div>
901
- </div>
902
- </div>
903
-
904
- {/* Detail section, always visible in this static version */}
905
- <div className="flight__detail">
906
- {/* Flight Line 1 */}
907
- <div className="flight__info">
908
- <div className="flight__info__times__wrapper">
909
- <div className="flight__info__times">
910
- <p>08:30</p>
911
- <strong>JFK</strong>
912
- <p>Mon 12 Feb 2025</p>
913
- </div>
914
- <div>
915
- <Icon name="ui-plane-depart" width={30} height={20} />
916
- </div>
917
- </div>
918
- <div className="flight__info__duration">
919
- <p>6h 20m</p>
920
- <div className="flight__info__duration__stops" />
921
- <span>Example Airline</span>
922
- <strong>EA123</strong>
923
- </div>
924
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
925
- <div>
926
- <Icon name="ui-plane-arrive" width={30} height={20} />
927
- </div>
928
- <div className="flight__info__times flight__info__times--arrival">
929
- <p>20:50</p>
930
- <strong>LHR</strong>
931
- <p>Mon 12 Feb 2025</p>
932
- </div>
933
- </div>
934
- </div>
935
-
936
- {/* Wait time */}
937
- <div className="flight__info">
938
- <div className="flight__info__times" />
939
- <div className="flight__info__duration flight__info__duration--waittime">
940
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
941
- <Icon name="ui-clock" width={24} height={24} />
942
- </div>
943
- <div className="flight__info__duration__stoptime">
944
- <span>Stop time</span>
945
- <strong>1h 15m</strong>
946
- </div>
947
- </div>
948
- <div className="flight__info__times flight__info__times--arrival" />
949
- </div>
950
-
951
- {/* Flight Line 2 */}
952
- <div className="flight__info">
953
- <div className="flight__info__times__wrapper">
954
- <div className="flight__info__times">
955
- <p>22:05</p>
956
- <strong>LHR</strong>
957
- <p>Mon 12 Feb 2025</p>
958
- </div>
959
- <div>
960
- <Icon name="ui-plane-depart" width={30} height={20} />
961
- </div>
962
- </div>
963
- <div className="flight__info__duration">
964
- <p>1h 10m</p>
965
- <div className="flight__info__duration__stops" />
966
- <span>Example Airline</span>
967
- <strong>EA456</strong>
968
- </div>
969
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
970
- <div>
971
- <Icon name="ui-plane-arrive" width={30} height={20} />
972
- </div>
973
- <div className="flight__info__times flight__info__times--arrival">
974
- <p>23:15</p>
975
- <strong>AMS</strong>
976
- <p>Mon 12 Feb 2025</p>
977
- </div>
978
- </div>
979
- </div>
980
- </div>
981
115
 
982
- {/* Rate section kept empty (original code was commented out) */}
983
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
984
- </div>
985
- </div>
986
- </div>
987
- </div>
988
- </div>
989
- <div className="flight">
990
- <div className="flight__option">
991
- <div className="flight__content">
992
- <div className="flight__flights">
993
- <div className="flight__flight">
994
- <div className="flight__flight__header">
995
- <div className="flight__status__container"></div>
996
- <div className="flight__price">
997
- <span className="price price--decrease">- € 375,98</span>
998
- <button type="button" className="cta cta--select">
999
- Select
1000
- </button>
1001
- </div>
1002
- </div>
1003
- </div>
1004
- {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
1005
- <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
1006
- <div className="flight__flight">
1007
- <div className="flight__flight__container">
1008
- <div className="flight__flight__wrapper">
1009
- <div className="flight__logo__wrapper">
1010
- <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
1011
- <span>Example Airline</span>
1012
- </div>
1013
- <div className="flight__info">
1014
- <div className="flight__info__times">
1015
- <strong>08:30 JFK</strong>
1016
- <p>Mon 12 Feb 2025</p>
1017
- </div>
1018
- <div className="flight__info__duration">
1019
- <p>7h 45m</p>
1020
- <div className="flight__info__duration__stops">
1021
- <div className="flight__info__duration__stop" />
116
+ <div className="flight__info__times flight__info__times--arrival">
117
+ <strong>
118
+ {lastLine.arrivalTime} {lastLine.arrivalAirport}
119
+ </strong>
120
+ <p>{format(parseISO(lastLine.arrivalDate), 'EEE dd MMM yyyy')}</p>
1022
121
  </div>
1023
- <span>1 stop</span>
1024
122
  </div>
1025
- <div className="flight__info__times flight__info__times--arrival">
1026
- <strong>22:15 AMS</strong>
1027
- <p>Tue 13 Feb 2025</p>
1028
- <span className="flight__info__times__days">+1 day</span>
1029
- </div>
1030
- </div>
1031
- </div>
1032
-
1033
- <div className="flight__detail__btn__wrapper">
1034
- <div className="flight__detail__btn">
1035
- {/* Static icon, no click logic */}
1036
- <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
1037
123
  </div>
1038
- </div>
1039
- </div>
1040
124
 
1041
- {/* Detail section, always visible in this static version */}
1042
- <div className="flight__detail">
1043
- {/* Flight Line 1 */}
1044
- <div className="flight__info">
1045
- <div className="flight__info__times__wrapper">
1046
- <div className="flight__info__times">
1047
- <p>08:30</p>
1048
- <strong>JFK</strong>
1049
- <p>Mon 12 Feb 2025</p>
1050
- </div>
1051
- <div>
1052
- <Icon name="ui-plane-depart" width={30} height={20} />
1053
- </div>
1054
- </div>
1055
- <div className="flight__info__duration">
1056
- <p>6h 20m</p>
1057
- <div className="flight__info__duration__stops" />
1058
- <span>Example Airline</span>
1059
- <strong>EA123</strong>
1060
- </div>
1061
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
1062
- <div>
1063
- <Icon name="ui-plane-arrive" width={30} height={20} />
1064
- </div>
1065
- <div className="flight__info__times flight__info__times--arrival">
1066
- <p>20:50</p>
1067
- <strong>LHR</strong>
1068
- <p>Mon 12 Feb 2025</p>
1069
- </div>
1070
- </div>
1071
- </div>
1072
-
1073
- {/* Wait time */}
1074
- <div className="flight__info">
1075
- <div className="flight__info__times" />
1076
- <div className="flight__info__duration flight__info__duration--waittime">
1077
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
1078
- <Icon name="ui-clock" width={24} height={24} />
1079
- </div>
1080
- <div className="flight__info__duration__stoptime">
1081
- <span>Stop time</span>
1082
- <strong>1h 15m</strong>
1083
- </div>
1084
- </div>
1085
- <div className="flight__info__times flight__info__times--arrival" />
1086
- </div>
1087
-
1088
- {/* Flight Line 2 */}
1089
- <div className="flight__info">
1090
- <div className="flight__info__times__wrapper">
1091
- <div className="flight__info__times">
1092
- <p>22:05</p>
1093
- <strong>LHR</strong>
1094
- <p>Mon 12 Feb 2025</p>
1095
- </div>
1096
- <div>
1097
- <Icon name="ui-plane-depart" width={30} height={20} />
1098
- </div>
1099
- </div>
1100
- <div className="flight__info__duration">
1101
- <p>1h 10m</p>
1102
- <div className="flight__info__duration__stops" />
1103
- <span>Example Airline</span>
1104
- <strong>EA456</strong>
1105
- </div>
1106
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
1107
- <div>
1108
- <Icon name="ui-plane-arrive" width={30} height={20} />
1109
- </div>
1110
- <div className="flight__info__times flight__info__times--arrival">
1111
- <p>23:15</p>
1112
- <strong>AMS</strong>
1113
- <p>Mon 12 Feb 2025</p>
1114
- </div>
1115
- </div>
1116
- </div>
1117
- </div>
1118
-
1119
- {/* Rate section kept empty (original code was commented out) */}
1120
- <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
1121
- </div>
125
+ <div className="flight__detail__btn__wrapper">
126
+ <div
127
+ className={`flight__detail__btn ${activeDetailId === flight.flightOptionId ? 'flight__detail__btn--active' : ''}`}
128
+ onClick={() => handleDetailClick(flight.flightOptionId)}>
129
+ <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ {/* DETAILS */}
135
+ <div className={`flight__detail ${activeDetailId === flight.flightOptionId ? 'flight__detail--active' : ''}`}>
136
+ {lines.map((line, index) => {
137
+ const nextLine = lines[index + 1];
138
+
139
+ return (
140
+ <React.Fragment key={index}>
141
+ {/* Flight line */}
142
+ <div className="flight__info">
143
+ <div className="flight__info__times__wrapper">
144
+ <div className="flight__info__times">
145
+ <p>{line.departureTime}</p>
146
+ <strong>{line.departureAirport}</strong>
147
+ <p>{format(parseISO(line.departureDate), 'EEE dd MMM yyyy')}</p>
148
+ </div>
149
+
150
+ <Icon name="ui-plane-depart" width={30} height={20} />
151
+ </div>
152
+
153
+ <div className="flight__info__duration">
154
+ <p>{formatDuration(line.durationInTicks)}</p>
155
+ <span>
156
+ {line.airline} {line.number}
157
+ </span>
158
+ </div>
159
+
160
+ <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
161
+ <Icon name="ui-plane-arrive" width={30} height={20} />
162
+ <div className="flight__info__times flight__info__times--arrival">
163
+ <p>{line.arrivalTime}</p>
164
+ <strong>{line.arrivalAirport}</strong>
165
+ <p>{format(parseISO(line.arrivalDate), 'EEE dd MMM yyyy')}</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ {nextLine && (
171
+ <div className="flight__info">
172
+ <div className="flight__info__duration flight__info__duration--waittime">
173
+ <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
174
+ <Icon name="ui-clock" width={24} height={24} />
175
+ </div>
176
+ <div className="flight__info__duration__stoptime">
177
+ <span>{translations.SRP.STOP_TIME}</span>
178
+ <strong>{formatDuration(parseISO(nextLine.departureDate).getTime() - parseISO(line.arrivalDate).getTime())}</strong>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ )}
183
+ </React.Fragment>
184
+ );
185
+ })}
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div className="flight__rate" />
1122
191
  </div>
1123
192
  </div>
1124
193
  </div>
1125
- </div>
1126
- </div>
1127
- )}
194
+ );
195
+ })}
196
+ </div>
1128
197
 
1129
- <div className="search__results__options">
198
+ {/* <div className="search__results__options">
1130
199
  <p>There are more transports at your disposal</p>
1131
200
  <a href="#">More options</a>
1132
- </div>
201
+ </div> */}
1133
202
  </>
1134
203
  );
1135
204
  };