@qite/tide-booking-component 1.4.2 → 1.4.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 (132) 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-wizard/components/phone-input.d.ts +17 -0
  5. package/build/build-cjs/booking-wizard/features/booking/selectors.d.ts +41 -12
  6. package/build/build-cjs/booking-wizard/features/summary/summary-flight.d.ts +2 -2
  7. package/build/build-cjs/booking-wizard/features/travelers-form/controls/gender-control.d.ts +5 -0
  8. package/build/build-cjs/booking-wizard/features/travelers-form/travelers-form-util.d.ts +7 -0
  9. package/build/build-cjs/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  10. package/build/build-cjs/booking-wizard/types.d.ts +13 -0
  11. package/build/build-cjs/index.js +458 -273
  12. package/build/build-cjs/shared/utils/localization-util.d.ts +3 -0
  13. package/build/build-esm/booking-wizard/components/phone-input.d.ts +17 -0
  14. package/build/build-esm/booking-wizard/features/booking/selectors.d.ts +41 -12
  15. package/build/build-esm/booking-wizard/features/summary/summary-flight.d.ts +2 -2
  16. package/build/build-esm/booking-wizard/features/travelers-form/controls/gender-control.d.ts +5 -0
  17. package/build/build-esm/booking-wizard/features/travelers-form/travelers-form-util.d.ts +7 -0
  18. package/build/build-esm/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  19. package/build/build-esm/booking-wizard/types.d.ts +13 -0
  20. package/build/build-esm/index.js +460 -275
  21. package/build/build-esm/shared/utils/localization-util.d.ts +3 -0
  22. package/package.json +1 -1
  23. package/rollup.config.js +23 -23
  24. package/src/booking-product/components/age-select.tsx +35 -35
  25. package/src/booking-product/components/amount-input.tsx +78 -78
  26. package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -58
  27. package/src/booking-product/components/date-range-picker/calendar.tsx +178 -178
  28. package/src/booking-product/components/date-range-picker/index.tsx +196 -196
  29. package/src/booking-product/components/dates.tsx +136 -136
  30. package/src/booking-product/components/footer.tsx +69 -69
  31. package/src/booking-product/components/header.tsx +79 -79
  32. package/src/booking-product/components/icon.tsx +251 -251
  33. package/src/booking-product/components/rating.tsx +21 -21
  34. package/src/booking-product/components/rooms.tsx +199 -199
  35. package/src/booking-product/index.tsx +30 -30
  36. package/src/booking-product/settings-context.ts +14 -14
  37. package/src/booking-product/types.ts +28 -28
  38. package/src/booking-product/utils/api.ts +25 -25
  39. package/src/booking-product/utils/price.ts +28 -28
  40. package/src/booking-wizard/api-settings-slice.ts +24 -24
  41. package/src/booking-wizard/components/icon.tsx +508 -508
  42. package/src/booking-wizard/components/labeled-input.tsx +64 -64
  43. package/src/booking-wizard/components/labeled-select.tsx +69 -69
  44. package/src/booking-wizard/components/message.tsx +34 -34
  45. package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
  46. package/src/booking-wizard/components/phone-input.tsx +181 -0
  47. package/src/booking-wizard/components/product-card.tsx +37 -37
  48. package/src/booking-wizard/components/step-indicator.tsx +51 -51
  49. package/src/booking-wizard/components/step-route.tsx +27 -27
  50. package/src/booking-wizard/declarations.d.ts +4 -4
  51. package/src/booking-wizard/features/booking/api.ts +49 -49
  52. package/src/booking-wizard/features/booking/booking-slice.ts +2 -0
  53. package/src/booking-wizard/features/booking/booking.tsx +28 -28
  54. package/src/booking-wizard/features/booking/constants.ts +16 -16
  55. package/src/booking-wizard/features/booking/selectors.ts +17 -14
  56. package/src/booking-wizard/features/error/error.tsx +78 -78
  57. package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -432
  58. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -385
  59. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -229
  60. package/src/booking-wizard/features/flight-options/flight-option.tsx +80 -80
  61. package/src/booking-wizard/features/flight-options/index.tsx +196 -196
  62. package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
  63. package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -178
  64. package/src/booking-wizard/features/price-details/util.ts +155 -155
  65. package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
  66. package/src/booking-wizard/features/product-options/none-option.tsx +121 -121
  67. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -64
  68. package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -216
  69. package/src/booking-wizard/features/product-options/option-item.tsx +321 -321
  70. package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -201
  71. package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -175
  72. package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -198
  73. package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -185
  74. package/src/booking-wizard/features/room-options/index.tsx +187 -187
  75. package/src/booking-wizard/features/room-options/room-utils.ts +190 -190
  76. package/src/booking-wizard/features/room-options/room.tsx +161 -161
  77. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
  78. package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +4 -2
  79. package/src/booking-wizard/features/sidebar/sidebar-util.ts +2 -0
  80. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
  81. package/src/booking-wizard/features/summary/summary-flight.tsx +7 -6
  82. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -69
  83. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -63
  84. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -66
  85. package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
  86. package/src/booking-wizard/features/summary/summary.tsx +91 -62
  87. package/src/booking-wizard/features/travelers-form/controls/gender-control.tsx +70 -0
  88. package/src/booking-wizard/features/travelers-form/travelers-form-util.ts +11 -0
  89. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +451 -313
  90. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
  91. package/src/booking-wizard/features/travelers-form/validate-form.ts +84 -98
  92. package/src/booking-wizard/index.tsx +36 -36
  93. package/src/booking-wizard/store.ts +31 -31
  94. package/src/booking-wizard/types.ts +15 -0
  95. package/src/index.ts +4 -4
  96. package/src/shared/components/loader.tsx +16 -16
  97. package/src/shared/translations/en-GB.json +3 -0
  98. package/src/shared/translations/fr-BE.json +3 -0
  99. package/src/shared/translations/nl-BE.json +3 -0
  100. package/src/shared/types.ts +4 -4
  101. package/src/shared/utils/class-util.ts +9 -9
  102. package/src/shared/utils/localization-util.ts +62 -62
  103. package/src/shared/utils/query-string-util.ts +119 -119
  104. package/styles/booking-product-variables.scss +394 -394
  105. package/styles/booking-product.scss +446 -446
  106. package/styles/booking-wizard.scss +1 -0
  107. package/styles/components/_animations.scss +39 -39
  108. package/styles/components/_base.scss +107 -107
  109. package/styles/components/_button.scss +238 -238
  110. package/styles/components/_checkbox.scss +219 -219
  111. package/styles/components/_cta.scss +208 -208
  112. package/styles/components/_date-list.scss +41 -41
  113. package/styles/components/_date-range-picker.scss +225 -225
  114. package/styles/components/_decrement-increment.scss +35 -35
  115. package/styles/components/_flight-option.scss +1429 -1429
  116. package/styles/components/_info-message.scss +71 -71
  117. package/styles/components/_input.scss +25 -25
  118. package/styles/components/_list.scss +187 -187
  119. package/styles/components/_loader.scss +72 -72
  120. package/styles/components/_mixins.scss +550 -550
  121. package/styles/components/_phone-input.scss +8 -0
  122. package/styles/components/_placeholders.scss +166 -166
  123. package/styles/components/_pricing-summary.scss +155 -155
  124. package/styles/components/_qsm.scss +17 -17
  125. package/styles/components/_radiobutton.scss +170 -170
  126. package/styles/components/_select-wrapper.scss +80 -80
  127. package/styles/components/_spinner.scss +29 -29
  128. package/styles/components/_table.scss +81 -81
  129. package/styles/components/_tree.scss +530 -530
  130. package/styles/components/_typeahead.scss +281 -281
  131. package/styles/components/_variables.scss +89 -89
  132. package/tsconfig.json +24 -24
package/styles/components/_button.scss CHANGED
@@ -1,238 +1,238 @@
1
- .button {
2
- @extend %reset;
3
- border: none;
4
- background: transparent;
5
- cursor: pointer;
6
- outline: none;
7
- @extend %transition-easing;
8
-
9
- &:hover,
10
- &:focus,
11
- &:active {
12
- outline: none;
13
- }
14
-
15
- // &--close {
16
- // width: 4.5rem;
17
- // height: 4.5rem;
18
- // @include flex--centerXY;
19
- // border: none;
20
- // background: transparent;
21
-
22
- // &:before,
23
- // &:after {
24
- // content: "";
25
- // position: absolute;
26
- // width: 1.7rem;
27
- // height: 0.1rem;
28
- // background-color: $black;
29
- // }
30
-
31
- // &:before {
32
- // transform: rotate(45deg);
33
- // }
34
-
35
- // &:after {
36
- // transform: rotate(-45deg);
37
- // }
38
- // }
39
-
40
- // &--close-label {
41
- // position: relative;
42
- // height: $gutter * 2;
43
- // padding-right: $gutter * 1.33;
44
- // @include flex--centerY;
45
- // font-size: 1.3rem;
46
- // text-decoration: underline;
47
- // text-transform: uppercase;
48
- // color: $color-primary;
49
-
50
- // &:before,
51
- // &:after {
52
- // content: "";
53
- // position: absolute;
54
- // width: 1.2rem;
55
- // height: 0.1rem;
56
- // right: 0;
57
- // background-color: $black;
58
- // }
59
-
60
- // &:after {
61
- // transform: rotate(-45deg);
62
- // }
63
-
64
- // &:before {
65
- // transform: rotate(45deg);
66
- // }
67
- // }
68
-
69
- // &--collapse {
70
- // position: relative;
71
- // width: 3rem;
72
- // height: 3rem;
73
- // @include flex--centerXY;
74
- // border-radius: $gutter * 0.3;
75
- // border: 0.1rem solid fade-out($color-primary, 0.65);
76
- // background-color: $white;
77
-
78
- // &:before {
79
- // content: "";
80
- // width: 0.8rem;
81
- // height: 0.8rem;
82
- // margin-top: 0;
83
- // margin-left: -0.5rem;
84
- // border-bottom: 0.1rem solid $black;
85
- // border-left: 0.1rem solid $black;
86
- // transform-origin: 50%;
87
- // transform: rotate(-135deg);
88
- // @include transitionEasing($duration: 0.15s);
89
- // }
90
- // }
91
-
92
- &--clear {
93
- width: 25px;
94
- height: 25px;
95
- @include flex--centerXY;
96
- border: none;
97
- background: transparent;
98
-
99
- &:before,
100
- &:after {
101
- content: "";
102
- position: absolute;
103
- width: 16px;
104
- height: 1px;
105
- background-color: var(
106
- --tide-booking-form-typeahead-agent-clear-icon-color
107
- );
108
- }
109
-
110
- &:before {
111
- transform: rotate(45deg);
112
- }
113
-
114
- &:after {
115
- transform: rotate(-45deg);
116
- }
117
- }
118
-
119
- &--decrement,
120
- &--increment {
121
- position: relative;
122
- width: var(--tide-booking-decrement-increment-width);
123
- height: var(--tide-booking-decrement-increment-height);
124
- display: flex;
125
- align-items: center;
126
- justify-content: center;
127
- flex: 0 0 var(--tide-booking-decrement-increment-width);
128
- border-radius: var(--tide-booking-decrement-increment-border-radius);
129
- border: var(--tide-booking-decrement-increment-border);
130
- background: var(--tide-booking-decrement-increment-background);
131
- transition: all 0.3s ease;
132
-
133
- .icon {
134
- width: var(--tide-booking-decrement-increment-icon-width);
135
- height: var(--tide-booking-decrement-increment-icon-height);
136
- fill: var(--tide-booking-decrement-increment-icon-color);
137
- }
138
-
139
- &:hover {
140
- background: var(--tide-booking-decrement-increment-background-hover);
141
- color: var(--tide-booking-decrement-increment-color-hover);
142
- fill: var(--tide-booking-decrement-increment-icon-color-hover);
143
- border: var(--tide-booking-decrement-increment-border-hover);
144
-
145
- .icon {
146
- fill: var(--tide-booking-decrement-increment-icon-color-hover);
147
- }
148
- }
149
-
150
- &:focus,
151
- &:active {
152
- background: var(--tide-booking-decrement-increment-background-focus);
153
- color: var(--tide-booking-decrement-increment-color-focus);
154
- fill: var(--tide-booking-decrement-increment-icon-color-focus);
155
- border: var(--tide-booking-decrement-increment-border-focus);
156
-
157
- .icon {
158
- fill: var(--tide-booking-decrement-increment-icon-color-focus);
159
- }
160
- }
161
- }
162
-
163
- &--disabled {
164
- opacity: 0.5;
165
- cursor: not-allowed;
166
- }
167
-
168
- &--min,
169
- &--plus {
170
- position: relative;
171
- width: 3.5rem;
172
- height: 3.5rem;
173
- @include flex--centerXY;
174
- border-radius: 50%;
175
- background-color: var(--tide-booking-bg-secondary);
176
- @include activeToColor;
177
-
178
- &:hover {
179
- opacity: 1;
180
- outline: none;
181
- fill: var(--tide-booking-color-primary);
182
- color: var(--tide-booking-color-primary);
183
- background-color: var(--tide-booking-transparent);
184
- }
185
-
186
- &:before {
187
- content: "";
188
- position: absolute;
189
- width: 1.2rem;
190
- height: 0.2rem;
191
- display: inline-flex;
192
- background-color: var(--tide-booking-color-primary);
193
- }
194
- }
195
-
196
- &--plus {
197
- &:after {
198
- content: "";
199
- position: absolute;
200
- width: 1.2rem;
201
- height: 0.2rem;
202
- transform: rotate(90deg);
203
- display: inline-flex;
204
- background-color: var(--tide-booking-color-primary);
205
- }
206
- }
207
- }
208
-
209
- .typeahead__option .button {
210
- width: 100%;
211
- padding: 15px * 0.8 15px;
212
- flex-shrink: 0;
213
- text-align: left;
214
- color: var(--tide-booking-form-typeahead-agent-options-color);
215
- @extend %transition-easing;
216
-
217
- &:hover {
218
- color: var(--tide-booking-form-typeahead-agent-options-color-hover);
219
- background-color: var(
220
- --tide-booking-form-typeahead-agent-options-background-hover
221
- );
222
- }
223
- }
224
-
225
- .typeahead__option-header .button {
226
- padding: 15px * 0.67 15px;
227
- font-size: 15px;
228
- font-style: normal;
229
- }
230
-
231
- .typeahead__option--tree .typeahead__option-header .button {
232
- padding-left: 15px;
233
- }
234
-
235
- .form__group .typeahead .button--clear {
236
- position: absolute;
237
- right: 15px;
238
- }
1
+ .button {
2
+ @extend %reset;
3
+ border: none;
4
+ background: transparent;
5
+ cursor: pointer;
6
+ outline: none;
7
+ @extend %transition-easing;
8
+
9
+ &:hover,
10
+ &:focus,
11
+ &:active {
12
+ outline: none;
13
+ }
14
+
15
+ // &--close {
16
+ // width: 4.5rem;
17
+ // height: 4.5rem;
18
+ // @include flex--centerXY;
19
+ // border: none;
20
+ // background: transparent;
21
+
22
+ // &:before,
23
+ // &:after {
24
+ // content: "";
25
+ // position: absolute;
26
+ // width: 1.7rem;
27
+ // height: 0.1rem;
28
+ // background-color: $black;
29
+ // }
30
+
31
+ // &:before {
32
+ // transform: rotate(45deg);
33
+ // }
34
+
35
+ // &:after {
36
+ // transform: rotate(-45deg);
37
+ // }
38
+ // }
39
+
40
+ // &--close-label {
41
+ // position: relative;
42
+ // height: $gutter * 2;
43
+ // padding-right: $gutter * 1.33;
44
+ // @include flex--centerY;
45
+ // font-size: 1.3rem;
46
+ // text-decoration: underline;
47
+ // text-transform: uppercase;
48
+ // color: $color-primary;
49
+
50
+ // &:before,
51
+ // &:after {
52
+ // content: "";
53
+ // position: absolute;
54
+ // width: 1.2rem;
55
+ // height: 0.1rem;
56
+ // right: 0;
57
+ // background-color: $black;
58
+ // }
59
+
60
+ // &:after {
61
+ // transform: rotate(-45deg);
62
+ // }
63
+
64
+ // &:before {
65
+ // transform: rotate(45deg);
66
+ // }
67
+ // }
68
+
69
+ // &--collapse {
70
+ // position: relative;
71
+ // width: 3rem;
72
+ // height: 3rem;
73
+ // @include flex--centerXY;
74
+ // border-radius: $gutter * 0.3;
75
+ // border: 0.1rem solid fade-out($color-primary, 0.65);
76
+ // background-color: $white;
77
+
78
+ // &:before {
79
+ // content: "";
80
+ // width: 0.8rem;
81
+ // height: 0.8rem;
82
+ // margin-top: 0;
83
+ // margin-left: -0.5rem;
84
+ // border-bottom: 0.1rem solid $black;
85
+ // border-left: 0.1rem solid $black;
86
+ // transform-origin: 50%;
87
+ // transform: rotate(-135deg);
88
+ // @include transitionEasing($duration: 0.15s);
89
+ // }
90
+ // }
91
+
92
+ &--clear {
93
+ width: 25px;
94
+ height: 25px;
95
+ @include flex--centerXY;
96
+ border: none;
97
+ background: transparent;
98
+
99
+ &:before,
100
+ &:after {
101
+ content: "";
102
+ position: absolute;
103
+ width: 16px;
104
+ height: 1px;
105
+ background-color: var(
106
+ --tide-booking-form-typeahead-agent-clear-icon-color
107
+ );
108
+ }
109
+
110
+ &:before {
111
+ transform: rotate(45deg);
112
+ }
113
+
114
+ &:after {
115
+ transform: rotate(-45deg);
116
+ }
117
+ }
118
+
119
+ &--decrement,
120
+ &--increment {
121
+ position: relative;
122
+ width: var(--tide-booking-decrement-increment-width);
123
+ height: var(--tide-booking-decrement-increment-height);
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ flex: 0 0 var(--tide-booking-decrement-increment-width);
128
+ border-radius: var(--tide-booking-decrement-increment-border-radius);
129
+ border: var(--tide-booking-decrement-increment-border);
130
+ background: var(--tide-booking-decrement-increment-background);
131
+ transition: all 0.3s ease;
132
+
133
+ .icon {
134
+ width: var(--tide-booking-decrement-increment-icon-width);
135
+ height: var(--tide-booking-decrement-increment-icon-height);
136
+ fill: var(--tide-booking-decrement-increment-icon-color);
137
+ }
138
+
139
+ &:hover {
140
+ background: var(--tide-booking-decrement-increment-background-hover);
141
+ color: var(--tide-booking-decrement-increment-color-hover);
142
+ fill: var(--tide-booking-decrement-increment-icon-color-hover);
143
+ border: var(--tide-booking-decrement-increment-border-hover);
144
+
145
+ .icon {
146
+ fill: var(--tide-booking-decrement-increment-icon-color-hover);
147
+ }
148
+ }
149
+
150
+ &:focus,
151
+ &:active {
152
+ background: var(--tide-booking-decrement-increment-background-focus);
153
+ color: var(--tide-booking-decrement-increment-color-focus);
154
+ fill: var(--tide-booking-decrement-increment-icon-color-focus);
155
+ border: var(--tide-booking-decrement-increment-border-focus);
156
+
157
+ .icon {
158
+ fill: var(--tide-booking-decrement-increment-icon-color-focus);
159
+ }
160
+ }
161
+ }
162
+
163
+ &--disabled {
164
+ opacity: 0.5;
165
+ cursor: not-allowed;
166
+ }
167
+
168
+ &--min,
169
+ &--plus {
170
+ position: relative;
171
+ width: 3.5rem;
172
+ height: 3.5rem;
173
+ @include flex--centerXY;
174
+ border-radius: 50%;
175
+ background-color: var(--tide-booking-bg-secondary);
176
+ @include activeToColor;
177
+
178
+ &:hover {
179
+ opacity: 1;
180
+ outline: none;
181
+ fill: var(--tide-booking-color-primary);
182
+ color: var(--tide-booking-color-primary);
183
+ background-color: var(--tide-booking-transparent);
184
+ }
185
+
186
+ &:before {
187
+ content: "";
188
+ position: absolute;
189
+ width: 1.2rem;
190
+ height: 0.2rem;
191
+ display: inline-flex;
192
+ background-color: var(--tide-booking-color-primary);
193
+ }
194
+ }
195
+
196
+ &--plus {
197
+ &:after {
198
+ content: "";
199
+ position: absolute;
200
+ width: 1.2rem;
201
+ height: 0.2rem;
202
+ transform: rotate(90deg);
203
+ display: inline-flex;
204
+ background-color: var(--tide-booking-color-primary);
205
+ }
206
+ }
207
+ }
208
+
209
+ .typeahead__option .button {
210
+ width: 100%;
211
+ padding: 15px * 0.8 15px;
212
+ flex-shrink: 0;
213
+ text-align: left;
214
+ color: var(--tide-booking-form-typeahead-agent-options-color);
215
+ @extend %transition-easing;
216
+
217
+ &:hover {
218
+ color: var(--tide-booking-form-typeahead-agent-options-color-hover);
219
+ background-color: var(
220
+ --tide-booking-form-typeahead-agent-options-background-hover
221
+ );
222
+ }
223
+ }
224
+
225
+ .typeahead__option-header .button {
226
+ padding: 15px * 0.67 15px;
227
+ font-size: 15px;
228
+ font-style: normal;
229
+ }
230
+
231
+ .typeahead__option--tree .typeahead__option-header .button {
232
+ padding-left: 15px;
233
+ }
234
+
235
+ .form__group .typeahead .button--clear {
236
+ position: absolute;
237
+ right: 15px;
238
+ }