@qite/tide-booking-component 1.2.0 → 1.2.2

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 (66) hide show
  1. package/build/build-cjs/booking-product/components/footer.d.ts +1 -0
  2. package/build/build-cjs/booking-product/components/icon.d.ts +2 -0
  3. package/build/build-cjs/booking-product/types.d.ts +2 -1
  4. package/build/build-cjs/booking-wizard/components/icon.d.ts +2 -0
  5. package/build/build-cjs/{booking-product → booking-wizard}/components/multi-range-filter.d.ts +0 -1
  6. package/build/build-cjs/booking-wizard/types.d.ts +1 -0
  7. package/build/build-cjs/index.js +1851 -558
  8. package/build/build-cjs/shared/utils/localization-util.d.ts +17 -10
  9. package/build/build-esm/booking-product/components/footer.d.ts +1 -0
  10. package/build/build-esm/booking-product/components/icon.d.ts +2 -0
  11. package/build/build-esm/booking-product/types.d.ts +2 -1
  12. package/build/build-esm/booking-wizard/components/icon.d.ts +2 -0
  13. package/build/build-esm/{booking-product → booking-wizard}/components/multi-range-filter.d.ts +0 -1
  14. package/build/build-esm/booking-wizard/types.d.ts +1 -0
  15. package/build/build-esm/index.js +1853 -560
  16. package/build/build-esm/shared/utils/localization-util.d.ts +17 -10
  17. package/package.json +4 -3
  18. package/src/booking-product/components/amount-input.tsx +8 -20
  19. package/src/booking-product/components/date-range-picker/calendar.tsx +3 -3
  20. package/src/booking-product/components/dates.tsx +26 -20
  21. package/src/booking-product/components/footer.tsx +4 -2
  22. package/src/booking-product/components/header.tsx +4 -4
  23. package/src/booking-product/components/icon.tsx +187 -11
  24. package/src/booking-product/components/product.tsx +31 -16
  25. package/src/{shared → booking-product}/components/rating.tsx +3 -3
  26. package/src/booking-product/components/rooms.tsx +116 -113
  27. package/src/booking-product/settings-context.ts +0 -1
  28. package/src/booking-product/types.ts +2 -1
  29. package/src/booking-wizard/components/icon.tsx +42 -15
  30. package/src/{booking-product → booking-wizard}/components/multi-range-filter.tsx +0 -1
  31. package/src/booking-wizard/declarations.d.ts +4 -0
  32. package/src/booking-wizard/features/booking/booking-self-contained.tsx +3 -2
  33. package/src/booking-wizard/features/booking/booking.tsx +3 -2
  34. package/src/booking-wizard/features/confirmation/confirmation.tsx +8 -4
  35. package/src/booking-wizard/features/flight-options/flight-filter.tsx +7 -6
  36. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +29 -28
  37. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +193 -192
  38. package/src/booking-wizard/features/room-options/index.tsx +1 -5
  39. package/src/booking-wizard/features/summary/summary.tsx +23 -26
  40. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +0 -2
  41. package/src/booking-wizard/features/travelers-form/validate-form.ts +1 -1
  42. package/src/booking-wizard/index.tsx +2 -2
  43. package/src/booking-wizard/types.ts +1 -0
  44. package/src/shared/tide-sprites.svg +117 -0
  45. package/src/shared/translations/fr-BE.json +230 -222
  46. package/src/shared/translations/nl-BE.json +229 -222
  47. package/styles/booking-product-variables.scss +288 -0
  48. package/styles/booking-product.scss +440 -0
  49. package/styles/booking-wizard-variables.scss +0 -0
  50. package/styles/booking-wizard.scss +4 -0
  51. package/styles/components/_animations.scss +39 -0
  52. package/styles/components/_base.scss +106 -0
  53. package/styles/components/_button.scss +185 -0
  54. package/styles/components/_cta.scss +67 -0
  55. package/styles/components/_date-range-picker.scss +224 -0
  56. package/styles/components/_decrement-increment.scss +37 -0
  57. package/styles/components/_dropdown.scss +74 -0
  58. package/styles/components/_form.scss +136 -0
  59. package/styles/components/_loader.scss +71 -0
  60. package/styles/components/_mixins.scss +518 -0
  61. package/styles/components/_placeholders.scss +166 -0
  62. package/styles/components/_qsm.scss +20 -0
  63. package/styles/components/_variables.scss +89 -0
  64. package/src/booking-product/components/multi-range-filter.css +0 -115
  65. /package/build/build-cjs/{shared → booking-product}/components/rating.d.ts +0 -0
  66. /package/build/build-esm/{shared → booking-product}/components/rating.d.ts +0 -0
package/src/booking-wizard/features/flight-options/flight-option-flight.tsx CHANGED
@@ -4,6 +4,7 @@ import { buildClassName } from '../../../shared/utils/class-util';
4
4
  import { GroupedFlightDetails } from "../../types";
5
5
  import { selectTranslations } from "../booking/selectors";
6
6
  import { getDateText } from '../sidebar/sidebar-util';
7
+ import Icon from '../../components/icon';
7
8
 
8
9
  interface FlightOptionFlightProps {
9
10
  details: GroupedFlightDetails,
@@ -23,7 +24,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
23
24
  <div className="flight__flight__container">
24
25
  <div className="flight__flight__wrapper">
25
26
  <div className="flight__logo__wrapper">
26
- <img src={`https://media.tidesoftware.be/media/shared/Airlines/${details.airlineCode}.png?height=30`} alt="" className="flight__logo" />
27
+ <img src={`https://media.tidesoftware.be/media/shared/Airlines/${details.airlineCode}.png?height=256`} alt="" className="flight__logo" />
27
28
  <span>{details.airline}</span>
28
29
  </div>
29
30
  <div className="flight__info">
@@ -51,7 +52,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
51
52
  </div>
52
53
  <div className="flight__detail__btn__wrapper">
53
54
  <div className={buildClassName(["flight__detail__btn", isDetailVisible && "flight__detail__btn--active"])} onClick={() => setIsDetailVisible(!isDetailVisible)}>
54
- <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
55
+ <Icon name="chevron" className="flight__detail__btn__arrow" width={16} height={16} />
55
56
  </div>
56
57
  </div>
57
58
  </div>
@@ -65,7 +66,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
65
66
  <p>{getDateText(flightLine.departureDate)}</p>
66
67
  </div>
67
68
  <div>
68
- <svg width={30} height={20}><use href="/icons/svg-sprite.svg#plane-depart"></use></svg>
69
+ <Icon name="plane-depart" width={30} height={20} />
69
70
  </div>
70
71
  </div>
71
72
  <div className="flight__info__duration">
@@ -76,7 +77,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
76
77
  </div>
77
78
  <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
78
79
  <div>
79
- <svg width={35} height={25}><use href="/icons/svg-sprite.svg#plane-arive"></use></svg>
80
+ <Icon name="plane-arive" width={35} height={25} />
80
81
  </div>
81
82
  <div className="flight__info__times flight__info__times--arrival">
82
83
  <strong>{flightLine.arrivalTime} {flightLine.arrivalAirport}</strong>
@@ -90,7 +91,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
90
91
  </div>
91
92
  <div className="flight__info__duration flight__info__duration--waittime">
92
93
  <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
93
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#clock"></use></svg>
94
+ <Icon name="clock" width={20} height={20} />
94
95
  </div>
95
96
  <div className="flight__info__duration__stoptime">
96
97
  <span>{translations.FLIGHTS_FORM.STOP_TIME}</span>
@@ -123,8 +124,8 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
123
124
  <span>Laagste prijs</span>
124
125
  </div>
125
126
  <div className="flight__rate__card__item">
126
- <span>€ 275 p.p</span>
127
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
127
+ <span>€ 275 p.p</span>
128
+ <Icon name="chevron" width={20} height={20} />
128
129
  </div>
129
130
  </div>
130
131
  </div>
@@ -138,7 +139,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
138
139
  </div>
139
140
  <div className="flight__rate__card__item">
140
141
  <span>€ 960 p.p</span>
141
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
142
+ <Icon name="chevron" width={20} height={20} />
142
143
  </div>
143
144
  </div>
144
145
  </div>
@@ -152,7 +153,7 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
152
153
  </div>
153
154
  <div className="flight__rate__card__item">
154
155
  <span>€ 3.060 p.p</span>
155
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
156
+ <Icon name="chevron" width={20} height={20} />
156
157
  </div>
157
158
  </div>
158
159
  </div>
@@ -167,14 +168,14 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
167
168
  </div>
168
169
  <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
169
170
  <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
170
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
171
+ <Icon name="ticket" width={20} height={20} />
171
172
  <div className="flight__rate__modal__card__item__wrapper">
172
173
  <strong>Wijzigingen in het ticket</strong>
173
174
  <p>Wijzigingen toestaan</p>
174
175
  </div>
175
176
  </div>
176
177
  <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
177
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
178
+ <Icon name="payback" width={20} height={20} />
178
179
  <div className="flight__rate__modal__card__item__wrapper">
179
180
  <strong>Terugbetaling van ticket</strong>
180
181
  <p>Ticket retourneerbaar</p>
@@ -183,21 +184,21 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
183
184
  </div>
184
185
  <div className="flight__rate__modal__card__items">
185
186
  <div className="flight__rate__modal__card__item">
186
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
187
+ <Icon name="shopping-bag" width={20} height={20} />
187
188
  <div className="flight__rate__modal__card__item__wrapper">
188
189
  <strong>persoonlijke items</strong>
189
190
  <p>Gratis</p>
190
191
  </div>
191
192
  </div>
192
193
  <div className="flight__rate__modal__card__item">
193
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
194
+ <Icon name="backpack" width={20} height={20} />
194
195
  <div className="flight__rate__modal__card__item__wrapper">
195
196
  <strong>Handbagage</strong>
196
197
  <p>Gratis: 2 x 8kg</p>
197
198
  </div>
198
199
  </div>
199
200
  <div className="flight__rate__modal__card__item">
200
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
201
+ <Icon name="suitcase" width={20} height={20} />
201
202
  <div className="flight__rate__modal__card__item__wrapper">
202
203
  <strong>Ingecheckte bagage</strong>
203
204
  <p>Gratis: 2 x 32kg</p>
@@ -218,14 +219,14 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
218
219
  </div>
219
220
  <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
220
221
  <div className="flight__rate__modal__card__item">
221
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
222
+ <Icon name="ticket" width={20} height={20} />
222
223
  <div className="flight__rate__modal__card__item__wrapper">
223
224
  <strong>Wijzigingen in het ticket</strong>
224
225
  <p>Wijzigingen toestaan</p>
225
226
  </div>
226
227
  </div>
227
228
  <div className="flight__rate__modal__card__item">
228
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
229
+ <Icon name="payback" width={20} height={20} />
229
230
  <div className="flight__rate__modal__card__item__wrapper">
230
231
  <strong>Terugbetaling van ticket</strong>
231
232
  <p>Ticket retourneerbaar</p>
@@ -234,21 +235,21 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
234
235
  </div>
235
236
  <div className="flight__rate__modal__card__items">
236
237
  <div className="flight__rate__modal__card__item">
237
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
238
+ <Icon name="shopping-bag width={20} height={20}" />
238
239
  <div className="flight__rate__modal__card__item__wrapper">
239
240
  <strong>persoonlijke items</strong>
240
241
  <p>Gratis</p>
241
242
  </div>
242
243
  </div>
243
244
  <div className="flight__rate__modal__card__item">
244
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
245
+ <Icon name="backpack" width={20} height={20} />
245
246
  <div className="flight__rate__modal__card__item__wrapper">
246
247
  <strong>Handbagage</strong>
247
248
  <p>Gratis: 2 x 8kg</p>
248
249
  </div>
249
250
  </div>
250
251
  <div className="flight__rate__modal__card__item">
251
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
252
+ <Icon name="suitcase" width={20} height={20} />
252
253
  <div className="flight__rate__modal__card__item__wrapper">
253
254
  <strong>Ingecheckte bagage</strong>
254
255
  <p>Gratis: 2 x 32kg</p>
@@ -269,14 +270,14 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
269
270
  </div>
270
271
  <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
271
272
  <div className="flight__rate__modal__card__item">
272
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
273
+ <Icon name="ticket" width={20} height={20} />
273
274
  <div className="flight__rate__modal__card__item__wrapper">
274
275
  <strong>Wijzigingen in het ticket</strong>
275
276
  <p>Wijzigingen toestaan</p>
276
277
  </div>
277
278
  </div>
278
279
  <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
279
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
280
+ <Icon name="payback" width={20} height={20} />
280
281
  <div className="flight__rate__modal__card__item__wrapper">
281
282
  <strong>Terugbetaling van ticket</strong>
282
283
  <p>Ticket retourneerbaar</p>
@@ -285,49 +286,49 @@ const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
285
286
  </div>
286
287
  <div className="flight__rate__modal__card__items">
287
288
  <div className="flight__rate__modal__card__item">
288
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
289
+ <Icon name="shopping-bag" width={20} height={20} />
289
290
  <div className="flight__rate__modal__card__item__wrapper">
290
291
  <strong>persoonlijke items</strong>
291
292
  <p>Gratis</p>
292
293
  </div>
293
294
  </div>
294
295
  <div className="flight__rate__modal__card__item">
295
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
296
+ <Icon name="backpack" width={20} height={20} />
296
297
  <div className="flight__rate__modal__card__item__wrapper">
297
298
  <strong>Handbagage</strong>
298
299
  <p>Gratis: 2 x 8kg</p>
299
300
  </div>
300
301
  </div>
301
302
  <div className="flight__rate__modal__card__item">
302
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
303
+ <Icon name="suitcase" width={20} height={20} />
303
304
  <div className="flight__rate__modal__card__item__wrapper">
304
305
  <strong>Ingecheckte bagage</strong>
305
306
  <p>Gratis: 2 x 32kg</p>
306
307
  </div>
307
308
  </div>
308
309
  <div className="flight__rate__modal__card__item">
309
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#seat-selection"></use></svg>
310
+ <Icon name="seat-selection" width={20} height={20} />
310
311
  <div className="flight__rate__modal__card__item__wrapper">
311
312
  <strong>Stoelselectie</strong>
312
313
  <p>kies uw stoel in het vliegtijg</p>
313
314
  </div>
314
315
  </div>
315
316
  <div className="flight__rate__modal__card__item">
316
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#check-in"></use></svg>
317
+ <Icon name="check-in" width={20} height={20} />
317
318
  <div className="flight__rate__modal__card__item__wrapper">
318
319
  <strong>Sneller inchecken</strong>
319
320
  <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
320
321
  </div>
321
322
  </div>
322
323
  <div className="flight__rate__modal__card__item">
323
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#business-lounge"></use></svg>
324
+ <Icon name="business-lounge" width={20} height={20} />
324
325
  <div className="flight__rate__modal__card__item__wrapper">
325
326
  <strong>Zakenlunge</strong>
326
327
  <p>Ontspan voor uw vlucht</p>
327
328
  </div>
328
329
  </div>
329
330
  <div className="flight__rate__modal__card__item">
330
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#priority"></use></svg>
331
+ <Icon name="priority" width={20} height={20} />
331
332
  <div className="flight__rate__modal__card__item__wrapper">
332
333
  <strong>Prioriteit</strong>
333
334
  <p>Stap voor anderen aan boord</p>