@qite/tide-booking-component 1.2.0 → 1.2.1

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 (70) 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/features/flight-options/flight-option-flight.d.ts +1 -1
  7. package/build/build-cjs/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  8. package/build/build-cjs/booking-wizard/types.d.ts +1 -0
  9. package/build/build-cjs/index.js +703 -451
  10. package/build/build-cjs/shared/utils/localization-util.d.ts +238 -3
  11. package/build/build-esm/booking-product/components/footer.d.ts +1 -0
  12. package/build/build-esm/booking-product/components/icon.d.ts +2 -0
  13. package/build/build-esm/booking-product/types.d.ts +2 -1
  14. package/build/build-esm/booking-wizard/components/icon.d.ts +2 -0
  15. package/build/build-esm/{booking-product → booking-wizard}/components/multi-range-filter.d.ts +0 -1
  16. package/build/build-esm/booking-wizard/features/flight-options/flight-option-flight.d.ts +1 -1
  17. package/build/build-esm/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  18. package/build/build-esm/booking-wizard/types.d.ts +1 -0
  19. package/build/build-esm/index.js +704 -452
  20. package/build/build-esm/shared/utils/localization-util.d.ts +238 -3
  21. package/package.json +1 -1
  22. package/src/booking-product/components/amount-input.tsx +8 -20
  23. package/src/booking-product/components/date-range-picker/calendar.tsx +3 -3
  24. package/src/booking-product/components/dates.tsx +26 -20
  25. package/src/booking-product/components/footer.tsx +4 -2
  26. package/src/booking-product/components/header.tsx +4 -4
  27. package/src/booking-product/components/icon.tsx +176 -11
  28. package/src/booking-product/components/product.tsx +31 -16
  29. package/src/{shared → booking-product}/components/rating.tsx +3 -3
  30. package/src/booking-product/components/rooms.tsx +116 -113
  31. package/src/booking-product/settings-context.ts +0 -1
  32. package/src/booking-product/types.ts +2 -1
  33. package/src/booking-wizard/components/icon.tsx +42 -15
  34. package/src/{booking-product → booking-wizard}/components/multi-range-filter.tsx +0 -1
  35. package/src/booking-wizard/declarations.d.ts +4 -0
  36. package/src/booking-wizard/features/booking/booking-self-contained.tsx +3 -2
  37. package/src/booking-wizard/features/booking/booking.tsx +3 -2
  38. package/src/booking-wizard/features/confirmation/confirmation.tsx +8 -4
  39. package/src/booking-wizard/features/flight-options/flight-filter.tsx +7 -6
  40. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +29 -28
  41. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +193 -192
  42. package/src/booking-wizard/features/room-options/index.tsx +1 -5
  43. package/src/booking-wizard/features/summary/summary.tsx +23 -26
  44. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +0 -2
  45. package/src/booking-wizard/features/travelers-form/validate-form.ts +1 -1
  46. package/src/booking-wizard/index.tsx +2 -2
  47. package/src/booking-wizard/types.ts +1 -0
  48. package/src/shared/tide-sprites.svg +117 -0
  49. package/src/shared/translations/fr-BE.json +229 -222
  50. package/src/shared/translations/nl-BE.json +229 -222
  51. package/styles/booking-product-variables.scss +288 -0
  52. package/styles/booking-product.scss +440 -0
  53. package/styles/booking-wizard-variables.scss +0 -0
  54. package/styles/booking-wizard.scss +4 -0
  55. package/styles/components/_animations.scss +39 -0
  56. package/styles/components/_base.scss +106 -0
  57. package/styles/components/_button.scss +185 -0
  58. package/styles/components/_cta.scss +67 -0
  59. package/styles/components/_date-range-picker.scss +224 -0
  60. package/styles/components/_decrement-increment.scss +37 -0
  61. package/styles/components/_dropdown.scss +74 -0
  62. package/styles/components/_form.scss +136 -0
  63. package/styles/components/_loader.scss +71 -0
  64. package/styles/components/_mixins.scss +518 -0
  65. package/styles/components/_placeholders.scss +166 -0
  66. package/styles/components/_qsm.scss +20 -0
  67. package/styles/components/_variables.scss +89 -0
  68. package/src/booking-product/components/multi-range-filter.css +0 -115
  69. /package/build/build-cjs/{shared → booking-product}/components/rating.d.ts +0 -0
  70. /package/build/build-esm/{shared → booking-product}/components/rating.d.ts +0 -0
package/src/booking-wizard/features/flight-options/flight-option-modal.tsx CHANGED
@@ -1,213 +1,214 @@
1
1
 
2
- import React from "react";
2
+ import React from "react";
3
+ import Icon from "../../components/icon";
3
4
 
4
- const FlightOptionModal = ({}) => {
5
+ const FlightOptionModal = ({ }) => {
5
6
 
6
-
7
- return (
8
-
9
- <div className="flight__rate__modal__container"> {/* add "flight__rate__modal__container--active" to show modal */}
10
- <div className="flight__rate__modal">
11
- <div className="flight__rate__modal__header">
12
- <h3 className="flight__rate__modal__header__title">Selecteer een tarief</h3>
13
- <button className="flight__rate__modal__header__close">
14
- <svg width={18} height={18}><use href="/icons/svg-sprite.svg#close"></use></svg>
15
- </button>
16
- </div>
17
- <div className="flight__rate__modal__tabs">
18
- <button className="flight__rate__modal__tab flight__rate__modal__tab--active">Economy / Economy premium</button>
19
- <button className="flight__rate__modal__tab">Business / Business premium</button>
20
- </div>
21
- <div className="flight__rate__modal__content">
22
- <div className="flight__rate__modal__card">
23
- <div className="flight__rate__modal__card__wrapper">
24
- <div className="flight__rate__modal__card__header">
25
- <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
26
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
27
- </div>
28
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
29
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
30
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
31
- <div className="flight__rate__modal__card__item__wrapper">
32
- <strong>Wijzigingen in het ticket</strong>
33
- <p>Wijzigingen toestaan</p>
34
- </div>
35
- </div>
36
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
37
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
38
- <div className="flight__rate__modal__card__item__wrapper">
39
- <strong>Terugbetaling van ticket</strong>
40
- <p>Ticket retourneerbaar</p>
41
- </div>
42
- </div>
43
- </div>
44
- <div className="flight__rate__modal__card__items">
45
- <div className="flight__rate__modal__card__item">
46
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
47
- <div className="flight__rate__modal__card__item__wrapper">
48
- <strong>persoonlijke items</strong>
49
- <p>Gratis</p>
50
- </div>
51
- </div>
52
- <div className="flight__rate__modal__card__item">
53
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
54
- <div className="flight__rate__modal__card__item__wrapper">
55
- <strong>Handbagage</strong>
56
- <p>Gratis: 2 x 8kg</p>
57
- </div>
58
- </div>
59
- <div className="flight__rate__modal__card__item">
60
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
61
- <div className="flight__rate__modal__card__item__wrapper">
62
- <strong>Ingecheckte bagage</strong>
63
- <p>Gratis: 2 x 32kg</p>
64
- </div>
7
+
8
+ return (
9
+
10
+ <div className="flight__rate__modal__container"> {/* add "flight__rate__modal__container--active" to show modal */}
11
+ <div className="flight__rate__modal">
12
+ <div className="flight__rate__modal__header">
13
+ <h3 className="flight__rate__modal__header__title">Selecteer een tarief</h3>
14
+ <button className="flight__rate__modal__header__close">
15
+ <Icon name="close" width={18} height={18} />
16
+ </button>
17
+ </div>
18
+ <div className="flight__rate__modal__tabs">
19
+ <button className="flight__rate__modal__tab flight__rate__modal__tab--active">Economy / Economy premium</button>
20
+ <button className="flight__rate__modal__tab">Business / Business premium</button>
21
+ </div>
22
+ <div className="flight__rate__modal__content">
23
+ <div className="flight__rate__modal__card">
24
+ <div className="flight__rate__modal__card__wrapper">
25
+ <div className="flight__rate__modal__card__header">
26
+ <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
27
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
28
+ </div>
29
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
30
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
31
+ <Icon name="ticket" width={20} height={20} />
32
+ <div className="flight__rate__modal__card__item__wrapper">
33
+ <strong>Wijzigingen in het ticket</strong>
34
+ <p>Wijzigingen toestaan</p>
35
+ </div>
36
+ </div>
37
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
38
+ <Icon name="payback" width={20} height={20} />
39
+ <div className="flight__rate__modal__card__item__wrapper">
40
+ <strong>Terugbetaling van ticket</strong>
41
+ <p>Ticket retourneerbaar</p>
65
42
  </div>
66
43
  </div>
67
44
  </div>
68
- <div className="flight__rate__modal__card__footer">
69
- <button className="cta cta--secondary">Selecteer</button>
70
- <span className="price price--increase">+ €2460,00</span>
45
+ <div className="flight__rate__modal__card__items">
46
+ <div className="flight__rate__modal__card__item">
47
+ <Icon name="shopping-bag" width={20} height={20} />
48
+ <div className="flight__rate__modal__card__item__wrapper">
49
+ <strong>persoonlijke items</strong>
50
+ <p>Gratis</p>
51
+ </div>
52
+ </div>
53
+ <div className="flight__rate__modal__card__item">
54
+ <Icon name="backpack" width={20} height={20} />
55
+ <div className="flight__rate__modal__card__item__wrapper">
56
+ <strong>Handbagage</strong>
57
+ <p>Gratis: 2 x 8kg</p>
58
+ </div>
59
+ </div>
60
+ <div className="flight__rate__modal__card__item">
61
+ <Icon name="suitcase" width={20} height={20} />
62
+ <div className="flight__rate__modal__card__item__wrapper">
63
+ <strong>Ingecheckte bagage</strong>
64
+ <p>Gratis: 2 x 32kg</p>
65
+ </div>
66
+ </div>
71
67
  </div>
72
68
  </div>
73
- <div className="flight__rate__modal__card flight__rate__modal__card--premium">
74
- <div className="flight__rate__modal__card__wrapper">
75
- <div className="flight__rate__modal__card__header">
76
- <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
77
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
78
- </div>
79
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
80
- <div className="flight__rate__modal__card__item">
81
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
82
- <div className="flight__rate__modal__card__item__wrapper">
83
- <strong>Wijzigingen in het ticket</strong>
84
- <p>Wijzigingen toestaan</p>
85
- </div>
86
- </div>
87
- <div className="flight__rate__modal__card__item">
88
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
89
- <div className="flight__rate__modal__card__item__wrapper">
90
- <strong>Terugbetaling van ticket</strong>
91
- <p>Ticket retourneerbaar</p>
92
- </div>
93
- </div>
94
- </div>
95
- <div className="flight__rate__modal__card__items">
96
- <div className="flight__rate__modal__card__item">
97
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
98
- <div className="flight__rate__modal__card__item__wrapper">
99
- <strong>persoonlijke items</strong>
100
- <p>Gratis</p>
101
- </div>
102
- </div>
103
- <div className="flight__rate__modal__card__item">
104
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
105
- <div className="flight__rate__modal__card__item__wrapper">
106
- <strong>Handbagage</strong>
107
- <p>Gratis: 2 x 8kg</p>
108
- </div>
109
- </div>
110
- <div className="flight__rate__modal__card__item">
111
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
112
- <div className="flight__rate__modal__card__item__wrapper">
113
- <strong>Ingecheckte bagage</strong>
114
- <p>Gratis: 2 x 32kg</p>
115
- </div>
69
+ <div className="flight__rate__modal__card__footer">
70
+ <button className="cta cta--secondary">Selecteer</button>
71
+ <span className="price price--increase">+ €2460,00</span>
72
+ </div>
73
+ </div>
74
+ <div className="flight__rate__modal__card flight__rate__modal__card--premium">
75
+ <div className="flight__rate__modal__card__wrapper">
76
+ <div className="flight__rate__modal__card__header">
77
+ <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
78
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
79
+ </div>
80
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
81
+ <div className="flight__rate__modal__card__item">
82
+ <Icon name="ticket" width={20} height={20} />
83
+ <div className="flight__rate__modal__card__item__wrapper">
84
+ <strong>Wijzigingen in het ticket</strong>
85
+ <p>Wijzigingen toestaan</p>
86
+ </div>
87
+ </div>
88
+ <div className="flight__rate__modal__card__item">
89
+ <Icon name="payback" width={20} height={20} />
90
+ <div className="flight__rate__modal__card__item__wrapper">
91
+ <strong>Terugbetaling van ticket</strong>
92
+ <p>Ticket retourneerbaar</p>
116
93
  </div>
117
94
  </div>
118
95
  </div>
119
- <div className="flight__rate__modal__card__footer">
120
- <button className="cta cta--secondary">Selecteer</button>
121
- <span className="price price--increase">+ €2460,00</span>
96
+ <div className="flight__rate__modal__card__items">
97
+ <div className="flight__rate__modal__card__item">
98
+ <Icon name="shopping-bag" width={20} height={20} />
99
+ <div className="flight__rate__modal__card__item__wrapper">
100
+ <strong>persoonlijke items</strong>
101
+ <p>Gratis</p>
102
+ </div>
103
+ </div>
104
+ <div className="flight__rate__modal__card__item">
105
+ <Icon name="backpack" width={20} height={20} />
106
+ <div className="flight__rate__modal__card__item__wrapper">
107
+ <strong>Handbagage</strong>
108
+ <p>Gratis: 2 x 8kg</p>
109
+ </div>
110
+ </div>
111
+ <div className="flight__rate__modal__card__item">
112
+ <Icon name="suitcase" width={20} height={20} />
113
+ <div className="flight__rate__modal__card__item__wrapper">
114
+ <strong>Ingecheckte bagage</strong>
115
+ <p>Gratis: 2 x 32kg</p>
116
+ </div>
117
+ </div>
122
118
  </div>
123
119
  </div>
124
- <div className="flight__rate__modal__card flight__rate__modal__card--business">
125
- <div className="flight__rate__modal__card__wrapper">
126
- <div className="flight__rate__modal__card__header">
127
- <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
128
- <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
129
- </div>
130
- <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
131
- <div className="flight__rate__modal__card__item">
132
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
133
- <div className="flight__rate__modal__card__item__wrapper">
134
- <strong>Wijzigingen in het ticket</strong>
135
- <p>Wijzigingen toestaan</p>
136
- </div>
137
- </div>
138
- <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
139
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
140
- <div className="flight__rate__modal__card__item__wrapper">
141
- <strong>Terugbetaling van ticket</strong>
142
- <p>Ticket retourneerbaar</p>
143
- </div>
144
- </div>
145
- </div>
146
- <div className="flight__rate__modal__card__items">
147
- <div className="flight__rate__modal__card__item">
148
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
149
- <div className="flight__rate__modal__card__item__wrapper">
150
- <strong>persoonlijke items</strong>
151
- <p>Gratis</p>
152
- </div>
153
- </div>
154
- <div className="flight__rate__modal__card__item">
155
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
156
- <div className="flight__rate__modal__card__item__wrapper">
157
- <strong>Handbagage</strong>
158
- <p>Gratis: 2 x 8kg</p>
159
- </div>
160
- </div>
161
- <div className="flight__rate__modal__card__item">
162
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
163
- <div className="flight__rate__modal__card__item__wrapper">
164
- <strong>Ingecheckte bagage</strong>
165
- <p>Gratis: 2 x 32kg</p>
166
- </div>
167
- </div>
168
- <div className="flight__rate__modal__card__item">
169
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#seat-selection"></use></svg>
170
- <div className="flight__rate__modal__card__item__wrapper">
171
- <strong>Stoelselectie</strong>
172
- <p>kies uw stoel in het vliegtijg</p>
173
- </div>
174
- </div>
175
- <div className="flight__rate__modal__card__item">
176
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#check-in"></use></svg>
177
- <div className="flight__rate__modal__card__item__wrapper">
178
- <strong>Sneller inchecken</strong>
179
- <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
180
- </div>
181
- </div>
182
- <div className="flight__rate__modal__card__item">
183
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#business-lounge"></use></svg>
184
- <div className="flight__rate__modal__card__item__wrapper">
185
- <strong>Zakenlunge</strong>
186
- <p>Ontspan voor uw vlucht</p>
187
- </div>
188
- </div>
189
- <div className="flight__rate__modal__card__item">
190
- <svg width={20} height={20}><use href="/icons/svg-sprite.svg#priority"></use></svg>
191
- <div className="flight__rate__modal__card__item__wrapper">
192
- <strong>Prioriteit</strong>
193
- <p>Stap voor anderen aan boord</p>
194
- </div>
120
+ <div className="flight__rate__modal__card__footer">
121
+ <button className="cta cta--secondary">Selecteer</button>
122
+ <span className="price price--increase">+ €2460,00</span>
123
+ </div>
124
+ </div>
125
+ <div className="flight__rate__modal__card flight__rate__modal__card--business">
126
+ <div className="flight__rate__modal__card__wrapper">
127
+ <div className="flight__rate__modal__card__header">
128
+ <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
129
+ <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
130
+ </div>
131
+ <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
132
+ <div className="flight__rate__modal__card__item">
133
+ <Icon name="ticket" width={20} height={20} />
134
+ <div className="flight__rate__modal__card__item__wrapper">
135
+ <strong>Wijzigingen in het ticket</strong>
136
+ <p>Wijzigingen toestaan</p>
137
+ </div>
138
+ </div>
139
+ <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
140
+ <Icon name="payback" width={20} height={20} />
141
+ <div className="flight__rate__modal__card__item__wrapper">
142
+ <strong>Terugbetaling van ticket</strong>
143
+ <p>Ticket retourneerbaar</p>
195
144
  </div>
196
145
  </div>
197
146
  </div>
198
- <div className="flight__rate__modal__card__footer">
199
- <button className="cta cta--secondary">Selecteer</button>
200
- <span className="price price--increase">+ €2460,00</span>
147
+ <div className="flight__rate__modal__card__items">
148
+ <div className="flight__rate__modal__card__item">
149
+ <Icon name="shopping-bag"width={20} height={20} />
150
+ <div className="flight__rate__modal__card__item__wrapper">
151
+ <strong>persoonlijke items</strong>
152
+ <p>Gratis</p>
153
+ </div>
154
+ </div>
155
+ <div className="flight__rate__modal__card__item">
156
+ <Icon name="backpack" width={20} height={20} />
157
+ <div className="flight__rate__modal__card__item__wrapper">
158
+ <strong>Handbagage</strong>
159
+ <p>Gratis: 2 x 8kg</p>
160
+ </div>
161
+ </div>
162
+ <div className="flight__rate__modal__card__item">
163
+ <Icon name="suitcase" width={20} height={20}/>
164
+ <div className="flight__rate__modal__card__item__wrapper">
165
+ <strong>Ingecheckte bagage</strong>
166
+ <p>Gratis: 2 x 32kg</p>
167
+ </div>
168
+ </div>
169
+ <div className="flight__rate__modal__card__item">
170
+ <Icon name="seat-selection" width={20} height={20} />
171
+ <div className="flight__rate__modal__card__item__wrapper">
172
+ <strong>Stoelselectie</strong>
173
+ <p>kies uw stoel in het vliegtijg</p>
174
+ </div>
175
+ </div>
176
+ <div className="flight__rate__modal__card__item">
177
+ <Icon name="check-in" width={20} height={20} />
178
+ <div className="flight__rate__modal__card__item__wrapper">
179
+ <strong>Sneller inchecken</strong>
180
+ <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
181
+ </div>
182
+ </div>
183
+ <div className="flight__rate__modal__card__item">
184
+ <Icon name="business-lounge" width={20} height={20} />
185
+ <div className="flight__rate__modal__card__item__wrapper">
186
+ <strong>Zakenlunge</strong>
187
+ <p>Ontspan voor uw vlucht</p>
188
+ </div>
189
+ </div>
190
+ <div className="flight__rate__modal__card__item">
191
+ <Icon name="priority" width={20} height={20} />
192
+ <div className="flight__rate__modal__card__item__wrapper">
193
+ <strong>Prioriteit</strong>
194
+ <p>Stap voor anderen aan boord</p>
195
+ </div>
196
+ </div>
201
197
  </div>
202
198
  </div>
203
- </div>
204
- <div className="flight__rate__modal__footer">
205
- <button className="cta cta--secondary">Toepassen</button>
199
+ <div className="flight__rate__modal__card__footer">
200
+ <button className="cta cta--secondary">Selecteer</button>
201
+ <span className="price price--increase">+ €2460,00</span>
202
+ </div>
206
203
  </div>
207
204
  </div>
205
+ <div className="flight__rate__modal__footer">
206
+ <button className="cta cta--secondary">Toepassen</button>
207
+ </div>
208
208
  </div>
209
-
210
- );
211
- };
212
-
213
- export default FlightOptionModal;
209
+ </div>
210
+
211
+ );
212
+ };
213
+
214
+ export default FlightOptionModal;
package/src/booking-wizard/features/room-options/index.tsx CHANGED
@@ -48,11 +48,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
48
48
 
49
49
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
50
50
  if (settings.skipRouter) {
51
- if (settings.flightOptions.isHidden) {
52
- dispatch(setCurrentStep(OPTIONS_FORM_STEP));
53
- } else {
54
- dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
55
- }
51
+ dispatch(setCurrentStep(OPTIONS_FORM_STEP));
56
52
  } else {
57
53
  navigate(`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`);
58
54
  }
package/src/booking-wizard/features/summary/summary.tsx CHANGED
@@ -55,7 +55,7 @@ interface VoucherProps {
55
55
  isValid?: boolean;
56
56
  }
57
57
 
58
- interface SummaryProps {}
58
+ interface SummaryProps { }
59
59
 
60
60
  const Summary: React.FC<SummaryProps> = () => {
61
61
  const dispatch = useAppDispatch();
@@ -99,8 +99,8 @@ const Summary: React.FC<SummaryProps> = () => {
99
99
 
100
100
  const notificationsValidated = !isNil(notifications)
101
101
  ? notifications
102
- .filter((x) => x.hasToBeConfirmed)
103
- .every((checkbox) => checkbox.isConfirmed)
102
+ .filter((x) => x.hasToBeConfirmed)
103
+ .every((checkbox) => checkbox.isConfirmed)
104
104
  : true;
105
105
 
106
106
  dispatch(setUserValidated(checkboxesValidated && notificationsValidated));
@@ -244,7 +244,7 @@ const Summary: React.FC<SummaryProps> = () => {
244
244
  dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
245
245
  };
246
246
 
247
- const translations = useSelector(selectTranslations);
247
+ const translations = useSelector(selectTranslations);
248
248
 
249
249
  return (
250
250
  <>
@@ -274,27 +274,26 @@ const Summary: React.FC<SummaryProps> = () => {
274
274
  {translations.SHARED.ROOM} {rIndex + 1}
275
275
  </h5>
276
276
  <p className="form__region-label">
277
- {`${r.adults.length + r.children.length} ${
278
- r.adults.length + r.children.length === 1
277
+ {`${r.adults.length + r.children.length} ${r.adults.length + r.children.length === 1
279
278
  ? translations.SUMMARY.TRAVELER
280
279
  : translations.SUMMARY.TRAVELERS
281
- }: ${compact([
282
- r.adults.length,
283
- r.adults.length === 1 &&
280
+ }: ${compact([
281
+ r.adults.length,
282
+ r.adults.length === 1 &&
284
283
  ` ${translations.SUMMARY.ADULT}`,
285
- r.adults.length > 1 &&
284
+ r.adults.length > 1 &&
286
285
  ` ${translations.SUMMARY.ADULTS}`,
287
- r.adults &&
286
+ r.adults &&
288
287
  r.adults.length &&
289
288
  r.children &&
290
289
  r.children.length &&
291
290
  ", ",
292
- r.children.length,
293
- r.children.length === 1 &&
291
+ r.children.length,
292
+ r.children.length === 1 &&
294
293
  ` ${translations.SUMMARY.CHILD}`,
295
- r.children.length > 1 &&
294
+ r.children.length > 1 &&
296
295
  ` ${translations.SUMMARY.CHILDREN}`,
297
- ]).join("")}`}
296
+ ]).join("")}`}
298
297
  </p>
299
298
  </div>
300
299
  </div>
@@ -320,14 +319,12 @@ const Summary: React.FC<SummaryProps> = () => {
320
319
  </li>
321
320
  {isMainBooker && (
322
321
  <>
323
- <li className="list__item">{`${
324
- travelerFormValues?.street
325
- } ${compact([
326
- travelerFormValues?.houseNumber,
327
- travelerFormValues?.box,
328
- ]).join(" ")}, ${travelerFormValues?.zipCode} ${
329
- travelerFormValues?.place
330
- }`}</li>
322
+ <li className="list__item">{`${travelerFormValues?.street
323
+ } ${compact([
324
+ travelerFormValues?.houseNumber,
325
+ travelerFormValues?.box,
326
+ ]).join(" ")}, ${travelerFormValues?.zipCode} ${travelerFormValues?.place
327
+ }`}</li>
331
328
  <li className="list__item">
332
329
  {travelerFormValues?.phone}
333
330
  </li>
@@ -574,7 +571,7 @@ const Summary: React.FC<SummaryProps> = () => {
574
571
  <Icon name="ui-tooltip" className="icon--secondary-color" />
575
572
  <div className="info-message__copy">
576
573
  <h5>{translations.SUMMARY.VALIDATE_TITLE}</h5>
577
- <p>{translations.SUMMARY.VALIDATE_TEXT}</p>
574
+ <p>{settings.isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING}</p>
578
575
  {checkboxes &&
579
576
  checkboxes.map((checkbox) => (
580
577
  <div className="checkbox" key={checkbox.id}>
@@ -625,14 +622,14 @@ const Summary: React.FC<SummaryProps> = () => {
625
622
  </Link>
626
623
  )}
627
624
  <button
628
- title={translations.STEPS.SUBMIT}
625
+ title={settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
629
626
  className={buildClassName([
630
627
  "cta",
631
628
  !userValidated && "cta--disabled",
632
629
  ])}
633
630
  disabled={!userValidated}
634
631
  >
635
- {translations.STEPS.SUBMIT}
632
+ {settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
636
633
  </button>
637
634
  </div>
638
635
  </form>
package/src/booking-wizard/features/travelers-form/travelers-form.tsx CHANGED
@@ -531,7 +531,6 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
531
531
  name="street"
532
532
  onChange={formik.handleChange}
533
533
  onBlur={formik.handleBlur}
534
- placeholder={translations.TRAVELERS_FORM.STREET_PLACEHOLDER}
535
534
  value={formik.values.street}
536
535
  />
537
536
  <LabeledInput
@@ -573,7 +572,6 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
573
572
  label={translations.TRAVELERS_FORM.CITY}
574
573
  required
575
574
  name="place"
576
- placeholder={translations.TRAVELERS_FORM.CITY_PLACEHOLDER}
577
575
  onChange={formik.handleChange}
578
576
  onBlur={formik.handleBlur}
579
577
  value={formik.values.place}
package/src/booking-wizard/features/travelers-form/validate-form.ts CHANGED
@@ -5,7 +5,7 @@ import { CHILD_MAX_AGE } from "./travelers-form-slice";
5
5
  import { format } from "../../../shared/utils/localization-util";
6
6
 
7
7
  function isValidEmail(email: string) {
8
- return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email);
8
+ return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(email);
9
9
  }
10
10
 
11
11
  function getAge(birthDateText: string, startDateText: string) {
package/src/booking-wizard/index.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
2
  import { Provider } from "react-redux";
3
- import { store } from "./store";
3
+ import Booking from "./features/booking/booking";
4
4
  import SettingsContext from "./settings-context";
5
+ import { store } from "./store";
5
6
  import { Settings } from "./types";
6
- import Booking from "./features/booking/booking";
7
7
 
8
8
  interface BookingWizardProps {
9
9
  productCode: string;
package/src/booking-wizard/types.ts CHANGED
@@ -59,6 +59,7 @@ export interface Settings {
59
59
  accommodations?: AccommodationContent[];
60
60
  regimes?: RegimeContent[];
61
61
  accommodationViewId?: number;
62
+ isOffer?: boolean;
62
63
  }
63
64
 
64
65
  export interface BookingOptions {