kupos-ui-components-lib 9.3.4 → 9.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -2
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +13 -6
  3. package/dist/ui/SeatSection/SeatSection.js +2 -1
  4. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -1
  5. package/dist/utils/CommonService.js +8 -9
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -2
  8. package/src/components/ServiceItem/ServiceItemMobile.tsx +22 -2
  9. package/src/ui/SeatSection/SeatSection.tsx +2 -3
  10. package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -1
  11. package/src/utils/CommonService.ts +8 -9
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, }) {
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];
@@ -317,7 +316,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
317
316
  " |",
318
317
  " ",
319
318
  React.createElement("span", { className: "" },
320
- "\u26A1 Quedan pocos",
319
+ "Quedan pocos.",
321
320
  " ",
322
321
  React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
323
322
  " ",
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -18,11 +18,16 @@ const exceptions = [
18
18
  "asiento_mascota",
19
19
  ];
20
20
  function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
21
- var _a, _b, _c, _d;
21
+ var _a, _b, _c, _d, _e;
22
22
  const isItemExpanded = serviceItem.id === isExpanded;
23
23
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
24
24
  let isSoldOut = serviceItem.available_seats <= 0;
25
- const isLongOfferText = (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _a === void 0 ? void 0 : _a.length) || 0) > 35;
25
+ const seats = removeDuplicateSeats
26
+ ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
27
+ : serviceItem.seat_types || [];
28
+ const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
29
+ const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
30
+ const isLongOfferText = (((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _b === void 0 ? void 0 : _b.length) || 0) > 35;
26
31
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
27
32
  const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
28
33
  const serviceCardStyle = hasOfferText
@@ -92,7 +97,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
92
97
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
93
98
  React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
94
99
  React.createElement("div", { className: "flex justify-between items-center mb-[10px]" },
95
- React.createElement("div", { className: "flex items-center justify-between", style: { marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "10px" : "" } },
100
+ React.createElement("div", { className: "flex items-center justify-between", style: {
101
+ marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDiscount ? "10px" : "",
102
+ } },
96
103
  React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
97
104
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
98
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" },
@@ -104,9 +111,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
104
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),
105
112
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
106
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),
107
- 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, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
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 }),
108
115
  React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[10px] h-[1px]" }),
109
- React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_d = serviceItem.duration) === null || _d === void 0 ? void 0 : _d.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: () => {
116
+ 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: () => {
110
117
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
111
118
  }, isPeru: isPeru })),
112
119
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
@@ -148,7 +155,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
148
155
  "viendo"))),
149
156
  React.createElement("div", { className: "flex items-center" },
150
157
  React.createElement("span", { className: "whitespace-nowrap" },
151
- "\u26A1 Quedan pocos",
158
+ "Quedan pocos.",
152
159
  " ",
153
160
  React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
154
161
  " ",
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -145,7 +145,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
145
145
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-start" },
146
146
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
147
147
  renderIcon("fireIcon", "16px"),
148
- formatPrice(Math.floor(discountSeat.discountedPrice * 1000) / 1000)))));
148
+ currencySign || "$",
149
+ Math.floor((discountSeat.discountedPrice / 1000) * 1000) / 1000))));
149
150
  }
150
151
  return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
151
152
  React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -108,7 +108,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
108
108
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
109
109
  React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
110
110
  ((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
111
- commonService.currency(discountSeat.discountedPrice, currencySign)),
111
+ currencySign || "$",
112
+ Math.floor((discountSeat.discountedPrice / 1000) * 1000) / 1000),
112
113
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
113
114
  gap: isSoldOut ? "0px" : "5px",
114
115
  justifyContent: hasMultipleTypes ? "space-between" : "center",
package/dist/utils/CommonService.js CHANGED
@@ -308,21 +308,20 @@ const commonService = {
308
308
  const prevId = node.dataset.countdownId;
309
309
  if (prevId)
310
310
  clearInterval(Number(prevId));
311
- let remaining = countdownSeconds * 1000; // Convert to milliseconds
312
- const formatTime = (totalMs) => {
313
- const m = Math.floor(totalMs / 60000);
314
- const s = Math.floor((totalMs % 60000) / 1000);
315
- const ms = Math.floor((totalMs % 1000) / 10); // Show 2 digits for milliseconds
316
- return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(ms).padStart(2, "0")}`;
311
+ let remaining = countdownSeconds;
312
+ const formatTime = (totalSeconds) => {
313
+ const m = Math.floor(totalSeconds / 60);
314
+ const s = totalSeconds % 60;
315
+ return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
317
316
  };
318
317
  node.textContent = formatTime(remaining);
319
318
  const id = setInterval(() => {
320
- remaining -= 100; // Decrease by 100ms
319
+ remaining -= 1;
321
320
  if (remaining <= 0) {
322
- remaining = countdownSeconds * 1000;
321
+ remaining = countdownSeconds;
323
322
  }
324
323
  node.textContent = formatTime(remaining);
325
- }, 100); // Update every 100ms
324
+ }, 1000);
326
325
  node.dataset.countdownId = String(id);
327
326
  },
328
327
  startComprandoCount: (node, min = 4, max = 16) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.3.4",
3
+ "version": "9.3.6",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -106,7 +106,6 @@ function ServiceItemPB({
106
106
  coachKey,
107
107
  viewersConfig,
108
108
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
109
- console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
110
109
  const getAnimationIcon = (icon: string) => {
111
110
  const animation = ANIMATION_MAP[icon];
112
111
  if (!animation) return null;
@@ -651,7 +650,7 @@ function ServiceItemPB({
651
650
  {" "}
652
651
  {viewersConfig?.label || " viendo"} |{" "}
653
652
  <span className="">
654
- ⚡ Quedan pocos{" "}
653
+ Quedan pocos.{" "}
655
654
  <span
656
655
  className="bold-text"
657
656
  ref={(node) =>
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -49,6 +49,23 @@ function ServiceItemMobile({
49
49
  const isItemExpanded = serviceItem.id === isExpanded;
50
50
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
51
51
  let isSoldOut = serviceItem.available_seats <= 0;
52
+
53
+ const seats = removeDuplicateSeats
54
+ ? serviceItem.seat_types?.filter(
55
+ (seat, index, self) =>
56
+ index === self.findIndex((s) => s.label === seat.label),
57
+ ) || []
58
+ : serviceItem.seat_types || [];
59
+
60
+ const discountedSeats = seats.map((seat) => ({
61
+ ...seat,
62
+ ...commonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
63
+ }));
64
+
65
+ const hasDiscount = discountedSeats.some(
66
+ (seat) => seat.originalPrice !== seat.discountedPrice,
67
+ );
68
+
52
69
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
53
70
 
54
71
  const hasOfferText = Boolean(serviceItem?.offer_text);
@@ -158,7 +175,10 @@ function ServiceItemMobile({
158
175
  <div className="flex justify-between items-center mb-[10px]">
159
176
  <div
160
177
  className="flex items-center justify-between"
161
- style={{ marginBottom: serviceItem?.offer_text ? "10px" : "" }}
178
+ style={{
179
+ marginBottom:
180
+ serviceItem?.offer_text || hasDiscount ? "10px" : "",
181
+ }}
162
182
  >
163
183
  <div className="w-[120px] overflow-y-hidden">
164
184
  <img
@@ -358,7 +378,7 @@ function ServiceItemMobile({
358
378
  </div>
359
379
  <div className="flex items-center">
360
380
  <span className="whitespace-nowrap">
361
- ⚡ Quedan pocos{" "}
381
+ Quedan pocos.{" "}
362
382
  <span
363
383
  className="bold-text"
364
384
  ref={(node) =>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -284,9 +284,8 @@ function SeatSection({
284
284
  >
285
285
  {/* <span className="text-[18px] leading-[24px]">🔥</span> */}
286
286
  {renderIcon("fireIcon", "16px")}
287
- {formatPrice(
288
- Math.floor(discountSeat.discountedPrice * 1000) / 1000,
289
- )}
287
+ {currencySign || "$"}
288
+ {Math.floor((discountSeat.discountedPrice / 1000) * 1000) / 1000}
290
289
  </span>
291
290
  </div>
292
291
  </div>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -295,7 +295,9 @@ function SeatSectionMobile({
295
295
  style={{ filter: isSoldOut ? "grayscale" : "" }}
296
296
  />
297
297
  ) : null}
298
- {commonService.currency(discountSeat.discountedPrice, currencySign)}
298
+ {/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
299
+ {currencySign || "$"}
300
+ {Math.floor((discountSeat.discountedPrice / 1000) * 1000) / 1000}
299
301
  </span>
300
302
 
301
303
  {isSoldOut ? (
package/src/utils/CommonService.ts CHANGED
@@ -344,24 +344,23 @@ const commonService = {
344
344
  const prevId = node.dataset.countdownId;
345
345
  if (prevId) clearInterval(Number(prevId));
346
346
 
347
- let remaining = countdownSeconds * 1000; // Convert to milliseconds
347
+ let remaining = countdownSeconds;
348
348
 
349
- const formatTime = (totalMs: number) => {
350
- const m = Math.floor(totalMs / 60000);
351
- const s = Math.floor((totalMs % 60000) / 1000);
352
- const ms = Math.floor((totalMs % 1000) / 10); // Show 2 digits for milliseconds
353
- return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(ms).padStart(2, "0")}`;
349
+ const formatTime = (totalSeconds: number) => {
350
+ const m = Math.floor(totalSeconds / 60);
351
+ const s = totalSeconds % 60;
352
+ return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
354
353
  };
355
354
 
356
355
  node.textContent = formatTime(remaining);
357
356
 
358
357
  const id = setInterval(() => {
359
- remaining -= 100; // Decrease by 100ms
358
+ remaining -= 1;
360
359
  if (remaining <= 0) {
361
- remaining = countdownSeconds * 1000;
360
+ remaining = countdownSeconds;
362
361
  }
363
362
  node.textContent = formatTime(remaining);
364
- }, 100); // Update every 100ms
363
+ }, 1000);
365
364
 
366
365
  node.dataset.countdownId = String(id);
367
366
  },