kupos-ui-components-lib 9.3.1 → 9.3.3

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -31,7 +31,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.
             React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
             React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
             React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -52,6 +52,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 backgroundColor: "#ccc",
                 margin: "auto",
             } })),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor })));
 }
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -7,6 +7,23 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
             opacity: isSoldOut ? 0.5 : 1,
         } },
         React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
+            isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
+                    " Tu pasaje puede ser cambiado de manera online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ",
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", null,
+                        React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
+                        " Esta empresa no permite cambios de pasajes")))),
             petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
                 React.createElement("div", { className: `relative group cursor-default ` },
                     React.createElement("div", { className: "flex items-center" },
@@ -24,23 +41,6 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
                     " Tu pasaje puede ser anulado de forma online",
                     React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
-                    " antes de la salida del bus.")),
-            isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
-                React.createElement("span", null,
-                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
-                    " Tu pasaje puede ser cambiado de manera online",
-                    " ",
-                    React.createElement("span", { className: "bold-text" },
-                        "hasta ",
-                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
-                        " horas antes"),
-                    " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
-                React.createElement("span", null,
-                    React.createElement("span", null,
-                        React.createElement("span", { className: "bold-text" }, "Pol\u00EDtica de cambios:"),
-                        " Esta empresa no permite cambios de pasajes")))))));
+                    " antes de la salida del bus.")))));
 }
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/SeatSectionMobile.d.ts

@@ -13,6 +13,7 @@ interface SeatSectionMobileProps {
     availableSeats: number;
     removeDuplicateSeats?: boolean;
     serviceItem?: any;
+    tooltipBgColor?: string;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -42,8 +42,8 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }) {
-    var _a, _b, _c;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }) {
+    var _a, _b, _c, _d, _e;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -59,10 +59,6 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             return null;
         return filtered.reduce((min, item) => (item.fare < min ? item.fare : min), filtered[0].fare);
     };
-    const getHighestFare = () => {
-        var _a;
-        return (((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => !EXCEPTIONS.includes(item.label))) === null || _a === void 0 ? void 0 : _a.reduce((max, item) => (item.fare > max ? item.fare : max), 0)) || 0);
-    };
     const renderPeruSeats = () => {
         const lowestFare = getLowestFare();
         if (lowestFare === null)
@@ -92,17 +88,33 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         ? getUniqueSeats(seatTypesData, 3)
         : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
     const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
-    const highestOriginalPrice = Math.max(...((discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.map((s) => s.originalPrice)) || [0]));
     const hasDiscount = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
-    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } },
-        !isPeru && hasDiscount && (React.createElement("div", { className: "absolute -top-[16px] right-[0] flex justify-end" },
-            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(highestOriginalPrice, currencySign)))),
-        React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
-                gap: isSoldOut ? "0px" : "5px",
-                justifyContent: hasMultipleTypes ? "space-between" : "center",
+    const discountSeat = (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+    const discountValue = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
+        typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number"
+        ? Math.round(serviceItem.discount_value)
+        : null;
+    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+        discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
+                animation: "pulse-zoom 2s ease-in-out infinite",
             } },
-            renderSeats(),
-            isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null)));
+            React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
+                    backgroundColor: tooltipBgColor,
+                } },
+                discountValue,
+                "% OFF"))),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] line-through text-right" }, commonService.currency(discountSeat.originalPrice, currencySign)),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
+        React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
+            ((_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,
+            commonService.currency(discountSeat.discountedPrice, currencySign)),
+        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: {
+            gap: isSoldOut ? "0px" : "5px",
+            justifyContent: hasMultipleTypes ? "space-between" : "center",
+        } },
+        renderSeats(),
+        isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
 }
 export default SeatSectionMobile;

package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ServiceBadgesMobileProps {
+    showTopLabel?: string;
+    isSoldOut: boolean;
+    colors: any;
+    renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+    translation?: {
+        directService?: string;
+    };
+    serviceItem: {
+        is_direct_trip?: boolean;
+        train_type_label?: string;
+    };
+    isConexion?: boolean;
+}
+declare const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps>;
+export default ServiceBadgesMobile;

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -0,0 +1,35 @@
+import React from "react";
+const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
+    return (React.createElement("div", { className: "absolute -top-[9px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10" },
+        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            React.createElement("div", { style: {
+                    color: colors.topLabelColor,
+                } }, showTopLabel))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
+        isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("airportIcon", "14px"),
+            React.createElement("div", null, "Conexi\u00F3n"))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", null, "Tren Express")))));
+};
+export default ServiceBadgesMobile;

package/dist/utils/CommonService.d.ts

@@ -17,5 +17,12 @@ declare const commonService: {
         originalPrice: number;
         discountedPrice: number;
     };
+    startViewerCount: (node: HTMLSpanElement | null, viewersConfig?: {
+        min: number;
+        max: number;
+        interval?: number;
+    }) => void;
+    startCountdown: (node: HTMLSpanElement | null, countdownSeconds?: number) => void;
+    startComprandoCount: (node: HTMLSpanElement | null, min?: number, max?: number) => void;
 };
 export default commonService;

package/dist/utils/CommonService.js

@@ -284,5 +284,66 @@ const commonService = {
         const discountedPrice = Math.max(0, price - finalDiscount);
         return { originalPrice: price, discountedPrice };
     },
+    startViewerCount: (node, viewersConfig) => {
+        if (!node || !viewersConfig)
+            return;
+        const prevId = node.dataset.viewerId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        const { min, max, interval = 5000 } = viewersConfig;
+        const clamp = (v) => Math.min(max, Math.max(min, v));
+        const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+        node.textContent = String(initialValue);
+        const id = setInterval(() => {
+            const current = Number(node.textContent) || initialValue;
+            const delta = Math.ceil(current * 0.2);
+            const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
+            node.textContent = String(clamp(Math.round(next)));
+        }, interval);
+        node.dataset.viewerId = String(id);
+    },
+    startCountdown: (node, countdownSeconds = 599) => {
+        if (!node)
+            return;
+        const prevId = node.dataset.countdownId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        let remaining = countdownSeconds * 1000; // Convert to milliseconds
+        const formatTime = (totalMs) => {
+            const m = Math.floor(totalMs / 60000);
+            const s = Math.floor((totalMs % 60000) / 1000);
+            const ms = Math.floor((totalMs % 1000) / 10); // Show 2 digits for milliseconds
+            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(ms).padStart(2, "0")}`;
+        };
+        node.textContent = formatTime(remaining);
+        const id = setInterval(() => {
+            remaining -= 100; // Decrease by 100ms
+            if (remaining <= 0) {
+                remaining = countdownSeconds * 1000;
+            }
+            node.textContent = formatTime(remaining);
+        }, 100); // Update every 100ms
+        node.dataset.countdownId = String(id);
+    },
+    startComprandoCount: (node, min = 4, max = 16) => {
+        if (!node)
+            return;
+        const prevId = node.dataset.comprandoId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+        node.textContent = String(initialValue);
+        const id = setInterval(() => {
+            const current = Number(node.textContent) || initialValue;
+            const changePercent = 0.05; // 5% change
+            const change = Math.ceil(current * changePercent);
+            const direction = Math.random() > 0.5 ? 1 : -1;
+            let next = current + (change * direction);
+            // Clamp within min and max
+            next = Math.min(max, Math.max(min, next));
+            node.textContent = String(next);
+        }, 5000); // Update every 5 seconds
+        node.dataset.comprandoId = String(id);
+    },
 };
 export default commonService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.3.1",
+  "version": "9.3.3",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/assets/images/anims/service_list/dot_animation.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":260.03,"w":256,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"circle 3","sr":1,"st":12,"op":91,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-96.841,-18.544,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[1000,1000],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[400,400],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":53},{"s":[1000,1000],"t":78}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,130.015]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":53},{"s":[100],"t":78}]}},"shapes":[{"ty":"gr","nm":"Ellipse 1","it":[{"ty":"el","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[23.352,23.352]}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-96.841,-18.544]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":29.97,"op":84,"ip":0,"assets":[]}