@qite/tide-booking-component 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/.vs/ProjectSettings.json +3 -3
  2. package/.vs/VSWorkspaceState.json +5 -5
  3. package/README.md +8 -8
  4. package/build/build-cjs/booking-wizard/features/flight-options/flight-option-flight.d.ts +1 -1
  5. package/build/build-cjs/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  6. package/build/build-cjs/booking-wizard/types.d.ts +6 -0
  7. package/build/build-cjs/index.js +1200 -713
  8. package/build/build-cjs/shared/utils/localization-util.d.ts +1 -0
  9. package/build/build-esm/booking-wizard/features/flight-options/flight-option-flight.d.ts +1 -1
  10. package/build/build-esm/booking-wizard/features/flight-options/flight-option.d.ts +1 -1
  11. package/build/build-esm/booking-wizard/types.d.ts +6 -0
  12. package/build/build-esm/index.js +1201 -714
  13. package/build/build-esm/shared/utils/localization-util.d.ts +1 -0
  14. package/package.json +75 -77
  15. package/rollup.config.js +23 -23
  16. package/src/booking-product/components/age-select.tsx +35 -41
  17. package/src/booking-product/components/amount-input.tsx +78 -64
  18. package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -54
  19. package/src/booking-product/components/date-range-picker/calendar.tsx +178 -176
  20. package/src/booking-product/components/date-range-picker/index.tsx +196 -181
  21. package/src/booking-product/components/dates.tsx +136 -132
  22. package/src/booking-product/components/footer.tsx +69 -70
  23. package/src/booking-product/components/header.tsx +79 -68
  24. package/src/booking-product/components/icon.tsx +251 -208
  25. package/src/booking-product/components/product.tsx +314 -281
  26. package/src/booking-product/components/rating.tsx +21 -21
  27. package/src/booking-product/components/rooms.tsx +195 -180
  28. package/src/booking-product/index.tsx +30 -30
  29. package/src/booking-product/settings-context.ts +14 -14
  30. package/src/booking-product/types.ts +28 -28
  31. package/src/booking-product/utils/api.ts +25 -25
  32. package/src/booking-product/utils/price.ts +29 -27
  33. package/src/booking-wizard/api-settings-slice.ts +24 -24
  34. package/src/booking-wizard/components/icon.tsx +508 -309
  35. package/src/booking-wizard/components/labeled-input.tsx +64 -64
  36. package/src/booking-wizard/components/labeled-select.tsx +69 -69
  37. package/src/booking-wizard/components/message.tsx +34 -34
  38. package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
  39. package/src/booking-wizard/components/product-card.tsx +37 -37
  40. package/src/booking-wizard/components/step-indicator.tsx +51 -51
  41. package/src/booking-wizard/components/step-route.tsx +27 -27
  42. package/src/booking-wizard/declarations.d.ts +4 -4
  43. package/src/booking-wizard/features/booking/api.ts +49 -45
  44. package/src/booking-wizard/features/booking/booking-self-contained.tsx +384 -357
  45. package/src/booking-wizard/features/booking/booking-slice.ts +662 -603
  46. package/src/booking-wizard/features/booking/booking.tsx +356 -349
  47. package/src/booking-wizard/features/booking/constants.ts +16 -16
  48. package/src/booking-wizard/features/booking/selectors.ts +441 -418
  49. package/src/booking-wizard/features/confirmation/confirmation.tsx +97 -94
  50. package/src/booking-wizard/features/error/error.tsx +78 -75
  51. package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -357
  52. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -353
  53. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -214
  54. package/src/booking-wizard/features/flight-options/flight-option.tsx +81 -66
  55. package/src/booking-wizard/features/flight-options/flight-utils.ts +516 -401
  56. package/src/booking-wizard/features/flight-options/index.tsx +196 -177
  57. package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
  58. package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -171
  59. package/src/booking-wizard/features/price-details/util.ts +155 -155
  60. package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
  61. package/src/booking-wizard/features/product-options/none-option.tsx +120 -120
  62. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -66
  63. package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -210
  64. package/src/booking-wizard/features/product-options/option-item.tsx +317 -318
  65. package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -188
  66. package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -169
  67. package/src/booking-wizard/features/product-options/option-room.tsx +321 -314
  68. package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -192
  69. package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -174
  70. package/src/booking-wizard/features/product-options/options-form.tsx +459 -437
  71. package/src/booking-wizard/features/room-options/index.tsx +187 -172
  72. package/src/booking-wizard/features/room-options/room-utils.ts +190 -143
  73. package/src/booking-wizard/features/room-options/room.tsx +160 -124
  74. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -63
  75. package/src/booking-wizard/features/sidebar/index.tsx +76 -76
  76. package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +68 -68
  77. package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
  78. package/src/booking-wizard/features/sidebar/sidebar.tsx +364 -346
  79. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
  80. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
  81. package/src/booking-wizard/features/summary/summary-flight.tsx +39 -39
  82. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -57
  83. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -51
  84. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -54
  85. package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
  86. package/src/booking-wizard/features/summary/summary.tsx +674 -643
  87. package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
  88. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +754 -755
  89. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
  90. package/src/booking-wizard/features/travelers-form/validate-form.ts +245 -245
  91. package/src/booking-wizard/index.tsx +36 -36
  92. package/src/booking-wizard/settings-context.ts +60 -60
  93. package/src/booking-wizard/store.ts +31 -31
  94. package/src/booking-wizard/types.ts +276 -271
  95. package/src/index.ts +4 -5
  96. package/src/shared/components/loader.tsx +16 -16
  97. package/src/shared/translations/en-GB.json +232 -0
  98. package/src/shared/translations/fr-BE.json +233 -233
  99. package/src/shared/translations/nl-BE.json +232 -232
  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 -56
  103. package/src/shared/utils/query-string-util.ts +119 -116
  104. package/src/shared/utils/tide-api-utils.ts +36 -36
  105. package/styles/booking-product-variables.scss +394 -288
  106. package/styles/booking-product.scss +446 -440
  107. package/styles/booking-wizard-variables.scss +871 -530
  108. package/styles/booking-wizard.scss +59 -26
  109. package/styles/components/_animations.scss +39 -39
  110. package/styles/components/_base.scss +107 -106
  111. package/styles/components/_booking.scss +879 -1409
  112. package/styles/components/_button.scss +238 -185
  113. package/styles/components/_checkbox.scss +219 -215
  114. package/styles/components/_cta.scss +208 -133
  115. package/styles/components/_date-list.scss +41 -0
  116. package/styles/components/_date-range-picker.scss +225 -225
  117. package/styles/components/_decrement-increment.scss +35 -37
  118. package/styles/components/_dropdown.scss +72 -74
  119. package/styles/components/_flight-option.scss +1429 -1389
  120. package/styles/components/_form.scss +1583 -394
  121. package/styles/components/_info-message.scss +71 -0
  122. package/styles/components/_input.scss +25 -0
  123. package/styles/components/_list.scss +187 -82
  124. package/styles/components/_loader.scss +72 -71
  125. package/styles/components/_mixins.scss +550 -530
  126. package/styles/components/_placeholders.scss +166 -166
  127. package/styles/components/_pricing-summary.scss +155 -117
  128. package/styles/components/_qsm.scss +17 -20
  129. package/styles/components/_radiobutton.scss +170 -0
  130. package/styles/components/_select-wrapper.scss +80 -66
  131. package/styles/components/_spinner.scss +29 -0
  132. package/styles/components/_step-indicators.scss +168 -160
  133. package/styles/components/_table.scss +81 -81
  134. package/styles/components/_tree.scss +530 -540
  135. package/styles/components/_typeahead.scss +281 -0
  136. package/styles/components/_variables.scss +89 -89
  137. package/tsconfig.json +24 -24
package/src/booking-wizard/features/sidebar/sidebar.tsx CHANGED
@@ -1,346 +1,364 @@
1
- import {
2
- BookingPackageFlight,
3
- BookingPackageRoom,
4
- BookingPriceDetail,
5
- } from "@qite/tide-client/build/types";
6
- import { compact, isEmpty } from "lodash";
7
- import React, { useState } from "react";
8
- import { useSelector } from "react-redux";
9
- import { buildClassName } from "../../../shared/utils/class-util";
10
- import { formatPrice } from "../../../shared/utils/localization-util";
11
- import ProductCard from "../../components/product-card";
12
- import { selectTranslations } from "../booking/selectors";
13
- import SidebarFlight from "./sidebar-flight";
14
- import { getDatePeriodText } from "./sidebar-util";
15
-
16
- interface SidebarProps {
17
- productName: string;
18
- thumbnailUrl?: string;
19
- isLoading: boolean;
20
- travelerRooms?: string[];
21
- startDateText?: string;
22
- endDateText?: string;
23
- departureFlight?: BookingPackageFlight;
24
- returnFlight?: BookingPackageFlight;
25
- basePrice?: number;
26
- totalPrice?: number;
27
- remainingAmountText?: string;
28
- includedCosts?: BookingPriceDetail[];
29
- extraCosts?: BookingPriceDetail[];
30
- deposit?: number;
31
- accommodations?: BookingPackageRoom[];
32
- isOnRequest?: boolean;
33
- headerComponent?: JSX.Element;
34
- footerComponent?: JSX.Element;
35
- loaderComponent?: JSX.Element;
36
- }
37
-
38
- const Sidebar: React.FC<SidebarProps> = ({
39
- productName,
40
- thumbnailUrl,
41
- isLoading,
42
- travelerRooms,
43
- startDateText,
44
- endDateText,
45
- departureFlight,
46
- returnFlight,
47
- basePrice,
48
- totalPrice,
49
- includedCosts,
50
- extraCosts,
51
- deposit,
52
- accommodations,
53
- isOnRequest,
54
- headerComponent,
55
- footerComponent,
56
- loaderComponent,
57
- }) => {
58
- const [active, setActive] = useState<boolean>(false);
59
- const translations = useSelector(selectTranslations);
60
-
61
- const canShowPriceBreakdownSection =
62
- Boolean(basePrice && basePrice > 0) ||
63
- !isEmpty(includedCosts) ||
64
- !isEmpty(extraCosts);
65
- const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
66
-
67
- const remainingAmount = (totalPrice ?? 0) - (deposit ?? 0);
68
-
69
- const handleToggleClick = () => {
70
- setActive(!active);
71
- };
72
-
73
- return (
74
- <div
75
- className={buildClassName([
76
- "booking__sidebar",
77
- active && "booking__sidebar--active",
78
- ])}
79
- >
80
- {headerComponent}
81
-
82
- <div className="booking__sidebar-frame">
83
- <ProductCard
84
- productName={productName}
85
- thumbnailUrl={thumbnailUrl}
86
- handleToggleClick={handleToggleClick}
87
- />
88
- <div className="pricing-summary">
89
- <div className="pricing-summary__region">
90
- <div className="pricing-summary__group">
91
- <h6 className="pricing-summary__title">
92
- {translations.SIDEBAR.TRAVEL_INFO}
93
- </h6>
94
- {!isEmpty(travelerRooms) &&
95
- travelerRooms?.map((room, rIndex) => (
96
- <div className="pricing-summary__row" key={rIndex}>
97
- <div className="pricing-summary__property">
98
- {translations.SHARED.ROOM} {rIndex + 1}
99
- </div>
100
-
101
- <div className="pricing-summary__value">{room}</div>
102
- </div>
103
- ))}
104
-
105
- {startDateText && (
106
- <div className="pricing-summary__row">
107
- <div className="pricing-summary__property">
108
- {startDateText && endDateText
109
- ? translations.SIDEBAR.DEPARTURE
110
- : translations.SIDEBAR.DEPARTURE_SINGLE}
111
- </div>
112
- <div className="pricing-summary__value">{startDateText}</div>
113
- </div>
114
- )}
115
-
116
- {endDateText && (
117
- <div className="pricing-summary__row">
118
- <div className="pricing-summary__property">
119
- {translations.SIDEBAR.ARRIVAL}
120
- </div>
121
- <div className="pricing-summary__value">{endDateText}</div>
122
- </div>
123
- )}
124
- </div>
125
-
126
- {isLoading && loaderComponent}
127
- {!isLoading && departureFlight && returnFlight && (
128
- <>
129
- <SidebarFlight
130
- title={translations.SIDEBAR.DEPARTURE_FLIGHT}
131
- flight={departureFlight}
132
- />
133
- <SidebarFlight
134
- title={translations.SIDEBAR.ARRIVAL_FLIGHT}
135
- flight={returnFlight}
136
- />
137
- </>
138
- )}
139
-
140
- {accommodations && (
141
- <div className="pricing-summary__group">
142
- <h6 className="pricing-summary__title">
143
- {translations.SIDEBAR.ACCOMMODATION}
144
- </h6>
145
- {accommodations.map((accommodation) => {
146
- let option = accommodation.options.find((x) => x.isSelected);
147
- return (
148
- <div key={accommodation.index}>
149
- <div className="pricing-summary__row">
150
- <div className="pricing-summary__property">
151
- {option?.accommodationName}
152
- {isOnRequest
153
- ? ` (${translations.SIDEBAR.ON_REQUEST})`
154
- : ""}
155
- {option?.isOnRequest
156
- ? ` (${translations.SIDEBAR.ON_REQUEST})`
157
- : ""}
158
- </div>
159
- {/*<div className="pricing-summary__value">
160
- {option && option.price > 0 && formatPrice(option?.price)}
161
- </div>*/}
162
- </div>
163
- <div className="pricing-summary__row">
164
- <div className="price-summarty__property">
165
- {option?.regimeName}
166
- </div>
167
- <div className="price-summary__value">
168
- {getDatePeriodText(option?.from, option?.to, true)}
169
- </div>
170
- </div>
171
- </div>
172
- );
173
- })}
174
- </div>
175
- )}
176
- </div>
177
-
178
- {!isLoading && canShowPriceBreakdownSection && (
179
- <div className="pricing-summary__region">
180
- {basePrice !== undefined && basePrice > 0 && (
181
- <div className="pricing-summary__group">
182
- <div className="pricing-summary__row">
183
- <div className="pricing-summary__property">
184
- <h6 className="pricing-summary__title">
185
- {translations.SIDEBAR.BASE_PRICE}
186
- </h6>
187
- </div>
188
- <div className="pricing-summary__value">
189
- {formatPrice(basePrice)}
190
- </div>
191
- </div>
192
- </div>
193
- )}
194
- {!isEmpty(includedCosts) && (
195
- <div className="pricing-summary__group">
196
- <h6 className="pricing-summary__title">
197
- {translations.SIDEBAR.INCLUDED_COSTS}
198
- </h6>
199
- {includedCosts?.map((priceDetail, index) => (
200
- <React.Fragment
201
- key={compact([
202
- priceDetail.productCode,
203
- priceDetail.accommodationCode,
204
- index,
205
- ]).join("_")}
206
- >
207
- <div className="pricing-summary__row">
208
- <div className="pricing-summary__property">
209
- {priceDetail.productName}
210
- </div>
211
- {priceDetail.showPrice && (
212
- <div className="pricing-summary__value">
213
- {formatPrice(
214
- priceDetail.price * priceDetail.amount
215
- )}
216
- </div>
217
- )}
218
- </div>
219
- <div className="pricing-summary__row">
220
- <div className="price-summary__property">
221
- {priceDetail.accommodationName ??
222
- priceDetail.accommodationCode}
223
- </div>
224
- </div>
225
- </React.Fragment>
226
- ))}
227
- </div>
228
- )}
229
- {!isEmpty(extraCosts) && (
230
- <div className="pricing-summary__group">
231
- <h6 className="pricing-summary__title">
232
- {translations.SIDEBAR.EXTRA_COSTS}
233
- </h6>
234
- {extraCosts?.map((priceDetail, index) => (
235
- <React.Fragment
236
- key={compact([
237
- priceDetail.productCode,
238
- priceDetail.accommodationCode,
239
- index,
240
- ]).join("_")}
241
- >
242
- <div className="pricing-summary__row">
243
- <div className="pricing-summary__property">
244
- {priceDetail.productName}
245
- </div>
246
- {priceDetail.showPrice && (
247
- <div className="pricing-summary__value">
248
- {formatPrice(
249
- priceDetail.price * priceDetail.amount
250
- )}
251
- </div>
252
- )}
253
- </div>
254
- <div className="pricing-summary__row">
255
- <div className="price-summary__property">
256
- {priceDetail.accommodationName ??
257
- priceDetail.accommodationCode}
258
- </div>
259
- </div>
260
- </React.Fragment>
261
- ))}
262
- </div>
263
- )}
264
- </div>
265
- )}
266
-
267
- {!isLoading && canShowTotalPriceSection && (
268
- <div className="pricing-summary__region pricing-summary__region--pricing">
269
- {deposit ? (
270
- <div className="pricing-summary__group">
271
- {totalPrice !== undefined && totalPrice > 0 && (
272
- <div className="pricing-summary__row pricing-summary__row--total-price">
273
- <div className="pricing-summary__property">
274
- <h6 className="pricing-summary__title">
275
- {translations.SHARED.TOTAL_PRICE}
276
- </h6>
277
- </div>
278
- <div className="pricing-summary__value">
279
- <div className="pricing">
280
- <div className="pricing__price">
281
- {formatPrice(totalPrice)}
282
- </div>
283
- </div>
284
- </div>
285
- </div>
286
- )}
287
- <div className="pricing-summary__row">
288
- <div className="pricing-summary__property">
289
- <h6 className="pricing-summary__title">
290
- {translations.SIDEBAR.DEPOSIT}
291
- </h6>
292
- </div>
293
-
294
- <div className="pricing-summary__value">
295
- <div className="pricing">
296
- <div className="pricing__price">
297
- {formatPrice(deposit)}
298
- </div>
299
- </div>
300
- </div>
301
- </div>
302
- <div className="pricing-summary__row">
303
- <small>
304
- <em>
305
- {translations.SIDEBAR.DEPOSIT_TEXT1}
306
- <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
307
- {translations.SIDEBAR.DEPOSIT_TEXT3}
308
- {formatPrice(remainingAmount)}
309
- {translations.SIDEBAR.DEPOSIT_TEXT4}
310
- <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
311
- {translations.SIDEBAR.DEPOSIT_TEXT6}
312
- </em>
313
- </small>
314
- </div>
315
- </div>
316
- ) : (
317
- <div className="pricing-summary__group">
318
- {totalPrice !== undefined && totalPrice > 0 && (
319
- <div className="pricing-summary__row">
320
- <div className="pricing-summary__property">
321
- <h6 className="pricing-summary__title">
322
- {translations.SHARED.TOTAL_PRICE}
323
- </h6>
324
- </div>
325
-
326
- <div className="pricing-summary__value">
327
- <div className="pricing">
328
- <div className="pricing__price">
329
- {formatPrice(totalPrice)}
330
- </div>
331
- </div>
332
- </div>
333
- </div>
334
- )}
335
- </div>
336
- )}
337
- </div>
338
- )}
339
- {footerComponent}
340
- </div>
341
- </div>
342
- </div>
343
- );
344
- };
345
-
346
- export default Sidebar;
1
+ import {
2
+ BookingPackageFlight,
3
+ BookingPackageRoom,
4
+ BookingPriceDetail,
5
+ } from "@qite/tide-client/build/types";
6
+ import { compact, isEmpty } from "lodash";
7
+ import React, { useState } from "react";
8
+ import { useSelector } from "react-redux";
9
+ import { buildClassName } from "../../../shared/utils/class-util";
10
+ import { formatPrice } from "../../../shared/utils/localization-util";
11
+ import ProductCard from "../../components/product-card";
12
+ import { selectTranslations } from "../booking/selectors";
13
+ import SidebarFlight from "./sidebar-flight";
14
+ import { getDatePeriodText } from "./sidebar-util";
15
+
16
+ interface SidebarProps {
17
+ productName: string;
18
+ thumbnailUrl?: string;
19
+ isLoading: boolean;
20
+ travelerRooms?: string[];
21
+ startDateText?: string;
22
+ endDateText?: string;
23
+ departureFlight?: BookingPackageFlight;
24
+ returnFlight?: BookingPackageFlight;
25
+ basePrice?: number;
26
+ totalPrice?: number;
27
+ remainingAmountText?: string;
28
+ includedCosts?: BookingPriceDetail[];
29
+ extraCosts?: BookingPriceDetail[];
30
+ deposit?: number;
31
+ accommodations?: BookingPackageRoom[];
32
+ isOnRequest?: boolean;
33
+ headerComponent?: JSX.Element;
34
+ footerComponent?: JSX.Element;
35
+ loaderComponent?: JSX.Element;
36
+ }
37
+
38
+ const Sidebar: React.FC<SidebarProps> = ({
39
+ productName,
40
+ thumbnailUrl,
41
+ isLoading,
42
+ travelerRooms,
43
+ startDateText,
44
+ endDateText,
45
+ departureFlight,
46
+ returnFlight,
47
+ basePrice,
48
+ totalPrice,
49
+ includedCosts,
50
+ extraCosts,
51
+ deposit,
52
+ accommodations,
53
+ isOnRequest,
54
+ headerComponent,
55
+ footerComponent,
56
+ loaderComponent,
57
+ }) => {
58
+ const [active, setActive] = useState<boolean>(false);
59
+ const translations = useSelector(selectTranslations);
60
+
61
+ const canShowPriceBreakdownSection =
62
+ Boolean(basePrice && basePrice > 0) ||
63
+ !isEmpty(includedCosts) ||
64
+ !isEmpty(extraCosts);
65
+ const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
66
+
67
+ const remainingAmount = (totalPrice ?? 0) - (deposit ?? 0);
68
+
69
+ const handleToggleClick = () => {
70
+ setActive(!active);
71
+ };
72
+
73
+ return (
74
+ <div
75
+ className={buildClassName([
76
+ "booking__sidebar",
77
+ active && "booking__sidebar--active",
78
+ ])}
79
+ >
80
+ {headerComponent}
81
+
82
+ <div className="booking__sidebar-frame">
83
+ <ProductCard
84
+ productName={productName}
85
+ thumbnailUrl={thumbnailUrl}
86
+ handleToggleClick={handleToggleClick}
87
+ />
88
+ <div className="pricing-summary">
89
+ <div className="pricing-summary__wrapper">
90
+ <div
91
+ className={`pricing-summary__region ${
92
+ !isLoading ? "pricing-summary__region--fade-in" : ""
93
+ }`}
94
+ >
95
+ <div className="pricing-summary__group">
96
+ <h6 className="pricing-summary__title">
97
+ {translations.SIDEBAR.TRAVEL_INFO}
98
+ </h6>
99
+ {!isEmpty(travelerRooms) &&
100
+ travelerRooms?.map((room, rIndex) => (
101
+ <div className="pricing-summary__row" key={rIndex}>
102
+ <div className="pricing-summary__property">
103
+ {translations.SHARED.ROOM} {rIndex + 1}
104
+ </div>
105
+
106
+ <div className="pricing-summary__value">{room}</div>
107
+ </div>
108
+ ))}
109
+
110
+ {startDateText && (
111
+ <div className="pricing-summary__row">
112
+ <div className="pricing-summary__property">
113
+ {startDateText && endDateText
114
+ ? translations.SIDEBAR.DEPARTURE
115
+ : translations.SIDEBAR.DEPARTURE_SINGLE}
116
+ </div>
117
+ <div className="pricing-summary__value">
118
+ {startDateText}
119
+ </div>
120
+ </div>
121
+ )}
122
+
123
+ {endDateText && (
124
+ <div className="pricing-summary__row">
125
+ <div className="pricing-summary__property">
126
+ {translations.SIDEBAR.ARRIVAL}
127
+ </div>
128
+ <div className="pricing-summary__value">{endDateText}</div>
129
+ </div>
130
+ )}
131
+ </div>
132
+
133
+ {isLoading && loaderComponent}
134
+ {!isLoading && departureFlight && returnFlight && (
135
+ <>
136
+ <SidebarFlight
137
+ title={translations.SIDEBAR.DEPARTURE_FLIGHT}
138
+ flight={departureFlight}
139
+ />
140
+ <SidebarFlight
141
+ title={translations.SIDEBAR.ARRIVAL_FLIGHT}
142
+ flight={returnFlight}
143
+ />
144
+ </>
145
+ )}
146
+
147
+ {accommodations && (
148
+ <div className="pricing-summary__group">
149
+ <h6 className="pricing-summary__title">
150
+ {translations.SIDEBAR.ACCOMMODATION}
151
+ </h6>
152
+ {accommodations.map((accommodation) => {
153
+ let option = accommodation.options.find(
154
+ (x) => x.isSelected
155
+ );
156
+ return (
157
+ <div key={accommodation.index}>
158
+ <div className="pricing-summary__row">
159
+ <div className="pricing-summary__property">
160
+ {option?.accommodationName}
161
+ {isOnRequest
162
+ ? ` (${translations.SIDEBAR.ON_REQUEST})`
163
+ : ""}
164
+ {option?.isOnRequest
165
+ ? ` (${translations.SIDEBAR.ON_REQUEST})`
166
+ : ""}
167
+ </div>
168
+ {/*<div className="pricing-summary__value">
169
+ {option && option.price > 0 && formatPrice(option?.price)}
170
+ </div>*/}
171
+ </div>
172
+ <div className="pricing-summary__row">
173
+ <div className="price-summarty__property">
174
+ {option?.regimeName}
175
+ </div>
176
+ <div className="price-summary__value">
177
+ {getDatePeriodText(option?.from, option?.to, true)}
178
+ </div>
179
+ </div>
180
+ </div>
181
+ );
182
+ })}
183
+ </div>
184
+ )}
185
+ </div>
186
+
187
+ {!isLoading && canShowPriceBreakdownSection && (
188
+ <div
189
+ className={`pricing-summary__region ${
190
+ !isLoading ? "pricing-summary__region--fade-in" : ""
191
+ }`}
192
+ >
193
+ {basePrice !== undefined && basePrice > 0 && (
194
+ <div className="pricing-summary__group">
195
+ <div className="pricing-summary__row">
196
+ <div className="pricing-summary__property">
197
+ <h6 className="pricing-summary__title">
198
+ {translations.SIDEBAR.BASE_PRICE}
199
+ </h6>
200
+ </div>
201
+ <div className="pricing-summary__value">
202
+ {formatPrice(basePrice)}
203
+ </div>
204
+ </div>
205
+ </div>
206
+ )}
207
+ {!isEmpty(includedCosts) && (
208
+ <div className="pricing-summary__group">
209
+ <h6 className="pricing-summary__title">
210
+ {translations.SIDEBAR.INCLUDED_COSTS}
211
+ </h6>
212
+ {includedCosts?.map((priceDetail, index) => (
213
+ <React.Fragment
214
+ key={compact([
215
+ priceDetail.productCode,
216
+ priceDetail.accommodationCode,
217
+ index,
218
+ ]).join("_")}
219
+ >
220
+ <div className="pricing-summary__row">
221
+ <div className="pricing-summary__property">
222
+ {priceDetail.productName}
223
+ </div>
224
+ {priceDetail.showPrice && (
225
+ <div className="pricing-summary__value">
226
+ {formatPrice(
227
+ priceDetail.price * priceDetail.amount
228
+ )}
229
+ </div>
230
+ )}
231
+ </div>
232
+ <div className="pricing-summary__row">
233
+ <div className="price-summary__property">
234
+ {priceDetail.accommodationName ??
235
+ priceDetail.accommodationCode}
236
+ </div>
237
+ </div>
238
+ </React.Fragment>
239
+ ))}
240
+ </div>
241
+ )}
242
+ {!isEmpty(extraCosts) && (
243
+ <div className="pricing-summary__group">
244
+ <h6 className="pricing-summary__title">
245
+ {translations.SIDEBAR.EXTRA_COSTS}
246
+ </h6>
247
+ {extraCosts?.map((priceDetail, index) => (
248
+ <React.Fragment
249
+ key={compact([
250
+ priceDetail.productCode,
251
+ priceDetail.accommodationCode,
252
+ index,
253
+ ]).join("_")}
254
+ >
255
+ <div className="pricing-summary__row">
256
+ <div className="pricing-summary__property">
257
+ {priceDetail.productName}
258
+ </div>
259
+ {priceDetail.showPrice && (
260
+ <div className="pricing-summary__value">
261
+ {formatPrice(
262
+ priceDetail.price * priceDetail.amount
263
+ )}
264
+ </div>
265
+ )}
266
+ </div>
267
+ <div className="pricing-summary__row">
268
+ <div className="price-summary__property">
269
+ {priceDetail.accommodationName ??
270
+ priceDetail.accommodationCode}
271
+ </div>
272
+ </div>
273
+ </React.Fragment>
274
+ ))}
275
+ </div>
276
+ )}
277
+ </div>
278
+ )}
279
+ </div>
280
+
281
+ {!isLoading && canShowTotalPriceSection && (
282
+ <div
283
+ className={`pricing-summary__region pricing-summary__region--pricing ${
284
+ !isLoading ? "pricing-summary__region--fade-in" : ""
285
+ }`}
286
+ >
287
+ {deposit ? (
288
+ <div className="pricing-summary__group">
289
+ {totalPrice !== undefined && totalPrice > 0 && (
290
+ <div className="pricing-summary__row pricing-summary__row--total-price">
291
+ <div className="pricing-summary__property">
292
+ <h6 className="pricing-summary__title">
293
+ {translations.SHARED.TOTAL_PRICE}
294
+ </h6>
295
+ </div>
296
+ <div className="pricing-summary__value">
297
+ <div className="pricing">
298
+ <div className="pricing__price">
299
+ {formatPrice(totalPrice)}
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ )}
305
+ <div className="pricing-summary__row">
306
+ <div className="pricing-summary__property">
307
+ <h6 className="pricing-summary__title">
308
+ {translations.SIDEBAR.DEPOSIT}
309
+ </h6>
310
+ </div>
311
+
312
+ <div className="pricing-summary__value">
313
+ <div className="pricing">
314
+ <div className="pricing__price">
315
+ {formatPrice(deposit)}
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div className="pricing-summary__row">
321
+ <small>
322
+ <em>
323
+ {translations.SIDEBAR.DEPOSIT_TEXT1}
324
+ <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
325
+ {translations.SIDEBAR.DEPOSIT_TEXT3}
326
+ {formatPrice(remainingAmount)}
327
+ {translations.SIDEBAR.DEPOSIT_TEXT4}
328
+ <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
329
+ {translations.SIDEBAR.DEPOSIT_TEXT6}
330
+ </em>
331
+ </small>
332
+ </div>
333
+ </div>
334
+ ) : (
335
+ <div className="pricing-summary__group">
336
+ {totalPrice !== undefined && totalPrice > 0 && (
337
+ <div className="pricing-summary__row pricing-summary__row--total-price">
338
+ <div className="pricing-summary__property">
339
+ <h6 className="pricing-summary__title">
340
+ {translations.SHARED.TOTAL_PRICE}
341
+ </h6>
342
+ </div>
343
+
344
+ <div className="pricing-summary__value">
345
+ <div className="pricing">
346
+ <div className="pricing__price">
347
+ {formatPrice(totalPrice)}
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ )}
353
+ </div>
354
+ )}
355
+ </div>
356
+ )}
357
+ {footerComponent}
358
+ </div>
359
+ </div>
360
+ </div>
361
+ );
362
+ };
363
+
364
+ export default Sidebar;