kupos-ui-components-lib 9.3.5 → 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.
- package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -2
- package/dist/components/ServiceItem/ServiceItemMobile.js +13 -6
- package/dist/ui/mobileweb/SeatSectionMobile.js +2 -1
- package/dist/utils/CommonService.js +8 -9
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -2
- package/src/components/ServiceItem/ServiceItemMobile.tsx +22 -2
- package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -1
- package/src/utils/CommonService.ts +8 -9
|
@@ -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
|
-
"
|
|
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
|
" ",
|
|
@@ -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
|
|
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: {
|
|
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: (
|
|
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: (
|
|
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
|
-
"
|
|
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
|
" ",
|
|
@@ -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
|
-
|
|
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",
|
|
@@ -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
|
|
312
|
-
const formatTime = (
|
|
313
|
-
const m = Math.floor(
|
|
314
|
-
const s =
|
|
315
|
-
|
|
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 -=
|
|
319
|
+
remaining -= 1;
|
|
321
320
|
if (remaining <= 0) {
|
|
322
|
-
remaining = countdownSeconds
|
|
321
|
+
remaining = countdownSeconds;
|
|
323
322
|
}
|
|
324
323
|
node.textContent = formatTime(remaining);
|
|
325
|
-
},
|
|
324
|
+
}, 1000);
|
|
326
325
|
node.dataset.countdownId = String(id);
|
|
327
326
|
},
|
|
328
327
|
startComprandoCount: (node, min = 4, max = 16) => {
|
package/package.json
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
|
-
|
|
653
|
+
Quedan pocos.{" "}
|
|
655
654
|
<span
|
|
656
655
|
className="bold-text"
|
|
657
656
|
ref={(node) =>
|
|
@@ -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={{
|
|
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
|
-
|
|
381
|
+
Quedan pocos.{" "}
|
|
362
382
|
<span
|
|
363
383
|
className="bold-text"
|
|
364
384
|
ref={(node) =>
|
|
@@ -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 ? (
|
|
@@ -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
|
|
347
|
+
let remaining = countdownSeconds;
|
|
348
348
|
|
|
349
|
-
const formatTime = (
|
|
350
|
-
const m = Math.floor(
|
|
351
|
-
const s =
|
|
352
|
-
|
|
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 -=
|
|
358
|
+
remaining -= 1;
|
|
360
359
|
if (remaining <= 0) {
|
|
361
|
-
remaining = countdownSeconds
|
|
360
|
+
remaining = countdownSeconds;
|
|
362
361
|
}
|
|
363
362
|
node.textContent = formatTime(remaining);
|
|
364
|
-
},
|
|
363
|
+
}, 1000);
|
|
365
364
|
|
|
366
365
|
node.dataset.countdownId = String(id);
|
|
367
366
|
},
|