kupos-ui-components-lib 9.2.0 → 9.2.2

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 (26) 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 +7 -11
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
  5. package/dist/styles.css +10 -3
  6. package/dist/ui/AmenitiesBlock.js +1 -1
  7. package/dist/ui/DateTimeSection/DateTimeSection.js +1 -1
  8. package/dist/ui/DurationBlock.js +5 -4
  9. package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +2 -1
  10. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +15 -13
  11. package/dist/ui/KuposButton/KuposButton.js +3 -2
  12. package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +5 -1
  13. package/dist/ui/mobileweb/ExpandedDropdownMobile.js +28 -13
  14. package/package.json +1 -1
  15. package/src/components/FilterBar/FilterBarMobile.tsx +12 -9
  16. package/src/components/ServiceItem/RatingHover.tsx +8 -2
  17. package/src/components/ServiceItem/ServiceItemDesktop.tsx +5 -6
  18. package/src/components/ServiceItem/ServiceItemMobile.tsx +9 -2
  19. package/src/styles.css +9 -0
  20. package/src/ui/AmenitiesBlock.tsx +1 -1
  21. package/src/ui/DateTimeSection/DateTimeSection.tsx +4 -1
  22. package/src/ui/DurationBlock.tsx +7 -2
  23. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +19 -15
  24. package/src/ui/KuposButton/KuposButton.tsx +3 -2
  25. package/src/ui/RatingBlock.tsx +4 -1
  26. package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +53 -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
@@ -274,19 +274,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
274
274
  ? "mt-[24px]"
275
275
  : "mt-[20px]"} ` },
276
276
  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: {
277
+ React.createElement("div", { className: " pt-[20px]", style: {
280
278
  padding: coachKey
281
279
  ? "15px 15px 20px 15px"
282
280
  : "20px 15px 11px 15px",
283
281
  } },
284
282
  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" : "",
283
+ // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
284
+ className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", style: {
285
+ marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
290
286
  } },
291
287
  React.createElement("div", { style: {
292
288
  display: "flex",
@@ -296,7 +292,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
296
292
  React.createElement("div", {
297
293
  // className="flex items-center justify-center m-[auto]"
298
294
  className: "" },
299
- React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[150px] ${isSoldOut ? "grayscale" : ""}` }),
295
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
300
296
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
301
297
  React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
302
298
  React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
@@ -310,7 +306,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
310
306
  React.createElement("div", null,
311
307
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
312
308
  position: "absolute",
313
- top: "8px",
309
+ top: serviceDetailsLoading ? "7px" : "5px",
314
310
  right: "16px",
315
311
  } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
316
312
  (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,
@@ -326,7 +322,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
326
322
  zIndex: -1,
327
323
  } },
328
324
  React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
329
- React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon }))),
325
+ React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true }))),
330
326
  children,
331
327
  (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
328
  backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -138,7 +138,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
138
138
  React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
139
139
  React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
140
140
  React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
141
- React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : null),
141
+ React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null),
142
142
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
143
143
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
144
144
  React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
@@ -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 })))));
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/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: {
@@ -27,17 +27,19 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
27
27
  " horas antes"),
28
28
  " ",
29
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]" },
31
- React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
32
- React.createElement("span", null,
33
- React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
34
- " Tu pasaje puede ser cambiado de manera online",
35
- " ",
36
- React.createElement("span", { className: "bold-text" },
37
- "hasta ",
38
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
39
- " horas antes"),
40
- " ",
41
- "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
30
+ isPeru
31
+ ? null
32
+ : isChangeTicket && (React.createElement("div", { className: "flex gap-[8px]" },
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."))))));
42
44
  }
43
45
  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
@@ -7,6 +7,10 @@ interface ExpandedDropdownMobileProps {
7
7
  is_tracking_enabled?: boolean;
8
8
  };
9
9
  isPeru?: boolean;
10
+ petSeatInfo?: Record<string, any>;
11
+ petFriendlyAnim?: any;
12
+ isSoldOut?: boolean;
13
+ isChangeTicket?: boolean;
10
14
  }
11
- declare function ExpandedDropdownMobile({ serviceItem, isPeru, }: ExpandedDropdownMobileProps): React.ReactElement;
15
+ declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, }: ExpandedDropdownMobileProps): React.ReactElement;
12
16
  export default ExpandedDropdownMobile;
package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED
@@ -1,10 +1,23 @@
1
1
  import React from "react";
2
- function ExpandedDropdownMobile({ serviceItem, isPeru, }) {
2
+ import LottiePlayer from "../../assets/LottiePlayer";
3
+ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, }) {
3
4
  return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
4
5
  backgroundColor: "#ffefef",
5
6
  borderRadius: "0 0 14px 14px",
7
+ opacity: isSoldOut ? 0.5 : 1,
6
8
  } },
7
9
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
10
+ petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
11
+ React.createElement("div", { className: `relative group cursor-default ` },
12
+ React.createElement("div", { className: "flex items-center" },
13
+ React.createElement("div", { className: `flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
14
+ React.createElement("div", null,
15
+ React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })),
16
+ React.createElement("div", null,
17
+ React.createElement("span", null, "Servicio Pet friendly"),
18
+ React.createElement("span", null,
19
+ " ",
20
+ "Asientos designados Pet friendly, lo que significa que puede viajar con su mascota a bordo."))))))) : null,
8
21
  React.createElement("div", { className: "flex gap-[6px]" },
9
22
  React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
10
23
  React.createElement("span", null,
@@ -17,17 +30,19 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, }) {
17
30
  " horas antes"),
18
31
  " ",
19
32
  "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
20
- isPeru ? null : (React.createElement("div", { className: "flex gap-[6px]" },
21
- React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
22
- React.createElement("span", null,
23
- React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
24
- " Tu pasaje puede ser cambiado de manera online",
25
- " ",
26
- React.createElement("span", { className: "bold-text" },
27
- "hasta ",
28
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
29
- " horas antes"),
30
- " ",
31
- "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."))))));
32
47
  }
33
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.0",
3
+ "version": "9.2.2",
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
@@ -484,7 +484,6 @@ function ServiceItemPB({
484
484
  // }}
485
485
  >
486
486
  <div
487
- // className="p-[15px] pt-[20px]"
488
487
  className=" pt-[20px]"
489
488
  style={{
490
489
  padding: coachKey
@@ -493,12 +492,11 @@ function ServiceItemPB({
493
492
  }}
494
493
  >
495
494
  <div
496
- // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
495
+ // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
497
496
  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
497
  style={{
500
498
  marginTop:
501
- showTopLabel && serviceItem?.is_direct_trip ? "8px" : "",
499
+ showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
502
500
  }}
503
501
  >
504
502
  {/* OPERATOR LOGO */}
@@ -516,7 +514,7 @@ function ServiceItemPB({
516
514
  <img
517
515
  src={serviceItem.operator_details[0]}
518
516
  alt="service logo"
519
- className={`h-[30px] w-[150px] ${
517
+ className={`h-[30px] w-[auto] ${
520
518
  isSoldOut ? "grayscale" : ""
521
519
  }`}
522
520
  />
@@ -579,7 +577,7 @@ function ServiceItemPB({
579
577
  className="flex justify-end mr-[11px] "
580
578
  style={{
581
579
  position: "absolute",
582
- top: "8px",
580
+ top: serviceDetailsLoading ? "7px" : "5px",
583
581
  right: "16px",
584
582
  }}
585
583
  >
@@ -640,6 +638,7 @@ function ServiceItemPB({
640
638
  isPeru={isPeru}
641
639
  translation={translation}
642
640
  getAnimationIcon={getAnimationIcon}
641
+ isChangeTicket={serviceItem.is_change_ticket === true}
643
642
  />
644
643
  </div>
645
644
  </div>
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -253,7 +253,7 @@ function ServiceItemMobile({
253
253
  className="flex items-center cursor-pointer "
254
254
  style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
255
255
  >
256
- <span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis">
256
+ <span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
257
257
  {serviceItem.operator_details[2]}
258
258
  </span>
259
259
  </div>
@@ -497,7 +497,14 @@ function ServiceItemMobile({
497
497
  marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
498
498
  }}
499
499
  >
500
- <ExpandedDropdownMobile serviceItem={serviceItem} isPeru={isPeru} />
500
+ <ExpandedDropdownMobile
501
+ serviceItem={serviceItem}
502
+ isPeru={isPeru}
503
+ petSeatInfo={serviceItem.pet_seat_info}
504
+ petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
505
+ isSoldOut={isSoldOut}
506
+ isChangeTicket={serviceItem.is_change_ticket === true}
507
+ />
501
508
  </div>
502
509
  </div>
503
510
  </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/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")}
@@ -101,20 +103,22 @@ function ExpandedDropdown({
101
103
  del 85% del monto de tu compra.
102
104
  </span>
103
105
  </div>
104
- {isPeru ? null : (
105
- <div className="flex gap-[8px]">
106
- <span style={{ marginTop: "2px" }}>•</span>
107
- <span>
108
- <span className="bold-text">Políticas de cambios:</span> Tu pasaje
109
- puede ser cambiado de manera online{" "}
110
- <span className="bold-text">
111
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
112
- </span>{" "}
113
- de la salida del bus. El monto será reembolsado a tu billetera
114
- kupospay.
115
- </span>
116
- </div>
117
- )}
106
+ {isPeru
107
+ ? null
108
+ : isChangeTicket && (
109
+ <div className="flex gap-[8px]">
110
+ <span style={{ marginTop: "2px" }}>•</span>
111
+ <span>
112
+ <span className="bold-text">Políticas de cambios:</span> Tu
113
+ pasaje puede ser cambiado de manera online{" "}
114
+ <span className="bold-text">
115
+ hasta {serviceItem?.change_ticket_hours || 6} horas antes
116
+ </span>{" "}
117
+ de la salida del bus. El monto será reembolsado a tu billetera
118
+ kupospay.
119
+ </span>
120
+ </div>
121
+ )}
118
122
  </div>
119
123
  </div>
120
124
  );
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
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import LottiePlayer from "../../assets/LottiePlayer";
2
3
 
3
4
  interface ExpandedDropdownMobileProps {
4
5
  serviceItem: {
@@ -8,11 +9,19 @@ interface ExpandedDropdownMobileProps {
8
9
  is_tracking_enabled?: boolean;
9
10
  };
10
11
  isPeru?: boolean;
12
+ petSeatInfo?: Record<string, any>;
13
+ petFriendlyAnim?: any;
14
+ isSoldOut?: boolean;
15
+ isChangeTicket?: boolean;
11
16
  }
12
17
 
13
18
  function ExpandedDropdownMobile({
14
19
  serviceItem,
15
20
  isPeru,
21
+ petSeatInfo,
22
+ petFriendlyAnim,
23
+ isSoldOut,
24
+ isChangeTicket = false,
16
25
  }: ExpandedDropdownMobileProps): React.ReactElement {
17
26
  return (
18
27
  <div
@@ -20,12 +29,40 @@ function ExpandedDropdownMobile({
20
29
  style={{
21
30
  backgroundColor: "#ffefef",
22
31
  borderRadius: "0 0 14px 14px",
32
+ opacity: isSoldOut ? 0.5 : 1,
23
33
  }}
24
34
  >
25
35
  <div
26
36
  className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
27
37
  style={{ lineHeight: 1.6 }}
28
38
  >
39
+ {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
40
+ <div className="flex items-center">
41
+ <div className={`relative group cursor-default `}>
42
+ <div className="flex items-center">
43
+ <div
44
+ className={`flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
45
+ >
46
+ <div>
47
+ <LottiePlayer
48
+ animationData={petFriendlyAnim}
49
+ width="16px"
50
+ height="16px"
51
+ />
52
+ </div>
53
+ <div>
54
+ <span>Servicio Pet friendly</span>
55
+ <span>
56
+ {" "}
57
+ Asientos designados Pet friendly, lo que significa que
58
+ puede viajar con su mascota a bordo.
59
+ </span>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ ) : null}
29
66
  <div className="flex gap-[6px]">
30
67
  <span style={{ marginTop: "2px" }}>•</span>
31
68
  <span>
@@ -38,20 +75,22 @@ function ExpandedDropdownMobile({
38
75
  del 85% del monto de tu compra.
39
76
  </span>
40
77
  </div>
41
- {isPeru ? null : (
42
- <div className="flex gap-[6px]">
43
- <span style={{ marginTop: "2px" }}>•</span>
44
- <span>
45
- <span className="bold-text">Políticas de cambios:</span> Tu pasaje
46
- puede ser cambiado de manera online{" "}
47
- <span className="bold-text">
48
- hasta {serviceItem?.change_ticket_hours || 6} horas antes
49
- </span>{" "}
50
- de la salida del bus. El monto será reembolsado a tu billetera
51
- kupospay.
52
- </span>
53
- </div>
54
- )}
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
+ )}
55
94
  </div>
56
95
  </div>
57
96
  );