kupos-ui-components-lib 9.2.1 → 9.2.3

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 (29) hide show
  1. package/dist/components/FilterBar/FilterBarMobile.js +1 -1
  2. package/dist/components/ServiceItem/RatingHover.js +2 -2
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +9 -14
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
  5. package/dist/styles.css +10 -3
  6. package/dist/ui/AmenitiesBlock.js +1 -1
  7. package/dist/ui/BottomAmenities/BottomAmenities.d.ts +2 -1
  8. package/dist/ui/BottomAmenities/BottomAmenities.js +2 -2
  9. package/dist/ui/DateTimeSection/DateTimeSection.js +1 -1
  10. package/dist/ui/DurationBlock.js +5 -4
  11. package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +2 -1
  12. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +10 -10
  13. package/dist/ui/KuposButton/KuposButton.js +3 -2
  14. package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +2 -1
  15. package/dist/ui/mobileweb/ExpandedDropdownMobile.js +16 -13
  16. package/package.json +1 -1
  17. package/src/components/FilterBar/FilterBarMobile.tsx +12 -9
  18. package/src/components/ServiceItem/RatingHover.tsx +8 -2
  19. package/src/components/ServiceItem/ServiceItemDesktop.tsx +27 -26
  20. package/src/components/ServiceItem/ServiceItemMobile.tsx +1 -0
  21. package/src/styles.css +9 -0
  22. package/src/ui/AmenitiesBlock.tsx +1 -1
  23. package/src/ui/BottomAmenities/BottomAmenities.tsx +10 -6
  24. package/src/ui/DateTimeSection/DateTimeSection.tsx +4 -1
  25. package/src/ui/DurationBlock.tsx +7 -2
  26. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +17 -8
  27. package/src/ui/KuposButton/KuposButton.tsx +3 -2
  28. package/src/ui/RatingBlock.tsx +4 -1
  29. package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +19 -14
package/dist/components/FilterBar/FilterBarMobile.js CHANGED
@@ -420,7 +420,7 @@ const FilterBarMobile = ({ tripStep, isOpen, setIsOpen, icons, busTerminals, myF
420
420
  borderTopLeftRadius: "20px",
421
421
  right: 0,
422
422
  } },
423
- React.createElement("div", { className: " h-full bg-white flex-col flex justify-between p-5" },
423
+ React.createElement("div", { className: " h-full bg-white flex-col flex justify-between p-5 hide-scrollbar", style: { overflowY: "scroll" } },
424
424
  React.createElement("div", null,
425
425
  React.createElement("div", { className: "flex items-center mb-[16px]" },
426
426
  React.createElement("img", { src: icons.crossIcon, alt: "cross", onClick: () => setIsOpen(false), className: "cursor-pointer w-[14px] h-[14px]" }),
package/dist/components/ServiceItem/RatingHover.js CHANGED
@@ -12,9 +12,9 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
12
12
  return isNaN(val) ? 0 : +val.toFixed(1);
13
13
  };
14
14
  return (React.createElement("div", { className: "flex items-center relative cursor-pointer group" },
15
- React.createElement("div", { className: "w-[18px] h-auto mr-[4px]" },
15
+ React.createElement("div", { className: "w-[18px] h-auto mr-[4px]", style: { opacity: isSoldOut ? 0.5 : 1 } },
16
16
  React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}` })),
17
- React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
17
+ React.createElement("span", { className: "text-[#464647] text-[13.33px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, typeof serviceItem.operator_details[1] === "number"
18
18
  ? serviceItem.operator_details[1].toFixed(1)
19
19
  : serviceItem.operator_details[1]),
20
20
  React.createElement("div", { className: "hidden group-hover:block absolute -left-[30px] z-20 top-[25px]" },
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -62,7 +62,6 @@ const ANIMATION_MAP = {
62
62
  },
63
63
  };
64
64
  function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, }) {
65
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
66
65
  const startViewerCount = (node) => {
67
66
  if (!node || !viewersConfig)
68
67
  return;
@@ -274,19 +273,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
274
273
  ? "mt-[24px]"
275
274
  : "mt-[20px]"} ` },
276
275
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative rounded-[10px] border border-[#ccc]" },
277
- React.createElement("div", {
278
- // className="p-[15px] pt-[20px]"
279
- className: " pt-[20px]", style: {
276
+ React.createElement("div", { className: " pt-[20px]", style: {
280
277
  padding: coachKey
281
278
  ? "15px 15px 20px 15px"
282
279
  : "20px 15px 11px 15px",
283
280
  } },
284
281
  React.createElement("div", {
285
- // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
286
- className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center",
287
- // style={{ marginTop: showTopLabel ? "8px" : "" }}
288
- style: {
289
- marginTop: showTopLabel && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
282
+ // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
283
+ className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", style: {
284
+ marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
290
285
  } },
291
286
  React.createElement("div", { style: {
292
287
  display: "flex",
@@ -296,7 +291,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
296
291
  React.createElement("div", {
297
292
  // className="flex items-center justify-center m-[auto]"
298
293
  className: "" },
299
- React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[150px] ${isSoldOut ? "grayscale" : ""}` }),
294
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
300
295
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
301
296
  React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
302
297
  React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
@@ -310,14 +305,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
310
305
  React.createElement("div", null,
311
306
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
312
307
  position: "absolute",
313
- top: "8px",
308
+ top: serviceDetailsLoading ? "7px" : "5px",
314
309
  right: "16px",
315
310
  } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
316
311
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
317
312
  React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
318
313
  React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
319
- setIsExpand(isItemExpanded ? null : serviceItem.id) }))),
320
- React.createElement("div", { style: {
314
+ setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
315
+ isPeru ? null : (React.createElement("div", { style: {
321
316
  display: "grid",
322
317
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
323
318
  opacity: isItemExpanded ? 1 : 0,
@@ -326,7 +321,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
326
321
  zIndex: -1,
327
322
  } },
328
323
  React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
329
- React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon }))),
324
+ React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true })))),
330
325
  children,
331
326
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]", style: {
332
327
  backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -229,6 +229,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
229
229
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
230
230
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
231
231
  } },
232
- React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut })))));
232
+ React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true })))));
233
233
  }
234
234
  export default ServiceItemMobile;
package/dist/styles.css CHANGED
@@ -430,9 +430,6 @@
430
430
  .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
431
431
  grid-template-columns: 14% 40% 0.5% 24% 13.5%;
432
432
  }
433
- .\[grid-template-columns\:18\%_28\%_2\.5\%_28\%_15\.5\%\] {
434
- grid-template-columns: 18% 28% 2.5% 28% 15.5%;
435
- }
436
433
  .\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
437
434
  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
438
435
  }
@@ -905,6 +902,9 @@
905
902
  --tw-outline-style: none;
906
903
  outline-style: none;
907
904
  }
905
+ .\[rid-template-columns\:18\%_28\%_2\.5\%_28\%_15\.5\%\] {
906
+ rid-template-columns: 18% 28% 2.5% 28% 15.5%;
907
+ }
908
908
  .group-hover\:block {
909
909
  &:is(:where(.group):hover *) {
910
910
  @media (hover: hover) {
@@ -1013,6 +1013,13 @@
1013
1013
  transform: translateY(0);
1014
1014
  }
1015
1015
  }
1016
+ .hide-scrollbar::-webkit-scrollbar {
1017
+ display: none;
1018
+ }
1019
+ .hide-scrollbar {
1020
+ -ms-overflow-style: none;
1021
+ scrollbar-width: none;
1022
+ }
1016
1023
  @property --tw-translate-x {
1017
1024
  syntax: "*";
1018
1025
  inherits: false;
package/dist/ui/AmenitiesBlock.js CHANGED
@@ -53,7 +53,7 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
53
53
  if (isWater(raw))
54
54
  return null;
55
55
  const baseName = getAmenityBaseName(raw);
56
- return (React.createElement("div", { key: key },
56
+ return (React.createElement("div", { key: key, style: { opacity: isSoldOut ? 0.5 : 1 } },
57
57
  React.createElement("div", { className: grayscaleClass },
58
58
  React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() }))));
59
59
  }),
package/dist/ui/BottomAmenities/BottomAmenities.d.ts CHANGED
@@ -21,6 +21,7 @@ interface BottomAmenitiesProps {
21
21
  getAnimationIcon: (icon: string) => any;
22
22
  downArrowIcon?: React.ReactNode;
23
23
  onToggleExpand: () => void;
24
+ isPeru?: boolean;
24
25
  }
25
- declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, }: BottomAmenitiesProps): React.ReactElement;
26
+ declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, }: BottomAmenitiesProps): React.ReactElement;
26
27
  export default BottomAmenities;
package/dist/ui/BottomAmenities/BottomAmenities.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import FlexibleBlock from "../FlexibleBlock";
4
4
  import PetBlock from "../PetBlock";
5
- function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, }) {
5
+ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, }) {
6
6
  const hasPetInfo = serviceItem.pet_seat_info &&
7
7
  Object.keys(serviceItem.pet_seat_info).length > 0;
8
8
  const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -18,6 +18,6 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
18
18
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
19
19
  serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
20
20
  hasPetInfo && (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
21
- React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand }, downArrowIcon))));
21
+ isPeru ? null : (React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand }, downArrowIcon)))));
22
22
  }
23
23
  export default BottomAmenities;
package/dist/ui/DateTimeSection/DateTimeSection.js CHANGED
@@ -25,7 +25,7 @@ function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArri
25
25
  gridTemplateRows: "1fr",
26
26
  } },
27
27
  React.createElement("div", { className: "flex flex-col gap-[4px]" },
28
- orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
28
+ orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center", style: { opacity: isSoldOut ? 0.5 : 1 } },
29
29
  React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
30
30
  !isCiva &&
31
31
  (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
package/dist/ui/DurationBlock.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from "react";
2
2
  const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
3
- React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
3
+ React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }, renderIcon("hours", "14px")),
4
4
  React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
5
- serviceItem.duration,
6
- " ",
7
- translation.hours,
5
+ React.createElement("span", { style: { opacity: isSoldOut ? 0.5 : 1 } },
6
+ serviceItem.duration,
7
+ " ",
8
+ translation.hours),
8
9
  React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
9
10
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
10
11
  "Duraci\u00F3n estimada del viaje"))));
package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts CHANGED
@@ -9,6 +9,7 @@ interface ExpandedDropdownProps {
9
9
  isPeru?: boolean;
10
10
  translation?: Record<string, string>;
11
11
  getAnimationIcon?: (iconName: string) => any;
12
+ isChangeTicket?: boolean;
12
13
  }
13
- declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, }: ExpandedDropdownProps): React.ReactElement;
14
+ declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, }: ExpandedDropdownProps): React.ReactElement;
14
15
  export default ExpandedDropdown;
package/dist/ui/ExpendedDropDown/ExpandedDropdown.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
- function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, }) {
3
+ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, }) {
4
4
  const hasPetInfo = serviceItem.pet_seat_info &&
5
5
  Object.keys(serviceItem.pet_seat_info).length > 0;
6
6
  return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -20,14 +20,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
20
20
  React.createElement("span", null,
21
21
  React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
22
22
  " Tu pasaje puede ser anulado de forma online",
23
- " ",
24
- React.createElement("span", { className: "bold-text" },
25
- "hasta ",
26
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
27
- " horas antes"),
28
- " ",
29
- "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
30
- isPeru ? null : (React.createElement("div", { className: "flex gap-[8px]" },
23
+ React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
24
+ " antes de la salida del bus.")),
25
+ isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]" },
31
26
  React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
32
27
  React.createElement("span", null,
33
28
  React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
@@ -38,6 +33,11 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
38
33
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
39
34
  " horas antes"),
40
35
  " ",
41
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
36
+ "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
37
+ React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
38
+ React.createElement("span", null,
39
+ React.createElement("span", null,
40
+ React.createElement("span", { className: "bold-text" }, "Pol\u00EDtica de cambios:"),
41
+ " Esta empresa no permite cambios de pasajes")))))));
42
42
  }
43
43
  export default ExpandedDropdown;
package/dist/ui/KuposButton/KuposButton.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from "react";
2
2
  function KuposButton({ isSoldOut, isLoading, buttonColor, buyLabel, soldOutLabel, soldOutIcon, onClick, }) {
3
3
  const isDisabled = isLoading || isSoldOut;
4
- return (React.createElement("button", { onClick: () => (!isSoldOut ? onClick() : null), disabled: isLoading, className: "w-full py-[12px] text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center", style: {
4
+ return (React.createElement("button", { onClick: () => (!isSoldOut ? onClick() : null), disabled: isLoading, className: "w-full text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center", style: {
5
5
  backgroundColor: isDisabled ? "lightgray" : buttonColor,
6
6
  cursor: isDisabled ? "not-allowed" : "pointer",
7
+ padding: isLoading ? "7px 0" : isSoldOut ? "12px 0" : "12px 0",
7
8
  } },
8
- React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
9
+ React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase gap-[5px]" },
9
10
  isSoldOut ? soldOutIcon : null,
10
11
  isLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (buyLabel) : (soldOutLabel))));
11
12
  }
package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts CHANGED
@@ -10,6 +10,7 @@ interface ExpandedDropdownMobileProps {
10
10
  petSeatInfo?: Record<string, any>;
11
11
  petFriendlyAnim?: any;
12
12
  isSoldOut?: boolean;
13
+ isChangeTicket?: boolean;
13
14
  }
14
- declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }: ExpandedDropdownMobileProps): React.ReactElement;
15
+ declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, }: ExpandedDropdownMobileProps): React.ReactElement;
15
16
  export default ExpandedDropdownMobile;
package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
- function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }) {
3
+ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, }) {
4
4
  return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
5
5
  backgroundColor: "#ffefef",
6
6
  borderRadius: "0 0 14px 14px",
7
+ opacity: isSoldOut ? 0.5 : 1,
7
8
  } },
8
9
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
9
10
  petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
@@ -29,17 +30,19 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
29
30
  " horas antes"),
30
31
  " ",
31
32
  "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
32
- isPeru ? null : (React.createElement("div", { className: "flex gap-[6px]" },
33
- React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
34
- React.createElement("span", null,
35
- React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
36
- " Tu pasaje puede ser cambiado de manera online",
37
- " ",
38
- React.createElement("span", { className: "bold-text" },
39
- "hasta ",
40
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
41
- " horas antes"),
42
- " ",
43
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
33
+ isPeru
34
+ ? null
35
+ : isChangeTicket && (React.createElement("div", { className: "flex gap-[6px]" },
36
+ React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
37
+ React.createElement("span", null,
38
+ React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
39
+ " Tu pasaje puede ser cambiado de manera online",
40
+ " ",
41
+ React.createElement("span", { className: "bold-text" },
42
+ "hasta ",
43
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
44
+ " horas antes"),
45
+ " ",
46
+ "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
44
47
  }
45
48
  export default ExpandedDropdownMobile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.2.1",
3
+ "version": "9.2.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/FilterBar/FilterBarMobile.tsx CHANGED
@@ -41,7 +41,7 @@ const FilterBarMobile = ({
41
41
  selectedItems,
42
42
  mySeatTypeFilters,
43
43
  myBoradingStageFilters,
44
- myDropoffStageFilters
44
+ myDropoffStageFilters,
45
45
  );
46
46
 
47
47
  setServiceListFilteredBasedOnTripStep(tripStep, new_service_list);
@@ -88,7 +88,7 @@ const FilterBarMobile = ({
88
88
  selectedItems,
89
89
  mySeatTypeFilters,
90
90
  myBoradingStageFilters,
91
- myDropoffStageFilters
91
+ myDropoffStageFilters,
92
92
  ) => {
93
93
  let new_service_list = [];
94
94
  serviceList?.map((service) => {
@@ -97,7 +97,7 @@ const FilterBarMobile = ({
97
97
  selectedItems,
98
98
  mySeatTypeFilters,
99
99
  myBoradingStageFilters,
100
- myDropoffStageFilters
100
+ myDropoffStageFilters,
101
101
  );
102
102
  if (service_qualifing) {
103
103
  new_service_list.push(service);
@@ -107,7 +107,7 @@ const FilterBarMobile = ({
107
107
  };
108
108
  const setServiceListFilteredBasedOnTripStep = (
109
109
  tripStep,
110
- new_service_list
110
+ new_service_list,
111
111
  ) => {
112
112
  if (tripStep === 1) {
113
113
  setServiceListOnwardFiltered(new_service_list);
@@ -120,7 +120,7 @@ const FilterBarMobile = ({
120
120
  selectedItems,
121
121
  mySeatTypeFilters,
122
122
  myBoradingStageFilters,
123
- myDropoffStageFilters
123
+ myDropoffStageFilters,
124
124
  ) => {
125
125
  let is_direct_service = service.is_direct_trip;
126
126
  let pet_friendly = service.pet_seat_info;
@@ -425,7 +425,7 @@ const FilterBarMobile = ({
425
425
  newFilters["service_type"] = Array.from(service_type_set)?.map(
426
426
  (item) => {
427
427
  return { name: item, selected: false };
428
- }
428
+ },
429
429
  );
430
430
  return newFilters;
431
431
  });
@@ -461,7 +461,7 @@ const FilterBarMobile = ({
461
461
  newFilters["special_departure"] = Array.from(special_dept_set)?.map(
462
462
  (item) => {
463
463
  return { name: item, selected: false };
464
- }
464
+ },
465
465
  );
466
466
  return newFilters;
467
467
  });
@@ -531,7 +531,10 @@ const FilterBarMobile = ({
531
531
  right: 0,
532
532
  }}
533
533
  >
534
- <div className=" h-full bg-white flex-col flex justify-between p-5">
534
+ <div
535
+ className=" h-full bg-white flex-col flex justify-between p-5 hide-scrollbar"
536
+ style={{ overflowY: "scroll" }}
537
+ >
535
538
  <div>
536
539
  <div className="flex items-center mb-[16px]">
537
540
  <img
@@ -590,7 +593,7 @@ const FilterBarMobile = ({
590
593
  checked={filter?.selected}
591
594
  />
592
595
  </div>
593
- )
596
+ ),
594
597
  )}
595
598
  </div>
596
599
  ))}
package/src/components/ServiceItem/RatingHover.tsx CHANGED
@@ -31,7 +31,10 @@ const RatingHover: React.FC<RatingHoverProps> = ({
31
31
 
32
32
  return (
33
33
  <div className="flex items-center relative cursor-pointer group">
34
- <div className="w-[18px] h-auto mr-[4px]">
34
+ <div
35
+ className="w-[18px] h-auto mr-[4px]"
36
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
37
+ >
35
38
  <img
36
39
  src={serviceItem.icons.rating}
37
40
  alt="origin"
@@ -40,7 +43,10 @@ const RatingHover: React.FC<RatingHoverProps> = ({
40
43
  }`}
41
44
  />
42
45
  </div>
43
- <span className="text-[#464647] text-[13.33px]">
46
+ <span
47
+ className="text-[#464647] text-[13.33px]"
48
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
49
+ >
44
50
  {typeof serviceItem.operator_details[1] === "number"
45
51
  ? serviceItem.operator_details[1].toFixed(1)
46
52
  : serviceItem.operator_details[1]}
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -103,7 +103,6 @@ function ServiceItemPB({
103
103
  coachKey,
104
104
  viewersConfig,
105
105
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
106
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
107
106
  const startViewerCount = (node: HTMLSpanElement | null) => {
108
107
  if (!node || !viewersConfig) return;
109
108
 
@@ -484,7 +483,6 @@ function ServiceItemPB({
484
483
  // }}
485
484
  >
486
485
  <div
487
- // className="p-[15px] pt-[20px]"
488
486
  className=" pt-[20px]"
489
487
  style={{
490
488
  padding: coachKey
@@ -493,12 +491,11 @@ function ServiceItemPB({
493
491
  }}
494
492
  >
495
493
  <div
496
- // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
494
+ // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
497
495
  className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
498
- // style={{ marginTop: showTopLabel ? "8px" : "" }}
499
496
  style={{
500
497
  marginTop:
501
- showTopLabel && serviceItem?.is_direct_trip ? "8px" : "",
498
+ showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
502
499
  }}
503
500
  >
504
501
  {/* OPERATOR LOGO */}
@@ -516,7 +513,7 @@ function ServiceItemPB({
516
513
  <img
517
514
  src={serviceItem.operator_details[0]}
518
515
  alt="service logo"
519
- className={`h-[30px] w-[150px] ${
516
+ className={`h-[30px] w-[auto] ${
520
517
  isSoldOut ? "grayscale" : ""
521
518
  }`}
522
519
  />
@@ -579,7 +576,7 @@ function ServiceItemPB({
579
576
  className="flex justify-end mr-[11px] "
580
577
  style={{
581
578
  position: "absolute",
582
- top: "8px",
579
+ top: serviceDetailsLoading ? "7px" : "5px",
583
580
  right: "16px",
584
581
  }}
585
582
  >
@@ -616,33 +613,37 @@ function ServiceItemPB({
616
613
  setIsExpand &&
617
614
  setIsExpand(isItemExpanded ? null : serviceItem.id)
618
615
  }
616
+ isPeru={isPeru}
619
617
  />
620
618
  </div>
621
619
  </div>
622
620
 
623
621
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
624
- <div
625
- style={{
626
- display: "grid",
627
- gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
628
- opacity: isItemExpanded ? 1 : 0,
629
- transition:
630
- "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
631
- position: "relative",
632
- zIndex: -1,
633
- }}
634
- >
622
+ {isPeru ? null : (
635
623
  <div
636
- style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
624
+ style={{
625
+ display: "grid",
626
+ gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
627
+ opacity: isItemExpanded ? 1 : 0,
628
+ transition:
629
+ "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
630
+ position: "relative",
631
+ zIndex: -1,
632
+ }}
637
633
  >
638
- <ExpandedDropdown
639
- serviceItem={serviceItem}
640
- isPeru={isPeru}
641
- translation={translation}
642
- getAnimationIcon={getAnimationIcon}
643
- />
634
+ <div
635
+ style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
636
+ >
637
+ <ExpandedDropdown
638
+ serviceItem={serviceItem}
639
+ isPeru={isPeru}
640
+ translation={translation}
641
+ getAnimationIcon={getAnimationIcon}
642
+ isChangeTicket={serviceItem.is_change_ticket === true}
643
+ />
644
+ </div>
644
645
  </div>
645
- </div>
646
+ )}
646
647
 
647
648
  {children}
648
649
  {/* Bottom discount banner */}
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -503,6 +503,7 @@ function ServiceItemMobile({
503
503
  petSeatInfo={serviceItem.pet_seat_info}
504
504
  petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
505
505
  isSoldOut={isSoldOut}
506
+ isChangeTicket={serviceItem.is_change_ticket === true}
506
507
  />
507
508
  </div>
508
509
  </div>
package/src/styles.css CHANGED
@@ -78,3 +78,12 @@
78
78
  transform: translateY(0);
79
79
  }
80
80
  }
81
+
82
+ .hide-scrollbar::-webkit-scrollbar {
83
+ display: none;
84
+ }
85
+
86
+ .hide-scrollbar {
87
+ -ms-overflow-style: none;
88
+ scrollbar-width: none;
89
+ }
package/src/ui/AmenitiesBlock.tsx CHANGED
@@ -91,7 +91,7 @@ const AmenitiesBlock = ({
91
91
  const baseName = getAmenityBaseName(raw);
92
92
 
93
93
  return (
94
- <div key={key}>
94
+ <div key={key} style={{ opacity: isSoldOut ? 0.5 : 1 }}>
95
95
  <div className={grayscaleClass}>
96
96
  <SvgAmenities
97
97
  moreAnemities={false}
package/src/ui/BottomAmenities/BottomAmenities.tsx CHANGED
@@ -24,6 +24,7 @@ interface BottomAmenitiesProps {
24
24
  getAnimationIcon: (icon: string) => any;
25
25
  downArrowIcon?: React.ReactNode;
26
26
  onToggleExpand: () => void;
27
+ isPeru?: boolean;
27
28
  }
28
29
 
29
30
  function BottomAmenities({
@@ -37,6 +38,7 @@ function BottomAmenities({
37
38
  getAnimationIcon,
38
39
  downArrowIcon,
39
40
  onToggleExpand,
41
+ isPeru,
40
42
  }: BottomAmenitiesProps): React.ReactElement {
41
43
  const hasPetInfo =
42
44
  serviceItem.pet_seat_info &&
@@ -95,12 +97,14 @@ function BottomAmenities({
95
97
 
96
98
  {/* DOWN ARROW ICON */}
97
99
  {/* {showDownArrow ? ( */}
98
- <div
99
- className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`}
100
- onClick={onToggleExpand}
101
- >
102
- {downArrowIcon}
103
- </div>
100
+ {isPeru ? null : (
101
+ <div
102
+ className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`}
103
+ onClick={onToggleExpand}
104
+ >
105
+ {downArrowIcon}
106
+ </div>
107
+ )}
104
108
  {/* ) : null} */}
105
109
  </div>
106
110
  </div>
package/src/ui/DateTimeSection/DateTimeSection.tsx CHANGED
@@ -75,7 +75,10 @@ function DateTimeSection({
75
75
  {orignLabel}
76
76
  </div>
77
77
  ) : (
78
- <div className="h-[20px] flex items-center">
78
+ <div
79
+ className="h-[20px] flex items-center"
80
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
81
+ >
79
82
  <img
80
83
  src={serviceItem.icons?.origin}
81
84
  alt="origin"
package/src/ui/DurationBlock.tsx CHANGED
@@ -8,12 +8,17 @@ const DurationBlock = ({
8
8
  colors,
9
9
  }) => (
10
10
  <div className="flex items-baseline relative whitespace-nowrap ">
11
- <div className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}>
11
+ <div
12
+ className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}
13
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
14
+ >
12
15
  {renderIcon("hours", "14px")}
13
16
  </div>
14
17
 
15
18
  <div className="group text-[13.33px] cursor-pointer">
16
- {serviceItem.duration} {translation.hours}
19
+ <span style={{ opacity: isSoldOut ? 0.5 : 1 }}>
20
+ {serviceItem.duration} {translation.hours}
21
+ </span>
17
22
  <div
18
23
  className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
19
24
  style={{ backgroundColor: colors.bottomStripColor }}
package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx CHANGED
@@ -11,6 +11,7 @@ interface ExpandedDropdownProps {
11
11
  isPeru?: boolean;
12
12
  translation?: Record<string, string>;
13
13
  getAnimationIcon?: (iconName: string) => any;
14
+ isChangeTicket?: boolean;
14
15
  }
15
16
 
16
17
  function ExpandedDropdown({
@@ -18,6 +19,7 @@ function ExpandedDropdown({
18
19
  isPeru = false,
19
20
  translation = {},
20
21
  getAnimationIcon,
22
+ isChangeTicket = false,
21
23
  }: ExpandedDropdownProps): React.ReactElement {
22
24
  const hasPetInfo =
23
25
  serviceItem.pet_seat_info &&
@@ -48,7 +50,7 @@ function ExpandedDropdown({
48
50
  </div>
49
51
  </div>
50
52
  )}
51
- {serviceItem.is_change_ticket && (
53
+ { serviceItem.is_change_ticket && (
52
54
  <div className="flex items-center gap-[10px]">
53
55
  <LottiePlayer
54
56
  animationData={getAnimationIcon("flexibleIcon")}
@@ -93,15 +95,12 @@ function ExpandedDropdown({
93
95
  <span style={{ marginTop: "2px" }}>•</span>
94
96
  <span>
95
97
  <span className="bold-text">Políticas de anulación:</span> Tu pasaje
96
- puede ser anulado de forma online{" "}
97
- <span className="bold-text">
98
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
99
- </span>{" "}
100
- de la salida del bus. Al anular tu pasaje recibirás una devolución
101
- del 85% del monto de tu compra.
98
+ puede ser anulado de forma online
99
+ <span className="bold-text"> hasta 4 horas antes</span> antes de la
100
+ salida del bus.
102
101
  </span>
103
102
  </div>
104
- {isPeru ? null : (
103
+ {isPeru ? null : isChangeTicket ? (
105
104
  <div className="flex gap-[8px]">
106
105
  <span style={{ marginTop: "2px" }}>•</span>
107
106
  <span>
@@ -114,6 +113,16 @@ function ExpandedDropdown({
114
113
  kupospay.
115
114
  </span>
116
115
  </div>
116
+ ) : (
117
+ <div className="flex gap-[8px] text-[13.33px]">
118
+ <span style={{ marginTop: "2px" }}>•</span>
119
+ <span>
120
+ <span>
121
+ <span className="bold-text">Política de cambios:</span> Esta
122
+ empresa no permite cambios de pasajes
123
+ </span>
124
+ </span>
125
+ </div>
117
126
  )}
118
127
  </div>
119
128
  </div>
package/src/ui/KuposButton/KuposButton.tsx CHANGED
@@ -25,13 +25,14 @@ function KuposButton({
25
25
  <button
26
26
  onClick={() => (!isSoldOut ? onClick() : null)}
27
27
  disabled={isLoading}
28
- className="w-full py-[12px] text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center"
28
+ className="w-full text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center"
29
29
  style={{
30
30
  backgroundColor: isDisabled ? "lightgray" : buttonColor,
31
31
  cursor: isDisabled ? "not-allowed" : "pointer",
32
+ padding: isLoading ? "7px 0" : isSoldOut ? "12px 0" : "12px 0",
32
33
  }}
33
34
  >
34
- <span className="min-w-[75px] flex justify-center items-center bold-text uppercase">
35
+ <span className="min-w-[75px] flex justify-center items-center bold-text uppercase gap-[5px]">
35
36
  {isSoldOut ? soldOutIcon : null}
36
37
  {isLoading ? (
37
38
  <span className="loader-circle"></span>
package/src/ui/RatingBlock.tsx CHANGED
@@ -10,7 +10,10 @@ const RatingBlock = ({
10
10
  translation,
11
11
  isPeru = false,
12
12
  }: any) => (
13
- <div className="flex items-center whitespace-nowrap">
13
+ <div
14
+ className="flex items-center whitespace-nowrap"
15
+ // style={{ opacity: isSoldOut ? 0.5 : 1 }}
16
+ >
14
17
  {showRating && (
15
18
  <RatingHover
16
19
  serviceItem={serviceItem}
package/src/ui/mobileweb/ExpandedDropdownMobile.tsx CHANGED
@@ -12,6 +12,7 @@ interface ExpandedDropdownMobileProps {
12
12
  petSeatInfo?: Record<string, any>;
13
13
  petFriendlyAnim?: any;
14
14
  isSoldOut?: boolean;
15
+ isChangeTicket?: boolean;
15
16
  }
16
17
 
17
18
  function ExpandedDropdownMobile({
@@ -20,6 +21,7 @@ function ExpandedDropdownMobile({
20
21
  petSeatInfo,
21
22
  petFriendlyAnim,
22
23
  isSoldOut,
24
+ isChangeTicket = false,
23
25
  }: ExpandedDropdownMobileProps): React.ReactElement {
24
26
  return (
25
27
  <div
@@ -27,6 +29,7 @@ function ExpandedDropdownMobile({
27
29
  style={{
28
30
  backgroundColor: "#ffefef",
29
31
  borderRadius: "0 0 14px 14px",
32
+ opacity: isSoldOut ? 0.5 : 1,
30
33
  }}
31
34
  >
32
35
  <div
@@ -72,20 +75,22 @@ function ExpandedDropdownMobile({
72
75
  del 85% del monto de tu compra.
73
76
  </span>
74
77
  </div>
75
- {isPeru ? null : (
76
- <div className="flex gap-[6px]">
77
- <span style={{ marginTop: "2px" }}>•</span>
78
- <span>
79
- <span className="bold-text">Políticas de cambios:</span> Tu pasaje
80
- puede ser cambiado de manera online{" "}
81
- <span className="bold-text">
82
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
83
- </span>{" "}
84
- de la salida del bus. El monto será reembolsado a tu billetera
85
- kupospay.
86
- </span>
87
- </div>
88
- )}
78
+ {isPeru
79
+ ? null
80
+ : isChangeTicket && (
81
+ <div className="flex gap-[6px]">
82
+ <span style={{ marginTop: "2px" }}>•</span>
83
+ <span>
84
+ <span className="bold-text">Políticas de cambios:</span> Tu
85
+ pasaje puede ser cambiado de manera online{" "}
86
+ <span className="bold-text">
87
+ hasta {serviceItem?.change_ticket_hours || 6} horas antes
88
+ </span>{" "}
89
+ de la salida del bus. El monto será reembolsado a tu billetera
90
+ kupospay.
91
+ </span>
92
+ </div>
93
+ )}
89
94
  </div>
90
95
  </div>
91
96
  );