kupos-ui-components-lib 9.2.10 → 9.3.2

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

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

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

@@ -0,0 +1 @@
+{"nm":"t","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":4,"nm":"t","sr":1,"st":60,"op":90,"ip":60,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":89},{"s":[0],"t":90}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":66}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":60},{"s":[100],"t":61}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":66},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":72}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":66},{"s":[100],"t":67}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":66},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":72},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":78}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":72},{"s":[100],"t":73}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"t","sr":1,"st":30,"op":60,"ip":30,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":59},{"s":[0],"t":60}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":30},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":36}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":30},{"s":[100],"t":31}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":36},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":42}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":36},{"s":[100],"t":37}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":36},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":42},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":48}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":42},{"s":[100],"t":43}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"t","sr":1,"st":0,"op":30,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":29},{"s":[0],"t":30}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":6}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":0},{"s":[100],"t":1}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":6},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":12}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":6},{"s":[100],"t":7}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"パ","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":6},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":12},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":18}]}},{"ty":"fl","bm":0,"hd":false,"nm":"塗","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":12},{"s":[100],"t":13}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3}],"v":"5.9.0","fr":30,"op":90,"ip":0,"assets":[]}

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -20,6 +20,7 @@ import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -60,6 +61,9 @@ const ANIMATION_MAP = {
     bombAnimation: {
         kupos: bombAnimation,
     },
+    dotAnimation: {
+        kupos: dotAnimation,
+    },
 };
 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) => {
@@ -114,6 +118,17 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     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 serviceCardStyle = hasOfferText
+        ? {
+            borderColor: "transparent",
+            borderStyle: "solid",
+            borderWidth: "6px 6px 0 6px",
+            borderRadius: isItemExpanded ? "18px 18px 0 0" : "18px",
+            background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+        }
+        : {};
     const renderIcon = (iconKey, size = "14px") => {
         var _a;
         const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
@@ -235,19 +250,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             condition: serviceItem.duration,
             render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
         },
-        // {
-        //   key: "directo",
-        //   width: "12%",
-        //   condition: serviceItem?.is_direct_trip === true,
-        //   render: (
-        //     <DirectoBlock
-        //       translation={translation}
-        //       getAnimationIcon={getAnimationIcon}
-        //       colors={colors}
-        //       isSoldOut={isSoldOut}
-        //     />
-        //   ),
-        // },
         {
             key: "pet",
             width: "20%",
@@ -263,34 +265,24 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     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]`}
-        className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    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 ${hasOfferText ? "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", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { className: " pt-[20px]", style: {
                     padding: coachKey
                         ? "15px 15px 20px 15px"
                         : "20px 15px 11px 15px",
                 } },
-                React.createElement("div", { 
-                    // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
-                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", style: {
+                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", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "5px",
-                        } },
-                        React.createElement("div", { 
-                            // className="flex items-center justify-center m-[auto]"
-                            className: "" },
+                    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" : ""}` }),
                             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, isPeru: isPeru })),
@@ -301,13 +293,17 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     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 })),
+                        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 }))),
+                        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: {
+                                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(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
                         setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
         isPeru ? null : (React.createElement("div", { style: {
@@ -318,11 +314,18 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 position: "relative",
                 zIndex: -1,
             } },
-            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
+            React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: "-10px" }, (hasOfferText
+                    ? {
+                        borderLeft: "6px solid #ff5964",
+                        borderRight: "6px solid #ff8842",
+                        borderRadius: "0 0 18px 18px",
+                        boxSizing: "border-box",
+                    }
+                    : {})) },
                 React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true })))),
         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,
+                background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
             React.createElement("div", { className: "flex  justify-between items-center w-full" },
@@ -341,8 +344,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                     // minWidth: "70px",
                                 } })))),
                 React.createElement("div", { className: "flex items-center" },
-                    renderIcon("personIcon", "16px"),
-                    "\u00A0",
+                    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" } }),
                         " ",
@@ -351,41 +353,34 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         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-[15px] z-10 " },
+        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: isSoldOut
-                        ? "#ddd"
-                        : colors.ratingBottomColor,
+                    backgroundColor: "#fff",
+                    border: `1px solid ${colors.topLabelColor}`,
+                    color: colors.topLabelColor,
                 } },
-                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 ? "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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            (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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            (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,
                 } },
-                React.createElement(LottiePlayer
-                // animationData={serviceItem.icons.directoAnim}
-                , { 
-                    // animationData={serviceItem.icons.directoAnim}
-                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
+                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] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            (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,
                 } },
-                React.createElement(LottiePlayer
-                // animationData={serviceItem.icons.directoAnim}
-                , { 
-                    // animationData={serviceItem.icons.directoAnim}
-                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
+                renderIcon("directo", "12px"),
                 React.createElement("div", null, "Tren Express"))))))));
 }
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -22,6 +22,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
     let isSoldOut = serviceItem.available_seats <= 0;
     const isLongOfferText = (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _a === void 0 ? void 0 : _a.length) || 0) > 35;
+    const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
+    const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+    const serviceCardStyle = hasOfferText
+        ? {
+            borderColor: "transparent",
+            borderStyle: "solid",
+            borderWidth: "6px 6px 0 6px",
+            borderRadius: "18px",
+            background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+        }
+        : {};
     const startViewerCount = (node) => {
         if (!node || !viewersConfig)
             return;
@@ -110,23 +121,15 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
-    return (React.createElement("div", { 
-        // className={`relative  ${
-        //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
-        //   }
-        className: `relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement("div", { className: `relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement("div", { className: " rounded-[20px]", style: {
-                backgroundColor: "#fff",
-                zIndex: 1,
-                // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "12px",
-                border: "1px solid #ccc",
-            } },
+        React.createElement("div", { className: `bg-white z-1 ${hasOfferText
+                ? "rounded-[18px]"
+                : "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" },
@@ -154,58 +157,64 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     onDropdownToggle: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru })),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
+            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: isSoldOut ? "#ccc" : colors.ratingBottomColor,
+                        backgroundColor: "#fff",
+                        border: `1px solid ${colors.topLabelColor}`,
+                        color: colors.topLabelColor,
                     } },
-                    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))),
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) === true && (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.tooltipBgColor,
-                        color: isSoldOut ? "#bbb" : colors.directoColor,
+                    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,
                     } },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
+                    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 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
-                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                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: isSoldOut ? "#ddd" : colors.tooltipColor,
+                        backgroundColor: "#fff",
+                        border: `1px solid ${colors.topLabelColor}`,
+                        color: colors.topLabelColor,
                     } },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                    renderIcon("directo", "12px"),
                     React.createElement("div", null, "Tren Express"))))),
         (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: {
-                backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                background: isSoldOut ? "#ccc" : offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 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 flex-col gap-[4px]" },
+                React.createElement("div", { className: "flex justify-between items-center" },
                     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: "18px", height: "18px" })),
-                        React.createElement("div", { className: `ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "12px", height: "12px" })),
+                        React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
                                 color: "#fff",
                                 lineHeight: 1.4,
                             } },
-                            React.createElement("span", { className: "min-[380px]:text-[12px] bold-text" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
-                            " ",
-                            React.createElement("span", { className: "min-[380px]:text-[12px]" }, "|"),
-                            " ",
                             React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
                                 "Termina en\u00A0",
                                 React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
                                         fontVariantNumeric: "tabular-nums",
                                         display: "inline-block",
                                     } })))),
-                    React.createElement("div", { className: "flex items-start", style: {
+                    React.createElement("div", { className: "flex items-center", style: {
                             color: "#fff",
                         } },
-                        React.createElement("div", null, renderIcon("personIcon", "16px")),
+                        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" } }),
                             " ",
@@ -213,7 +222,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                             " ",
                             React.createElement("span", null,
                                 " ",
-                                viewersConfig.label || " están viendo este viaje"))))))),
+                                "viendo"))))))),
         React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

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

@@ -114,6 +114,9 @@ export interface MobileServiceItemProps {
             whiteBoardingIcon?: string;
             downArrow?: string;
             personIcon?: string;
+            specialDeparture?: string;
+            fireIcon?: string;
+            directoIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];