kupos-ui-components-lib 9.0.10 → 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/PeruServiceItemDesktop.js

@@ -316,7 +316,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "rating",
             width: "30%",
-            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",

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

@@ -7,6 +7,7 @@ interface RatingHoverProps {
     translation?: {
         [key: string]: string;
     };
+    isPeru?: boolean;
 }
 declare const RatingHover: React.FC<RatingHoverProps>;
 export default RatingHover;

package/dist/components/ServiceItem/RatingHover.js

@@ -1,6 +1,7 @@
 import React from "react";
 import RatingItem from "./RatingItem";
-const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, }) => {
+const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, isPeru, }) => {
+    const ratingIndex = isPeru ? 7 : 6;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
             React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
@@ -22,37 +23,37 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
                     React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
                     React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
                 React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
                 React.createElement("div", { className: "px-1 py-2 text-center text-[12px]  font9", style: {
                         backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,

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";
@@ -110,7 +109,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     };
     const checkMidnight = () => {
         var _a, _b;
-        setIsExpand(null);
+        setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
         if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
             (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
             ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -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: {
@@ -258,7 +271,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             className: "" },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-auto w-[150px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
                     React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
                     React.createElement("div", { style: {
                             width: "1px",
@@ -283,15 +296,57 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
                 opacity: isItemExpanded ? 1 : 0,
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+                position: "relative",
+                zIndex: -1,
             } },
             React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, showPromo: showPromo, colors: colors, grayscaleClass: grayscaleClass, translation: translation, getAnimationIcon: getAnimationIcon }))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem }))),
         children,
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]", style: {
                 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.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -1,9 +1,9 @@
 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";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -16,11 +16,37 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
     var _a, _b, _c;
+    const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
     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]
         : "";
@@ -72,26 +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 }),
         React.createElement("div", { className: " rounded-[20px]", style: {
                 backgroundColor: "#fff",
                 zIndex: 1,
                 // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "14px 0 14px 14px",
-                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" },
@@ -102,17 +118,21 @@ 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 }),
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.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: showDropdown, setShowDropdown: setShowDropdown, onDropdownToggle: () => {
-                        setShowDropdown(!showDropdown);
-                        setAmenetiesAtomValue({
-                            service: serviceItem,
-                            showTopLabel: showTopLabel,
-                        });
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.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: () => {
+                        setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     } })),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] z-10 rounded-b-[14px] min-[420]:text-[14px] text-[12px]`, style: {
                     backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -121,8 +141,45 @@ 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",
+                opacity: isItemExpanded ? 1 : 0,
+                transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+                position: "relative",
+                zIndex: -1,
+            } },
+            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
 }
 export default ServiceItemMobile;

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

@@ -121,6 +121,8 @@ export interface MobileServiceItemProps {
     terminals?: any[];
     showDropdown?: boolean;
     setShowDropdown?: (value: boolean) => void;
+    isExpanded?: string | null;
+    setIsExpanded?: (value: string | null) => void;
     setAmenetiesAtomValue?: (value: {
         service: MobileServiceItemProps["serviceItem"];
         showTopLabel: string | boolean;