kupos-ui-components-lib 9.0.11 → 9.0.12

package/dist/assets/images/anims/service_list/priority_stage.json

@@ -1 +1 @@
-{"nm":"Main Scene","ddd":0,"h":100,"w":100,"meta":{"g":"@lottiefiles/creator 1.86.1"},"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[71.60193719360672,49.48916172143199]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[90,90],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":31},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[90,90],"t":63},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":97},{"s":[90,90],"t":133}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[71.60193719360672,49.48916172143199]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":5,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[24.18,0],[0,-24.18],[-24.18,0],[0,24.18]],"o":[[0,-24.18],[-24.18,0],[0,24.18],[24.18,0],[0,0]],"v":[[93.78,50],[50,6.22],[6.22,50],[50,93.78],[93.78,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[11.23,0],[0,-11.23],[-11.23,0],[0,11.23]],"o":[[0,-11.23],[-11.23,0],[0,11.23],[11.23,0],[0,0]],"v":[[70.34,50],[50,29.66],[29.66,50],[50,70.34],[70.34,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[14.66,0],[0,14.66],[-14.66,0],[0,-14.66]],"o":[[0,14.66],[-14.66,0],[0,-14.66],[14.66,0],[0,0]],"v":[[76.55,50],[50,76.55],[23.45,50],[50,23.45],[76.55,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[27.61,0],[0,27.61],[-27.61,0],[0,-27.61]],"o":[[0,27.61],[-27.61,0],[0,-27.61],[27.61,0],[0,0]],"v":[[100,50],[50,100],[0,50],[50,0],[100,50]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[71.60193719360672,49.48916172143199]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[71.60193719360672,49.48916172143199]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":30,"op":150,"ip":0,"assets":[]}
+{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.25.0"},"layers":[{"ty":0,"nm":" Main Scene","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,250]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","ind":1}],"v":"5.7.0","fr":30,"op":90,"ip":0,"assets":[{"nm":"Main Scene","id":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","layers":[{"ty":4,"nm":"Shape Layer - SVG","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[32.5,32.5]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":4},{"s":[619.0851,619.0851],"t":14}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[249.94198808735723,248.20464459007883]},"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":[0],"t":0},{"s":[100],"t":7}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[1.0100000000000051,0.14999999999999858],[0,0],[0,0],[1.0400000000000063,0],[0.46000000000000085,-0.9199999999999999],[0,0],[0,0],[0.3200000000000003,-0.9899999999999984],[-0.75,-0.740000000000002],[0,0],[0,0],[-0.8599999999999994,-0.6299999999999955],[-0.9000000000000004,0.480000000000004],[0,0],[0,0],[-0.4299999999999997,0],[-0.47000000000000597,0.3400000000000034],[0.14999999999999858,1.0300000000000011],[0,0],[0,0],[0.3299999999999983,0.990000000000002],[0,0]],"o":[[-0.3200000000000003,-0.9899999999999984],[0,0],[0,0],[-0.46999999999999886,-0.96],[-1.0400000000000063,0],[0,0],[0,0],[-1.0099999999999998,0.14999999999999858],[-0.32000000000000006,0.9899999999999984],[0,0],[0,0],[-0.17999999999999972,1.0300000000000011],[0.8300000000000001,0.6300000000000026],[0,0],[0,0],[0.3999999999999986,0.21999999999999886],[0.5399999999999991,0],[0.8299999999999983,-0.6300000000000026],[0,0],[0,0],[0.7199999999999989,-0.7399999999999984],[0,0],[0,0]],"v":[[62.9,25.51],[60.739999999999995,23.67],[42.89999999999999,21.020000000000003],[34.93999999999999,4.510000000000002],[32.52999999999999,3.0000000000000018],[30.119999999999987,4.510000000000002],[22.149999999999988,21.020000000000003],[4.309999999999988,23.67],[2.149999999999988,25.51],[2.829999999999988,28.310000000000002],[15.729999999999988,41.17],[12.669999999999987,59.34],[13.749999999999988,62.03],[16.559999999999988,62.25],[32.48999999999999,53.66],[48.41999999999999,62.25],[49.679999999999986,62.58],[51.26999999999999,62.059999999999995],[52.34999999999999,59.37],[49.289999999999985,41.199999999999996],[62.18999999999998,28.339999999999996],[62.86999999999998,25.539999999999996],[62.90999999999998,25.499999999999996]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":3.58},"c":{"a":0,"k":[0.9765,0.5373,0.2706]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}]}]}

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -27,7 +27,6 @@ import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
 import KuposButton from "../../ui/KuposButton/KuposButton";
-import TopAmenities from "../../ui/TopAmenities/TopAmenities";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
@@ -184,6 +183,30 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         onBookButtonPress();
     };
     const countdownSeconds = 7830;
+    const startCountdown = (node) => {
+        if (!node)
+            return;
+        const prevId = node.dataset.countdownId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        let remaining = countdownSeconds;
+        const formatTime = (totalSecs) => {
+            const h = Math.floor(totalSecs / 3600);
+            const m = Math.floor((totalSecs % 3600) / 60);
+            const s = totalSecs % 60;
+            return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+        };
+        node.textContent = formatTime(remaining);
+        const id = setInterval(() => {
+            remaining -= 1;
+            if (remaining <= 0) {
+                remaining = 0;
+                clearInterval(id);
+            }
+            node.textContent = formatTime(remaining);
+        }, 1000);
+        node.dataset.countdownId = String(id);
+    };
     const items = [
         {
             key: "amenities",
@@ -200,7 +223,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         {
             key: "directo",
             width: "12%",
-            condition: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip,
+            condition: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) === true,
             render: (React.createElement(DirectoBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
         },
         {
@@ -213,31 +236,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         {
             key: "flexible",
             width: "20%",
-            condition: serviceItem.is_change_ticket,
+            condition: serviceItem.is_change_ticket === true,
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} mt-[14px]` },
-        React.createElement(TopAmenities, { showPromo: showPromo, showTopLabel: showTopLabel, isSoldOut: isSoldOut, priceColor: colors.priceColor, buttonColor: colors.kuposButtonColor, boardingIcon: renderIcon("whiteBoardingIcon", "14px"), getAnimationIcon: getAnimationIcon, countdownSeconds: countdownSeconds, onCountdownEnd: () => {
-                const cardEl = document.getElementById(`service-card-${serviceItem.id}`);
-                if (!cardEl)
-                    return;
-                cardEl.style.border = "1px solid #ccc";
-                if (!showTopLabel) {
-                    cardEl.style.borderRadius = "10px";
-                }
-            } }),
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative ", style: {
-                border: countdownSeconds > 0
-                    ? `1px solid ${colors.priceColor}`
-                    : "1px solid #ccc",
-                borderRadius: showTopLabel
-                    ? "10px 0 10px 10px"
-                    : countdownSeconds > 0
-                        ? "10px 0 10px 10px"
-                        : "10px",
-            } },
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { 
+        // className={`relative ${
+        //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+        // } mt-[14px]`}
+        className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+            showTopLabel
+            ? "mt-[24px]"
+            : "mt-[20px]"}	` },
+        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative rounded-[10px] border border-[#ccc]" },
             React.createElement("div", { 
                 //  className="p-[15px] pt-[20px]"
                 className: " pt-[20px]", style: {
@@ -293,7 +306,47 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
-            React.createElement(LottiePlayer, { animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
-            React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)))))));
+            React.createElement("div", { className: "flex justify-between items-center w-full" },
+                React.createElement("div", { className: "flex items-center" },
+                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
+                    React.createElement("span", { className: "bold-text ml-[8px]" },
+                        " ",
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "")),
+                React.createElement("div", null,
+                    "Termina en\u00A0",
+                    React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                            // minWidth: "70px",
+                        } }))))),
+        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] 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: isSoldOut
+                        ? "#ddd"
+                        : colors.ratingBottomColor,
+                } },
+                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                    React.createElement(LottiePlayer
+                    // animationData={serviceItem.icons.priorityStageAnim}
+                    , { 
+                        // animationData={serviceItem.icons.priorityStageAnim}
+                        animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
+                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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                } },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, 
+                    // animationData={getAnimationIcon(connectingServiceIcon)}
+                    width: "14px", height: "14px" }),
+                React.createElement("div", null, "Conexión"))),
+            (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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
+                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                } },
+                React.createElement(LottiePlayer
+                // animationData={serviceItem.icons.directoAnim}
+                , { 
+                    // animationData={serviceItem.icons.directoAnim}
+                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
+                React.createElement("div", null, "Tren Express"))))))));
 }
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -1,7 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
-import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
 import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
@@ -24,6 +23,30 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     let isSoldOut = serviceItem.available_seats <= 0;
     const showPromo = Math.random() > 0.5;
     const countdownSeconds = 7830;
+    const startCountdown = (node) => {
+        if (!node)
+            return;
+        const prevId = node.dataset.countdownId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        let remaining = countdownSeconds;
+        const formatTime = (totalSecs) => {
+            const h = Math.floor(totalSecs / 3600);
+            const m = Math.floor((totalSecs % 3600) / 60);
+            const s = totalSecs % 60;
+            return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+        };
+        node.textContent = formatTime(remaining);
+        const id = setInterval(() => {
+            remaining -= 1;
+            if (remaining <= 0) {
+                remaining = 0;
+                clearInterval(id);
+            }
+            node.textContent = formatTime(remaining);
+        }, 1000);
+        node.dataset.countdownId = String(id);
+    };
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -75,34 +98,16 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
-            ? "mt-[10px]"
+            ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement(TopAmenitieMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, seatPriceColor: colors.seatPriceColor, bombAnim: serviceItem.icons.bombAnim, priorityStageAnim: serviceItem.icons.priorityStageAnim, countdownSeconds: countdownSeconds, onCountdownEnd: () => {
-                const cardEl = document.getElementById(`service-card-${serviceItem.id}`);
-                if (!cardEl)
-                    return;
-                cardEl.style.border = "1px solid #ccc";
-                if (!showTopLabel) {
-                    cardEl.style.borderRadius = "10px";
-                }
-            } }),
         React.createElement("div", { className: " rounded-[20px]", style: {
                 backgroundColor: "#fff",
                 zIndex: 1,
                 // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "12px 0 12px 12px",
-                border: `1px solid ${colors.bottomStripColor}`,
+                borderRadius: "12px",
+                border: "1px solid #ccc",
             } },
-            React.createElement("div", { 
-                // className={` ${
-                //   serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-                //   showTopLabel ||
-                //   serviceItem?.is_direct_trip ||
-                //   serviceItem?.is_transpordo
-                //     ? "mt-[10px]"
-                //     : ""
-                // }`}
-                style: { padding: "12px 12px 8px 12px" } },
+            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: "w-[120px] overflow-y-hidden" },
@@ -113,7 +118,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
                                     React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
                                 React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
-                                    React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px]" }, serviceItem.operator_details[2]))))) : null),
+                                    React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis" }, 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: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, destinationIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.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 }),
@@ -136,9 +141,36 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     left: "0px",
                     opacity: isSoldOut ? 0.5 : 1,
                 } },
-                React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
-                React.createElement("span", { className: "ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " })),
+                React.createElement("div", { className: "flex justify-between items-center w-full" },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" }),
+                        React.createElement("span", { className: "bold-text ml-[8px]" },
+                            " ",
+                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "")),
+                    React.createElement("div", null,
+                        "Termina en\u00A0",
+                        React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
+                                fontVariantNumeric: "tabular-nums",
+                                display: "inline-block",
+                                // minWidth: "70px",
+                            } }))))),
+            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] 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: isSoldOut ? "#ccc" : colors.ratingBottomColor,
+                    } },
+                    React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
+                    React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+                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 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
+                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                    } },
+                    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: isSoldOut ? "#ddd" : colors.tooltipColor,
+                    } },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                    React.createElement("div", null, "Tren Express"))))),
         React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/styles.css

@@ -126,9 +126,6 @@
 .mx-auto {
   margin-inline: auto;
 }
-.-mt-\[5px\] {
-  margin-top: calc(5px * -1);
-}
 .-mt-\[16px\] {
   margin-top: calc(16px * -1);
 }
@@ -180,9 +177,6 @@
 .mr-\[11px\] {
   margin-right: 11px;
 }
-.-mb-\[5px\] {
-  margin-bottom: calc(5px * -1);
-}
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -225,6 +219,9 @@
 .ml-\[5px\] {
   margin-left: 5px;
 }
+.ml-\[8px\] {
+  margin-left: 8px;
+}
 .ml-\[10px\] {
   margin-left: 10px;
 }
@@ -656,9 +653,6 @@
 .pt-\[4px\] {
   padding-top: 4px;
 }
-.pt-\[5px\] {
-  padding-top: 5px;
-}
 .pt-\[6px\] {
   padding-top: 6px;
 }
@@ -680,15 +674,12 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[13px\] {
+  padding-right: 13px;
+}
 .pr-\[15px\] {
   padding-right: 15px;
 }
-.pr-\[20px\] {
-  padding-right: 20px;
-}
-.pb-\[5px\] {
-  padding-bottom: 5px;
-}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -704,12 +695,12 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
-.pl-\[15px\] {
-  padding-left: 15px;
-}
 .text-center {
   text-align: center;
 }
+.text-end {
+  text-align: end;
+}
 .text-justify {
   text-align: justify;
 }

package/dist/ui/AmenitiesBlock.js

@@ -44,29 +44,30 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
     });
     const shouldShowPlus = plusAmenities.length > 0;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
-    return (React.createElement("div", { className: "flex items-center gap-[6px]" }, visibleAmenities.map((val, key) => {
-        const raw = metaData.amenities[val];
-        if (isWater(raw))
-            return null;
-        const baseName = getAmenityBaseName(raw);
-        return (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
-            React.createElement("div", { className: grayscaleClass },
-                React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
-            React.createElement("div", { className: TOOLTIP_CLASS, style: {
-                    backgroundColor: colors.tooltipColor,
-                    zIndex: 21,
-                    padding: "12px",
-                } },
-                React.createElement(TooltipArrow, { color: colors.tooltipColor }),
-                React.createElement("div", { className: "flex flex-col gap-[10px]" }, amenities.map((id, i) => {
-                    const rawItem = metaData.amenities[id];
-                    if (isWater(rawItem))
-                        return null;
-                    const name = getAmenityBaseName(rawItem);
-                    return (React.createElement("div", { key: i, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
-                        React.createElement(SvgAmenities, { moreAnemities: true, name: name.toUpperCase(), color: "white" }),
-                        getAmenityName(name.split("_").join(" "))));
-                })))));
-    })));
+    return (React.createElement("div", { className: "relative flex items-center gap-[6px] group cursor-pointer" },
+        visibleAmenities.map((val, key) => {
+            const raw = metaData.amenities[val];
+            if (isWater(raw))
+                return null;
+            const baseName = getAmenityBaseName(raw);
+            return (React.createElement("div", { key: key },
+                React.createElement("div", { className: grayscaleClass },
+                    React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() }))));
+        }),
+        React.createElement("div", { className: TOOLTIP_CLASS, style: {
+                backgroundColor: colors.bottomStripColor,
+                zIndex: 21,
+                padding: "12px",
+            } },
+            React.createElement(TooltipArrow, { color: colors.tooltipColor }),
+            React.createElement("div", { className: "flex flex-col gap-[10px]" }, amenities.map((id, i) => {
+                const rawItem = metaData.amenities[id];
+                if (isWater(rawItem))
+                    return null;
+                const name = getAmenityBaseName(rawItem);
+                return (React.createElement("div", { key: i, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
+                    React.createElement(SvgAmenities, { moreAnemities: true, name: name.toUpperCase(), color: "white" }),
+                    getAmenityName(name.split("_").join(" "))));
+            })))));
 };
 export default AmenitiesBlock;

package/dist/ui/DateTimeSection/DateTimeSection.js

@@ -50,9 +50,9 @@ function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArri
                         DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
             !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                 React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
-                    ? null
+                    ? "\u00A0"
                     : serviceItem.arr_time
                         ? DateService.formatTime(serviceItem.arr_time)
-                        : null))))));
+                        : "\u00A0"))))));
 }
 export default DateTimeSection;

package/dist/ui/DirectoBlock.js

@@ -5,7 +5,7 @@ const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (
         React.createElement(LottiePlayer, { animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" })),
     React.createElement("div", { className: "group text-[13.33px] cursor-pointer" }, translation === null || translation === void 0 ? void 0 :
         translation.directService,
-        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap w-fit z-10 mt-2.5 text-center shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
-            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.tooltipColor } }), translation === null || translation === void 0 ? void 0 :
+        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap w-fit z-10 mt-2.5 text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
+            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }), translation === null || translation === void 0 ? void 0 :
             translation.directServiceText))));
 export default DirectoBlock;

package/dist/ui/DurationBlock.js

@@ -5,7 +5,7 @@ const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors
         serviceItem.duration,
         " ",
         translation.hours,
-        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
-            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.tooltipColor } }),
+        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
+            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
             "Duraci\u00F3n estimada del viaje"))));
 export default DurationBlock;

package/dist/ui/FlexibleBlock.js

@@ -12,10 +12,11 @@ const FlexibleBlock = ({ translation, getAnimationIcon, colors, serviceItem, isS
                         // animationData={serviceItem.icons.flexibleAnim}
                         animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" }))),
             React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
-                    backgroundColor: colors.tooltipColor,
+                    backgroundColor: colors.bottomStripColor,
                     lineHeight: "1.5",
+                    zIndex: "1000",
                 } },
-                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
+                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
                 "Esta empresa permite cambios sin costo hasta (", (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _a !== void 0 ? _a : 6,
                 ") horas antes del viaje."))));
 };

package/dist/ui/RatingBlock.js

@@ -7,7 +7,7 @@ const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translatio
             color: isSoldOut ? "#c0c0c0" : "#464647",
         } },
         React.createElement("span", { className: "block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer" }, serviceItem.operator_details[2]),
-        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
-            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
+        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
+            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
             serviceItem.operator_details[2]))));
 export default RatingBlock;

package/dist/ui/TopAmenities/TopAmenities.d.ts

@@ -10,6 +10,7 @@ interface TopAmenitiesProps {
     countdownSeconds?: number;
     promoText?: string;
     onCountdownEnd?: () => void;
+    offerText?: string;
 }
-declare function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds, onCountdownEnd, }: TopAmenitiesProps): React.ReactElement;
+declare function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds, onCountdownEnd, offerText, }: TopAmenitiesProps): React.ReactElement;
 export default TopAmenities;

package/dist/ui/TopAmenities/TopAmenities.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds = 0, onCountdownEnd, }) {
+function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds = 0, onCountdownEnd, offerText, }) {
     const pad = (n) => String(n).padStart(2, "0");
     const startCountdown = (el) => {
         if (!el || el.dataset.timerStarted)
@@ -34,7 +34,7 @@ function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonCo
             position: "relative",
             zIndex: "-1",
         } },
-        React.createElement("div", { "data-promo-bar": true, style: {
+        offerText && (React.createElement("div", { "data-promo-bar": true, style: {
                 backgroundColor: priceColor,
                 position: "relative",
                 right: showTopLabel ? "-21px" : "",
@@ -45,13 +45,15 @@ function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonCo
             React.createElement("div", { style: { display: "flex", alignItems: "center" } },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "20px", height: "20px" }),
                 React.createElement("span", { className: "flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20", style: { paddingRight: showTopLabel ? "18px" : "" } },
-                    React.createElement("span", { className: "bold-text" }, "kuponazo 20%\u00A0"),
+                    React.createElement("span", { className: "bold-text" },
+                        offerText,
+                        "\u00A0"),
                     " | Termina en\u00A0",
                     React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
                             fontVariantNumeric: "tabular-nums",
                             display: "inline-block",
                             minWidth: "70px",
-                        } })))),
+                        } }))))),
         showTopLabel && (React.createElement("div", { className: "flex items-center py-[10px] px-[14px] text-[13.33px] z-20", style: {
                 backgroundColor: isSoldOut ? "#ddd" : buttonColor,
                 borderTopRightRadius: "10px",

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

@@ -8,6 +8,7 @@ interface TopAmenitieMobileProps {
     countdownSeconds?: number;
     promoText?: string;
     onCountdownEnd?: () => void;
+    offerText?: string;
 }
-declare function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds, onCountdownEnd, }: TopAmenitieMobileProps): React.ReactElement;
+declare function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds, onCountdownEnd, offerText, }: TopAmenitieMobileProps): React.ReactElement;
 export default TopAmenitieMobile;

package/dist/ui/mobileweb/TopAmenitieMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds = 0, onCountdownEnd, }) {
+function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds = 0, onCountdownEnd, offerText, }) {
     const pad = (n) => String(n).padStart(2, "0");
     const startCountdown = (el) => {
         if (!el || el.dataset.timerStarted)
@@ -34,7 +34,7 @@ function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim,
             position: "relative",
             zIndex: "-1",
         } },
-        React.createElement("div", { style: {
+        offerText && (React.createElement("div", { style: {
                 backgroundColor: seatPriceColor,
                 position: "relative",
                 right: showTopLabel ? "-21px" : "",
@@ -45,14 +45,14 @@ function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim,
             React.createElement("div", { style: { display: "flex", alignItems: "center", color: "#fff" } },
                 React.createElement(LottiePlayer, { animationData: bombAnim, width: "16px", height: "16px" }),
                 React.createElement("span", { className: "flex items-center gap-[5px] py-[6px] pl-[6px]   text-[12px]  z-20", style: { paddingRight: showTopLabel ? "20px" : "0" } },
-                    React.createElement("span", { className: "bold-text" }, "kuponazo 20% "),
+                    React.createElement("span", { className: "bold-text" }, offerText),
                     " |",
                     " ",
                     React.createElement("span", { ref: startCountdown, style: {
                             fontVariantNumeric: "tabular-nums",
                             display: "inline-block",
                             minWidth: "50px",
-                        } })))),
+                        } }))))),
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[5px] py-[6px] px-[10px]  text-[12px]  z-20`, style: {
                 backgroundColor: isSoldOut ? "#ddd" : "#ff8f45",
                 borderTopRightRadius: "12px",

package/package.json

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