kupos-ui-components-lib 9.3.10 → 9.4.0

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 (18) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +7 -6
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +15 -15
  3. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  4. package/dist/components/ServiceItem/types.d.ts +1 -0
  5. package/dist/styles.css +21 -0
  6. package/dist/ui/SeatSection/SeatSection.js +42 -7
  7. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  8. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  9. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  10. package/dist/ui/mobileweb/SeatSectionMobile.js +15 -2
  11. package/package.json +1 -1
  12. package/src/components/ServiceItem/ServiceItemDesktop.tsx +14 -7
  13. package/src/components/ServiceItem/ServiceItemMobile.tsx +24 -20
  14. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  15. package/src/components/ServiceItem/types.ts +1 -0
  16. package/src/ui/SeatSection/SeatSection.tsx +48 -10
  17. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  18. package/src/ui/mobileweb/SeatSectionMobile.tsx +41 -5
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -68,7 +68,6 @@ const ANIMATION_MAP = {
68
68
  };
69
69
  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, showLoginModal, isLoggedIn, }) {
70
70
  var _a;
71
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
72
71
  const getAnimationIcon = (icon) => {
73
72
  var _a;
74
73
  const animation = ANIMATION_MAP[icon];
@@ -262,10 +261,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
262
261
  React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon })),
263
262
  React.createElement("div", { className: "relative" },
264
263
  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 }),
265
- showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px]", style: {
266
- top: serviceDetailsLoading ? "-17px" : "-20px",
267
- } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
268
- (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)),
264
+ showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
265
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
266
+ color: colors.seatPriceColor,
267
+ } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
269
268
  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 &&
270
269
  setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
271
270
  isPeru ? null : (React.createElement("div", { style: {
@@ -291,7 +290,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
291
290
  opacity: isSoldOut ? 0.5 : 1,
292
291
  } },
293
292
  React.createElement("div", { className: "flex justify-between items-center w-full" },
294
- React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("span", null, "Servicio popular entre los usuarios.")) : (React.createElement("div", { className: "flex items-center" },
293
+ React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[3px]" },
294
+ renderIcon("whiteFireIcon", "14px"),
295
+ React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
295
296
  React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
296
297
  React.createElement("div", { className: "flex items-center mt-[2px]" },
297
298
  React.createElement("span", { className: "bold-text ml-[6px]" },
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -97,21 +97,19 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
97
97
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
98
98
  React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
99
99
  React.createElement("div", { className: "flex justify-between items-center mb-[10px]" },
100
- React.createElement("div", { className: "flex items-center justify-between", style: {
100
+ React.createElement("div", { className: "flex items-center justify-center gap-x-4", style: {
101
101
  marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDiscount ? "10px" : "",
102
102
  } },
103
- React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
104
- React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
105
- isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] items-center" },
103
+ React.createElement("div", { className: "w-[115px] overflow-y-hidden h-[22px]" },
104
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
105
+ isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
106
106
  React.createElement("div", { className: "flex items-center" },
107
107
  React.createElement("div", { className: "flex items-center" },
108
108
  React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
109
109
  React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
110
110
  React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
111
- 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),
112
- showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
113
- (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),
114
- React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
111
+ 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)),
112
+ React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats }),
115
113
  React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
116
114
  React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_e = serviceItem.duration) === null || _e === void 0 ? void 0 : _e.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
117
115
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
@@ -125,7 +123,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
125
123
  } },
126
124
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
127
125
  React.createElement("div", { className: "flex justify-between items-center" },
128
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("span", { className: "text-[#fff]" }, "Servicio popular entre los usuarios.")) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
126
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center" },
127
+ renderIcon("whiteFireIcon", "14px"),
128
+ React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
129
129
  React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
130
130
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" })),
131
131
  React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
@@ -148,13 +148,13 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
148
148
  React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
149
149
  React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
150
150
  " ",
151
- React.createElement("span", null, " viendo"))),
152
- React.createElement("div", { className: "flex items-center" },
153
- React.createElement("span", { className: "whitespace-nowrap" },
154
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
155
- React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
151
+ React.createElement("span", null, " viendo"),
152
+ " |",
156
153
  " ",
157
- "comprando"))))))),
154
+ React.createElement("span", { className: "whitespace-nowrap" },
155
+ React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
156
+ " ",
157
+ "comprando")))))))),
158
158
  React.createElement("div", { style: {
159
159
  display: "grid",
160
160
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -118,6 +118,7 @@ export interface MobileServiceItemProps {
118
118
  specialDeparture?: string;
119
119
  fireIcon?: string;
120
120
  directoIcon?: string;
121
+ whiteFireIcon?: string;
121
122
  [key: string]: string | Record<string, string | undefined> | undefined;
122
123
  };
123
124
  useLottieFor?: string[];
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -120,6 +120,7 @@ export interface ServiceItemProps {
120
120
  bombJson?: string;
121
121
  downArrow?: string;
122
122
  personIcon?: string;
123
+ whiteFireIcon?: string;
123
124
  [key: string]: string | Record<string, string | undefined> | undefined;
124
125
  };
125
126
  useLottieFor?: string[];
package/dist/styles.css CHANGED
@@ -51,6 +51,9 @@
51
51
  .top-\[30px\] {
52
52
  top: 30px;
53
53
  }
54
+ .top-\[40px\] {
55
+ top: 40px;
56
+ }
54
57
  .top-\[88\%\] {
55
58
  top: 88%;
56
59
  }
@@ -69,18 +72,27 @@
69
72
  .-bottom-\[36px\] {
70
73
  bottom: calc(36px * -1);
71
74
  }
75
+ .bottom-\[85\%\] {
76
+ bottom: 85%;
77
+ }
72
78
  .-left-\[7px\] {
73
79
  left: calc(7px * -1);
74
80
  }
75
81
  .-left-\[8px\] {
76
82
  left: calc(8px * -1);
77
83
  }
84
+ .-left-\[20px\] {
85
+ left: calc(20px * -1);
86
+ }
78
87
  .-left-\[30px\] {
79
88
  left: calc(30px * -1);
80
89
  }
81
90
  .left-1\/2 {
82
91
  left: calc(1/2 * 100%);
83
92
  }
93
+ .left-\[0\] {
94
+ left: 0;
95
+ }
84
96
  .left-\[11\%\] {
85
97
  left: 11%;
86
98
  }
@@ -309,6 +321,9 @@
309
321
  .h-\[20px\] {
310
322
  height: 20px;
311
323
  }
324
+ .h-\[22px\] {
325
+ height: 22px;
326
+ }
312
327
  .h-\[24px\] {
313
328
  height: 24px;
314
329
  }
@@ -372,6 +387,9 @@
372
387
  .w-\[100px\] {
373
388
  width: 100px;
374
389
  }
390
+ .w-\[115px\] {
391
+ width: 115px;
392
+ }
375
393
  .w-\[120px\] {
376
394
  width: 120px;
377
395
  }
@@ -505,6 +523,9 @@
505
523
  .gap-\[2px\] {
506
524
  gap: 2px;
507
525
  }
526
+ .gap-\[3px\] {
527
+ gap: 3px;
528
+ }
508
529
  .gap-\[3rem\] {
509
530
  gap: 3rem;
510
531
  }
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -119,15 +119,50 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
119
119
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) {
120
120
  const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
121
121
  const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
122
- return (React.createElement("div", { className: "flex flex-col gap-[2px]" },
123
- React.createElement("span", { className: "text-[12px] bold-text text-right", style: { color: dpSeatColor } }, "Mejor precio"),
124
- React.createElement("div", { className: "flex items-center justify-between text-[13.33px]" },
125
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde"),
126
- React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } },
127
- renderIcon("fireIcon", "16px"),
122
+ return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] " },
123
+ React.createElement("div", null,
124
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
125
+ React.createElement("div", null,
126
+ React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } },
127
+ React.createElement("div", { className: "absolute bottom-[85%]" },
128
+ React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white", style: {
129
+ animation: "pulse-zoom 2s ease-in-out infinite",
130
+ whiteSpace: "nowrap",
131
+ color: dpSeatColor,
132
+ } }, "Mejor precio")),
133
+ React.createElement("div", { className: "absolute -left-[20px]" }, renderIcon("fireIcon", "16px")),
128
134
  availableSeats <= 0
129
135
  ? CommonService.currency(0, currencySign)
130
- : CommonService.discountedCurrency(lowestFare, currencySign)))));
136
+ : CommonService.discountedCurrency(lowestFare, currencySign))))
137
+ // <div className="flex items-center justify-between text-[13.33px]">
138
+ // <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
139
+ // Desde
140
+ // </span>
141
+ // <div className="flex flex-col items-center gap-[2px]">
142
+ // <span
143
+ // className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
144
+ // style={{
145
+ // animation: "pulse-zoom 2s ease-in-out infinite",
146
+ // whiteSpace: "nowrap",
147
+ // color: dpSeatColor,
148
+ // }}
149
+ // >
150
+ // Mejor precio
151
+ // </span>
152
+ // <span
153
+ // className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
154
+ // style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
155
+ // >
156
+ // <div className="absolute -left-[20px]">
157
+ // {renderIcon("fireIcon", "16px")}
158
+ // </div>
159
+ // {availableSeats <= 0
160
+ // ? CommonService.currency(0, currencySign)
161
+ // : CommonService.discountedCurrency(lowestFare, currencySign)}
162
+ // </span>
163
+ // </div>
164
+ // </div>
165
+ );
131
166
  }
132
167
  if (hasDiscount && discountSeat) {
133
168
  return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -20,6 +20,7 @@ interface DateTimeSectionMobileProps {
20
20
  removeDuplicateSeats?: boolean;
21
21
  serviceItem?: any;
22
22
  tooltipBgColor?: string;
23
+ showLastSeats?: boolean;
23
24
  }
24
- declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }: DateTimeSectionMobileProps): React.ReactElement;
25
+ declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }: DateTimeSectionMobileProps): React.ReactElement;
25
26
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -31,7 +31,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.
31
31
  React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
32
32
  React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
33
33
  React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
34
- function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }) {
34
+ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
35
35
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
36
36
  const depTimeContent = isLinatal ? (React.createElement("div", null,
37
37
  React.createElement("span", null,
@@ -52,6 +52,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
52
52
  backgroundColor: "#ccc",
53
53
  margin: "auto",
54
54
  } }),
55
- React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor })));
55
+ React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats })));
56
56
  }
57
57
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -14,6 +14,7 @@ interface SeatSectionMobileProps {
14
14
  removeDuplicateSeats?: boolean;
15
15
  serviceItem?: any;
16
16
  tooltipBgColor?: string;
17
+ showLastSeats?: boolean;
17
18
  }
18
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }: SeatSectionMobileProps): React.ReactElement;
19
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }: SeatSectionMobileProps): React.ReactElement;
19
20
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -42,7 +42,7 @@ const getUniqueSeats = (data, limit) => {
42
42
  .sort((a, b) => a.fare - b.fare)
43
43
  .slice(0, limit);
44
44
  };
45
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }) {
45
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
46
46
  var _a, _b, _c, _d, _e;
47
47
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
48
48
  const getFare = (fare) => {
@@ -81,12 +81,23 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
81
81
  const { discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
82
82
  const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
83
83
  return (React.createElement("div", { className: "relative flex flex-col justify-center h-full" },
84
- React.createElement("span", { className: "absolute -top-[10px] right-[0px] min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : priceColor } }, "Mejor precio"),
84
+ React.createElement("div", { className: "absolute right-[0px]", style: {
85
+ animation: "pulse-zoom 2s ease-in-out infinite",
86
+ top: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
87
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0
88
+ ? "-20px"
89
+ : "-10px",
90
+ } },
91
+ React.createElement("span", { className: "rounded-[100px] px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]", style: {
92
+ backgroundColor: tooltipBgColor,
93
+ } }, "Mejor precio")),
85
94
  React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
86
95
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
87
96
  React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
88
97
  ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "dp", className: "h-[14px] w-[14px] object-contain", style: { filter: isSoldOut ? "grayscale(1)" : "" } })) : null,
89
98
  commonService.currency(discountedPrice, currencySign))),
99
+ showLastSeats ? (React.createElement("div", { className: "flex justify-end" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
100
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center mt-[3px]" }, "\u00A1\u00DAltimos Asientos!")))) : null,
90
101
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
91
102
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null));
92
103
  };
@@ -154,6 +165,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
154
165
  justifyContent: hasMultipleTypes ? "space-between" : "center",
155
166
  } },
156
167
  renderSeats(),
168
+ showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
169
+ (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,
157
170
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
158
171
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
159
172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.3.10",
3
+ "version": "9.4.0",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -108,7 +108,6 @@ function ServiceItemPB({
108
108
  showLoginModal,
109
109
  isLoggedIn,
110
110
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
111
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
112
111
  const getAnimationIcon = (icon: string) => {
113
112
  const animation = ANIMATION_MAP[icon];
114
113
  if (!animation) return null;
@@ -527,14 +526,19 @@ function ServiceItemPB({
527
526
  />
528
527
  {showLastSeats ? (
529
528
  <div
530
- className="flex justify-center mr-[11px] w-[100%] right-[0px]"
531
- style={{
532
- top: serviceDetailsLoading ? "-17px" : "-20px",
533
- }}
529
+ className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]"
530
+ // style={{
531
+ // top: serviceDetailsLoading ? "-17px" : "-20px",
532
+ // }}
534
533
  >
535
534
  {serviceItem?.available_seats < 10 &&
536
535
  serviceItem?.available_seats > 0 && (
537
- <div className="text-[12px] text-[#464647] mt-1 text-center">
536
+ <div
537
+ className="text-[12px] mt-1 text-center"
538
+ style={{
539
+ color: colors.seatPriceColor,
540
+ }}
541
+ >
538
542
  ¡Últimos Asientos!
539
543
  </div>
540
544
  )}
@@ -613,7 +617,10 @@ function ServiceItemPB({
613
617
  <div className="flex justify-between items-center w-full">
614
618
  <div className="flex items-center ">
615
619
  {serviceItem?.is_dp_enabled ? (
616
- <span>Servicio popular entre los usuarios.</span>
620
+ <div className="flex items-center gap-[3px]">
621
+ {renderIcon("whiteFireIcon", "14px")}
622
+ <span>Servicio popular entre los usuarios</span>
623
+ </div>
617
624
  ) : (
618
625
  <div className="flex items-center">
619
626
  <LottiePlayer
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -175,17 +175,17 @@ function ServiceItemMobile({
175
175
  {/* Header with operator info and favorite */}
176
176
  <div className="flex justify-between items-center mb-[10px]">
177
177
  <div
178
- className="flex items-center justify-between"
178
+ className="flex items-center justify-center gap-x-4"
179
179
  style={{
180
180
  marginBottom:
181
181
  serviceItem?.offer_text || hasDiscount ? "10px" : "",
182
182
  }}
183
183
  >
184
- <div className="w-[120px] overflow-y-hidden">
184
+ <div className="w-[115px] overflow-y-hidden h-[22px]">
185
185
  <img
186
186
  src={serviceItem.operator_details[0]}
187
187
  alt="service logo"
188
- className={`w-[100px] h-auto object-contain ${
188
+ className={`w-[100px] h-auto object-contain ${
189
189
  isSoldOut ? "grayscale" : ""
190
190
  }`}
191
191
  />
@@ -195,7 +195,7 @@ function ServiceItemMobile({
195
195
  {serviceItem?.operator_details[2]}
196
196
  </div>
197
197
  ) : showRating ? (
198
- <div className="flex min-[420]:text-[13px] text-[12px] items-center">
198
+ <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
199
199
  <div className="flex items-center">
200
200
  <div className="flex items-center">
201
201
  <img
@@ -222,16 +222,6 @@ function ServiceItemMobile({
222
222
  </div>
223
223
  ) : null}
224
224
  </div>
225
- {showLastSeats ? (
226
- <div className="flex justify-end ">
227
- {serviceItem?.available_seats < 10 &&
228
- serviceItem?.available_seats > 0 && (
229
- <div className="text-[10px] text-[#464647] text-center">
230
- ¡ Últimos Asientos!
231
- </div>
232
- )}
233
- </div>
234
- ) : null}
235
225
  </div>
236
226
 
237
227
  <DateTimeSectionMobile
@@ -255,7 +245,9 @@ function ServiceItemMobile({
255
245
  availableSeats={serviceItem.available_seats}
256
246
  removeDuplicateSeats={removeDuplicateSeats}
257
247
  serviceItem={serviceItem}
248
+ showLastSeats={showLastSeats}
258
249
  />
250
+
259
251
  {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
260
252
  <div className="bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]"></div>
261
253
 
@@ -313,9 +305,10 @@ function ServiceItemMobile({
313
305
  >
314
306
  <div className="flex justify-between items-center">
315
307
  {serviceItem?.is_dp_enabled ? (
316
- <span className="text-[#fff]">
317
- Servicio popular entre los usuarios.
318
- </span>
308
+ <div className="flex items-center">
309
+ {renderIcon("whiteFireIcon", "14px")}
310
+ <span className="text-[#fff]">Más elegido</span>
311
+ </div>
319
312
  ) : (
320
313
  <div
321
314
  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
@@ -371,10 +364,21 @@ function ServiceItemMobile({
371
364
  }
372
365
  style={{ fontVariantNumeric: "tabular-nums" }}
373
366
  />{" "}
374
- <span> viendo</span>
367
+ <span> viendo</span> |{" "}
368
+ <span className="whitespace-nowrap">
369
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
370
+ <span
371
+ className="bold-text"
372
+ ref={(node) =>
373
+ commonService.startComprandoCount(node, 4, 16)
374
+ }
375
+ style={{ fontVariantNumeric: "tabular-nums" }}
376
+ />{" "}
377
+ comprando
378
+ </span>
375
379
  </span>
376
380
  </div>
377
- <div className="flex items-center">
381
+ {/* <div className="flex items-center">
378
382
  <span className="whitespace-nowrap">
379
383
  {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
380
384
  <span
@@ -386,7 +390,7 @@ function ServiceItemMobile({
386
390
  />{" "}
387
391
  comprando
388
392
  </span>
389
- </div>
393
+ </div> */}
390
394
  </div>
391
395
  </div>
392
396
  {/* <div className="flex flex-col gap-[4px]">
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -121,6 +121,7 @@ export interface MobileServiceItemProps {
121
121
  specialDeparture?: string;
122
122
  fireIcon?: string;
123
123
  directoIcon?: string;
124
+ whiteFireIcon?: string
124
125
  [key: string]: string | Record<string, string | undefined> | undefined;
125
126
  };
126
127
  useLottieFor?: string[];
package/src/components/ServiceItem/types.ts CHANGED
@@ -122,6 +122,7 @@ export interface ServiceItemProps {
122
122
  bombJson?:string
123
123
  downArrow?:string
124
124
  personIcon?: string
125
+ whiteFireIcon?: string
125
126
 
126
127
  [key: string]: string | Record<string, string | undefined> | undefined;
127
128
  };
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -230,28 +230,66 @@ function SeatSection({
230
230
  dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
231
231
 
232
232
  return (
233
- <div className="flex flex-col gap-[2px]">
234
- <span
235
- className="text-[12px] bold-text text-right"
236
- style={{ color: dpSeatColor }}
237
- >
238
- Mejor precio
239
- </span>
240
- <div className="flex items-center justify-between text-[13.33px]">
233
+ <div className="flex items-center justify-between text-[13.33px] ">
234
+ <div>
241
235
  <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
242
236
  Desde
243
237
  </span>
238
+ </div>
239
+ <div>
244
240
  <span
245
- className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
241
+ className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
246
242
  style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
247
243
  >
248
- {renderIcon("fireIcon", "16px")}
244
+ <div className="absolute bottom-[85%]">
245
+ <span
246
+ className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
247
+ style={{
248
+ animation: "pulse-zoom 2s ease-in-out infinite",
249
+ whiteSpace: "nowrap",
250
+ color: dpSeatColor,
251
+ }}
252
+ >
253
+ Mejor precio
254
+ </span>
255
+ </div>
256
+ <div className="absolute -left-[20px]">
257
+ {renderIcon("fireIcon", "16px")}
258
+ </div>
249
259
  {availableSeats <= 0
250
260
  ? CommonService.currency(0, currencySign)
251
261
  : CommonService.discountedCurrency(lowestFare, currencySign)}
252
262
  </span>
253
263
  </div>
254
264
  </div>
265
+ // <div className="flex items-center justify-between text-[13.33px]">
266
+ // <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
267
+ // Desde
268
+ // </span>
269
+ // <div className="flex flex-col items-center gap-[2px]">
270
+ // <span
271
+ // className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
272
+ // style={{
273
+ // animation: "pulse-zoom 2s ease-in-out infinite",
274
+ // whiteSpace: "nowrap",
275
+ // color: dpSeatColor,
276
+ // }}
277
+ // >
278
+ // Mejor precio
279
+ // </span>
280
+ // <span
281
+ // className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
282
+ // style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
283
+ // >
284
+ // <div className="absolute -left-[20px]">
285
+ // {renderIcon("fireIcon", "16px")}
286
+ // </div>
287
+ // {availableSeats <= 0
288
+ // ? CommonService.currency(0, currencySign)
289
+ // : CommonService.discountedCurrency(lowestFare, currencySign)}
290
+ // </span>
291
+ // </div>
292
+ // </div>
255
293
  );
256
294
  }
257
295
 
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -23,6 +23,7 @@ interface DateTimeSectionMobileProps {
23
23
  removeDuplicateSeats?: boolean;
24
24
  serviceItem?: any;
25
25
  tooltipBgColor?: string;
26
+ showLastSeats?: boolean;
26
27
  }
27
28
 
28
29
  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -121,6 +122,7 @@ function DateTimeSectionMobile({
121
122
  removeDuplicateSeats,
122
123
  serviceItem,
123
124
  tooltipBgColor,
125
+ showLastSeats,
124
126
  }: DateTimeSectionMobileProps): React.ReactElement {
125
127
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
126
128
 
@@ -190,6 +192,7 @@ function DateTimeSectionMobile({
190
192
  removeDuplicateSeats={removeDuplicateSeats}
191
193
  serviceItem={serviceItem}
192
194
  tooltipBgColor={tooltipBgColor}
195
+ showLastSeats={showLastSeats}
193
196
  />
194
197
  </div>
195
198
  );
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -29,6 +29,7 @@ interface SeatSectionMobileProps {
29
29
  removeDuplicateSeats?: boolean;
30
30
  serviceItem?: any;
31
31
  tooltipBgColor?: string;
32
+ showLastSeats?: boolean;
32
33
  }
33
34
 
34
35
  interface SeatRowProps {
@@ -114,6 +115,7 @@ function SeatSectionMobile({
114
115
  removeDuplicateSeats,
115
116
  serviceItem,
116
117
  tooltipBgColor,
118
+ showLastSeats,
117
119
  }: SeatSectionMobileProps): React.ReactElement {
118
120
  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
119
121
 
@@ -195,12 +197,26 @@ function SeatSectionMobile({
195
197
 
196
198
  return (
197
199
  <div className="relative flex flex-col justify-center h-full">
198
- <span
199
- className="absolute -top-[10px] right-[0px] min-[420]:text-[13px] text-[12px] bold-text"
200
- style={{ color: isSoldOut ? "#bbb" : priceColor }}
200
+ <div
201
+ className="absolute right-[0px]"
202
+ style={{
203
+ animation: "pulse-zoom 2s ease-in-out infinite",
204
+ top:
205
+ serviceItem?.available_seats < 10 &&
206
+ serviceItem?.available_seats > 0
207
+ ? "-20px"
208
+ : "-10px",
209
+ }}
201
210
  >
202
- Mejor precio
203
- </span>
211
+ <span
212
+ className="rounded-[100px] px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
213
+ style={{
214
+ backgroundColor: tooltipBgColor,
215
+ }}
216
+ >
217
+ Mejor precio
218
+ </span>
219
+ </div>
204
220
  <div className="w-[100%] flex flex-row justify-between items-center">
205
221
  <span
206
222
  className="min-[420]:text-[13px] text-[12px]"
@@ -223,6 +239,16 @@ function SeatSectionMobile({
223
239
  {commonService.currency(discountedPrice, currencySign)}
224
240
  </span>
225
241
  </div>
242
+ {showLastSeats ? (
243
+ <div className="flex justify-end">
244
+ {serviceItem?.available_seats < 10 &&
245
+ serviceItem?.available_seats > 0 && (
246
+ <div className="text-[10px] text-[#464647] text-center mt-[3px]">
247
+ ¡Últimos Asientos!
248
+ </div>
249
+ )}
250
+ </div>
251
+ ) : null}
226
252
  {isSoldOut ? (
227
253
  <div className="flex justify-end">
228
254
  <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
@@ -406,6 +432,16 @@ function SeatSectionMobile({
406
432
  }}
407
433
  >
408
434
  {renderSeats()}
435
+ {showLastSeats ? (
436
+ <div className="flex justify-end ">
437
+ {serviceItem?.available_seats < 10 &&
438
+ serviceItem?.available_seats > 0 && (
439
+ <div className="text-[10px] text-[#464647] text-center">
440
+ ¡ Últimos Asientos!
441
+ </div>
442
+ )}
443
+ </div>
444
+ ) : null}
409
445
 
410
446
  {isSoldOut ? (
411
447
  <div className="flex justify-end">