kupos-ui-components-lib 9.3.2 → 9.3.4

package/dist/assets/images/anims/service_list/60_percent_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":100,"w":100,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[37,9]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":1},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[109,109],"t":48},{"s":[100,100],"t":89}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.51,0.27],[0.31,0.46],[0.14,0.56],[0,0.59],[-0.31,0.79],[-0.58,0.44],[-0.83,0],[-0.49,-0.27],[-0.26,-0.44],[-0.05,-0.49],[0,0],[0.25,0.2],[0.39,0],[0.27,-0.23],[0.15,-0.45],[0.02,-0.66],[0,-0.02],[0,-0.01],[-0.24,0.18],[-0.3,0.1],[-0.32,0],[-0.47,-0.26],[-0.28,-0.49],[0,-0.65],[0.3,-0.51],[0.52,-0.3],[0.67,0]],"o":[[-0.75,0],[-0.51,-0.28],[-0.31,-0.46],[-0.13,-0.57],[0,-1.1],[0.31,-0.8],[0.59,-0.44],[0.71,0],[0.49,0.27],[0.26,0.44],[0,0],[-0.07,-0.37],[-0.24,-0.21],[-0.37,0],[-0.27,0.22],[-0.15,0.45],[0,0.01],[0,0.02],[0.14,-0.24],[0.24,-0.18],[0.3,-0.1],[0.54,0],[0.47,0.25],[0.29,0.48],[0,0.61],[-0.29,0.5],[-0.51,0.3],[0,0]],"v":[[10.74,14.17],[8.85,13.76],[7.61,12.66],[6.94,11.13],[6.75,9.39],[7.21,6.55],[8.54,4.69],[10.67,4.03],[12.46,4.44],[13.58,5.5],[14.04,6.9],[12.08,6.9],[11.6,6.05],[10.65,5.74],[9.69,6.09],[9.06,7.1],[8.8,8.76],[8.8,8.81],[8.8,8.85],[9.38,8.22],[10.19,7.8],[11.11,7.64],[12.63,8.04],[13.75,9.14],[14.18,10.84],[13.73,12.52],[12.51,13.72],[10.74,14.17]]}}},{"ty":"sh","nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.23,0.12],[-0.13,0.22],[0,0.28],[0.14,0.21],[0.24,0.12],[0.31,0],[0.23,-0.12],[0.14,-0.22],[0,-0.29],[-0.14,-0.23],[-0.23,-0.13],[-0.31,0]],"o":[[0.3,0],[0.23,-0.13],[0.14,-0.22],[0,-0.31],[-0.13,-0.22],[-0.23,-0.13],[-0.3,0],[-0.23,0.12],[-0.14,0.22],[0,0.29],[0.14,0.22],[0.24,0.12],[0,0]],"v":[[10.62,12.38],[11.42,12.19],[11.97,11.66],[12.18,10.91],[11.97,10.12],[11.41,9.6],[10.6,9.41],[9.8,9.59],[9.24,10.11],[9.03,10.88],[9.24,11.66],[9.8,12.19],[10.62,12.38]]}}},{"ty":"sh","nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0]],"o":[[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[0,0]],"v":[[19.93,14.17],[17.61,13.52],[16.11,11.75],[15.59,9.1],[16.11,6.47],[17.61,4.68],[19.93,4.03],[22.25,4.68],[23.74,6.47],[24.27,9.1],[23.74,11.75],[22.25,13.52],[19.93,14.17]]}}},{"ty":"sh","nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.33,0.26],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.25],[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0]],"o":[[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0],[-0.33,0.25],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.26],[0,0]],"v":[[19.93,12.28],[21.08,11.89],[21.85,10.79],[22.13,9.1],[21.85,7.42],[21.08,6.33],[19.93,5.94],[18.77,6.33],[18,7.42],[17.73,9.1],[18,10.79],[18.77,11.89],[19.93,12.28]]}}},{"ty":"sh","nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[27.69,14],[33.13,4.2],[35.18,4.2],[29.73,14],[27.69,14]]}}},{"ty":"sh","nm":"Path 6","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.46,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.48,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.22,0.38],[-0.36,0.21],[0,0]],"v":[[34.94,14.17],[33.66,13.86],[32.77,12.98],[32.43,11.62],[32.77,10.25],[33.66,9.37],[34.92,9.06],[36.2,9.37],[37.08,10.25],[37.42,11.62],[37.08,12.98],[36.18,13.86],[34.94,14.17]]}}},{"ty":"sh","nm":"Path 7","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.25],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.25],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[34.92,12.75],[35.37,12.63],[35.68,12.24],[35.79,11.62],[35.68,10.98],[35.37,10.6],[34.92,10.46],[34.48,10.6],[34.17,10.98],[34.06,11.61],[34.17,12.24],[34.48,12.63],[34.92,12.75]]}}},{"ty":"sh","nm":"Path 8","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.47,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.47,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.21,0.38],[-0.37,0.21],[0,0]],"v":[[27.99,9.14],[26.72,8.83],[25.82,7.95],[25.49,6.59],[25.82,5.22],[26.72,4.34],[27.99,4.03],[29.25,4.34],[30.14,5.22],[30.47,6.59],[30.14,7.95],[29.25,8.83],[27.99,9.14]]}}},{"ty":"sh","nm":"Path 9","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[27.98,7.73],[28.43,7.6],[28.74,7.21],[28.85,6.59],[28.74,5.95],[28.43,5.57],[27.98,5.43],[27.53,5.57],[27.22,5.95],[27.11,6.59],[27.22,7.21],[27.53,7.6],[27.98,7.73]]}}},{"ty":"sh","nm":"Path 10","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.73,0.43],[0.42,0.76],[0,1],[-0.41,0.76],[-0.73,0.43],[-0.96,0],[-0.74,-0.43],[-0.4,-0.77],[0,-1],[0.41,-0.77],[0.74,-0.43],[0.96,0]],"o":[[-0.96,0],[-0.73,-0.43],[-0.41,-0.77],[0,-1],[0.42,-0.77],[0.73,-0.43],[0.96,0],[0.74,0.43],[0.41,0.76],[0,1],[-0.4,0.76],[-0.74,0.43],[0,0]],"v":[[46.66,14.17],[44.12,13.52],[42.4,11.75],[41.79,9.1],[42.4,6.47],[44.12,4.68],[46.66,4.03],[49.21,4.68],[50.91,6.47],[51.53,9.1],[50.91,11.75],[49.21,13.52],[46.66,14.17]]}}},{"ty":"sh","nm":"Path 11","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.4,0.26],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.25],[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.41,-0.26],[-0.55,0]],"o":[[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.4,-0.26],[-0.55,0],[-0.41,0.25],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.26],[0,0]],"v":[[46.66,12.28],[48.11,11.89],[49.07,10.79],[49.4,9.1],[49.07,7.42],[48.11,6.33],[46.66,5.94],[45.22,6.33],[44.26,7.42],[43.93,9.1],[44.26,10.79],[45.22,11.89],[46.66,12.28]]}}},{"ty":"sh","nm":"Path 12","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[53.1,14],[53.1,4.2],[59.61,4.2],[59.61,5.89],[55.2,5.89],[55.2,8.27],[58.67,8.27],[58.67,9.91],[55.2,9.91],[55.2,14],[53.1,14]]}}},{"ty":"sh","nm":"Path 13","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60.99,14],[60.99,4.2],[67.5,4.2],[67.5,5.89],[63.09,5.89],[63.09,8.27],[66.56,8.27],[66.56,9.91],[63.09,9.91],[63.09,14],[60.99,14]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37.094,9.075]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37.094,9.075]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 14","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-3.53],[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0]],"o":[[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0],[0,0],[0,-3.53],[0,0]],"v":[[6.4,0],[67.6,0],[74,6.4],[74,11.6],[67.6,18],[6.4,18],[0,11.6],[0,6.4],[6.4,0]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.361,0.38]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37,9]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37,9]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":30,"op":89,"ip":0,"assets":[]}

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -30,6 +30,7 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
     promoAnim: {
@@ -66,24 +67,8 @@ const ANIMATION_MAP = {
     },
 };
 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, }) {
-    const startViewerCount = (node) => {
-        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);
-    };
+    var _a;
+    console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -115,17 +100,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         busStage[labelId].split("|")[1] === "true" &&
         busStage[labelId].split("|")[0];
     let isSoldOut = serviceItem.available_seats <= 0;
-    const showPromo = Math.random() > 0.5;
     const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
     const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
-    const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+    const seats = removeDuplicateSeats
+        ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
+        : serviceItem.seat_types || [];
+    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
+    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
+    const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
     const serviceCardStyle = hasOfferText
         ? {
             borderColor: "transparent",
             borderStyle: "solid",
             borderWidth: "6px 6px 0 6px",
-            borderRadius: isItemExpanded ? "18px 18px 0 0" : "18px",
+            borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
             background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
         }
         : {};
@@ -214,29 +203,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         }
         onBookButtonPress();
     };
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const items = [
         {
             key: "amenities",
@@ -277,10 +243,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                     padding: coachKey
                         ? "15px 15px 20px 15px"
                         : "20px 15px 11px 15px",
+                    marginTop: hasDiscount || hasOfferText ? "14px" : "0",
                 } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", style: {
-                        marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
-                    } },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
                     React.createElement("div", { className: "flex flex-col gap-[5px]" },
                         React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
@@ -295,12 +260,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                     React.createElement("div", { className: "content-center" },
                         React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon })),
                     React.createElement("div", { className: "relative" },
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] w-[100%] right-[0px] absolute", style: {
-                                top: serviceDetailsLoading ? "-17px" : "-20px",
-                            } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
-                            (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,
                         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 }),
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] w-[100%] right-[0px]", style: {
+                        showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px]", style: {
                                 top: serviceDetailsLoading ? "-17px" : "-20px",
                             } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                             (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)),
@@ -338,7 +299,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 "\u00A0"),
                             " ",
                             "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
+                            React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
                                     fontVariantNumeric: "tabular-nums",
                                     display: "inline-block",
                                     // minWidth: "70px",
@@ -346,41 +307,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 React.createElement("div", { className: "flex items-center" },
                     React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
                     React.createElement("span", { className: "ml-[6px]" },
-                        React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
+                        React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
                         " ",
                         React.createElement("span", { className: "bold-text" }, "personas"),
                         " ",
                         React.createElement("span", null,
                             " ",
-                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " están viendo este viaje")))))),
-        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[22px] z-10 " },
-            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`, style: {
-                    backgroundColor: "#fff",
-                    border: `1px solid ${colors.topLabelColor}`,
-                    color: colors.topLabelColor,
-                } },
-                React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
-                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px]  px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
-                    backgroundColor: "#fff",
-                    border: `1px solid ${colors.topLabelColor}`,
-                    color: colors.topLabelColor,
-                } },
-                renderIcon("connectingServiceIcon", "12px"),
-                React.createElement("div", null, "Conexión"))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: "#fff",
-                    border: `1px solid ${colors.topLabelColor}`,
-                    color: colors.topLabelColor,
-                } },
-                renderIcon("directo", "12px"),
-                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: "#fff",
-                    border: `1px solid ${colors.topLabelColor}`,
-                    color: colors.topLabelColor,
-                } },
-                renderIcon("directo", "12px"),
-                React.createElement("div", null, "Tren Express"))))))));
+                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
+                            " |",
+                            " ",
+                            React.createElement("span", { className: "" },
+                                "\u26A1 Quedan pocos",
+                                " ",
+                                React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                "comprando"))))))),
+        React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -4,6 +4,7 @@ import commonService from "../../utils/CommonService";
 import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
+import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -33,47 +34,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
         }
         : {};
-    const startViewerCount = (node) => {
-        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);
-    };
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -132,7 +92,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
                 React.createElement("div", { className: "flex justify-between  items-center mb-[10px]" },
-                    React.createElement("div", { className: "flex items-center  justify-between" },
+                    React.createElement("div", { className: "flex items-center  justify-between", style: { marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "10px" : "" } },
                         React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
                         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" },
@@ -144,50 +104,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     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),
                     showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                         (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),
-                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
+                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 }),
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
-                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={() => {
-                    //   setShowDropdown(!showDropdown);
-                    //   setAmenetiesAtomValue({
-                    //     service: serviceItem,
-                    //     showTopLabel: showTopLabel,
-                    //   });
-                    // }}
-                    onDropdownToggle: () => {
+                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: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru })),
-            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"))))),
+            React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
                 background: isSoldOut ? "#ccc" : offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
@@ -195,34 +117,42 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 zIndex: -1,
             } },
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
-                React.createElement("div", { className: "flex justify-between items-center" },
+                React.createElement("div", { className: "flex justify-between items-start" },
                     React.createElement("div", { className: `flex ${isLongOfferText ? "items-start" : "items-center"}` },
                         React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
-                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "12px", height: "12px" })),
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" })),
                         React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
                                 color: "#fff",
                                 lineHeight: 1.4,
                             } },
                             React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
                                 "Termina en\u00A0",
-                                React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startCountdown(node, 599), style: {
                                         fontVariantNumeric: "tabular-nums",
                                         display: "inline-block",
                                     } })))),
-                    React.createElement("div", { className: "flex items-center", style: {
+                    React.createElement("div", { className: "flex flex-col items-end", style: {
                             color: "#fff",
                         } },
-                        React.createElement("div", { className: "mr-[4px]" },
-                            " ",
-                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" })),
-                        React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
-                            React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
-                            " ",
-                            React.createElement("span", { className: "bold-text" }, "personas"),
-                            " ",
-                            React.createElement("span", null,
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: "mr-[4px]" },
+                                " ",
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" })),
+                            React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                React.createElement("span", { className: "bold-text" }, "personas"),
+                                " ",
+                                React.createElement("span", null,
+                                    " ",
+                                    "viendo"))),
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("span", { className: "whitespace-nowrap" },
+                                "\u26A1 Quedan pocos",
+                                " ",
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
-                                "viendo"))))))),
+                                "comprando"))))))),
         React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/components/ServiceItem/types.d.ts

@@ -146,6 +146,8 @@ export interface ServiceItemProps {
         bottomStripColor?: string;
         directoColor?: string;
         seatPriceColor?: string;
+        rightGradiantColor?: string;
+        leftGradiantColor?: string;
     };
     cityOrigin?: {
         value: number;

package/dist/styles.css

@@ -433,6 +433,9 @@
 .rotate-180 {
   rotate: 180deg;
 }
+.transform {
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+}
 .cursor-default {
   cursor: default;
 }
@@ -1081,6 +1084,15 @@
     transform: translateY(0);
   }
 }
+@keyframes pulse-zoom {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
@@ -1103,6 +1115,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1214,6 +1246,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/dist/ui/SeatSection/SeatSection.js

@@ -122,15 +122,30 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#c2c2c2]" }, "Antes")),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[30px] items-end" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
-            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", right: "30px" } }, discountValue != null && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white" },
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", right: "30px" } }, discountValue != null && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                } },
                 discountValue,
                 "% OFF"))),
             React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
-                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] line-through" }, formatPrice(discountSeat.originalPrice))),
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: {
+                        position: "relative",
+                    } },
+                    formatPrice(discountSeat.originalPrice),
+                    React.createElement("span", { style: {
+                            position: "absolute",
+                            left: "-2px",
+                            top: "50%",
+                            width: "calc(100% + 4px)",
+                            height: "1px",
+                            backgroundColor: "#9f9f9f",
+                            transform: "rotate(-10deg)",
+                            transformOrigin: "center",
+                        } }))),
             React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-start" },
                 React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
                     renderIcon("fireIcon", "16px"),
-                    formatPrice(discountSeat.discountedPrice)))));
+                    formatPrice(Math.floor(discountSeat.discountedPrice * 1000) / 1000)))));
     }
     return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
         React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),

package/dist/ui/ServiceBadges/ServiceBadges.d.ts

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

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -0,0 +1,33 @@
+import React from "react";
+const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, }) => {
+    return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
+        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("connectingServiceIcon", "12px"),
+            React.createElement("div", null, "Conexión"))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", null, "Tren Express")))));
+};
+export default ServiceBadges;

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

@@ -19,6 +19,7 @@ interface DateTimeSectionMobileProps {
     availableSeats: number;
     removeDuplicateSeats?: boolean;
     serviceItem?: any;
+    tooltipBgColor?: string;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }: DateTimeSectionMobileProps): React.ReactElement;
+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;
 export default DateTimeSectionMobile;

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/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,7 +42,7 @@ 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, }) {
+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) => {
@@ -94,9 +94,13 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         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]" },
-            React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: { backgroundColor: seatPriceColor } },
+    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",
+            } },
+            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"),