kupos-ui-components-lib 9.6.9 → 9.7.0

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare 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, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
+declare 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, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -32,6 +32,8 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
@@ -64,6 +66,9 @@ const ANIMATION_MAP = {
     bombAnimation: {
         kupos: bombAnimation,
     },
+    thunderAnimation: {
+        kupos: thunderAnimation,
+    },
     dotAnimation: {
         kupos: dotAnimation,
     },
@@ -74,7 +79,7 @@ const ANIMATION_MAP = {
         kupos: femaleAnimation,
     },
 };
-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, showLoginModal, isLoggedIn, showLoginOption, }) {
+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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -243,7 +248,7 @@ 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 hover:z-[150] ${hasOfferText || hasDpEnabled ? "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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "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]"
@@ -299,7 +304,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         boxSizing: "border-box",
                     }
                     : {})) },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, renderIcon: renderIcon })))),
         children,
         React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -180,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
 }
 export default ServiceItemMobile;

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

@@ -124,6 +124,7 @@ export interface MobileServiceItemProps {
             directoIcon?: string;
             whiteFireIcon?: string;
             femaleAnim?: string;
+            cancelTicketIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

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

@@ -129,6 +129,12 @@ export interface ServiceItemProps {
             personIcon?: string;
             whiteFireIcon?: string;
             fireIcon?: string;
+            whiteOrigin?: string;
+            whiteDestination?: string;
+            userIcon?: string;
+            sheildIcon?: string;
+            busIcon?: string;
+            whiteDownArrow?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
@@ -221,6 +227,7 @@ export interface ServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isNewUi?: boolean;
     showLoginModal?: any;
     isLoggedIn?: any;
     showLoginOption?: boolean;

package/dist/styles.css

@@ -63,6 +63,9 @@
 .right-\[0px\] {
   right: 0px;
 }
+.right-\[18px\] {
+  right: 18px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -75,6 +78,9 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
+.bottom-\[11px\] {
+  bottom: 11px;
+}
 .bottom-\[35px\] {
   bottom: 35px;
 }
@@ -189,12 +195,21 @@
 .mt-\[5px\] {
   margin-top: 5px;
 }
+.mt-\[6px\] {
+  margin-top: 6px;
+}
+.mt-\[8px\] {
+  margin-top: 8px;
+}
 .mt-\[10px\] {
   margin-top: 10px;
 }
 .mt-\[13px\] {
   margin-top: 13px;
 }
+.mt-\[14px\] {
+  margin-top: 14px;
+}
 .mt-\[15px\] {
   margin-top: 15px;
 }
@@ -234,6 +249,9 @@
 .mb-\[5px\] {
   margin-bottom: 5px;
 }
+.mb-\[6px\] {
+  margin-bottom: 6px;
+}
 .mb-\[8px\] {
   margin-bottom: 8px;
 }
@@ -375,6 +393,9 @@
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[30px\] {
+  width: 30px;
+}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -443,6 +464,12 @@
 .max-w-\[165px\] {
   max-width: 165px;
 }
+.max-w-\[220px\] {
+  max-width: 220px;
+}
+.max-w-full {
+  max-width: 100%;
+}
 .min-w-\[75px\] {
   min-width: 75px;
 }
@@ -485,9 +512,15 @@
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
+.grid-cols-\[1\.3fr_2fr_1\.2fr\] {
+  grid-template-columns: 1.3fr 2fr 1.2fr;
+}
 .grid-cols-\[1\.5fr_1fr_auto\] {
   grid-template-columns: 1.5fr 1fr auto;
 }
@@ -518,6 +551,9 @@
 .items-start {
   align-items: flex-start;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -560,6 +596,12 @@
 .gap-\[14px\] {
   gap: 14px;
 }
+.gap-\[16px\] {
+  gap: 16px;
+}
+.gap-\[20px\] {
+  gap: 20px;
+}
 .gap-x-\[2\%\] {
   -moz-column-gap: 2%;
        column-gap: 2%;
@@ -568,18 +610,29 @@
   -moz-column-gap: 8px;
        column-gap: 8px;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
 .rounded-\[10px\] {
   border-radius: 10px;
 }
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
 .rounded-\[14px\] {
   border-radius: 14px;
 }
@@ -629,6 +682,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 8px;
 }
+.border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .border-r-8 {
   border-right-style: var(--tw-border-style);
   border-right-width: 8px;
@@ -657,6 +714,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 8px;
 }
+.border-l {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
 .border-l-8 {
   border-left-style: var(--tw-border-style);
   border-left-width: 8px;
@@ -673,6 +734,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\[\#363c48\] {
+  border-color: #363c48;
+}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -691,9 +755,15 @@
 .border-l-transparent {
   border-left-color: transparent;
 }
+.bg-\[\#0C1421\] {
+  background-color: #0C1421;
+}
 .bg-\[\#E6E6E6\] {
   background-color: #E6E6E6;
 }
+.bg-\[\#FF8F45\] {
+  background-color: #FF8F45;
+}
 .bg-\[\#FFF2F2\] {
   background-color: #FFF2F2;
 }
@@ -734,6 +804,9 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
+.p-\[14px\] {
+  padding: 14px;
+}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -767,9 +840,15 @@
 .px-\[15px\] {
   padding-inline: 15px;
 }
+.px-\[16px\] {
+  padding-inline: 16px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
+.py-\[2px\] {
+  padding-block: 2px;
+}
 .py-\[4px\] {
   padding-block: 4px;
 }
@@ -797,6 +876,9 @@
 .pt-\[10px\] {
   padding-top: 10px;
 }
+.pt-\[14px\] {
+  padding-top: 14px;
+}
 .pt-\[20px\] {
   padding-top: 20px;
 }
@@ -821,6 +903,9 @@
 .pr-\[22px\] {
   padding-right: 22px;
 }
+.pb-\[6px\] {
+  padding-bottom: 6px;
+}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -887,6 +972,12 @@
 .text-\[22px\] {
   font-size: 22px;
 }
+.text-\[26px\] {
+  font-size: 26px;
+}
+.text-\[28px\] {
+  font-size: 28px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -894,6 +985,10 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[14px\] {
+  --tw-leading: 14px;
+  line-height: 14px;
+}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -914,6 +1009,10 @@
   --tw-leading: 1;
   line-height: 1;
 }
+.font-\[9px\] {
+  --tw-font-weight: 9px;
+  font-weight: 9px;
+}
 .font-\[14px\] {
   --tw-font-weight: 14px;
   font-weight: 14px;
@@ -935,12 +1034,27 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[\#4a4a4a\] {
+  color: #4a4a4a;
+}
 .text-\[\#9f9f9f\] {
   color: #9f9f9f;
 }
+.text-\[\#666\] {
+  color: #666;
+}
+.text-\[\#171717\] {
+  color: #171717;
+}
+.text-\[\#272727\] {
+  color: #272727;
+}
 .text-\[\#464647\] {
   color: #464647;
 }
+.text-\[\#FF8F45\] {
+  color: #FF8F45;
+}
 .text-\[\#c0c0c0\] {
   color: #c0c0c0;
 }

package/dist/types.d.ts

@@ -108,6 +108,7 @@ export interface ServiceItemProps {
             frazaIcon?: string;
             specialDeparture?: string;
             fireIcon?: string;
+            cancelTicketIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -13,6 +13,7 @@ interface ExpandedDropdownProps {
     isSoldOut?: boolean;
     ladiesBookedSeats?: string;
     isDpEnabled?: boolean;
+    renderIcon?: any;
 }
-declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, }) {
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -22,7 +22,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                         " horas antes"),
                     " ",
                     "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", { style: { marginTop: "2px" } },
+                    " ",
+                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
                 React.createElement("span", null,
                     React.createElement("span", null,
                         React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -33,7 +35,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                     React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
             ladiesBookedSeats &&
                 String(ladiesBookedSeats).trim() !== "" &&
-                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
+                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px] items-center" },
                 React.createElement("span", { style: { marginTop: "2px" } },
                     " ",
                     React.createElement(LottiePlayer, { animationData: getAnimationIcon("femaaleAnimation"), width: "20px", height: "20px" })),
@@ -41,7 +43,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                     React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
                     " Esta empresa cuenta con asientos recomendados para mujeres."))),
             React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null, renderIcon("cancelTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
                     " Tu pasaje puede ser anulado de forma online",

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

@@ -15,6 +15,7 @@ interface ExpandedDropdownMobileProps {
     isDpEnabled?: boolean;
     femaleAnim?: any;
     flexibleAnim?: any;
+    renderIcon?: any;
 }
-declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, }) {
+function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
@@ -8,7 +8,10 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
         } },
         React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
             isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", { style: { marginTop: "2px" } },
+                    " ",
+                    React.createElement("div", null,
+                        React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" }))),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                     " Tu pasaje puede ser cambiado de manera online",
@@ -49,7 +52,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                                     " ",
                                     "Asientos designados Pet friendly, lo que significa que puede viajar con su mascota a bordo."))))))) : null,
             React.createElement("div", { className: "flex gap-[6px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null, renderIcon("cancelTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
                     " Tu pasaje puede ser anulado de forma online",

package/package.json

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

package/src/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/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -37,6 +37,9 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
@@ -71,6 +74,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -113,6 +119,7 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
@@ -415,6 +422,18 @@ function ServiceItemPB({
           siteType={siteType}
           isAllinBus={isAllinBus}
         />
+      ) : isNewUi ? (
+        <FeatureServiceUi
+          serviceItem={serviceItem}
+          showTopLabel={showTopLabel}
+          colors={colors}
+          isSoldOut={isSoldOut}
+          getAnimationIcon={getAnimationIcon}
+          cityOrigin={cityOrigin}
+          cityDestination={cityDestination}
+          renderIcon={renderIcon}
+          viewersConfig={viewersConfig}
+        />
       ) : (
         <div
           className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
@@ -613,6 +632,7 @@ function ServiceItemPB({
                   isSoldOut={isSoldOut}
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
+                  renderIcon={renderIcon}
                 />
               </div>
             </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -458,6 +458,7 @@ function ServiceItemMobile({
             isDpEnabled={serviceItem.is_dp_enabled}
             femaleAnim={serviceItem.icons.femaleAnim}
             flexibleAnim={serviceItem.icons.flexibleAnim}
+            renderIcon={renderIcon}
           />
         </div>
       </div>

package/src/components/ServiceItem/mobileTypes.ts

@@ -127,6 +127,7 @@ export interface MobileServiceItemProps {
       directoIcon?: string;
       whiteFireIcon?: string
       femaleAnim?:string
+       cancelTicketIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/components/ServiceItem/types.ts

@@ -132,6 +132,13 @@ export interface ServiceItemProps {
       whiteFireIcon?: string
       fireIcon?: string
 
+      whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -223,6 +230,7 @@ export interface ServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
+  isNewUi?: boolean
   showLoginModal?: any
   isLoggedIn?: any
   showLoginOption?: boolean

package/src/types.ts

@@ -115,6 +115,7 @@ export interface ServiceItemProps {
       frazaIcon?: string;
       specialDeparture?: string;
       fireIcon?: string;
+      cancelTicketIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -15,6 +15,7 @@ interface ExpandedDropdownProps {
   isSoldOut?: boolean;
   ladiesBookedSeats?: string;
   isDpEnabled?: boolean;
+  renderIcon?: any;
 }
 
 function ExpandedDropdown({
@@ -26,6 +27,7 @@ function ExpandedDropdown({
   isSoldOut,
   ladiesBookedSeats,
   isDpEnabled,
+  renderIcon,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -65,7 +67,14 @@ function ExpandedDropdown({
           </div>
         ) : (
           <div className="flex gap-[8px] text-[13.33px]">
-            <span style={{ marginTop: "2px" }}>•</span>
+            <span style={{ marginTop: "2px" }}>
+              {" "}
+              <LottiePlayer
+                animationData={getAnimationIcon("flexibleIcon")}
+                width="20px"
+                height="20px"
+              />
+            </span>
             <span>
               <span>
                 <span className="bold-text">Pasaje flexible:</span> Esta empresa
@@ -90,7 +99,7 @@ function ExpandedDropdown({
         {ladiesBookedSeats &&
           String(ladiesBookedSeats).trim() !== "" &&
           isDpEnabled === true && (
-            <div className="flex gap-[6px]">
+            <div className="flex gap-[6px] items-center">
               <span style={{ marginTop: "2px" }}>
                 {" "}
                 <LottiePlayer
@@ -107,7 +116,7 @@ function ExpandedDropdown({
           )}
 
         <div className="flex gap-[8px] text-[13.33px]">
-          <span style={{ marginTop: "2px" }}>•</span>
+          <span>{renderIcon("cancelTicketIcon", "14px")}</span>
           <span>
             <span className="bold-text">Políticas de anulación:</span> Tu pasaje
             puede ser anulado de forma online

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -0,0 +1,549 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import commonService from "../../utils/CommonService";
+
+const HARDCODED_OPERATORS = [
+  {
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+    name: "Turbus",
+    time: "7:00 am",
+    seatsAvailable: "3 disponibles",
+  },
+  {
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
+    name: "Pullmanbus",
+    time: "8:00 am",
+    seatsAvailable: "5 disponibles",
+  },
+  {
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+    name: "Expreso Santa C...",
+    time: "9:00 am",
+    seatsAvailable: "3 disponibles",
+  },
+];
+
+const HARDCODED_COUNTDOWN = "09:55";
+
+const HOW_IT_WORKS_STEPS = [
+  {
+    icon: "flexible",
+    name: "1. Salida flexible",
+    text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+  },
+  {
+    icon: "bus",
+    name: "2. Empresa asignada",
+    text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+  },
+  {
+    icon: "price",
+    name: "3. Precio garantizado",
+    text: "Al seleccionar este servicio aseguras el precio reducido.",
+  },
+  {
+    icon: "ticket",
+    name: "4. ¡Listo!",
+    text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+  },
+];
+
+const FeatureStepIcon = ({ icon }) => {
+  const iconClassName = "h-[30px] w-[30px] text-[#171717]";
+
+  switch (icon) {
+    case "flexible":
+      return (
+        <svg
+          className={iconClassName}
+          viewBox="0 0 40 40"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M31.5 13.4A13 13 0 0 0 8 12.3"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+          <path
+            d="m7.4 7.7.2 5.2 5.1-1.2M8.5 26.6A13 13 0 0 0 32 27.7"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="m32.6 32.3-.2-5.2-5.1 1.2"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    case "bus":
+      return (
+        <svg
+          className={iconClassName}
+          viewBox="0 0 40 40"
+          fill="none"
+          aria-hidden="true"
+        >
+          <rect
+            x="8"
+            y="4.5"
+            width="24"
+            height="27"
+            rx="2.5"
+            stroke="currentColor"
+            strokeWidth="2.2"
+          />
+          <path
+            d="M8 18.5h24M12 9h16M12 26h4m8 0h4M11 31.5v3h5v-3m8 0v3h5v-3M5.5 10v7m29-7v7"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+        </svg>
+      );
+    case "price":
+      return (
+        <svg
+          className={iconClassName}
+          viewBox="0 0 40 40"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle
+            cx="20"
+            cy="20"
+            r="14"
+            stroke="currentColor"
+            strokeWidth="2.2"
+          />
+          <path
+            d="M23.7 15.4c-1-.7-2.2-1-3.6-1-2.2 0-3.8 1.1-3.8 2.8 0 4.2 7.4 1.8 7.4 5.8 0 1.8-1.6 2.8-4 2.8-1.5 0-2.9-.4-4-1.2M20 11.7v2.5m0 11.8v2.4"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          className={iconClassName}
+          viewBox="0 0 40 40"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M7 11h26v6a3.5 3.5 0 0 0 0 7v6H7v-6a3.5 3.5 0 0 0 0-7v-6Z"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M22 12.5v3m0 3v3m0 3v4"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+          />
+        </svg>
+      );
+  }
+};
+
+const AssuranceIcon = ({ type }) => {
+  const iconClassName = "h-[18px] w-[18px] shrink-0 text-white";
+
+  if (type === "pending") {
+    return (
+      <svg
+        className={iconClassName}
+        viewBox="0 0 20 20"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M4.2 8.2a6.2 6.2 0 1 1 .5 5.1"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+        />
+        <path
+          d="M4.2 4.8v3.4h3.4"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      className={iconClassName}
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M10 2.2 16.3 4v5c0 4-2.4 6.8-6.3 8.7C6.1 15.8 3.7 13 3.7 9V4L10 2.2Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m6.9 9.7 2.1 2.1 4.3-4.4"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+const FeatureServiceUi = ({
+  serviceItem,
+  showTopLabel,
+  colors,
+  isSoldOut,
+  getAnimationIcon,
+  cityOrigin,
+  cityDestination,
+  renderIcon,
+  viewersConfig,
+}) => {
+  const operators =
+    serviceItem?.operators?.length > 0
+      ? serviceItem.operators
+      : HARDCODED_OPERATORS;
+
+  return (
+    <div
+      // ${
+      //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+      // }
+      className={`relative  mb-[10px]
+       ${
+         serviceItem?.is_direct_trip ||
+         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+         showTopLabel
+           ? "mt-[24px]"
+           : "mt-[20px]"
+       }`}
+    >
+      <div
+        className=""
+        style={{
+          border: "1px solid #c0c0c0",
+          padding: "14px",
+          borderRadius: "14px",
+        }}
+      >
+        <div className="flex justify-between items-center px-[14px] pb-[10px] text-[13.33px]">
+          <div className="flex items-center gap-[10px]">
+            <span>Salida flexible</span>
+            <div
+              className="bold-text font-[9px]"
+              style={{
+                backgroundColor: "#FF5C60",
+                padding: "1px 8px",
+                borderRadius: "4px",
+                color: "#fff",
+              }}
+            >
+              <span>AHORRAS 60%</span>
+            </div>
+          </div>
+          <div>
+            <span>
+              {renderIcon("fireIcon", "14px")}{" "}
+              <span className="bold-text">Remate</span> términa en{" "}
+              <span
+                className="bold-text text-end"
+                ref={(node) => commonService.startCountdown(node, 599)}
+                style={{
+                  fontVariantNumeric: "tabular-nums",
+                  display: "inline-block",
+                  color: "#FF5C60",
+                }}
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          id={`service-card-${serviceItem.id}`}
+          className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
+        >
+          <div className="grid grid-cols-[1.3fr_2fr_1.2fr] gap-[16px] items-stretch">
+            {/* LEFT: origin, destination, flexible, time, confirmed seat */}
+            <div className="flex flex-col justify-between gap-[20px] py-[2px]  ">
+              <div className="flex flex-col gap-[8px]">
+                <div className="flex items-center gap-[8px]">
+                  <img
+                    src={serviceItem.icons?.whiteOrigin}
+                    alt="origin"
+                    className={`w-[14px] h-[14px] shrink-0 ${
+                      isSoldOut ? "grayscale" : ""
+                    }`}
+                  />
+                  <span className="text-[13px] bold-text">
+                    {cityOrigin?.label.split(",")[0]}
+                  </span>
+                </div>
+                <div className="flex items-center gap-[8px]">
+                  <img
+                    src={serviceItem.icons?.whiteDestination}
+                    alt="destination"
+                    className={`w-[16px] h-[16px] shrink-0 ${
+                      isSoldOut ? "grayscale" : ""
+                    }`}
+                    style={{ opacity: isSoldOut ? 0.5 : 1 }}
+                  />
+                  <span className="text-[13px] bold-text">
+                    {cityDestination?.label.split(",")[0]}
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-[8px]">
+                {/* Salida flexible badge — uses flexibleIcon */}
+                {/* <div
+                  className="flex items-center gap-[6px] rounded-[8px] px-[8px] py-[4px] w-fit mb-[6px]"
+                  style={{
+                    border: "1px solid #363c48",
+                    backgroundColor: "#1a202e",
+                  }}
+                >
+                  <img
+                    src={serviceItem.icons?.busIcon}
+                    alt="bus"
+                    style={{ width: "20px", height: "20px" }}
+                  />
+                  <span className="text-[12px] whitespace-nowrap">
+                    Salida flexible
+                  </span>
+                </div> */}
+                <div className="text-[12px] bold-text whitespace-nowrap">
+                  Entre 07:00 AM y 10:00 AM
+                </div>
+                <div className="text-[11px] bold-text">Viernes 23 de mayo</div>
+              </div>
+
+              <div className="flex flex-col items-start gap-[10px] text-[12px] ">
+                <div className="flex items-center gap-[8px]">
+                  <AssuranceIcon type="pending" />
+
+                  <span
+                    className="text-[10px]"
+                    style={{
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    Empresa y hora a confirmar luego del pago.
+                  </span>
+                </div>
+                <div className="flex items-center gap-[8px]">
+                  <AssuranceIcon type="secured" />
+
+                  <span
+                    className="text-[10px]"
+                    style={{
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    Tu compra está 100% asegurada.
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* MIDDLE: competing operators + viewers */}
+            <div className="px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
+              <div className="text-center">
+                <div className="bold-text text-[14px]">
+                  3 operadores compitiendo por tu compra
+                </div>
+                {/* <div className="text-[12px]  mt-[8px]">
+                  Empresa a confirmar después de tu pago
+                </div> */}
+              </div>
+
+              <div className="flex items-stretch justify-center gap-[8px] w-full mb-[16px]">
+                {operators.map((op, idx) => (
+                  <div
+                    key={idx}
+                    className="flex flex-col items-center justify-center gap-[8px] rounded-[8px]"
+                    style={{
+                      width: "140px",
+                      // height: "80px",
+                      border: "1px solid #363c48",
+                      backgroundColor: "#1a202e",
+                      padding: "14px",
+                    }}
+                  >
+                    <img
+                      src={serviceItem.operator_details[0]}
+                      alt={op.name}
+                      className={`h-[24px] w-auto object-contain ${
+                        isSoldOut ? "grayscale" : ""
+                      }`}
+                    />
+                    <span className="text-[11px] truncate max-w-full text-center">
+                      {serviceItem.operator_details[2]}
+                    </span>
+                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[16px] py-[4px] rounded-[4px] bold-text">
+                      <span>{op?.time}</span>
+                    </div>
+                    <span className="text-[10px] mt-[6px]">
+                      {op?.seatsAvailable}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div
+                className="flex items-center justify-center gap-[6px] text-[12px]"
+                style={{
+                  border: "1px solid #363c48",
+                  backgroundColor: "#1a202e",
+                  padding: "8px 14px",
+                  borderRadius: "24px",
+                  width: "430px",
+                }}
+              >
+                <img
+                  src={serviceItem.icons?.userIcon}
+                  alt="eye"
+                  style={{ width: "16px", height: "16px" }}
+                />
+                <span>
+                  <span className="bold-text text-white">
+                    {" "}
+                    <span
+                      className="bold-text"
+                      ref={(node) =>
+                        commonService.startViewerCount(node, viewersConfig)
+                      }
+                      style={{
+                        fontVariantNumeric: "tabular-nums",
+                        color: "#FF5C60",
+                      }}
+                    />{" "}
+                    <span
+                      style={{
+                        color: "#FF5C60",
+                      }}
+                    >
+                      personas
+                    </span>
+                  </span>{" "}
+                  viendo este viaje |{" "}
+                  <span
+                    className="bold-text"
+                    ref={(node) =>
+                      commonService.startComprandoCount(node, 4, 16)
+                    }
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  />{" "}
+                  han comprado
+                </span>
+              </div>
+            </div>
+
+            {/* RIGHT: price + button */}
+            <div className="flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]">
+              <div
+                className="flex flex-col gap-[6px] "
+                style={{
+                  alignItems: "center",
+                }}
+              >
+                <span className="text-[#FF8F45] bold-text text-[26px] leading-tight">
+                  60% OFF
+                </span>
+                <span className="text-[#666] text-[14px] line-through">
+                  $10.000
+                </span>
+                <span className="text-white bold-text text-[28px] leading-none">
+                  $4.000
+                </span>
+              </div>
+
+              <button
+                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[12px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
+                style={{
+                  backgroundColor: "#FF5C60",
+                }}
+              >
+                <LottiePlayer
+                  // animationData={serviceItem.icons.flexibleAnim}
+                  animationData={getAnimationIcon("thunderAnimation")}
+                  width="18px"
+                  height="18px"
+                />
+                <span className="whitespace-nowrap">¡Lo quiero!</span>
+              </button>
+            </div>
+
+            <div className="absolute bottom-[11px] right-[18px]">
+              <img
+                src={serviceItem.icons?.downArrow}
+                alt="down arrow"
+                style={{
+                  width: "14px",
+                  height: "8px",
+                  filter: "brightness(0) invert(1)",
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="px-[16px] pt-[14px] pb-[6px] text-[13.33px]">
+          <span className="bold-text">¿Cómo funciona?</span>
+
+          <div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
+            {HOW_IT_WORKS_STEPS.map((step) => (
+              <div
+                key={step.name}
+                className="flex flex-col items-center text-center text-[#272727]"
+              >
+                <FeatureStepIcon icon={step.icon} />
+                <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
+                  {step.name}
+                </span>
+                <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
+                  {step.text}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
+      {/* {showTopLabel && (
+        <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
+          <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
+            <LottiePlayer
+              animationData={getAnimationIcon("bombAnimation")}
+              width="14px"
+              height="14px"
+            />
+            <span>
+              <strong>Remate</strong> | Termina en{" "}
+              <strong>{HARDCODED_COUNTDOWN}</strong> min
+            </span>
+          </div>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default FeatureServiceUi;

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -17,6 +17,7 @@ interface ExpandedDropdownMobileProps {
   isDpEnabled?: boolean;
   femaleAnim?: any;
   flexibleAnim?: any;
+  renderIcon?: any;
 }
 
 function ExpandedDropdownMobile({
@@ -30,6 +31,7 @@ function ExpandedDropdownMobile({
   isDpEnabled,
   femaleAnim,
   flexibleAnim,
+  renderIcon,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -46,7 +48,16 @@ function ExpandedDropdownMobile({
       >
         {isPeru ? null : isChangeTicket ? (
           <div className="flex gap-[6px]">
-            <span style={{ marginTop: "2px" }}>•</span>
+            <span style={{ marginTop: "2px" }}>
+              {" "}
+              <div>
+                <LottiePlayer
+                  animationData={flexibleAnim}
+                  width="16px"
+                  height="16px"
+                />
+              </div>
+            </span>
             <span>
               <span className="bold-text">Pasaje flexible:</span> Tu pasaje
               puede ser cambiado de manera online{" "}
@@ -125,7 +136,7 @@ function ExpandedDropdownMobile({
           </div>
         ) : null}
         <div className="flex gap-[6px]">
-          <span style={{ marginTop: "2px" }}>•</span>
+          <span>{renderIcon("cancelTicketIcon", "14px")}</span>
           <span>
             <span className="bold-text">Políticas de anulación:</span> Tu pasaje
             puede ser anulado de forma online