kupos-ui-components-lib 10.4.14 β†’ 10.4.16

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 (11) hide show
  1. package/dist/components/FilterSortBar/FilterSortBarMobile.js +15 -0
  2. package/dist/components/FilterSortBar/OptionCheckboxList.js +2 -1
  3. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +0 -16
  4. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +0 -2
  5. package/dist/ui/PaymentCardMobile/PaymentCardMobile.js +25 -52
  6. package/package.json +2 -2
  7. package/src/components/FilterSortBar/FilterSortBarMobile.tsx +16 -0
  8. package/src/components/FilterSortBar/OptionCheckboxList.tsx +2 -1
  9. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +0 -16
  10. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +0 -2
  11. package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx +37 -69
package/dist/components/FilterSortBar/FilterSortBarMobile.js CHANGED
@@ -124,6 +124,21 @@ const FilterSortBarMobile = ({ categories, onApply, onClearFilter, sortOptions,
124
124
  return s.key === key ? Object.assign(Object.assign({}, s), { active: !s.active }) : s;
125
125
  });
126
126
  onSortChange(updated);
127
+ // A cohort sort chip's matching checkbox (checkedViaSort: true, option
128
+ // id === sort key) mirrors this chip inside the Filtros sheet. Keep that
129
+ // mirror in sync when the chip is toggled from the bar β€” otherwise the
130
+ // chip turns off but the underlying filter option stays selected.
131
+ if (!target.direction) {
132
+ const nextSelected = !target.active;
133
+ const hasMirror = categories.some((cat) => { var _a; return (_a = cat.options) === null || _a === void 0 ? void 0 : _a.some((o) => o.checkedViaSort && o.id === key); });
134
+ if (hasMirror) {
135
+ const updatedCategories = categories.map((cat) => {
136
+ var _a;
137
+ return (Object.assign(Object.assign({}, cat), { options: (_a = cat.options) === null || _a === void 0 ? void 0 : _a.map((o) => (o.checkedViaSort && o.id === key ? Object.assign(Object.assign({}, o), { selected: nextSelected }) : o)) }));
138
+ });
139
+ onApply("all", updatedCategories);
140
+ }
141
+ }
127
142
  };
128
143
  return (React.createElement("div", null,
129
144
  React.createElement("div", { className: "flex items-center gap-[8px]" },
package/dist/components/FilterSortBar/OptionCheckboxList.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { CheckboxIcon, StarIcon, TimeOfDayIcon } from "./icons";
3
+ import CommonService from "../../utils/CommonService";
3
4
  const RatingLabel = ({ stars, label, starColor, icons, }) => (React.createElement("div", { className: "flex items-center gap-[1px] whitespace-nowrap" },
4
5
  Array.from({ length: 5 }, (_, i) => (React.createElement(StarIcon, { key: i, size: 10, filled: stars != null && i < stars, color: starColor, filledSrc: icons === null || icons === void 0 ? void 0 : icons.starFilledIcon, emptySrc: icons === null || icons === void 0 ? void 0 : icons.starEmptyIcon }))),
5
6
  React.createElement("span", { className: "ml-[6px]" }, label)));
@@ -12,7 +13,7 @@ const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor,
12
13
  return (React.createElement("div", { key: option.id, onClick: () => onToggle(option.id), className: "flex items-center justify-between py-[12px] px-[2px] cursor-pointer text-[13px] text-[#464647] select-none [-webkit-tap-highlight-color:transparent]" },
13
14
  kind === "rating" ? (React.createElement(RatingLabel, { stars: option.stars, label: option.label, starColor: starColor, icons: icons })) : option.icon ? (React.createElement("div", { className: "flex items-center gap-[10px]" },
14
15
  React.createElement(TimeOfDayIcon, { variant: option.icon, size: 16, src: (_a = icons === null || icons === void 0 ? void 0 : icons.timeOfDayIcons) === null || _a === void 0 ? void 0 : _a[option.icon] }),
15
- React.createElement("span", null, option.label))) : (React.createElement("span", null, option.label)),
16
+ React.createElement("span", null, option.label))) : (React.createElement("span", null, CommonService.capitalizeFirstLetter(option.label))),
16
17
  React.createElement(CheckboxIcon, { checked: option.selected, color: primaryColor, spriteSrc: icons === null || icons === void 0 ? void 0 : icons.checkBoxIcon })));
17
18
  })));
18
19
  };
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -244,22 +244,6 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
244
244
  return (React.createElement("button", { key: slot.label, type: "button", onClick: () => {
245
245
  onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot.label);
246
246
  onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
247
- // const slotServices = services.filter((s) => {
248
- // const depMin = commonService.timeToMinutes(
249
- // s.departure_time,
250
- // );
251
- // return (
252
- // depMin >= slot.start && depMin < slot.end
253
- // );
254
- // });
255
- // console.log(
256
- // "Selected slot label:",
257
- // slot.label,
258
- // );
259
- // console.log(
260
- // "Services in selected slot:",
261
- // slotServices,
262
- // );
263
247
  }, className: `flex w-full cursor-pointer items-center justify-between gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
264
248
  React.createElement("span", null, slot.label),
265
249
  count > 0 && (React.createElement("span", { className: `text-[11px] rounded-full px-[6px] py-[2px] font-bold ${isActive
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -34,7 +34,6 @@ const HARDCODED_OPERATORS = [
34
34
  const expandedStateMap = {};
35
35
  const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
36
36
  var _a, _b, _c, _d, _e;
37
- console.log("πŸš€ ~ FeatureServiceUi ~ selectedTimeSlot:", selectedTimeSlot);
38
37
  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
39
38
  const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
40
39
  ? wowDealData.services.slice(0, 3).map((service) => ({
@@ -80,7 +79,6 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
80
79
  // Active slot: the one matching selectedTimeSlot label, or the first available
81
80
  const activeSlot = availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
82
81
  availableTimeSlots[0];
83
- console.log("πŸš€ ~ FeatureServiceUi ~ activeSlot:", activeSlot);
84
82
  // Services that fall within the active slot, sorted by final price ascending
85
83
  const servicesInActiveSlot = activeSlot
86
84
  ? services
package/dist/ui/PaymentCardMobile/PaymentCardMobile.js CHANGED
@@ -17,6 +17,7 @@ class ModalTabStateWrapper extends React.Component {
17
17
  }
18
18
  }
19
19
  export const PaymentCardMobile = (props) => {
20
+ var _a, _b;
20
21
  const { serviceNameOnward, serviceNameReturn, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, renderDiscount, discountAmount, currency, insuranceData, isPeru, walletMoney, walletLabel, virtualMoney, virtualLimit, creditosLabel, showDetails = false, setShowDetails, } = props;
21
22
  // We use a Class component wrapper below to hold the state,
22
23
  // avoiding Invalid Hook Call issues when linked in external apps with multiple React instances.
@@ -31,8 +32,8 @@ export const PaymentCardMobile = (props) => {
31
32
  ? droppingStageReturn
32
33
  : droppingStageOnward;
33
34
  const activeDroppingTime = isReturn ? droppingTimeReturn : droppingTimeOnward;
34
- const activeSource = isReturn ? sourceReturn : sourceOnward;
35
- const activeDest = isReturn ? destinationReturn : destinationOnward;
35
+ const activeSource = (_a = (isReturn ? sourceReturn : sourceOnward)) === null || _a === void 0 ? void 0 : _a.replace(/,\s*/g, ", ");
36
+ const activeDest = (_b = (isReturn ? destinationReturn : destinationOnward)) === null || _b === void 0 ? void 0 : _b.replace(/,\s*/g, ", ");
36
37
  const activeServiceName = isReturn ? serviceNameReturn : serviceNameOnward;
37
38
  const activeDate = isReturn ? dateReturn : dateOnward;
38
39
  const activeDuration = isReturn ? durationReturn : durationOnward;
@@ -119,7 +120,7 @@ export const PaymentCardMobile = (props) => {
119
120
  : "2px solid transparent",
120
121
  transition: "all 0.2s ease",
121
122
  } }, (translation === null || translation === void 0 ? void 0 : translation.return) || "Vuelta"))) : null,
122
- React.createElement("div", { style: { padding: "16px 16px 0 16px" } },
123
+ React.createElement("div", { style: { padding: "16px 10px 0 10px" } },
123
124
  React.createElement("div", { style: {
124
125
  display: "flex",
125
126
  alignItems: "flex-start",
@@ -159,27 +160,14 @@ export const PaymentCardMobile = (props) => {
159
160
  } },
160
161
  React.createElement("div", { style: {
161
162
  flexShrink: 0,
162
- width: "28px",
163
- height: "28px",
163
+ width: "20px",
164
+ height: "20px",
164
165
  display: "flex",
165
166
  alignItems: "center",
166
167
  justifyContent: "center",
167
168
  marginTop: "2px",
168
- } }, (icons === null || icons === void 0 ? void 0 : icons.origin) ? (React.createElement("img", { src: icons.origin, style: { width: "18px", height: "18px" }, alt: "origin" })) : (React.createElement("div", { style: {
169
- width: "22px",
170
- height: "22px",
171
- borderRadius: "50%",
172
- border: "2.5px solid #e0321c",
173
- display: "flex",
174
- alignItems: "center",
175
- justifyContent: "center",
176
169
  } },
177
- React.createElement("div", { style: {
178
- width: "8px",
179
- height: "8px",
180
- borderRadius: "50%",
181
- backgroundColor: "#e0321c",
182
- } })))),
170
+ React.createElement("img", { src: icons.origin, style: { width: "18px", height: "18px" }, alt: "origin" })),
183
171
  React.createElement("div", { style: { flex: 1 } },
184
172
  React.createElement("div", { style: {
185
173
  fontSize: "15px",
@@ -187,7 +175,7 @@ export const PaymentCardMobile = (props) => {
187
175
  color: "#464647",
188
176
  textTransform: "capitalize",
189
177
  lineHeight: 1.3,
190
- } }, activeSource),
178
+ }, className: "bold-text" }, activeSource),
191
179
  formatSubText(activeBoardingStage, activeBoardingTime) && (React.createElement("div", { style: {
192
180
  fontSize: "12px",
193
181
  color: "#464647",
@@ -197,25 +185,18 @@ export const PaymentCardMobile = (props) => {
197
185
  React.createElement("div", { style: {
198
186
  display: "flex",
199
187
  alignItems: "flex-start",
200
- gap: "8px",
188
+ gap: "7px",
201
189
  } },
202
190
  React.createElement("div", { style: {
203
191
  flexShrink: 0,
204
- width: "28px",
205
- height: "28px",
192
+ width: "20px",
193
+ height: "20px",
206
194
  display: "flex",
207
195
  alignItems: "center",
208
196
  justifyContent: "center",
209
197
  marginTop: "2px",
210
- } }, (icons === null || icons === void 0 ? void 0 : icons.destination) ? (React.createElement("img", { src: icons.destination, style: { width: "18px", height: "18px" }, alt: "destination" })) : (React.createElement("div", { style: {
211
- width: "22px",
212
- height: "22px",
213
- display: "flex",
214
- alignItems: "center",
215
- justifyContent: "center",
216
198
  } },
217
- React.createElement("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none" },
218
- React.createElement("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z", fill: "#e05252" }))))),
199
+ React.createElement("img", { src: icons.destination, style: { width: "18px", height: "18px" }, alt: "destination" })),
219
200
  React.createElement("div", { style: { flex: 1 } },
220
201
  React.createElement("div", { style: {
221
202
  fontSize: "15px",
@@ -223,7 +204,7 @@ export const PaymentCardMobile = (props) => {
223
204
  color: "#464647",
224
205
  textTransform: "capitalize",
225
206
  lineHeight: 1.3,
226
- } }, activeDest),
207
+ }, className: "bold-text" }, activeDest),
227
208
  formatSubText(activeDroppingStage, activeDroppingTime) && (React.createElement("div", { style: {
228
209
  fontSize: "12px",
229
210
  color: "#464647",
@@ -268,7 +249,7 @@ export const PaymentCardMobile = (props) => {
268
249
  zIndex: 20,
269
250
  } })),
270
251
  React.createElement(ModalTabStateWrapper, { initialTab: journeyTypeActive || 1, showDetails: showDetails, render: (modalTab, setModalTab) => {
271
- var _a, _b, _c, _d, _e, _f, _g;
252
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
272
253
  const modalIsReturn = modalTab === 2;
273
254
  const modalBoardingStage = modalIsReturn
274
255
  ? boardingStageReturn
@@ -282,10 +263,8 @@ export const PaymentCardMobile = (props) => {
282
263
  const modalDroppingTime = modalIsReturn
283
264
  ? droppingTimeReturn
284
265
  : droppingTimeOnward;
285
- const modalSource = modalIsReturn ? sourceReturn : sourceOnward;
286
- const modalDest = modalIsReturn
287
- ? destinationReturn
288
- : destinationOnward;
266
+ const modalSource = (_a = (modalIsReturn ? sourceReturn : sourceOnward)) === null || _a === void 0 ? void 0 : _a.replace(/,\s*/g, ", ");
267
+ const modalDest = (_b = (modalIsReturn ? destinationReturn : destinationOnward)) === null || _b === void 0 ? void 0 : _b.replace(/,\s*/g, ", ");
289
268
  const modalServiceName = modalIsReturn
290
269
  ? serviceNameReturn
291
270
  : serviceNameOnward;
@@ -346,7 +325,7 @@ export const PaymentCardMobile = (props) => {
346
325
  React.createElement("div", { style: {
347
326
  fontSize: "15px",
348
327
  textTransform: "capitalize",
349
- } }, modalSource),
328
+ }, className: "bold-text" }, modalSource),
350
329
  formatSubText(modalBoardingStage, modalBoardingTime) && (React.createElement("div", { style: {
351
330
  fontSize: "13px",
352
331
  marginTop: "2px",
@@ -359,9 +338,8 @@ export const PaymentCardMobile = (props) => {
359
338
  React.createElement("div", null,
360
339
  React.createElement("div", { style: {
361
340
  fontSize: "15px",
362
- fontWeight: 700,
363
341
  textTransform: "capitalize",
364
- } }, modalDest),
342
+ }, className: "bold-text" }, modalDest),
365
343
  formatSubText(modalDroppingStage, modalDroppingTime) && (React.createElement("div", { style: {
366
344
  fontSize: "13px",
367
345
  marginTop: "2px",
@@ -384,7 +362,6 @@ export const PaymentCardMobile = (props) => {
384
362
  ? selectedReturn[0]
385
363
  : selectedOnward[0]).map((val, idx) => {
386
364
  var _a, _b;
387
- console.log("πŸš€ ~ PaymentCardMobile ~ val:", val);
388
365
  return (React.createElement("span", { key: idx, style: {
389
366
  display: "inline-flex",
390
367
  alignItems: "center",
@@ -402,11 +379,6 @@ export const PaymentCardMobile = (props) => {
402
379
  marginLeft: "4px",
403
380
  } }, (_b = (_a = val.type) === null || _a === void 0 ? void 0 : _a.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()))));
404
381
  }))))),
405
- React.createElement("div", { style: S.section, className: "mt-[30px]" },
406
- React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Pol\u00EDtica"),
407
- React.createElement("div", { style: S.sectionRow },
408
- React.createElement("span", { style: { flex: 1 } }, "Cancelaci\u00F3n"),
409
- React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { fontSize: "13px" }), className: "bold-text" }, "Gratis hasta 24h antes"))),
410
382
  React.createElement("div", { style: S.section, className: "mt-[30px]" },
411
383
  React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Tarifa"),
412
384
  selectSeatOnward && selectedOnward && selectedOnward[0]
@@ -437,19 +409,19 @@ export const PaymentCardMobile = (props) => {
437
409
  : null,
438
410
  (insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_enabled) ? (React.createElement("div", { style: S.sectionRow },
439
411
  React.createElement("span", { style: { flex: 1 } },
440
- ((_b = (_a = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _a === void 0 ? void 0 : _a.reduce((acc, qty) => acc + qty, 0)) !== null && _b !== void 0 ? _b : 0) +
441
- ((_d = (_c = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0),
412
+ ((_d = (_c = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0) +
413
+ ((_f = (_e = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _e === void 0 ? void 0 : _e.reduce((acc, qty) => acc + qty, 0)) !== null && _f !== void 0 ? _f : 0),
442
414
  " ",
443
415
  "x Viajero Seguro"),
444
- React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null,
445
- ((_f = props.serviceFeeDataStateValue) === null || _f === void 0 ? void 0 : _f.total_convenience_fee_amount) && (React.createElement("div", { style: S.sectionRow },
416
+ React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_g = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _g !== void 0 ? _g : 0, currencySign)))) : null,
417
+ ((_h = props.serviceFeeDataStateValue) === null || _h === void 0 ? void 0 : _h.total_convenience_fee_amount) && (React.createElement("div", { style: S.sectionRow },
446
418
  React.createElement("span", { style: { flex: 1 } }, "Cargo por servicio"),
447
419
  React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(props.serviceFeeDataStateValue
448
420
  .total_convenience_fee_amount, currencySign)))),
449
421
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
450
422
  React.createElement("div", { style: S.sectionRow },
451
423
  React.createElement("span", { style: { flex: 1 } }, (translation === null || translation === void 0 ? void 0 : translation.promotionalCode) || "CΓ³digo promocional"),
452
- React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }), className: "bold-text" }, CommonService.currency((_g = promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) !== null && _g !== void 0 ? _g : 0, currencySign))),
424
+ React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }), className: "bold-text" }, CommonService.currency((_j = promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) !== null && _j !== void 0 ? _j : 0, currencySign))),
453
425
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { style: {
454
426
  display: "flex",
455
427
  alignItems: "center",
@@ -530,9 +502,10 @@ export const PaymentCardMobile = (props) => {
530
502
  alignItems: "center",
531
503
  justifyContent: "center",
532
504
  gap: "6px",
533
- paddingBottom: "14px",
505
+ paddingBottom: "8px",
534
506
  cursor: "pointer",
535
507
  userSelect: "none",
508
+ marginTop: "-5px",
536
509
  }, onClick: () => setShowDetails && setShowDetails(!showDetails) },
537
510
  React.createElement("span", { style: { fontSize: "14px", fontWeight: 700, color: "#464647" } }, "Ver todos los detalles"),
538
511
  React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.14",
3
+ "version": "10.4.16",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -30,7 +30,7 @@
30
30
  "author": "Zahid Dar",
31
31
  "license": "MIT",
32
32
  "dependencies": {
33
- "kupos-ui-components-lib": "^9.0.7",
33
+ "kupos-ui-components-lib": "^10.4.15",
34
34
  "lottie-react": "^2.4.1",
35
35
  "lottie-web": "^5.13.0",
36
36
  "moment": "^2.30.1",
package/src/components/FilterSortBar/FilterSortBarMobile.tsx CHANGED
@@ -175,6 +175,22 @@ const FilterSortBarMobile = ({
175
175
  return s.key === key ? { ...s, active: !s.active } : s;
176
176
  });
177
177
  onSortChange(updated);
178
+
179
+ // A cohort sort chip's matching checkbox (checkedViaSort: true, option
180
+ // id === sort key) mirrors this chip inside the Filtros sheet. Keep that
181
+ // mirror in sync when the chip is toggled from the bar β€” otherwise the
182
+ // chip turns off but the underlying filter option stays selected.
183
+ if (!target.direction) {
184
+ const nextSelected = !target.active;
185
+ const hasMirror = categories.some((cat) => cat.options?.some((o) => o.checkedViaSort && o.id === key));
186
+ if (hasMirror) {
187
+ const updatedCategories = categories.map((cat) => ({
188
+ ...cat,
189
+ options: cat.options?.map((o) => (o.checkedViaSort && o.id === key ? { ...o, selected: nextSelected } : o)),
190
+ }));
191
+ onApply("all", updatedCategories);
192
+ }
193
+ }
178
194
  };
179
195
 
180
196
  return (
package/src/components/FilterSortBar/OptionCheckboxList.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { FilterOptionItem, FilterCategoryKind, FilterSortBarIcons } from "./types";
3
3
  import { CheckboxIcon, StarIcon, TimeOfDayIcon } from "./icons";
4
+ import CommonService from "../../utils/CommonService";
4
5
 
5
6
  interface OptionCheckboxListProps {
6
7
  options: FilterOptionItem[];
@@ -63,7 +64,7 @@ const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor,
63
64
  <span>{option.label}</span>
64
65
  </div>
65
66
  ) : (
66
- <span>{option.label}</span>
67
+ <span>{CommonService.capitalizeFirstLetter(option.label)}</span>
67
68
  )}
68
69
  <CheckboxIcon checked={option.selected} color={primaryColor} spriteSrc={icons?.checkBoxIcon} />
69
70
  </div>
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -366,22 +366,6 @@ const FeatureServiceUiMobile = ({
366
366
  onClick={() => {
367
367
  onTimeSlotChange?.(slot.label);
368
368
  onTimeDropdownToggle?.(null);
369
- // const slotServices = services.filter((s) => {
370
- // const depMin = commonService.timeToMinutes(
371
- // s.departure_time,
372
- // );
373
- // return (
374
- // depMin >= slot.start && depMin < slot.end
375
- // );
376
- // });
377
- // console.log(
378
- // "Selected slot label:",
379
- // slot.label,
380
- // );
381
- // console.log(
382
- // "Services in selected slot:",
383
- // slotServices,
384
- // );
385
369
  }}
386
370
  className={`flex w-full cursor-pointer items-center justify-between gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}`}
387
371
  >
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -55,7 +55,6 @@ const FeatureServiceUi = ({
55
55
  onTimeDropdownToggle,
56
56
  wowDealData = undefined,
57
57
  }) => {
58
- console.log("πŸš€ ~ FeatureServiceUi ~ selectedTimeSlot:", selectedTimeSlot);
59
58
  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
60
59
  const operators =
61
60
  wowDealData?.services?.length > 0
@@ -113,7 +112,6 @@ const FeatureServiceUi = ({
113
112
  const activeSlot =
114
113
  availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
115
114
  availableTimeSlots[0];
116
- console.log("πŸš€ ~ FeatureServiceUi ~ activeSlot:", activeSlot);
117
115
 
118
116
  // Services that fall within the active slot, sorted by final price ascending
119
117
  const servicesInActiveSlot = activeSlot
package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx CHANGED
@@ -89,8 +89,13 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
89
89
  ? droppingStageReturn
90
90
  : droppingStageOnward;
91
91
  const activeDroppingTime = isReturn ? droppingTimeReturn : droppingTimeOnward;
92
- const activeSource = isReturn ? sourceReturn : sourceOnward;
93
- const activeDest = isReturn ? destinationReturn : destinationOnward;
92
+ const activeSource = (isReturn ? sourceReturn : sourceOnward)?.replace(
93
+ /,\s*/g,
94
+ ", ",
95
+ );
96
+ const activeDest = (
97
+ isReturn ? destinationReturn : destinationOnward
98
+ )?.replace(/,\s*/g, ", ");
94
99
  const activeServiceName = isReturn ? serviceNameReturn : serviceNameOnward;
95
100
  const activeDate = isReturn ? dateReturn : dateOnward;
96
101
  const activeDuration = isReturn ? durationReturn : durationOnward;
@@ -206,7 +211,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
206
211
  </div>
207
212
  ) : null}
208
213
 
209
- <div style={{ padding: "16px 16px 0 16px" }}>
214
+ <div style={{ padding: "16px 10px 0 10px" }}>
210
215
  {/* Service Name + Date Badge */}
211
216
  <div
212
217
  style={{
@@ -270,42 +275,19 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
270
275
  <div
271
276
  style={{
272
277
  flexShrink: 0,
273
- width: "28px",
274
- height: "28px",
278
+ width: "20px",
279
+ height: "20px",
275
280
  display: "flex",
276
281
  alignItems: "center",
277
282
  justifyContent: "center",
278
283
  marginTop: "2px",
279
284
  }}
280
285
  >
281
- {icons?.origin ? (
282
- <img
283
- src={icons.origin}
284
- style={{ width: "18px", height: "18px" }}
285
- alt="origin"
286
- />
287
- ) : (
288
- <div
289
- style={{
290
- width: "22px",
291
- height: "22px",
292
- borderRadius: "50%",
293
- border: "2.5px solid #e0321c",
294
- display: "flex",
295
- alignItems: "center",
296
- justifyContent: "center",
297
- }}
298
- >
299
- <div
300
- style={{
301
- width: "8px",
302
- height: "8px",
303
- borderRadius: "50%",
304
- backgroundColor: "#e0321c",
305
- }}
306
- />
307
- </div>
308
- )}
286
+ <img
287
+ src={icons.origin}
288
+ style={{ width: "18px", height: "18px" }}
289
+ alt="origin"
290
+ />
309
291
  </div>
310
292
  <div style={{ flex: 1 }}>
311
293
  <div
@@ -316,6 +298,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
316
298
  textTransform: "capitalize",
317
299
  lineHeight: 1.3,
318
300
  }}
301
+ className="bold-text"
319
302
  >
320
303
  {activeSource}
321
304
  </div>
@@ -339,44 +322,25 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
339
322
  style={{
340
323
  display: "flex",
341
324
  alignItems: "flex-start",
342
- gap: "8px",
325
+ gap: "7px",
343
326
  }}
344
327
  >
345
328
  <div
346
329
  style={{
347
330
  flexShrink: 0,
348
- width: "28px",
349
- height: "28px",
331
+ width: "20px",
332
+ height: "20px",
350
333
  display: "flex",
351
334
  alignItems: "center",
352
335
  justifyContent: "center",
353
336
  marginTop: "2px",
354
337
  }}
355
338
  >
356
- {icons?.destination ? (
357
- <img
358
- src={icons.destination}
359
- style={{ width: "18px", height: "18px" }}
360
- alt="destination"
361
- />
362
- ) : (
363
- <div
364
- style={{
365
- width: "22px",
366
- height: "22px",
367
- display: "flex",
368
- alignItems: "center",
369
- justifyContent: "center",
370
- }}
371
- >
372
- <svg viewBox="0 0 24 24" width="24" height="24" fill="none">
373
- <path
374
- d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
375
- fill="#e05252"
376
- />
377
- </svg>
378
- </div>
379
- )}
339
+ <img
340
+ src={icons.destination}
341
+ style={{ width: "18px", height: "18px" }}
342
+ alt="destination"
343
+ />
380
344
  </div>
381
345
  <div style={{ flex: 1 }}>
382
346
  <div
@@ -387,6 +351,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
387
351
  textTransform: "capitalize",
388
352
  lineHeight: 1.3,
389
353
  }}
354
+ className="bold-text"
390
355
  >
391
356
  {activeDest}
392
357
  </div>
@@ -476,10 +441,12 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
476
441
  const modalDroppingTime = modalIsReturn
477
442
  ? droppingTimeReturn
478
443
  : droppingTimeOnward;
479
- const modalSource = modalIsReturn ? sourceReturn : sourceOnward;
480
- const modalDest = modalIsReturn
481
- ? destinationReturn
482
- : destinationOnward;
444
+ const modalSource = (
445
+ modalIsReturn ? sourceReturn : sourceOnward
446
+ )?.replace(/,\s*/g, ", ");
447
+ const modalDest = (
448
+ modalIsReturn ? destinationReturn : destinationOnward
449
+ )?.replace(/,\s*/g, ", ");
483
450
  const modalServiceName = modalIsReturn
484
451
  ? serviceNameReturn
485
452
  : serviceNameOnward;
@@ -581,6 +548,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
581
548
  fontSize: "15px",
582
549
  textTransform: "capitalize",
583
550
  }}
551
+ className="bold-text"
584
552
  >
585
553
  {modalSource}
586
554
  </div>
@@ -615,9 +583,9 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
615
583
  <div
616
584
  style={{
617
585
  fontSize: "15px",
618
- fontWeight: 700,
619
586
  textTransform: "capitalize",
620
587
  }}
588
+ className="bold-text"
621
589
  >
622
590
  {modalDest}
623
591
  </div>
@@ -674,7 +642,6 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
674
642
  ? selectedReturn[0]
675
643
  : selectedOnward[0]
676
644
  ).map((val: any, idx: number) => {
677
- console.log("πŸš€ ~ PaymentCardMobile ~ val:", val);
678
645
  return (
679
646
  <span
680
647
  key={idx}
@@ -710,7 +677,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
710
677
  </div>
711
678
 
712
679
  {/* ── POLÍTICA ── */}
713
- <div style={S.section} className="mt-[30px]">
680
+ {/* <div style={S.section} className="mt-[30px]">
714
681
  <div style={S.sectionTitle} className="bold-text">
715
682
  PolΓ­tica
716
683
  </div>
@@ -723,7 +690,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
723
690
  Gratis hasta 24h antes
724
691
  </span>
725
692
  </div>
726
- </div>
693
+ </div> */}
727
694
 
728
695
  {/* ── TARIFA ── */}
729
696
  <div style={S.section} className="mt-[30px]">
@@ -1016,9 +983,10 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
1016
983
  alignItems: "center",
1017
984
  justifyContent: "center",
1018
985
  gap: "6px",
1019
- paddingBottom: "14px",
986
+ paddingBottom: "8px",
1020
987
  cursor: "pointer",
1021
988
  userSelect: "none",
989
+ marginTop: "-5px",
1022
990
  }}
1023
991
  onClick={() => setShowDetails && setShowDetails(!showDetails)}
1024
992
  >