@qite/tide-booking-component 1.1.3 → 1.2.0

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 (63) hide show
  1. package/build/build-cjs/booking-product/components/multi-range-filter.d.ts +12 -0
  2. package/build/build-cjs/booking-wizard/features/booking/api.d.ts +4 -1
  3. package/build/build-cjs/booking-wizard/features/booking/booking-slice.d.ts +7 -3
  4. package/build/build-cjs/booking-wizard/features/booking/selectors.d.ts +23 -17
  5. package/build/build-cjs/booking-wizard/features/flight-options/flight-filter.d.ts +9 -0
  6. package/build/build-cjs/booking-wizard/features/flight-options/flight-option-flight.d.ts +8 -0
  7. package/build/build-cjs/booking-wizard/features/flight-options/flight-option-modal.d.ts +3 -0
  8. package/build/build-cjs/booking-wizard/features/flight-options/flight-option.d.ts +4 -9
  9. package/build/build-cjs/booking-wizard/features/flight-options/flight-utils.d.ts +6 -0
  10. package/build/build-cjs/booking-wizard/features/room-options/room-utils.d.ts +9 -0
  11. package/build/build-cjs/booking-wizard/features/room-options/room.d.ts +12 -0
  12. package/build/build-cjs/booking-wizard/features/room-options/traveler-rooms.d.ts +9 -0
  13. package/build/build-cjs/booking-wizard/types.d.ts +101 -0
  14. package/build/build-cjs/index.js +1563 -606
  15. package/build/build-cjs/shared/utils/localization-util.d.ts +30 -2
  16. package/build/build-esm/booking-product/components/multi-range-filter.d.ts +12 -0
  17. package/build/build-esm/booking-wizard/features/booking/api.d.ts +4 -1
  18. package/build/build-esm/booking-wizard/features/booking/booking-slice.d.ts +7 -3
  19. package/build/build-esm/booking-wizard/features/booking/selectors.d.ts +23 -17
  20. package/build/build-esm/booking-wizard/features/flight-options/flight-filter.d.ts +9 -0
  21. package/build/build-esm/booking-wizard/features/flight-options/flight-option-flight.d.ts +8 -0
  22. package/build/build-esm/booking-wizard/features/flight-options/flight-option-modal.d.ts +3 -0
  23. package/build/build-esm/booking-wizard/features/flight-options/flight-option.d.ts +4 -9
  24. package/build/build-esm/booking-wizard/features/flight-options/flight-utils.d.ts +6 -0
  25. package/build/build-esm/booking-wizard/features/room-options/room-utils.d.ts +9 -0
  26. package/build/build-esm/booking-wizard/features/room-options/room.d.ts +12 -0
  27. package/build/build-esm/booking-wizard/features/room-options/traveler-rooms.d.ts +9 -0
  28. package/build/build-esm/booking-wizard/types.d.ts +101 -0
  29. package/build/build-esm/index.js +1564 -607
  30. package/build/build-esm/shared/utils/localization-util.d.ts +30 -2
  31. package/package.json +3 -3
  32. package/rollup.config.js +23 -23
  33. package/src/booking-product/components/multi-range-filter.css +115 -0
  34. package/src/booking-product/components/multi-range-filter.tsx +114 -0
  35. package/src/booking-wizard/components/labeled-input.tsx +64 -64
  36. package/src/booking-wizard/components/labeled-select.tsx +69 -69
  37. package/src/booking-wizard/components/step-indicator.tsx +3 -3
  38. package/src/booking-wizard/features/booking/api.ts +12 -1
  39. package/src/booking-wizard/features/booking/booking-self-contained.tsx +50 -20
  40. package/src/booking-wizard/features/booking/booking-slice.ts +45 -9
  41. package/src/booking-wizard/features/booking/booking.tsx +67 -56
  42. package/src/booking-wizard/features/booking/selectors.ts +38 -11
  43. package/src/booking-wizard/features/flight-options/flight-filter.tsx +343 -0
  44. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +350 -0
  45. package/src/booking-wizard/features/flight-options/flight-option.tsx +30 -759
  46. package/src/booking-wizard/features/flight-options/flight-utils.ts +401 -0
  47. package/src/booking-wizard/features/flight-options/index.tsx +55 -368
  48. package/src/booking-wizard/features/price-details/util.ts +6 -6
  49. package/src/booking-wizard/features/product-options/option-room.tsx +3 -5
  50. package/src/booking-wizard/features/product-options/options-form.tsx +46 -54
  51. package/src/booking-wizard/features/room-options/index.tsx +48 -144
  52. package/src/booking-wizard/features/room-options/room-utils.ts +143 -0
  53. package/src/booking-wizard/features/room-options/room.tsx +124 -0
  54. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +63 -0
  55. package/src/booking-wizard/features/sidebar/sidebar-util.ts +2 -2
  56. package/src/booking-wizard/features/summary/summary.tsx +2 -2
  57. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +1 -1
  58. package/src/booking-wizard/types.ts +116 -0
  59. package/src/shared/components/rating.tsx +21 -21
  60. package/src/shared/translations/fr-BE.json +222 -192
  61. package/src/shared/translations/nl-BE.json +222 -192
  62. package/src/shared/utils/class-util.ts +9 -9
  63. package/tsconfig.json +24 -24
package/src/booking-wizard/features/flight-options/flight-option.tsx CHANGED
@@ -1,792 +1,63 @@
1
- import {
2
- BookingPackageFlight
3
- } from "@qite/tide-client/build/types";
4
- import { format } from "date-fns";
5
1
  import React, { useState } from 'react';
6
2
  import { useSelector } from "react-redux";
7
- import { buildClassName } from "../../../shared/utils/class-util";
3
+ import { buildClassName } from '../../../shared/utils/class-util';
8
4
  import { getPriceDifferenceText } from "../../../shared/utils/localization-util";
9
- import Icon from "../../components/icon";
5
+ import { GroupedFlights } from "../../types";
10
6
  import { selectTranslations } from "../booking/selectors";
7
+ import FlightOptionFlight from './flight-option-flight';
11
8
 
12
9
  interface FlightOptionProps {
13
- item: BookingPackageFlight;
10
+ item: GroupedFlights;
14
11
  isSelected: boolean;
15
- group: string;
16
- selectedReturn?: BookingPackageFlight | null;
17
- selectedOutward?: BookingPackageFlight | null;
18
12
  currentPrice: number;
19
- relatedFlight?: BookingPackageFlight | null;
20
- isSameOption: boolean,
21
- onChange: (item: BookingPackageFlight) => void;
13
+ onChange: (item: GroupedFlights) => void;
22
14
  }
23
15
 
24
16
  const FlightOption: React.FC<FlightOptionProps> = ({
25
17
  item,
26
18
  isSelected,
27
- group,
28
- selectedOutward,
29
- selectedReturn,
30
19
  currentPrice,
31
- relatedFlight,
32
- isSameOption,
33
20
  onChange
34
21
  }) => {
35
22
  const translations = useSelector(selectTranslations);
36
23
 
37
- const airline = item.flightMetaData.flightLines[0].airline;
38
- const isDisabled = selectedOutward
39
- ? selectedOutward.externalGuid !== item.externalGuid
40
- : false;
41
-
42
- const selectedPair = selectedOutward ?? selectedReturn;
43
- const ownTotalPrice = relatedFlight
44
- ? relatedFlight.price + item.price
45
- : selectedPair!.price + item.price;
24
+ const ownTotalPrice = item.selectedOutward.price + item.selectedReturn.price
46
25
  const priceDifference = item.isSelected
47
26
  ? 0
48
27
  : ownTotalPrice - currentPrice;
49
28
 
50
- const flightLabel = item.flightMetaData.flightLines.length === 1
51
- ? translations.FLIGHTS_FORM.DIRECT_FLIGHT
52
- : `${item.flightMetaData.flightLines.length - 1} ${translations.FLIGHTS_FORM.FLIGHT_STOPS}`;
53
-
54
- const [isDetailActive, setIsDetailActive] = useState(false);
55
- const [isDetail2Active, setIsDetail2Active] = useState(false);
56
- const handleDetailButtonClick = () => {
57
- setIsDetailActive(!isDetailActive);
58
- setIsDetail2Active(!isDetail2Active);
59
- };
60
-
61
- const [isCardActive, setIsCardActive] = useState(false);
62
- const handleCardButtonClick = () => {
63
- setIsCardActive(!isCardActive);
64
- };
65
-
66
- const [isCard2Active, setIsCard2Active] = useState(false);
67
- const handleCard2ButtonClick = () => {
68
- setIsCard2Active(!isCard2Active);
69
- };
29
+ const [outwardVisible] = useState<boolean>(false);
30
+ const [returnVisible] = useState<boolean>(false);
70
31
 
71
- const [isCard3Active, setIsCard3Active] = useState(false);
72
- const handleCard3ButtonClick = () => {
73
- setIsCard3Active(!isCard3Active);
74
- };
75
-
76
- const [selected, setIsSelected] = useState(false);
77
- const handleButtonClick = () => {
78
- setIsSelected(!selected);
79
- };
32
+ const handleButtonClick = () => {
33
+ if (!item.isSelected) onChange(item)
34
+ };
80
35
 
81
36
  return (
82
-
83
37
  <div className="flight__option">
84
- {/* <div className="radiobutton">
85
- <div className="radiobutton__label">
86
- <input
87
- type="radio"
88
- value={item.entryLineGuid}
89
- id={`${group}_${item.entryLineGuid}`}
90
- name={group}
91
- className={"radiobutton__input"}
92
- disabled={isDisabled}
93
- onChange={() => onChange(item)}
94
- checked={isSelected}
95
- ></input>
96
- <span>{airline} {flightLabel} - {item.class}</span>
97
- {priceDifference !== 0 && (
98
- <span className={buildClassName([
99
- "price",
100
- priceDifference > 0 && "price--increase",
101
- priceDifference < 0 && "price--decrease",
102
- ])}>
103
- {getPriceDifferenceText(priceDifference)}
104
- </span>
105
- )}
106
- {!isSameOption && (
107
- <Icon name="ui-warning" title={translations.FLIGHTS_FORM.DIFFERENT_OPTION_WARNING}/>
108
- )}
109
- </div>
110
- </div>
111
- {item.flightMetaData && (
112
- <div>
113
- {item.flightMetaData.flightLines.map((fl, i) => (
114
- <div key={i}>
115
- <span>
116
- {fl.departureAirportDescription} {format(new Date(fl.departureDate), "dd/MM/yyyy")} {fl.departureTime}
117
- </span>
118
- <span>
119
- &gt;&gt; {fl.airlineCode}{fl.number} &gt;&gt;
120
- </span>
121
- <span>
122
- {fl.arrivalAirportDescription} {format(new Date(fl.arrivalDate), "dd/MM/yyyy")} {fl.arrivalTime}
123
- </span>
124
- </div>
125
- ))}
126
- </div>
127
- )} */}
128
- {/* <div className="flight__option__header">
129
- <div className="radiobutton">
130
- <div className="radiobutton__label">
131
- <input
132
- type="radio"
133
- value={item.entryLineGuid}
134
- id={`${group}_${item.entryLineGuid}`}
135
- name={group}
136
- className={"radiobutton__input"}
137
- disabled={isDisabled}
138
- onChange={() => onChange(item)}
139
- checked={isSelected}
140
- ></input>
141
- </div>
142
- </div>
143
- <div className="flight__option__header__wrapper">
144
- <div className="flight__logo__wrapper">
145
- <div className="flight__logo">
146
- <img src="https://picsum.photos/200/300" alt="" className="flight__logo__img"/>
147
- </div>
148
- <span>British airways</span>
149
- </div>
150
- <span>{airline} {flightLabel} - {item.class}</span>
151
- </div>
152
- </div> */}
153
- <div className="flight__content">
154
- <div className="flight__flights">
155
- <div className="flight__flight">
156
- <div className="flight__flight__header">
157
- <div className="flight__status__container">
158
- <div className="flight__status">
159
- <span>Nego</span>
160
- </div>
161
- </div>
162
- <div className="flight__price">
163
- <span className="price">Vanaf <strong>€ 2.300,00</strong></span>
164
- <button className={`cta ${selected ? 'cta--secondary' : 'cta--selected'}`} onClick={handleButtonClick}>selecteer</button>
165
- </div>
166
- </div>
167
- <div className="flight__flight__container">
168
- <div className="flight__flight__wrapper">
169
- <div className="flight__logo__wrapper">
170
- <img src="https://logos-world.net/wp-content/uploads/2020/03/Emirates-Logo.png" alt="" className="flight__logo"/>
171
- <span>British airways</span>
172
- </div>
173
- <div className="flight__info">
174
- <div className="flight__info__times">
175
- <strong>07:10 BRU</strong>
176
- <p>13/11/2024</p>
177
- </div>
178
- <div className="flight__info__duration">
179
- <p>2h 30m</p>
180
- <div className="flight__info__duration__stops">
181
- <div className="flight__info__duration__stop"></div>
182
- </div>
183
- <span>1 stop</span>
184
- </div>
185
- <div className="flight__info__times flight__info__times--arrival">
186
- <strong>06:55 BKK</strong>
187
- <p>13/11/2024</p>
188
- <span className="flight__info__times__days">+ 1 dag</span>
189
- </div>
190
- </div>
191
- </div>
192
- <div className="flight__detail__btn__wrapper">
193
- <div className={`flight__detail__btn ${isDetailActive ? 'flight__detail__btn--active' : ''}`} onClick={handleDetailButtonClick}>
194
- <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
195
- {/* Details */}
196
- </div>
197
- </div>
198
- </div>
199
- <div className={`flight__detail ${isDetailActive ? 'flight__detail--active' : ''}`}>
200
- <div className="flight__info">
201
- <div className="flight__info__times__wrapper">
202
- <div className="flight__info__times">
203
- <strong>07:10 BRU</strong>
204
- <p>Zaventem</p>
205
- <p>13/11/2024</p>
206
- </div>
207
- <svg width={30} height={20}><use href="/icons/svg-sprite.svg#plane-depart"></use></svg>
208
- </div>
209
- <div className="flight__info__duration">
210
- <p>15h 30m</p>
211
- <div className="flight__info__duration__stops">
212
- </div>
213
- <span>Emirates</span>
214
- <strong>EY 128</strong>
215
- </div>
216
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
217
- <svg width={35} height={25}><use href="/icons/svg-sprite.svg#plane-arive"></use></svg>
218
- <div className="flight__info__times flight__info__times--arrival">
219
- <strong>06:55 BKK</strong>
220
- <p>ABU Dhabi INTL Airport</p>
221
- <p>13/11/2024</p>
222
- </div>
223
- </div>
224
- </div>
225
- <div className="flight__info">
226
- <div className="flight__info__times">
227
- </div>
228
- <div className="flight__info__duration flight__info__duration--waittime">
229
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
230
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#clock"></use></svg>
231
- </div>
232
- <div className="flight__info__duration__stoptime">
233
- <span>stoptijd</span>
234
- <strong>13h 30min</strong>
235
- </div>
236
- </div>
237
- <div className="flight__info__times flight__info__times--arrival">
238
- </div>
239
- </div>
240
- <div className="flight__info">
241
- <div className="flight__info__times__wrapper">
242
- <div className="flight__info__times">
243
- <strong>07:10 BRU</strong>
244
- <p>Zaventem</p>
245
- <p>13/11/2024</p>
246
- </div>
247
- <svg width={30} height={20}><use href="/icons/svg-sprite.svg#plane-depart"></use></svg>
248
- </div>
249
- <div className="flight__info__duration">
250
- <p>15h 30m</p>
251
- <div className="flight__info__duration__stops">
252
- </div>
253
- <span>Emirates</span>
254
- <strong>EY 128</strong>
255
- </div>
256
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
257
- <svg width={35} height={25}><use href="/icons/svg-sprite.svg#plane-arive"></use></svg>
258
- <div className="flight__info__times flight__info__times--arrival">
259
- <strong>06:55 BKK</strong>
260
- <p>ABU Dhabi INTL Airport</p>
261
- <p>13/11/2024</p>
262
- </div>
263
- </div>
264
- </div>
265
- </div>
266
- <div className="flight__rate flight__rate--active">
267
- <div className="flight__rate__container">
268
- <div className="flight__rate__title">
269
- <h2><strong>Heenreis</strong></h2>
270
- <h2>Kies uw klasse:</h2>
271
- </div>
272
- <div className="flight__rate__wrapper">
273
- <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
274
- <div className="flight__rate__card__header">
275
- <h3 className="flight__rate__card__header__title">Economy</h3>
276
- </div>
277
- <div className="flight__rate__card__content">
278
- <div className="flight__rate__card__chairs">
279
- <span>nog 2 stoelen vrij</span>
280
- </div>
281
- <div className="flight__rate__card__lowest">
282
- <span>Laagste prijs</span>
283
- </div>
284
- <div className="flight__rate__card__item">
285
- <span>€ 275 p.p</span>
286
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
287
- </div>
288
- </div>
289
- </div>
290
- <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
291
- <div className="flight__rate__card__header">
292
- <h3 className="flight__rate__card__header__title">Economy premium</h3>
293
- </div>
294
- <div className="flight__rate__card__content">
295
- {/* <div className="flight__rate__card__chairs">
296
- <span>nog 2 stoelen vrij</span>
297
- </div> */}
298
- {/* <div className="flight__rate__card__lowest">
299
- <span>Laagste prijs</span>
300
- </div> */}
301
- <div className="flight__rate__card__item">
302
- <span>€ 960 p.p</span>
303
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
304
- </div>
305
- </div>
306
- </div>
307
- <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
308
- <div className="flight__rate__card__header">
309
- <h3 className="flight__rate__card__header__title">Business</h3>
310
- </div>
311
- <div className="flight__rate__card__content">
312
- {/* <div className="flight__rate__card__chairs">
313
- <span>nog 2 stoelen vrij</span>
314
- </div> */}
315
- {/* <div className="flight__rate__card__lowest">
316
- <span>Laagste prijs</span>
317
- </div> */}
318
- <div className="flight__rate__card__item">
319
- <span>€ 3.060 p.p</span>
320
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
321
- </div>
322
- </div>
323
- </div>
324
- </div>
325
- </div>
326
- <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
327
- <div className="flight__rate__modal__card">
328
- <div className="flight__rate__modal__card__wrapper">
329
- <div className="flight__rate__modal__card__header">
330
- <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
331
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
332
- </div>
333
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
334
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
335
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
336
- <div className="flight__rate__modal__card__item__wrapper">
337
- <strong>Wijzigingen in het ticket</strong>
338
- <p>Wijzigingen toestaan</p>
339
- </div>
340
- </div>
341
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
342
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
343
- <div className="flight__rate__modal__card__item__wrapper">
344
- <strong>Terugbetaling van ticket</strong>
345
- <p>Ticket retourneerbaar</p>
346
- </div>
347
- </div>
348
- </div>
349
- <div className="flight__rate__modal__card__items">
350
- <div className="flight__rate__modal__card__item">
351
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
352
- <div className="flight__rate__modal__card__item__wrapper">
353
- <strong>persoonlijke items</strong>
354
- <p>Gratis</p>
355
- </div>
356
- </div>
357
- <div className="flight__rate__modal__card__item">
358
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
359
- <div className="flight__rate__modal__card__item__wrapper">
360
- <strong>Handbagage</strong>
361
- <p>Gratis: 2 x 8kg</p>
362
- </div>
363
- </div>
364
- <div className="flight__rate__modal__card__item">
365
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
366
- <div className="flight__rate__modal__card__item__wrapper">
367
- <strong>Ingecheckte bagage</strong>
368
- <p>Gratis: 2 x 32kg</p>
369
- </div>
370
- </div>
371
- </div>
372
- </div>
373
- <div className="flight__rate__modal__card__footer">
374
- <button className="cta cta--secondary">Selecteer</button>
375
- <span className="price price--increase">€2.460</span>
376
- </div>
377
- </div>
378
- <div className="flight__rate__modal__card flight__rate__modal__card--premium">
379
- <div className="flight__rate__modal__card__wrapper">
380
- <div className="flight__rate__modal__card__header">
381
- <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
382
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
383
- </div>
384
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
385
- <div className="flight__rate__modal__card__item">
386
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
387
- <div className="flight__rate__modal__card__item__wrapper">
388
- <strong>Wijzigingen in het ticket</strong>
389
- <p>Wijzigingen toestaan</p>
390
- </div>
391
- </div>
392
- <div className="flight__rate__modal__card__item">
393
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
394
- <div className="flight__rate__modal__card__item__wrapper">
395
- <strong>Terugbetaling van ticket</strong>
396
- <p>Ticket retourneerbaar</p>
397
- </div>
398
- </div>
399
- </div>
400
- <div className="flight__rate__modal__card__items">
401
- <div className="flight__rate__modal__card__item">
402
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
403
- <div className="flight__rate__modal__card__item__wrapper">
404
- <strong>persoonlijke items</strong>
405
- <p>Gratis</p>
406
- </div>
407
- </div>
408
- <div className="flight__rate__modal__card__item">
409
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
410
- <div className="flight__rate__modal__card__item__wrapper">
411
- <strong>Handbagage</strong>
412
- <p>Gratis: 2 x 8kg</p>
413
- </div>
414
- </div>
415
- <div className="flight__rate__modal__card__item">
416
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
417
- <div className="flight__rate__modal__card__item__wrapper">
418
- <strong>Ingecheckte bagage</strong>
419
- <p>Gratis: 2 x 32kg</p>
420
- </div>
421
- </div>
422
- </div>
423
- </div>
424
- <div className="flight__rate__modal__card__footer">
425
- <button className="cta cta--secondary">Selecteer</button>
426
- <span className="price price--increase">€.2460</span>
427
- </div>
428
- </div>
429
- <div className="flight__rate__modal__card flight__rate__modal__card--business">
430
- <div className="flight__rate__modal__card__wrapper">
431
- <div className="flight__rate__modal__card__header">
432
- <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
433
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
434
- </div>
435
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
436
- <div className="flight__rate__modal__card__item">
437
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
438
- <div className="flight__rate__modal__card__item__wrapper">
439
- <strong>Wijzigingen in het ticket</strong>
440
- <p>Wijzigingen toestaan</p>
441
- </div>
442
- </div>
443
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
444
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
445
- <div className="flight__rate__modal__card__item__wrapper">
446
- <strong>Terugbetaling van ticket</strong>
447
- <p>Ticket retourneerbaar</p>
448
- </div>
449
- </div>
450
- </div>
451
- <div className="flight__rate__modal__card__items">
452
- <div className="flight__rate__modal__card__item">
453
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
454
- <div className="flight__rate__modal__card__item__wrapper">
455
- <strong>persoonlijke items</strong>
456
- <p>Gratis</p>
457
- </div>
458
- </div>
459
- <div className="flight__rate__modal__card__item">
460
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
461
- <div className="flight__rate__modal__card__item__wrapper">
462
- <strong>Handbagage</strong>
463
- <p>Gratis: 2 x 8kg</p>
464
- </div>
465
- </div>
466
- <div className="flight__rate__modal__card__item">
467
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
468
- <div className="flight__rate__modal__card__item__wrapper">
469
- <strong>Ingecheckte bagage</strong>
470
- <p>Gratis: 2 x 32kg</p>
471
- </div>
472
- </div>
473
- <div className="flight__rate__modal__card__item">
474
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#seat-selection"></use></svg>
475
- <div className="flight__rate__modal__card__item__wrapper">
476
- <strong>Stoelselectie</strong>
477
- <p>kies uw stoel in het vliegtijg</p>
478
- </div>
479
- </div>
480
- <div className="flight__rate__modal__card__item">
481
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#check-in"></use></svg>
482
- <div className="flight__rate__modal__card__item__wrapper">
483
- <strong>Sneller inchecken</strong>
484
- <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
485
- </div>
486
- </div>
487
- <div className="flight__rate__modal__card__item">
488
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#business-lounge"></use></svg>
489
- <div className="flight__rate__modal__card__item__wrapper">
490
- <strong>Zakenlunge</strong>
491
- <p>Ontspan voor uw vlucht</p>
492
- </div>
493
- </div>
494
- <div className="flight__rate__modal__card__item">
495
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#priority"></use></svg>
496
- <div className="flight__rate__modal__card__item__wrapper">
497
- <strong>Prioriteit</strong>
498
- <p>Stap voor anderen aan boord</p>
499
- </div>
500
- </div>
501
- </div>
502
- </div>
503
- <div className="flight__rate__modal__card__footer">
504
- <button className="cta cta--secondary">Selecteer</button>
505
- <span className="price price--increase">+ €2.460</span>
506
- </div>
507
- </div>
508
- </div>
509
- </div>
38
+ <div className="flight__content">
39
+ <div className="flight__flights">
40
+ <div className="flight__flight">
41
+ <div className="flight__flight__header">
42
+ <div className="flight__status__container">
510
43
  </div>
511
- <div className="flight__flight">
512
- <div className="flight__flight__container">
513
- <div className="flight__flight__wrapper">
514
- <div className="flight__logo__wrapper">
515
- <img src="https://logos-world.net/wp-content/uploads/2020/03/Emirates-Logo.png" alt="" className="flight__logo"/>
516
- <span>British airways</span>
517
- </div>
518
- <div className="flight__info">
519
- <div className="flight__info__times">
520
- <strong>07:10 BRU</strong>
521
- <p>13/11/2024</p>
522
- </div>
523
- <div className="flight__info__duration">
524
- <p>2h 30m</p>
525
- <div className="flight__info__duration__stops">
526
- <div className="flight__info__duration__stop"></div>
527
- </div>
528
- <span>1 stop</span>
529
- </div>
530
- <div className="flight__info__times flight__info__times--arrival">
531
- <strong>06:55 BKK</strong>
532
- <p>13/11/2024</p>
533
- <span className="flight__info__times__days">+ 1 dag</span>
534
- </div>
535
- </div>
536
- </div>
537
- <div className="flight__detail__btn__wrapper">
538
- <div className={`flight__detail__btn ${isDetail2Active ? 'flight__detail__btn--active' : ''}`} onClick={handleDetailButtonClick}>
539
- <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
540
- </div>
541
- </div>
542
- </div>
543
- <div className="flight__rate">
544
- <div className="flight__rate__container">
545
- <div className="flight__rate__title">
546
- <h2><strong>Terugreis</strong></h2>
547
- <h2>Kies uw klasse:</h2>
548
- </div>
549
- <div className="flight__rate__wrapper">
550
- <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
551
- <div className="flight__rate__card__header">
552
- <h3 className="flight__rate__card__header__title">Economy</h3>
553
- </div>
554
- <div className="flight__rate__card__content">
555
- <div className="flight__rate__card__chairs">
556
- <span>nog 2 stoelen vrij</span>
557
- </div>
558
- <div className="flight__rate__card__lowest">
559
- <span>Laagste prijs</span>
560
- </div>
561
- <div className="flight__rate__card__item">
562
- <span>€275 p.p</span>
563
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
564
- </div>
565
- </div>
566
- </div>
567
- <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
568
- <div className="flight__rate__card__header">
569
- <h3 className="flight__rate__card__header__title">Economy premium</h3>
570
- </div>
571
- <div className="flight__rate__card__content">
572
- {/* <div className="flight__rate__card__chairs">
573
- <span>nog 2 stoelen vrij</span>
574
- </div> */}
575
- {/* <div className="flight__rate__card__lowest">
576
- <span>Laagste prijs</span>
577
- </div> */}
578
- <div className="flight__rate__card__item">
579
- <span>€960 p.p</span>
580
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
581
- </div>
582
- </div>
583
- </div>
584
- <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
585
- <div className="flight__rate__card__header">
586
- <h3 className="flight__rate__card__header__title">Business</h3>
587
- </div>
588
- <div className="flight__rate__card__content">
589
- {/* <div className="flight__rate__card__chairs">
590
- <span>nog 2 stoelen vrij</span>
591
- </div> */}
592
- {/* <div className="flight__rate__card__lowest">
593
- <span>Laagste prijs</span>
594
- </div> */}
595
- <div className="flight__rate__card__item">
596
- <span>€3.060 p.p</span>
597
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
598
- </div>
599
- </div>
600
- </div>
601
- </div>
602
- </div>
603
- <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
604
- <div className="flight__rate__modal__card">
605
- <div className="flight__rate__modal__card__wrapper">
606
- <div className="flight__rate__modal__card__header">
607
- <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
608
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
609
- </div>
610
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
611
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
612
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
613
- <div className="flight__rate__modal__card__item__wrapper">
614
- <strong>Wijzigingen in het ticket</strong>
615
- <p>Wijzigingen toestaan</p>
616
- </div>
617
- </div>
618
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
619
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
620
- <div className="flight__rate__modal__card__item__wrapper">
621
- <strong>Terugbetaling van ticket</strong>
622
- <p>Ticket retourneerbaar</p>
623
- </div>
624
- </div>
625
- </div>
626
- <div className="flight__rate__modal__card__items">
627
- <div className="flight__rate__modal__card__item">
628
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
629
- <div className="flight__rate__modal__card__item__wrapper">
630
- <strong>persoonlijke items</strong>
631
- <p>Gratis</p>
632
- </div>
633
- </div>
634
- <div className="flight__rate__modal__card__item">
635
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
636
- <div className="flight__rate__modal__card__item__wrapper">
637
- <strong>Handbagage</strong>
638
- <p>Gratis: 2 x 8kg</p>
639
- </div>
640
- </div>
641
- <div className="flight__rate__modal__card__item">
642
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
643
- <div className="flight__rate__modal__card__item__wrapper">
644
- <strong>Ingecheckte bagage</strong>
645
- <p>Gratis: 2 x 32kg</p>
646
- </div>
647
- </div>
648
- </div>
649
- </div>
650
- <div className="flight__rate__modal__card__footer">
651
- <button className="cta cta--secondary">Selecteer</button>
652
- <span className="price price--increase">€2.460</span>
653
- </div>
654
- </div>
655
- <div className="flight__rate__modal__card flight__rate__modal__card--premium">
656
- <div className="flight__rate__modal__card__wrapper">
657
- <div className="flight__rate__modal__card__header">
658
- <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
659
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
660
- </div>
661
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
662
- <div className="flight__rate__modal__card__item">
663
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
664
- <div className="flight__rate__modal__card__item__wrapper">
665
- <strong>Wijzigingen in het ticket</strong>
666
- <p>Wijzigingen toestaan</p>
667
- </div>
668
- </div>
669
- <div className="flight__rate__modal__card__item">
670
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
671
- <div className="flight__rate__modal__card__item__wrapper">
672
- <strong>Terugbetaling van ticket</strong>
673
- <p>Ticket retourneerbaar</p>
674
- </div>
675
- </div>
676
- </div>
677
- <div className="flight__rate__modal__card__items">
678
- <div className="flight__rate__modal__card__item">
679
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
680
- <div className="flight__rate__modal__card__item__wrapper">
681
- <strong>persoonlijke items</strong>
682
- <p>Gratis</p>
683
- </div>
684
- </div>
685
- <div className="flight__rate__modal__card__item">
686
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
687
- <div className="flight__rate__modal__card__item__wrapper">
688
- <strong>Handbagage</strong>
689
- <p>Gratis: 2 x 8kg</p>
690
- </div>
691
- </div>
692
- <div className="flight__rate__modal__card__item">
693
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
694
- <div className="flight__rate__modal__card__item__wrapper">
695
- <strong>Ingecheckte bagage</strong>
696
- <p>Gratis: 2 x 32kg</p>
697
- </div>
698
- </div>
699
- </div>
700
- </div>
701
- <div className="flight__rate__modal__card__footer">
702
- <button className="cta cta--secondary">Selecteer</button>
703
- <span className="price price--increase">€.2460</span>
704
- </div>
705
- </div>
706
- <div className="flight__rate__modal__card flight__rate__modal__card--business">
707
- <div className="flight__rate__modal__card__wrapper">
708
- <div className="flight__rate__modal__card__header">
709
- <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
710
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
711
- </div>
712
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
713
- <div className="flight__rate__modal__card__item">
714
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
715
- <div className="flight__rate__modal__card__item__wrapper">
716
- <strong>Wijzigingen in het ticket</strong>
717
- <p>Wijzigingen toestaan</p>
718
- </div>
719
- </div>
720
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
721
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
722
- <div className="flight__rate__modal__card__item__wrapper">
723
- <strong>Terugbetaling van ticket</strong>
724
- <p>Ticket retourneerbaar</p>
725
- </div>
726
- </div>
727
- </div>
728
- <div className="flight__rate__modal__card__items">
729
- <div className="flight__rate__modal__card__item">
730
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
731
- <div className="flight__rate__modal__card__item__wrapper">
732
- <strong>persoonlijke items</strong>
733
- <p>Gratis</p>
734
- </div>
735
- </div>
736
- <div className="flight__rate__modal__card__item">
737
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
738
- <div className="flight__rate__modal__card__item__wrapper">
739
- <strong>Handbagage</strong>
740
- <p>Gratis: 2 x 8kg</p>
741
- </div>
742
- </div>
743
- <div className="flight__rate__modal__card__item">
744
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
745
- <div className="flight__rate__modal__card__item__wrapper">
746
- <strong>Ingecheckte bagage</strong>
747
- <p>Gratis: 2 x 32kg</p>
748
- </div>
749
- </div>
750
- <div className="flight__rate__modal__card__item">
751
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#seat-selection"></use></svg>
752
- <div className="flight__rate__modal__card__item__wrapper">
753
- <strong>Stoelselectie</strong>
754
- <p>kies uw stoel in het vliegtijg</p>
755
- </div>
756
- </div>
757
- <div className="flight__rate__modal__card__item">
758
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#check-in"></use></svg>
759
- <div className="flight__rate__modal__card__item__wrapper">
760
- <strong>Sneller inchecken</strong>
761
- <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
762
- </div>
763
- </div>
764
- <div className="flight__rate__modal__card__item">
765
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#business-lounge"></use></svg>
766
- <div className="flight__rate__modal__card__item__wrapper">
767
- <strong>Zakenlunge</strong>
768
- <p>Ontspan voor uw vlucht</p>
769
- </div>
770
- </div>
771
- <div className="flight__rate__modal__card__item">
772
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#priority"></use></svg>
773
- <div className="flight__rate__modal__card__item__wrapper">
774
- <strong>Prioriteit</strong>
775
- <p>Stap voor anderen aan boord</p>
776
- </div>
777
- </div>
778
- </div>
779
- </div>
780
- <div className="flight__rate__modal__card__footer">
781
- <button className="cta cta--secondary">Selecteer</button>
782
- <span className="price price--increase">+ €2.460</span>
783
- </div>
784
- </div>
785
- </div>
786
- </div>
44
+ <div className="flight__price">
45
+ {!isSelected && (
46
+ <span className={buildClassName(["price",
47
+ priceDifference > 0 && "price--increase",
48
+ priceDifference < 0 && "price--decrease"
49
+ ])}>{getPriceDifferenceText(priceDifference)}</span>
50
+ )}
51
+ <button type="button" className={`cta ${isSelected ? 'cta--selected' : 'cta--secondary'}`} onClick={handleButtonClick}>
52
+ {isSelected ? translations.SHARED.SELECTED : translations.SHARED.SELECT}
53
+ </button>
787
54
  </div>
788
55
  </div>
56
+ </div>
57
+ <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
58
+ <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} />
789
59
  </div>
60
+ </div>
790
61
  </div>
791
62
 
792
63
  );