@qite/tide-booking-component 1.2.3 → 1.2.5

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 (137) hide show
  1. package/.vs/ProjectSettings.json +3 -3
  2. package/.vs/VSWorkspaceState.json +5 -5
  3. package/README.md +8 -8
  4. package/build/build-cjs/booking-product/components/footer.d.ts +1 -0
  5. package/build/build-cjs/booking-product/components/rooms.d.ts +2 -0
  6. package/build/build-cjs/booking-wizard/features/booking/selectors.d.ts +1 -1
  7. package/build/build-cjs/booking-wizard/features/flight-options/flight-option-flight.d.ts +1 -1
  8. package/build/build-cjs/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  9. package/build/build-cjs/booking-wizard/types.d.ts +5 -0
  10. package/build/build-cjs/index.js +1453 -735
  11. package/build/build-cjs/shared/utils/localization-util.d.ts +4 -0
  12. package/build/build-esm/booking-product/components/footer.d.ts +1 -0
  13. package/build/build-esm/booking-product/components/rooms.d.ts +2 -0
  14. package/build/build-esm/booking-wizard/features/booking/selectors.d.ts +1 -1
  15. package/build/build-esm/booking-wizard/features/flight-options/flight-option-flight.d.ts +1 -1
  16. package/build/build-esm/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  17. package/build/build-esm/booking-wizard/types.d.ts +5 -0
  18. package/build/build-esm/index.js +1455 -737
  19. package/build/build-esm/shared/utils/localization-util.d.ts +4 -0
  20. package/package.json +75 -77
  21. package/src/booking-product/components/age-select.tsx +35 -41
  22. package/src/booking-product/components/amount-input.tsx +78 -64
  23. package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -54
  24. package/src/booking-product/components/date-range-picker/calendar.tsx +178 -176
  25. package/src/booking-product/components/date-range-picker/index.tsx +196 -181
  26. package/src/booking-product/components/dates.tsx +136 -132
  27. package/src/booking-product/components/footer.tsx +69 -64
  28. package/src/booking-product/components/header.tsx +79 -68
  29. package/src/booking-product/components/icon.tsx +251 -208
  30. package/src/booking-product/components/product.tsx +314 -277
  31. package/src/booking-product/components/rooms.tsx +195 -177
  32. package/src/booking-product/index.tsx +30 -30
  33. package/src/booking-product/settings-context.ts +14 -14
  34. package/src/booking-product/types.ts +28 -28
  35. package/src/booking-product/utils/api.ts +25 -25
  36. package/src/booking-product/utils/price.ts +29 -27
  37. package/src/booking-wizard/api-settings-slice.ts +24 -24
  38. package/src/booking-wizard/components/icon.tsx +508 -60
  39. package/src/booking-wizard/components/message.tsx +34 -34
  40. package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
  41. package/src/booking-wizard/components/product-card.tsx +37 -37
  42. package/src/booking-wizard/components/step-indicator.tsx +51 -51
  43. package/src/booking-wizard/components/step-route.tsx +27 -27
  44. package/src/booking-wizard/declarations.d.ts +4 -4
  45. package/src/booking-wizard/features/booking/api.ts +49 -45
  46. package/src/booking-wizard/features/booking/booking-self-contained.tsx +384 -357
  47. package/src/booking-wizard/features/booking/booking-slice.ts +662 -603
  48. package/src/booking-wizard/features/booking/booking.tsx +356 -349
  49. package/src/booking-wizard/features/booking/constants.ts +16 -16
  50. package/src/booking-wizard/features/booking/selectors.ts +441 -408
  51. package/src/booking-wizard/features/confirmation/confirmation.tsx +97 -94
  52. package/src/booking-wizard/features/error/error.tsx +78 -75
  53. package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -344
  54. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -351
  55. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -214
  56. package/src/booking-wizard/features/flight-options/flight-option.tsx +81 -66
  57. package/src/booking-wizard/features/flight-options/flight-utils.ts +516 -401
  58. package/src/booking-wizard/features/flight-options/index.tsx +196 -177
  59. package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
  60. package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -171
  61. package/src/booking-wizard/features/price-details/util.ts +155 -155
  62. package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
  63. package/src/booking-wizard/features/product-options/none-option.tsx +120 -120
  64. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -66
  65. package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -210
  66. package/src/booking-wizard/features/product-options/option-item.tsx +317 -318
  67. package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -117
  68. package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -169
  69. package/src/booking-wizard/features/product-options/option-room.tsx +321 -314
  70. package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -192
  71. package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -102
  72. package/src/booking-wizard/features/product-options/options-form.tsx +459 -437
  73. package/src/booking-wizard/features/room-options/index.tsx +187 -172
  74. package/src/booking-wizard/features/room-options/room-utils.ts +190 -143
  75. package/src/booking-wizard/features/room-options/room.tsx +160 -124
  76. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -63
  77. package/src/booking-wizard/features/sidebar/index.tsx +76 -76
  78. package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +68 -68
  79. package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
  80. package/src/booking-wizard/features/sidebar/sidebar.tsx +364 -346
  81. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
  82. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
  83. package/src/booking-wizard/features/summary/summary-flight.tsx +39 -39
  84. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -57
  85. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -51
  86. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -54
  87. package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
  88. package/src/booking-wizard/features/summary/summary.tsx +674 -641
  89. package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
  90. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +754 -755
  91. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
  92. package/src/booking-wizard/features/travelers-form/validate-form.ts +245 -245
  93. package/src/booking-wizard/index.tsx +36 -36
  94. package/src/booking-wizard/settings-context.ts +60 -60
  95. package/src/booking-wizard/store.ts +31 -31
  96. package/src/booking-wizard/types.ts +276 -271
  97. package/src/index.ts +4 -5
  98. package/src/shared/components/loader.tsx +16 -16
  99. package/src/shared/translations/en-GB.json +232 -0
  100. package/src/shared/translations/fr-BE.json +233 -233
  101. package/src/shared/translations/nl-BE.json +232 -232
  102. package/src/shared/types.ts +4 -4
  103. package/src/shared/utils/localization-util.ts +62 -56
  104. package/src/shared/utils/query-string-util.ts +119 -116
  105. package/src/shared/utils/tide-api-utils.ts +36 -36
  106. package/styles/booking-product-variables.scss +394 -288
  107. package/styles/booking-product.scss +446 -440
  108. package/styles/booking-wizard-variables.scss +871 -0
  109. package/styles/booking-wizard.scss +59 -4
  110. package/styles/components/_animations.scss +39 -39
  111. package/styles/components/_base.scss +107 -106
  112. package/styles/components/_booking.scss +879 -0
  113. package/styles/components/_button.scss +238 -185
  114. package/styles/components/_checkbox.scss +219 -0
  115. package/styles/components/_cta.scss +208 -67
  116. package/styles/components/_date-list.scss +41 -0
  117. package/styles/components/_date-range-picker.scss +225 -224
  118. package/styles/components/_decrement-increment.scss +35 -37
  119. package/styles/components/_dropdown.scss +72 -74
  120. package/styles/components/_flight-option.scss +1429 -0
  121. package/styles/components/_form.scss +1583 -136
  122. package/styles/components/_info-message.scss +71 -0
  123. package/styles/components/_input.scss +25 -0
  124. package/styles/components/_list.scss +187 -0
  125. package/styles/components/_loader.scss +72 -71
  126. package/styles/components/_mixins.scss +550 -518
  127. package/styles/components/_placeholders.scss +166 -166
  128. package/styles/components/_pricing-summary.scss +155 -0
  129. package/styles/components/_qsm.scss +17 -20
  130. package/styles/components/_radiobutton.scss +170 -0
  131. package/styles/components/_select-wrapper.scss +80 -0
  132. package/styles/components/_spinner.scss +29 -0
  133. package/styles/components/_step-indicators.scss +168 -0
  134. package/styles/components/_table.scss +81 -0
  135. package/styles/components/_tree.scss +530 -0
  136. package/styles/components/_typeahead.scss +281 -0
  137. package/styles/components/_variables.scss +89 -89
package/src/booking-wizard/features/flight-options/flight-option-flight.tsx CHANGED
@@ -1,351 +1,385 @@
1
- import React, { useState } from 'react';
2
- import { useSelector } from "react-redux";
3
- import { buildClassName } from '../../../shared/utils/class-util';
4
- import { GroupedFlightDetails } from "../../types";
5
- import { selectTranslations } from "../booking/selectors";
6
- import { getDateText } from '../sidebar/sidebar-util';
7
- import Icon from '../../components/icon';
8
-
9
- interface FlightOptionFlightProps {
10
- details: GroupedFlightDetails,
11
- isOptionsVisible: boolean;
12
- }
13
-
14
- const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
15
- details,
16
- isOptionsVisible
17
- }) => {
18
- const translations = useSelector(selectTranslations);
19
-
20
- const [isDetailVisible, setIsDetailVisible] = useState<boolean>(false);
21
-
22
- return (
23
- <div className="flight__flight">
24
- <div className="flight__flight__container">
25
- <div className="flight__flight__wrapper">
26
- <div className="flight__logo__wrapper">
27
- <img src={`https://media.tidesoftware.be/media/shared/Airlines/${details.airlineCode}.png?height=256`} alt="" className="flight__logo" />
28
- <span>{details.airline}</span>
29
- </div>
30
- <div className="flight__info">
31
- <div className="flight__info__times">
32
- <strong>{details.departureTime} {details.departureAirport}</strong>
33
- <p>{getDateText(details.departureDate)}</p>
34
- </div>
35
- <div className="flight__info__duration">
36
- <p>{details.travelDuration}</p>
37
- <div className="flight__info__duration__stops">
38
- <div className="flight__info__duration__stop"></div>
39
- </div>
40
- {details.numberOfStops > 0 && (
41
- <span>{details.numberOfStops} {translations.FLIGHTS_FORM.FLIGHT_STOPS}</span>
42
- )}
43
- </div>
44
- <div className="flight__info__times flight__info__times--arrival">
45
- <strong>{details.arrivalTime} {details.arrivalAirport}</strong>
46
- <p>{getDateText(details.arrivalDate)}</p>
47
- {details.isNextDay && (
48
- <span className="flight__info__times__days">{translations.FLIGHTS_FORM.PLUS_ONE_DAY}</span>
49
- )}
50
- </div>
51
- </div>
52
- </div>
53
- <div className="flight__detail__btn__wrapper">
54
- <div className={buildClassName(["flight__detail__btn", isDetailVisible && "flight__detail__btn--active"])} onClick={() => setIsDetailVisible(!isDetailVisible)}>
55
- <Icon name="chevron" className="flight__detail__btn__arrow" width={16} height={16} />
56
- </div>
57
- </div>
58
- </div>
59
- <div className={buildClassName(["flight__detail", isDetailVisible && "flight__detail--active"])}>
60
- {details.flightLines.map((flightLine, flightLineIndex) => (
61
- <React.Fragment key={flightLineIndex}>
62
- <div className="flight__info">
63
- <div className="flight__info__times__wrapper">
64
- <div className="flight__info__times">
65
- <strong>{flightLine.departureTime} {flightLine.departureAirport}</strong>
66
- <p>{getDateText(flightLine.departureDate)}</p>
67
- </div>
68
- <div>
69
- <Icon name="plane-depart" width={30} height={20} />
70
- </div>
71
- </div>
72
- <div className="flight__info__duration">
73
- <p>{flightLine.travelDuration}</p>
74
- <div className="flight__info__duration__stops"></div>
75
- <span>{flightLine.airline}</span>
76
- <strong>{flightLine.number}</strong>
77
- </div>
78
- <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
79
- <div>
80
- <Icon name="plane-arive" width={35} height={25} />
81
- </div>
82
- <div className="flight__info__times flight__info__times--arrival">
83
- <strong>{flightLine.arrivalTime} {flightLine.arrivalAirport}</strong>
84
- <p>{getDateText(flightLine.arrivalDate)}</p>
85
- </div>
86
- </div>
87
- </div>
88
- {flightLine.waitDuration && (
89
- <div className="flight__info">
90
- <div className="flight__info__times">
91
- </div>
92
- <div className="flight__info__duration flight__info__duration--waittime">
93
- <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
94
- <Icon name="clock" width={20} height={20} />
95
- </div>
96
- <div className="flight__info__duration__stoptime">
97
- <span>{translations.FLIGHTS_FORM.STOP_TIME}</span>
98
- <strong>{flightLine.waitDuration}</strong>
99
- </div>
100
- </div>
101
- <div className="flight__info__times flight__info__times--arrival">
102
- </div>
103
- </div>
104
- )}
105
- </React.Fragment>
106
- ))}
107
- </div>
108
- <div className={buildClassName(["flight__rate", isOptionsVisible && "flight__rate--active"])}>
109
- {/*<div className="flight__rate__container">
110
- <div className="flight__rate__title">
111
- <h2><strong>{translations.FLIGHTS_FORM.OUTWARD_FLIGHT}</strong></h2>
112
- <h2>{translations.FLIGHTS_FORM.CHOOSE_YOUR_CLASS}</h2>
113
- </div>
114
- <div className="flight__rate__wrapper">
115
- <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
116
- <div className="flight__rate__card__header">
117
- <h3 className="flight__rate__card__header__title">Economy</h3>
118
- </div>
119
- <div className="flight__rate__card__content">
120
- <div className="flight__rate__card__chairs">
121
- <span>nog 2 stoelen vrij</span>
122
- </div>
123
- <div className="flight__rate__card__lowest">
124
- <span>Laagste prijs</span>
125
- </div>
126
- <div className="flight__rate__card__item">
127
- <span>€ 275 p.p</span>
128
- <Icon name="chevron" width={20} height={20} />
129
- </div>
130
- </div>
131
- </div>
132
- <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
133
- <div className="flight__rate__card__header">
134
- <h3 className="flight__rate__card__header__title">Economy premium</h3>
135
- </div>
136
- <div className="flight__rate__card__content">
137
- <div className="flight__rate__card__chairs">
138
- <span>nog 2 stoelen vrij</span>
139
- </div>
140
- <div className="flight__rate__card__item">
141
- <span>€ 960 p.p</span>
142
- <Icon name="chevron" width={20} height={20} />
143
- </div>
144
- </div>
145
- </div>
146
- <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
147
- <div className="flight__rate__card__header">
148
- <h3 className="flight__rate__card__header__title">Business</h3>
149
- </div>
150
- <div className="flight__rate__card__content">
151
- <div className="flight__rate__card__chairs">
152
- <span>nog 2 stoelen vrij</span>
153
- </div>
154
- <div className="flight__rate__card__item">
155
- <span>€ 3.060 p.p</span>
156
- <Icon name="chevron" width={20} height={20} />
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
- </div>
162
- <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
163
- <div className="flight__rate__modal__card">
164
- <div className="flight__rate__modal__card__wrapper">
165
- <div className="flight__rate__modal__card__header">
166
- <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
167
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
168
- </div>
169
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
170
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
171
- <Icon name="ticket" width={20} height={20} />
172
- <div className="flight__rate__modal__card__item__wrapper">
173
- <strong>Wijzigingen in het ticket</strong>
174
- <p>Wijzigingen toestaan</p>
175
- </div>
176
- </div>
177
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
178
- <Icon name="payback" width={20} height={20} />
179
- <div className="flight__rate__modal__card__item__wrapper">
180
- <strong>Terugbetaling van ticket</strong>
181
- <p>Ticket retourneerbaar</p>
182
- </div>
183
- </div>
184
- </div>
185
- <div className="flight__rate__modal__card__items">
186
- <div className="flight__rate__modal__card__item">
187
- <Icon name="shopping-bag" width={20} height={20} />
188
- <div className="flight__rate__modal__card__item__wrapper">
189
- <strong>persoonlijke items</strong>
190
- <p>Gratis</p>
191
- </div>
192
- </div>
193
- <div className="flight__rate__modal__card__item">
194
- <Icon name="backpack" width={20} height={20} />
195
- <div className="flight__rate__modal__card__item__wrapper">
196
- <strong>Handbagage</strong>
197
- <p>Gratis: 2 x 8kg</p>
198
- </div>
199
- </div>
200
- <div className="flight__rate__modal__card__item">
201
- <Icon name="suitcase" width={20} height={20} />
202
- <div className="flight__rate__modal__card__item__wrapper">
203
- <strong>Ingecheckte bagage</strong>
204
- <p>Gratis: 2 x 32kg</p>
205
- </div>
206
- </div>
207
- </div>
208
- </div>
209
- <div className="flight__rate__modal__card__footer">
210
- <button className="cta cta--secondary">Selecteer</button>
211
- <span className="price price--increase">€2.460</span>
212
- </div>
213
- </div>
214
- <div className="flight__rate__modal__card flight__rate__modal__card--premium">
215
- <div className="flight__rate__modal__card__wrapper">
216
- <div className="flight__rate__modal__card__header">
217
- <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
218
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
219
- </div>
220
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
221
- <div className="flight__rate__modal__card__item">
222
- <Icon name="ticket" width={20} height={20} />
223
- <div className="flight__rate__modal__card__item__wrapper">
224
- <strong>Wijzigingen in het ticket</strong>
225
- <p>Wijzigingen toestaan</p>
226
- </div>
227
- </div>
228
- <div className="flight__rate__modal__card__item">
229
- <Icon name="payback" width={20} height={20} />
230
- <div className="flight__rate__modal__card__item__wrapper">
231
- <strong>Terugbetaling van ticket</strong>
232
- <p>Ticket retourneerbaar</p>
233
- </div>
234
- </div>
235
- </div>
236
- <div className="flight__rate__modal__card__items">
237
- <div className="flight__rate__modal__card__item">
238
- <Icon name="shopping-bag width={20} height={20}" />
239
- <div className="flight__rate__modal__card__item__wrapper">
240
- <strong>persoonlijke items</strong>
241
- <p>Gratis</p>
242
- </div>
243
- </div>
244
- <div className="flight__rate__modal__card__item">
245
- <Icon name="backpack" width={20} height={20} />
246
- <div className="flight__rate__modal__card__item__wrapper">
247
- <strong>Handbagage</strong>
248
- <p>Gratis: 2 x 8kg</p>
249
- </div>
250
- </div>
251
- <div className="flight__rate__modal__card__item">
252
- <Icon name="suitcase" width={20} height={20} />
253
- <div className="flight__rate__modal__card__item__wrapper">
254
- <strong>Ingecheckte bagage</strong>
255
- <p>Gratis: 2 x 32kg</p>
256
- </div>
257
- </div>
258
- </div>
259
- </div>
260
- <div className="flight__rate__modal__card__footer">
261
- <button className="cta cta--secondary">Selecteer</button>
262
- <span className="price price--increase">€.2460</span>
263
- </div>
264
- </div>
265
- <div className="flight__rate__modal__card flight__rate__modal__card--business">
266
- <div className="flight__rate__modal__card__wrapper">
267
- <div className="flight__rate__modal__card__header">
268
- <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
269
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
270
- </div>
271
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
272
- <div className="flight__rate__modal__card__item">
273
- <Icon name="ticket" width={20} height={20} />
274
- <div className="flight__rate__modal__card__item__wrapper">
275
- <strong>Wijzigingen in het ticket</strong>
276
- <p>Wijzigingen toestaan</p>
277
- </div>
278
- </div>
279
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
280
- <Icon name="payback" width={20} height={20} />
281
- <div className="flight__rate__modal__card__item__wrapper">
282
- <strong>Terugbetaling van ticket</strong>
283
- <p>Ticket retourneerbaar</p>
284
- </div>
285
- </div>
286
- </div>
287
- <div className="flight__rate__modal__card__items">
288
- <div className="flight__rate__modal__card__item">
289
- <Icon name="shopping-bag" width={20} height={20} />
290
- <div className="flight__rate__modal__card__item__wrapper">
291
- <strong>persoonlijke items</strong>
292
- <p>Gratis</p>
293
- </div>
294
- </div>
295
- <div className="flight__rate__modal__card__item">
296
- <Icon name="backpack" width={20} height={20} />
297
- <div className="flight__rate__modal__card__item__wrapper">
298
- <strong>Handbagage</strong>
299
- <p>Gratis: 2 x 8kg</p>
300
- </div>
301
- </div>
302
- <div className="flight__rate__modal__card__item">
303
- <Icon name="suitcase" width={20} height={20} />
304
- <div className="flight__rate__modal__card__item__wrapper">
305
- <strong>Ingecheckte bagage</strong>
306
- <p>Gratis: 2 x 32kg</p>
307
- </div>
308
- </div>
309
- <div className="flight__rate__modal__card__item">
310
- <Icon name="seat-selection" width={20} height={20} />
311
- <div className="flight__rate__modal__card__item__wrapper">
312
- <strong>Stoelselectie</strong>
313
- <p>kies uw stoel in het vliegtijg</p>
314
- </div>
315
- </div>
316
- <div className="flight__rate__modal__card__item">
317
- <Icon name="check-in" width={20} height={20} />
318
- <div className="flight__rate__modal__card__item__wrapper">
319
- <strong>Sneller inchecken</strong>
320
- <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
321
- </div>
322
- </div>
323
- <div className="flight__rate__modal__card__item">
324
- <Icon name="business-lounge" width={20} height={20} />
325
- <div className="flight__rate__modal__card__item__wrapper">
326
- <strong>Zakenlunge</strong>
327
- <p>Ontspan voor uw vlucht</p>
328
- </div>
329
- </div>
330
- <div className="flight__rate__modal__card__item">
331
- <Icon name="priority" width={20} height={20} />
332
- <div className="flight__rate__modal__card__item__wrapper">
333
- <strong>Prioriteit</strong>
334
- <p>Stap voor anderen aan boord</p>
335
- </div>
336
- </div>
337
- </div>
338
- </div>
339
- <div className="flight__rate__modal__card__footer">
340
- <button className="cta cta--secondary">Selecteer</button>
341
- <span className="price price--increase">+ €2.460</span>
342
- </div>
343
- </div>
344
- </div>
345
- */}
346
- </div>
347
- </div>
348
- );
349
- }
350
-
351
- export default FlightOptionFlight;
1
+ import React, { useState } from "react";
2
+ import { useSelector } from "react-redux";
3
+ import { buildClassName } from "../../../shared/utils/class-util";
4
+ import { GroupedFlightDetails } from "../../types";
5
+ import { selectTranslations } from "../booking/selectors";
6
+ import { getDateText } from "../sidebar/sidebar-util";
7
+ import Icon from "../../components/icon";
8
+
9
+ interface FlightOptionFlightProps {
10
+ details: GroupedFlightDetails;
11
+ isOptionsVisible: boolean;
12
+ }
13
+
14
+ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
15
+ details,
16
+ isOptionsVisible,
17
+ }) => {
18
+ const translations = useSelector(selectTranslations);
19
+
20
+ const [isDetailVisible, setIsDetailVisible] = useState<boolean>(false);
21
+
22
+ return (
23
+ <div className="flight__flight">
24
+ <div className="flight__flight__container">
25
+ <div className="flight__flight__wrapper">
26
+ <div className="flight__logo__wrapper">
27
+ <img
28
+ src={`https://media.tidesoftware.be/media/shared/Airlines/${details.airlineCode}.png?height=256`}
29
+ alt=""
30
+ className="flight__logo"
31
+ />
32
+ <span>{details.airline}</span>
33
+ </div>
34
+ <div className="flight__info">
35
+ <div className="flight__info__times">
36
+ <strong>
37
+ {details.departureTime} {details.departureAirport}
38
+ </strong>
39
+ <p>{getDateText(details.departureDate)}</p>
40
+ </div>
41
+ <div className="flight__info__duration">
42
+ <p>{details.travelDuration}</p>
43
+ <div className="flight__info__duration__stops">
44
+ <div className="flight__info__duration__stop"></div>
45
+ </div>
46
+ {details.numberOfStops > 0 && (
47
+ <span>
48
+ {details.numberOfStops}{" "}
49
+ {translations.FLIGHTS_FORM.FLIGHT_STOPS}
50
+ </span>
51
+ )}
52
+ </div>
53
+ <div className="flight__info__times flight__info__times--arrival">
54
+ <strong>
55
+ {details.arrivalTime} {details.arrivalAirport}
56
+ </strong>
57
+ <p>{getDateText(details.arrivalDate)}</p>
58
+ {details.isNextDay && (
59
+ <span className="flight__info__times__days">
60
+ {translations.FLIGHTS_FORM.PLUS_ONE_DAY}
61
+ </span>
62
+ )}
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div className="flight__detail__btn__wrapper">
67
+ <div
68
+ className={buildClassName([
69
+ "flight__detail__btn",
70
+ isDetailVisible && "flight__detail__btn--active",
71
+ ])}
72
+ onClick={() => setIsDetailVisible(!isDetailVisible)}
73
+ >
74
+ <Icon
75
+ name="ui-chevron"
76
+ className="flight__detail__btn__arrow"
77
+ width={16}
78
+ height={16}
79
+ />
80
+ </div>
81
+ </div>
82
+ </div>
83
+ <div
84
+ className={buildClassName([
85
+ "flight__detail",
86
+ isDetailVisible && "flight__detail--active",
87
+ ])}
88
+ >
89
+ {details.flightLines.map((flightLine, flightLineIndex) => (
90
+ <React.Fragment key={flightLineIndex}>
91
+ <div className="flight__info">
92
+ <div className="flight__info__times__wrapper">
93
+ <div className="flight__info__times">
94
+ <p>{flightLine.departureTime}</p>
95
+ <strong>{flightLine.departureAirport}</strong>
96
+ <p>{getDateText(flightLine.departureDate)}</p>
97
+ </div>
98
+ <div>
99
+ <Icon name="ui-plane-depart" width={30} height={20} />
100
+ </div>
101
+ </div>
102
+ <div className="flight__info__duration">
103
+ <p>{flightLine.travelDuration}</p>
104
+ <div className="flight__info__duration__stops"></div>
105
+ <span>{flightLine.airline}</span>
106
+ <strong>{flightLine.number}</strong>
107
+ </div>
108
+ <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
109
+ <div>
110
+ <Icon name="ui-plane-arrive" width={30} height={20} />
111
+ </div>
112
+ <div className="flight__info__times flight__info__times--arrival">
113
+ <p>{flightLine.arrivalTime}</p>
114
+ <strong>{flightLine.arrivalAirport}</strong>
115
+ <p>{getDateText(flightLine.arrivalDate)}</p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ {flightLine.waitDuration && (
120
+ <div className="flight__info">
121
+ <div className="flight__info__times"></div>
122
+ <div className="flight__info__duration flight__info__duration--waittime">
123
+ <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
124
+ <Icon name="ui-clock" width={24} height={24} />
125
+ </div>
126
+ <div className="flight__info__duration__stoptime">
127
+ <span>{translations.FLIGHTS_FORM.STOP_TIME}</span>
128
+ <strong>{flightLine.waitDuration}</strong>
129
+ </div>
130
+ </div>
131
+ <div className="flight__info__times flight__info__times--arrival"></div>
132
+ </div>
133
+ )}
134
+ </React.Fragment>
135
+ ))}
136
+ </div>
137
+ <div
138
+ className={buildClassName([
139
+ "flight__rate",
140
+ isOptionsVisible && "flight__rate--active",
141
+ ])}
142
+ >
143
+ {/*<div className="flight__rate__container">
144
+ <div className="flight__rate__title">
145
+ <h2><strong>{translations.FLIGHTS_FORM.OUTWARD_FLIGHT}</strong></h2>
146
+ <h2>{translations.FLIGHTS_FORM.CHOOSE_YOUR_CLASS}</h2>
147
+ </div>
148
+ <div className="flight__rate__wrapper">
149
+ <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
150
+ <div className="flight__rate__card__header">
151
+ <h3 className="flight__rate__card__header__title">Economy</h3>
152
+ </div>
153
+ <div className="flight__rate__card__content">
154
+ <div className="flight__rate__card__chairs">
155
+ <span>nog 2 stoelen vrij</span>
156
+ </div>
157
+ <div className="flight__rate__card__lowest">
158
+ <span>Laagste prijs</span>
159
+ </div>
160
+ <div className="flight__rate__card__item">
161
+ <span>€ 275 p.p</span>
162
+ <Icon name="chevron" width={20} height={20} />
163
+ </div>
164
+ </div>
165
+ </div>
166
+ <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
167
+ <div className="flight__rate__card__header">
168
+ <h3 className="flight__rate__card__header__title">Economy premium</h3>
169
+ </div>
170
+ <div className="flight__rate__card__content">
171
+ <div className="flight__rate__card__chairs">
172
+ <span>nog 2 stoelen vrij</span>
173
+ </div>
174
+ <div className="flight__rate__card__item">
175
+ <span>€ 960 p.p</span>
176
+ <Icon name="chevron" width={20} height={20} />
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
181
+ <div className="flight__rate__card__header">
182
+ <h3 className="flight__rate__card__header__title">Business</h3>
183
+ </div>
184
+ <div className="flight__rate__card__content">
185
+ <div className="flight__rate__card__chairs">
186
+ <span>nog 2 stoelen vrij</span>
187
+ </div>
188
+ <div className="flight__rate__card__item">
189
+ <span>€ 3.060 p.p</span>
190
+ <Icon name="chevron" width={20} height={20} />
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
197
+ <div className="flight__rate__modal__card">
198
+ <div className="flight__rate__modal__card__wrapper">
199
+ <div className="flight__rate__modal__card__header">
200
+ <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
201
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
202
+ </div>
203
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
204
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
205
+ <Icon name="ticket" width={20} height={20} />
206
+ <div className="flight__rate__modal__card__item__wrapper">
207
+ <strong>Wijzigingen in het ticket</strong>
208
+ <p>Wijzigingen toestaan</p>
209
+ </div>
210
+ </div>
211
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
212
+ <Icon name="payback" width={20} height={20} />
213
+ <div className="flight__rate__modal__card__item__wrapper">
214
+ <strong>Terugbetaling van ticket</strong>
215
+ <p>Ticket retourneerbaar</p>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ <div className="flight__rate__modal__card__items">
220
+ <div className="flight__rate__modal__card__item">
221
+ <Icon name="shopping-bag" width={20} height={20} />
222
+ <div className="flight__rate__modal__card__item__wrapper">
223
+ <strong>persoonlijke items</strong>
224
+ <p>Gratis</p>
225
+ </div>
226
+ </div>
227
+ <div className="flight__rate__modal__card__item">
228
+ <Icon name="backpack" width={20} height={20} />
229
+ <div className="flight__rate__modal__card__item__wrapper">
230
+ <strong>Handbagage</strong>
231
+ <p>Gratis: 2 x 8kg</p>
232
+ </div>
233
+ </div>
234
+ <div className="flight__rate__modal__card__item">
235
+ <Icon name="suitcase" width={20} height={20} />
236
+ <div className="flight__rate__modal__card__item__wrapper">
237
+ <strong>Ingecheckte bagage</strong>
238
+ <p>Gratis: 2 x 32kg</p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <div className="flight__rate__modal__card__footer">
244
+ <button className="cta cta--secondary">Selecteer</button>
245
+ <span className="price price--increase">€2.460</span>
246
+ </div>
247
+ </div>
248
+ <div className="flight__rate__modal__card flight__rate__modal__card--premium">
249
+ <div className="flight__rate__modal__card__wrapper">
250
+ <div className="flight__rate__modal__card__header">
251
+ <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
252
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
253
+ </div>
254
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
255
+ <div className="flight__rate__modal__card__item">
256
+ <Icon name="ticket" width={20} height={20} />
257
+ <div className="flight__rate__modal__card__item__wrapper">
258
+ <strong>Wijzigingen in het ticket</strong>
259
+ <p>Wijzigingen toestaan</p>
260
+ </div>
261
+ </div>
262
+ <div className="flight__rate__modal__card__item">
263
+ <Icon name="payback" width={20} height={20} />
264
+ <div className="flight__rate__modal__card__item__wrapper">
265
+ <strong>Terugbetaling van ticket</strong>
266
+ <p>Ticket retourneerbaar</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ <div className="flight__rate__modal__card__items">
271
+ <div className="flight__rate__modal__card__item">
272
+ <Icon name="shopping-bag width={20} height={20}" />
273
+ <div className="flight__rate__modal__card__item__wrapper">
274
+ <strong>persoonlijke items</strong>
275
+ <p>Gratis</p>
276
+ </div>
277
+ </div>
278
+ <div className="flight__rate__modal__card__item">
279
+ <Icon name="backpack" width={20} height={20} />
280
+ <div className="flight__rate__modal__card__item__wrapper">
281
+ <strong>Handbagage</strong>
282
+ <p>Gratis: 2 x 8kg</p>
283
+ </div>
284
+ </div>
285
+ <div className="flight__rate__modal__card__item">
286
+ <Icon name="suitcase" width={20} height={20} />
287
+ <div className="flight__rate__modal__card__item__wrapper">
288
+ <strong>Ingecheckte bagage</strong>
289
+ <p>Gratis: 2 x 32kg</p>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <div className="flight__rate__modal__card__footer">
295
+ <button className="cta cta--secondary">Selecteer</button>
296
+ <span className="price price--increase">€.2460</span>
297
+ </div>
298
+ </div>
299
+ <div className="flight__rate__modal__card flight__rate__modal__card--business">
300
+ <div className="flight__rate__modal__card__wrapper">
301
+ <div className="flight__rate__modal__card__header">
302
+ <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
303
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
304
+ </div>
305
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
306
+ <div className="flight__rate__modal__card__item">
307
+ <Icon name="ticket" width={20} height={20} />
308
+ <div className="flight__rate__modal__card__item__wrapper">
309
+ <strong>Wijzigingen in het ticket</strong>
310
+ <p>Wijzigingen toestaan</p>
311
+ </div>
312
+ </div>
313
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
314
+ <Icon name="payback" width={20} height={20} />
315
+ <div className="flight__rate__modal__card__item__wrapper">
316
+ <strong>Terugbetaling van ticket</strong>
317
+ <p>Ticket retourneerbaar</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div className="flight__rate__modal__card__items">
322
+ <div className="flight__rate__modal__card__item">
323
+ <Icon name="shopping-bag" width={20} height={20} />
324
+ <div className="flight__rate__modal__card__item__wrapper">
325
+ <strong>persoonlijke items</strong>
326
+ <p>Gratis</p>
327
+ </div>
328
+ </div>
329
+ <div className="flight__rate__modal__card__item">
330
+ <Icon name="backpack" width={20} height={20} />
331
+ <div className="flight__rate__modal__card__item__wrapper">
332
+ <strong>Handbagage</strong>
333
+ <p>Gratis: 2 x 8kg</p>
334
+ </div>
335
+ </div>
336
+ <div className="flight__rate__modal__card__item">
337
+ <Icon name="suitcase" width={20} height={20} />
338
+ <div className="flight__rate__modal__card__item__wrapper">
339
+ <strong>Ingecheckte bagage</strong>
340
+ <p>Gratis: 2 x 32kg</p>
341
+ </div>
342
+ </div>
343
+ <div className="flight__rate__modal__card__item">
344
+ <Icon name="seat-selection" width={20} height={20} />
345
+ <div className="flight__rate__modal__card__item__wrapper">
346
+ <strong>Stoelselectie</strong>
347
+ <p>kies uw stoel in het vliegtijg</p>
348
+ </div>
349
+ </div>
350
+ <div className="flight__rate__modal__card__item">
351
+ <Icon name="check-in" width={20} height={20} />
352
+ <div className="flight__rate__modal__card__item__wrapper">
353
+ <strong>Sneller inchecken</strong>
354
+ <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
355
+ </div>
356
+ </div>
357
+ <div className="flight__rate__modal__card__item">
358
+ <Icon name="business-lounge" width={20} height={20} />
359
+ <div className="flight__rate__modal__card__item__wrapper">
360
+ <strong>Zakenlunge</strong>
361
+ <p>Ontspan voor uw vlucht</p>
362
+ </div>
363
+ </div>
364
+ <div className="flight__rate__modal__card__item">
365
+ <Icon name="priority" width={20} height={20} />
366
+ <div className="flight__rate__modal__card__item__wrapper">
367
+ <strong>Prioriteit</strong>
368
+ <p>Stap voor anderen aan boord</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>
379
+ */}
380
+ </div>
381
+ </div>
382
+ );
383
+ };
384
+
385
+ export default FlightOptionFlight;