@qite/tide-booking-component 1.0.42 → 1.0.43

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/booking-wizard/features/product-options/options-form.tsx +70 -5
  3. package/src/booking-wizard/features/room-options/index.tsx +3 -54
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "1.0.42",
3
+ "version": "1.0.43",
4
4
  "description": "React Booking wizard & Booking product component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "module": "build/build-esm/index.js",
package/src/booking-wizard/features/product-options/options-form.tsx CHANGED
@@ -25,7 +25,8 @@ import {
25
25
  setPackageAirportGroups,
26
26
  setPackageGroups,
27
27
  setPackageOptionPax,
28
- setPackageOptionUnits
28
+ setPackageOptionUnits,
29
+ setTagIds
29
30
  } from "../booking/booking-slice";
30
31
  import { FLIGHT_OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from "../booking/constants";
31
32
  import {
@@ -37,7 +38,9 @@ import {
37
38
  selectPackageGroups,
38
39
  selectPackageOptionPax,
39
40
  selectPackageOptionUnits,
40
- selectRequestRooms
41
+ selectPackageTags,
42
+ selectRequestRooms,
43
+ selectTagIds
41
44
  } from "../booking/selectors";
42
45
  import { fetchPriceDetails } from "../price-details/price-details-slice";
43
46
  import NoOptions from "./no-options";
@@ -65,6 +68,9 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
65
68
  const optionUnits = useSelector(selectPackageOptionUnits);
66
69
  const optionPax = useSelector(selectPackageOptionPax);
67
70
 
71
+ const packageTags = settings.hideTags ? [] : useSelector(selectPackageTags);
72
+ let tagIds = useSelector(selectTagIds) ?? [];
73
+
68
74
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
69
75
  if (settings.skipRouter) {
70
76
  dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
@@ -125,6 +131,20 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
125
131
  }
126
132
  };
127
133
 
134
+ const handleOnTagChange = (id: number, checked: boolean) => {
135
+ let updatedTags = [...tagIds];
136
+ if (checked) {
137
+ if (!updatedTags?.includes(id)) {
138
+ updatedTags?.push(id);
139
+ }
140
+ } else {
141
+ updatedTags = updatedTags?.filter((x) => x != id);
142
+ }
143
+
144
+ dispatch(setTagIds(updatedTags));
145
+ dispatch(fetchPriceDetails());
146
+ };
147
+
128
148
  useEffect(() => {
129
149
  if (packageDetails && settings.roomOptions.isHidden && settings.flightOptions.isHidden) {
130
150
  const params = new URLSearchParams(location.search);
@@ -171,12 +191,12 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
171
191
  const goPrevious = () => {
172
192
  if (settings.flightOptions.isHidden) {
173
193
  dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
174
- } else {
194
+ } else {
175
195
  dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
176
196
  }
177
197
  };
178
198
 
179
- const previousUrl = settings.flightOptions.isHidden
199
+ const previousUrl = settings.flightOptions.isHidden
180
200
  ? `${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`
181
201
  : `${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`;
182
202
  const hasPrevious = !settings.roomOptions.isHidden || !settings.flightOptions.isHidden;
@@ -193,7 +213,52 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
193
213
  {isLoading && settings.loaderComponent}
194
214
  {!isLoading && (
195
215
  <div className="form__region">
196
-
216
+ {packageTags && (
217
+ <div className="form__group">
218
+ <div className="booking-card">
219
+ <div className="booking-card__body">
220
+ <div
221
+ className={buildClassName([
222
+ "booking-card__group",
223
+ "booking-card__group--package",
224
+ ])}
225
+ >
226
+ <div className="booking-card__group-body">
227
+ <div className="booking-card__tag-translations">
228
+ {packageTags.map((tag, index) => (
229
+ <label
230
+ key={index}
231
+ htmlFor={`tag-translation-${index}-${tag.title}`}
232
+ className="checkbox__label tag-translation"
233
+ >
234
+ <div className="tag-translation-input__container">
235
+ <input
236
+ type="checkbox"
237
+ id={`tag-translation-${index}-${tag.title}`}
238
+ name={`tag-translation-${index}-${tag.title}`}
239
+ className="checkbox__input"
240
+ checked={tagIds?.includes(tag.id)}
241
+ onChange={(e) =>
242
+ handleOnTagChange(tag.id, e.target.checked)
243
+ }
244
+ />
245
+ </div>
246
+ <span className="tag-translation__title">
247
+ {tag.title}
248
+ </span>
249
+ &nbsp;
250
+ <span className="tag-translation__description">
251
+ {tag.description}
252
+ </span>
253
+ </label>
254
+ ))}
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ )}
197
262
  {optionUnits && !isEmpty(optionUnits) && (
198
263
  <div className="form__group">
199
264
  <div className="booking-card">
package/src/booking-wizard/features/room-options/index.tsx CHANGED
@@ -12,8 +12,7 @@ import { useAppDispatch } from "../../store";
12
12
  import {
13
13
  setCurrentStep,
14
14
  setPackage,
15
- setPackageRooms,
16
- setTagIds
15
+ setPackageRooms
17
16
  } from "../booking/booking-slice";
18
17
  import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from "../booking/constants";
19
18
  import {
@@ -23,9 +22,7 @@ import {
23
22
  selectPackageDetails,
24
23
  selectPackageOptionPax,
25
24
  selectPackageRooms,
26
- selectPackageTags,
27
- selectRequestRooms,
28
- selectTagIds
25
+ selectRequestRooms
29
26
  } from "../booking/selectors";
30
27
  import { fetchPriceDetails } from "../price-details/price-details-slice";
31
28
  import OptionRoom from "../product-options/option-room";
@@ -39,8 +36,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
39
36
  options,
40
37
  loaderComponent,
41
38
  language,
42
- skipRouter,
43
- hideTags,
39
+ skipRouter
44
40
  } = useContext(SettingsContext);
45
41
 
46
42
  const translations = getTranslations(language);
@@ -53,9 +49,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
53
49
  const isLoading = useSelector(selectIsFetchingProductOptions);
54
50
  const optionPax = useSelector(selectPackageOptionPax);
55
51
 
56
- const packageTags = hideTags ? [] : useSelector(selectPackageTags);
57
- let tagIds = useSelector(selectTagIds) ?? [];
58
-
59
52
  const getRoomPax = (index: number) => {
60
53
  var room = requestRooms?.find((x) => x.index == index);
61
54
  var bookingPackagePax = pax.filter((x) =>
@@ -109,20 +102,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
109
102
  dispatch(fetchPriceDetails());
110
103
  };
111
104
 
112
- const handleOnTagChange = (id: number, checked: boolean) => {
113
- let updatedTags = [...tagIds];
114
- if (checked) {
115
- if (!updatedTags?.includes(id)) {
116
- updatedTags?.push(id);
117
- }
118
- } else {
119
- updatedTags = updatedTags?.filter((x) => x != id);
120
- }
121
-
122
- dispatch(setTagIds(updatedTags));
123
- dispatch(fetchPriceDetails());
124
- };
125
-
126
105
  useEffect(() => {
127
106
  if (packageDetails) {
128
107
  const params = new URLSearchParams(location.search);
@@ -205,36 +184,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
205
184
  ))}
206
185
  </tbody>
207
186
  </table>
208
- <div className="booking-card__tag-translations">
209
- {packageTags &&
210
- packageTags.map((tag, index) => (
211
- <label
212
- key={index}
213
- htmlFor={`tag-translation-${index}-${tag.title}`}
214
- className="checkbox__label tag-translation"
215
- >
216
- <div className="tag-translation-input__container">
217
- <input
218
- type="checkbox"
219
- id={`tag-translation-${index}-${tag.title}`}
220
- name={`tag-translation-${index}-${tag.title}`}
221
- className="checkbox__input"
222
- checked={tagIds?.includes(tag.id)}
223
- onChange={(e) =>
224
- handleOnTagChange(tag.id, e.target.checked)
225
- }
226
- />
227
- </div>
228
- <span className="tag-translation__title">
229
- {tag.title}
230
- </span>
231
- &nbsp;
232
- <span className="tag-translation__description">
233
- {tag.description}
234
- </span>
235
- </label>
236
- ))}
237
- </div>
238
187
  </div>
239
188
  </div>
240
189
  </div>