@qite/tide-booking-component 1.4.40 → 1.4.42

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 (34) hide show
  1. package/build/build-cjs/booking-product/components/date-range-picker/calendar-day.d.ts +1 -0
  2. package/build/build-cjs/booking-wizard/components/step-route.d.ts +0 -1
  3. package/build/build-cjs/content/image-card-grid/index.d.ts +4 -0
  4. package/build/build-cjs/content/image-card-grid/types.d.ts +12 -0
  5. package/build/build-cjs/index.d.ts +2 -1
  6. package/build/build-cjs/index.js +2750 -234
  7. package/build/build-cjs/qsm/store/qsm-slice.d.ts +1 -1
  8. package/build/build-cjs/shared/components/icon.d.ts +10 -0
  9. package/build/build-esm/booking-product/components/date-range-picker/calendar-day.d.ts +1 -0
  10. package/build/build-esm/booking-wizard/components/step-route.d.ts +0 -1
  11. package/build/build-esm/content/image-card-grid/index.d.ts +4 -0
  12. package/build/build-esm/content/image-card-grid/types.d.ts +12 -0
  13. package/build/build-esm/index.d.ts +2 -1
  14. package/build/build-esm/index.js +5529 -2941
  15. package/build/build-esm/qsm/store/qsm-slice.d.ts +1 -1
  16. package/build/build-esm/shared/components/icon.d.ts +10 -0
  17. package/package.json +7 -8
  18. package/src/booking-product/components/date-range-picker/calendar-day.tsx +1 -0
  19. package/src/booking-wizard/components/step-route.tsx +0 -1
  20. package/src/booking-wizard/features/booking/booking.tsx +27 -11
  21. package/src/booking-wizard/features/confirmation/confirmation.tsx +2 -1
  22. package/src/booking-wizard/features/error/error.tsx +2 -1
  23. package/src/booking-wizard/features/flight-options/index.tsx +2 -1
  24. package/src/booking-wizard/features/product-options/options-form.tsx +2 -1
  25. package/src/booking-wizard/features/room-options/index.tsx +2 -1
  26. package/src/booking-wizard/features/summary/summary.tsx +7 -3
  27. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +2 -2
  28. package/src/content/image-card-grid/index.tsx +34 -0
  29. package/src/content/image-card-grid/types.ts +13 -0
  30. package/src/content/navbar/index.tsx +1 -1
  31. package/src/index.ts +2 -1
  32. package/src/shared/components/flyin.tsx +321 -33
  33. package/src/shared/components/icon.tsx +826 -0
  34. package/styles/components/_flyin.scss +117 -126
package/src/shared/components/flyin.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
+ import Icon from './icon';
2
3
 
3
4
  type FlyInProps = {
4
5
  isOpen: boolean;
@@ -41,28 +42,313 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
41
42
  <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
42
43
  <div className="flyin__content">
43
44
  <div className="flyin__content-title-row">
44
- <span className="flyin__content-title">Select your fare</span>
45
+ <h3 className="flyin__content-title">Select your fare</h3>
45
46
  <span className="flyin__close" onClick={() => setIsOpen(!isOpen)}>
46
- Close
47
+ <Icon name="ui-close" width={30} height={30} aria-hidden="true" />
47
48
  </span>
48
49
  </div>
49
50
 
50
51
  <div className="flyin__content-text-row">
51
- <div className="flyin__content-text-col">
52
- <span className="flyin__content-text-title-row">Departure flight BRU - VIE</span>
53
- <span className="flyin__content-text">09:10 - 11:00 (1h 50m, non-stop), 2 travellers</span>
52
+ <div className="flyin__content-text-icon-row">
53
+ <img src="https://media.tidesoftware.be/media/shared/Airlines/TB.png?height=256" className="logo" aria-hidden="true" />
54
+ {/* <span>Austrian Airlines</span> */}
55
+ <div className="flyin__content-text-col">
56
+ <span className="flyin__content-text-title-row">
57
+ <strong>Departure flight</strong> BRU - VIE
58
+ </span>
59
+ <span className="flyin__content-text">09:10 - 11:00 (1h 50m, non-stop), 2 travellers</span>
60
+ </div>
61
+ </div>
62
+
63
+ <div className="flyin__content-arrow-row">
64
+ <div className="flyin__content-arrow is-disabled" aria-disabled="true">
65
+ <Icon name="ui-arrow" className="flyin__content-arrow-icon" width={16} height={16} aria-hidden="true" />
66
+ </div>
67
+ <div className="flyin__content-arrow">
68
+ <Icon name="ui-arrow" className="flyin__content-arrow-icon flyin__content-arrow-icon--forward" width={16} height={16} aria-hidden="true" />
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <div className="flyin__content-cards-wrapper">
75
+ <div className="flyin__content-cards">
76
+ <div className="flyin__content-card flyin__content-card--selected">
77
+ <div className="flyin__content-card-top">
78
+ <span className="flyin__content-card-top-tag">Basic</span>
79
+ <span className="flyin__content-card-top-price">€129.00</span>
80
+ </div>
81
+
82
+ <div className="flyin__content-card-middle">
83
+ <div className="flyin__content-card-middle-rows">
84
+ <div className="flyin__content-card-middle-row">
85
+ <span className="flyin__content-card-middle-row-left">Number of travellers</span>
86
+ <span className="flyin__content-card-middle-row-right">2</span>
87
+ </div>
88
+
89
+ <div className="flyin__content-card-middle-row">
90
+ <span className="flyin__content-card-middle-row-left">Travel class</span>
91
+ <span className="flyin__content-card-middle-row-right">Economy (Light)</span>
92
+ </div>
93
+
94
+ <div className="flyin__content-card-middle-row">
95
+ <span className="flyin__content-card-middle-row-left">Booking class</span>
96
+ <span className="flyin__content-card-middle-row-right">K</span>
97
+ </div>
98
+
99
+ <div className="flyin__content-card-middle-row">
100
+ <span className="flyin__content-card-middle-row-left">Fare basis</span>
101
+ <span className="flyin__content-card-middle-row-right">KOWBE</span>
102
+ </div>
103
+
104
+ <div className="flyin__content-data">
105
+ <div className="flyin__content-data__item">
106
+ <div className="flyin__content-data__item-icon">
107
+ <Icon name="ui-bag" width={20} aria-hidden="true" />
108
+ </div>
109
+ <div className="flyin__content-data__item-content">
110
+ <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
111
+ <div className="flyin__content-data__item-content-description">1 x 8kg</div>
112
+ </div>
113
+ </div>
114
+
115
+ <div className="flyin__content-data__item">
116
+ <div className="flyin__content-data__item-icon">
117
+ <Icon name="ui-suitcase" width={20} />
118
+ </div>
119
+ <div className="flyin__content-data__item-content">
120
+ <div className="flyin__content-data__item-content-title">Checked luggage</div>
121
+ <div className="flyin__content-data__item-content-description">Not included</div>
122
+ </div>
123
+ </div>
124
+
125
+ <div className="flyin__content-data__item">
126
+ <div className="flyin__content-data__item-icon">
127
+ <Icon name="ui-seat" width={20} />
128
+ </div>
129
+ <div className="flyin__content-data__item-content">
130
+ <div className="flyin__content-data__item-content-title">Seat selection</div>
131
+ <div className="flyin__content-data__item-content-description">Not included</div>
132
+ </div>
133
+ </div>
134
+
135
+ <div className="flyin__content-data__item">
136
+ <div className="flyin__content-data__item-icon">
137
+ <Icon name="ui-refund" width={20} />
138
+ </div>
139
+ <div className="flyin__content-data__item-content">
140
+ <div className="flyin__content-data__item-content-title">Refund</div>
141
+ <div className="flyin__content-data__item-content-description">Not allowed</div>
142
+ </div>
143
+ </div>
144
+
145
+ <div className="flyin__content-data__item">
146
+ <div className="flyin__content-data__item-icon flyin__content-data__item-icon--other">
147
+ <Icon name="ui-else" width={20} />
148
+ </div>
149
+ <div className="flyin__content-data__item-content">
150
+ <div className="flyin__content-data__item-content-title">Other</div>
151
+ <ul className="flyin__content-data__item-content-description flyin__content-data__item-content-description--list">
152
+ <li>Boarding group last</li>
153
+ <li>No changes</li>
154
+ </ul>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <div className="flyin__content-card-button">
161
+ <div className="cta cta--selected">Selected</div>
162
+ </div>
163
+ </div>
164
+
165
+ <div className="flyin__content-card">
166
+ <div className="flyin__content-card-top">
167
+ <span className="flyin__content-card-top-tag">Standard</span>
168
+ <span className="flyin__content-card-top-price">€169.00</span>
169
+ </div>
170
+
171
+ <div className="flyin__content-card-middle">
172
+ <div className="flyin__content-card-middle-rows">
173
+ <div className="flyin__content-card-middle-row">
174
+ <span className="flyin__content-card-middle-row-left">Number of travellers</span>
175
+ <span className="flyin__content-card-middle-row-right">2</span>
176
+ </div>
177
+
178
+ <div className="flyin__content-card-middle-row">
179
+ <span className="flyin__content-card-middle-row-left">Travel class</span>
180
+ <span className="flyin__content-card-middle-row-right">Economy (Standard)</span>
181
+ </div>
182
+
183
+ <div className="flyin__content-card-middle-row">
184
+ <span className="flyin__content-card-middle-row-left">Booking class</span>
185
+ <span className="flyin__content-card-middle-row-right">M</span>
186
+ </div>
187
+
188
+ <div className="flyin__content-card-middle-row">
189
+ <span className="flyin__content-card-middle-row-left">Fare basis</span>
190
+ <span className="flyin__content-card-middle-row-right">MOWBE</span>
191
+ </div>
192
+
193
+ <div className="flyin__content-data">
194
+ <div className="flyin__content-data__item">
195
+ <div className="flyin__content-data__item-icon">
196
+ <Icon name="ui-bag" width={20} />
197
+ </div>
198
+ <div className="flyin__content-data__item-content">
199
+ <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
200
+ <div className="flyin__content-data__item-content-description">1 x 8kg</div>
201
+ </div>
202
+ </div>
203
+
204
+ <div className="flyin__content-data__item">
205
+ <div className="flyin__content-data__item-icon">
206
+ <Icon name="ui-suitcase" width={20} />
207
+ </div>
208
+ <div className="flyin__content-data__item-content">
209
+ <div className="flyin__content-data__item-content-title">Checked luggage</div>
210
+ <div className="flyin__content-data__item-content-description">1 x 23kg</div>
211
+ </div>
212
+ </div>
213
+
214
+ <div className="flyin__content-data__item">
215
+ <div className="flyin__content-data__item-icon">
216
+ <Icon name="ui-seat" width={20} />
217
+ </div>
218
+ <div className="flyin__content-data__item-content">
219
+ <div className="flyin__content-data__item-content-title">Seat selection</div>
220
+ <div className="flyin__content-data__item-content-description">Included</div>
221
+ </div>
222
+ </div>
223
+
224
+ <div className="flyin__content-data__item">
225
+ <div className="flyin__content-data__item-icon">
226
+ <Icon name="ui-priority" width={20} />
227
+ </div>
228
+ <div className="flyin__content-data__item-content">
229
+ <div className="flyin__content-data__item-content-title">Priority</div>
230
+ <div className="flyin__content-data__item-content-description">Fast check-in</div>
231
+ </div>
232
+ </div>
233
+
234
+ <div className="flyin__content-data__item">
235
+ <div className="flyin__content-data__item-icon">
236
+ <Icon name="ui-else" width={20} />
237
+ </div>
238
+ <div className="flyin__content-data__item-content">
239
+ <div className="flyin__content-data__item-content-title">Other</div>
240
+ <ul className="flyin__content-data__item-content-description flyin__content-data__item-content-description--list">
241
+ <li>Changes allowed with fee</li>
242
+ </ul>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ <div className="flyin__content-card-button">
249
+ <div className="cta cta--select">Select</div>
250
+ </div>
54
251
  </div>
55
252
 
253
+ <div className="flyin__content-card">
254
+ <div className="flyin__content-card-top">
255
+ <span className="flyin__content-card-top-tag">Flex</span>
256
+ <span className="flyin__content-card-top-price">€219.00</span>
257
+ </div>
258
+
259
+ <div className="flyin__content-card-middle">
260
+ <div className="flyin__content-card-middle-rows">
261
+ <div className="flyin__content-card-middle-row">
262
+ <span className="flyin__content-card-middle-row-left">Number of travellers</span>
263
+ <span className="flyin__content-card-middle-row-right">2</span>
264
+ </div>
265
+
266
+ <div className="flyin__content-card-middle-row">
267
+ <span className="flyin__content-card-middle-row-left">Travel class</span>
268
+ <span className="flyin__content-card-middle-row-right">Economy (Flex)</span>
269
+ </div>
270
+
271
+ <div className="flyin__content-card-middle-row">
272
+ <span className="flyin__content-card-middle-row-left">Booking class</span>
273
+ <span className="flyin__content-card-middle-row-right">Y</span>
274
+ </div>
275
+
276
+ <div className="flyin__content-card-middle-row">
277
+ <span className="flyin__content-card-middle-row-left">Fare basis</span>
278
+ <span className="flyin__content-card-middle-row-right">YOWBE</span>
279
+ </div>
280
+
281
+ <div className="flyin__content-data">
282
+ <div className="flyin__content-data__item">
283
+ <div className="flyin__content-data__item-icon">
284
+ <Icon name="ui-bag" width={20} />
285
+ </div>
286
+ <div className="flyin__content-data__item-content">
287
+ <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
288
+ <div className="flyin__content-data__item-content-description">1 x 8kg</div>
289
+ </div>
290
+ </div>
291
+
292
+ <div className="flyin__content-data__item">
293
+ <div className="flyin__content-data__item-icon">
294
+ <Icon name="ui-suitcase" width={20} />
295
+ </div>
296
+ <div className="flyin__content-data__item-content">
297
+ <div className="flyin__content-data__item-content-title">Checked luggage</div>
298
+ <div className="flyin__content-data__item-content-description">1 x 23kg</div>
299
+ </div>
300
+ </div>
301
+
302
+ <div className="flyin__content-data__item">
303
+ <div className="flyin__content-data__item-icon">
304
+ <Icon name="ui-lounge" width={20} />
305
+ </div>
306
+ <div className="flyin__content-data__item-content">
307
+ <div className="flyin__content-data__item-content-title">Lounge</div>
308
+ <div className="flyin__content-data__item-content-description">Included</div>
309
+ </div>
310
+ </div>
311
+
312
+ <div className="flyin__content-data__item">
313
+ <div className="flyin__content-data__item-icon">
314
+ <Icon name="ui-refund" width={20} />
315
+ </div>
316
+ <div className="flyin__content-data__item-content">
317
+ <div className="flyin__content-data__item-content-title">Refund</div>
318
+ <div className="flyin__content-data__item-content-description">Allowed with fee</div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div className="flyin__content-card-button">
326
+ <div className="cta cta--select">Select</div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div className="flyin__content">
333
+ <div className="flyin__content-text-row">
56
334
  <div className="flyin__content-text-icon-row">
57
- <span className="logo" aria-hidden="true"></span>
58
- <span>Austrian Airlines</span>
335
+ <img src="https://media.tidesoftware.be/media/shared/Airlines/SN.png?height=256" className="logo" aria-hidden="true" />
336
+ {/* <span>Austrian Airlines</span> */}
337
+ <div className="flyin__content-text-col">
338
+ <span className="flyin__content-text-title-row">
339
+ <strong>Return flight</strong> VIE - BRU
340
+ </span>
341
+ <span className="flyin__content-text">09:10 - 11:00 (1h 50m, non-stop), 2 travellers</span>
342
+ </div>
59
343
  </div>
60
344
 
61
345
  <div className="flyin__content-arrow-row">
62
346
  <div className="flyin__content-arrow is-disabled" aria-disabled="true">
63
- ◀
347
+ <Icon name="ui-arrow" className="flyin__content-arrow-icon" width={16} height={16} aria-hidden="true" />
348
+ </div>
349
+ <div className="flyin__content-arrow">
350
+ <Icon name="ui-arrow" className="flyin__content-arrow-icon flyin__content-arrow-icon--forward" width={16} height={16} aria-hidden="true" />
64
351
  </div>
65
- <div className="flyin__content-arrow">▶</div>
66
352
  </div>
67
353
  </div>
68
354
  </div>
@@ -71,8 +357,8 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
71
357
  <div className="flyin__content-cards">
72
358
  <div className="flyin__content-card flyin__content-card--selected">
73
359
  <div className="flyin__content-card-top">
74
- <span className="flyin__content-card-top-price">€129.00</span>
75
360
  <span className="flyin__content-card-top-tag">Basic</span>
361
+ <span className="flyin__content-card-top-price">€129.00</span>
76
362
  </div>
77
363
 
78
364
  <div className="flyin__content-card-middle">
@@ -100,7 +386,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
100
386
  <div className="flyin__content-data">
101
387
  <div className="flyin__content-data__item">
102
388
  <div className="flyin__content-data__item-icon">
103
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
389
+ <Icon name="ui-bag" width={20} aria-hidden="true" />
104
390
  </div>
105
391
  <div className="flyin__content-data__item-content">
106
392
  <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
@@ -110,7 +396,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
110
396
 
111
397
  <div className="flyin__content-data__item">
112
398
  <div className="flyin__content-data__item-icon">
113
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
399
+ <Icon name="ui-suitcase" width={20} />
114
400
  </div>
115
401
  <div className="flyin__content-data__item-content">
116
402
  <div className="flyin__content-data__item-content-title">Checked luggage</div>
@@ -120,7 +406,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
120
406
 
121
407
  <div className="flyin__content-data__item">
122
408
  <div className="flyin__content-data__item-icon">
123
- <img src="icons/seat-selection.svg" width="16" height="16" alt="" />
409
+ <Icon name="ui-seat" width={20} />
124
410
  </div>
125
411
  <div className="flyin__content-data__item-content">
126
412
  <div className="flyin__content-data__item-content-title">Seat selection</div>
@@ -130,7 +416,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
130
416
 
131
417
  <div className="flyin__content-data__item">
132
418
  <div className="flyin__content-data__item-icon">
133
- <img src="icons/ticket-change.svg" width="16" height="16" alt="" />
419
+ <Icon name="ui-refund" width={20} />
134
420
  </div>
135
421
  <div className="flyin__content-data__item-content">
136
422
  <div className="flyin__content-data__item-content-title">Refund</div>
@@ -140,7 +426,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
140
426
 
141
427
  <div className="flyin__content-data__item">
142
428
  <div className="flyin__content-data__item-icon flyin__content-data__item-icon--other">
143
- <img src="icons/other-icon.svg" width="20" height="20" alt="" />
429
+ <Icon name="ui-else" width={20} />
144
430
  </div>
145
431
  <div className="flyin__content-data__item-content">
146
432
  <div className="flyin__content-data__item-content-title">Other</div>
@@ -153,16 +439,15 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
153
439
  </div>
154
440
  </div>
155
441
  </div>
156
-
157
- <div className="flyin__content-card-bottom">
158
- <span>Current selection</span>
442
+ <div className="flyin__content-card-button">
443
+ <div className="cta cta--selected">Selected</div>
159
444
  </div>
160
445
  </div>
161
446
 
162
447
  <div className="flyin__content-card">
163
448
  <div className="flyin__content-card-top">
164
- <span className="flyin__content-card-top-price">€169.00</span>
165
449
  <span className="flyin__content-card-top-tag">Standard</span>
450
+ <span className="flyin__content-card-top-price">€169.00</span>
166
451
  </div>
167
452
 
168
453
  <div className="flyin__content-card-middle">
@@ -190,7 +475,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
190
475
  <div className="flyin__content-data">
191
476
  <div className="flyin__content-data__item">
192
477
  <div className="flyin__content-data__item-icon">
193
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
478
+ <Icon name="ui-bag" width={20} />
194
479
  </div>
195
480
  <div className="flyin__content-data__item-content">
196
481
  <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
@@ -200,7 +485,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
200
485
 
201
486
  <div className="flyin__content-data__item">
202
487
  <div className="flyin__content-data__item-icon">
203
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
488
+ <Icon name="ui-suitcase" width={20} />
204
489
  </div>
205
490
  <div className="flyin__content-data__item-content">
206
491
  <div className="flyin__content-data__item-content-title">Checked luggage</div>
@@ -210,7 +495,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
210
495
 
211
496
  <div className="flyin__content-data__item">
212
497
  <div className="flyin__content-data__item-icon">
213
- <img src="icons/seat-selection.svg" width="16" height="16" alt="" />
498
+ <Icon name="ui-seat" width={20} />
214
499
  </div>
215
500
  <div className="flyin__content-data__item-content">
216
501
  <div className="flyin__content-data__item-content-title">Seat selection</div>
@@ -220,7 +505,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
220
505
 
221
506
  <div className="flyin__content-data__item">
222
507
  <div className="flyin__content-data__item-icon">
223
- <img src="icons/check-in.svg" width="16" height="16" alt="" />
508
+ <Icon name="ui-priority" width={20} />
224
509
  </div>
225
510
  <div className="flyin__content-data__item-content">
226
511
  <div className="flyin__content-data__item-content-title">Priority</div>
@@ -230,7 +515,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
230
515
 
231
516
  <div className="flyin__content-data__item">
232
517
  <div className="flyin__content-data__item-icon">
233
- <img src="icons/other-icon.svg" width="16" height="16" alt="" />
518
+ <Icon name="ui-else" width={20} />
234
519
  </div>
235
520
  <div className="flyin__content-data__item-content">
236
521
  <div className="flyin__content-data__item-content-title">Other</div>
@@ -242,14 +527,15 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
242
527
  </div>
243
528
  </div>
244
529
  </div>
245
-
246
- <div className="flyin__content-card-button">Select</div>
530
+ <div className="flyin__content-card-button">
531
+ <div className="cta cta--select">Select</div>
532
+ </div>
247
533
  </div>
248
534
 
249
535
  <div className="flyin__content-card">
250
536
  <div className="flyin__content-card-top">
251
- <span className="flyin__content-card-top-price">€219.00</span>
252
537
  <span className="flyin__content-card-top-tag">Flex</span>
538
+ <span className="flyin__content-card-top-price">€219.00</span>
253
539
  </div>
254
540
 
255
541
  <div className="flyin__content-card-middle">
@@ -277,7 +563,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
277
563
  <div className="flyin__content-data">
278
564
  <div className="flyin__content-data__item">
279
565
  <div className="flyin__content-data__item-icon">
280
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
566
+ <Icon name="ui-bag" width={20} />
281
567
  </div>
282
568
  <div className="flyin__content-data__item-content">
283
569
  <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
@@ -287,7 +573,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
287
573
 
288
574
  <div className="flyin__content-data__item">
289
575
  <div className="flyin__content-data__item-icon">
290
- <img src="icons/search-flightcard-suitcase-icon.svg" width="16" height="16" alt="" />
576
+ <Icon name="ui-suitcase" width={20} />
291
577
  </div>
292
578
  <div className="flyin__content-data__item-content">
293
579
  <div className="flyin__content-data__item-content-title">Checked luggage</div>
@@ -297,7 +583,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
297
583
 
298
584
  <div className="flyin__content-data__item">
299
585
  <div className="flyin__content-data__item-icon">
300
- <img src="icons/lounge.svg" width="16" height="16" alt="" />
586
+ <Icon name="ui-lounge" width={20} />
301
587
  </div>
302
588
  <div className="flyin__content-data__item-content">
303
589
  <div className="flyin__content-data__item-content-title">Lounge</div>
@@ -307,7 +593,7 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
307
593
 
308
594
  <div className="flyin__content-data__item">
309
595
  <div className="flyin__content-data__item-icon">
310
- <img src="icons/ticket-change.svg" width="16" height="16" alt="" />
596
+ <Icon name="ui-refund" width={20} />
311
597
  </div>
312
598
  <div className="flyin__content-data__item-content">
313
599
  <div className="flyin__content-data__item-content-title">Refund</div>
@@ -318,13 +604,15 @@ const FlyIn: React.FC<FlyInProps> = ({ isOpen, setIsOpen, className = '', onPane
318
604
  </div>
319
605
  </div>
320
606
 
321
- <div className="flyin__content-card-button">Select</div>
607
+ <div className="flyin__content-card-button">
608
+ <div className="cta cta--select">Select</div>
609
+ </div>
322
610
  </div>
323
611
  </div>
324
612
  </div>
325
613
 
326
614
  <div className="flyin__button-wrapper">
327
- <button className="flyin__button">Next</button>
615
+ <button className="cta cta--select">Next</button>
328
616
  </div>
329
617
  </div>
330
618
  </div>