kupos-ui-components-lib 9.6.5 → 9.6.7

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]"
@@ -262,7 +267,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         ? "14px"
                         : "",
                 } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
                     React.createElement("div", { className: "flex flex-col gap-[5px]" },
                         React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),

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;
 }
@@ -479,15 +506,21 @@
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
-.\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
-  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
+.\[grid-template-columns\:20\%_30\%_2\.5\%_24\%_15\.5\%\] {
+  grid-template-columns: 20% 30% 2.5% 24% 15.5%;
 }
 .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;
 }
@@ -1061,6 +1175,11 @@
     }
   }
 }
+.max-\[399px\]\:left-\[53\%\] {
+  @media (width < 399px) {
+    left: 53%;
+  }
+}
 .min-\[420\]\:text-\[12px\] {
   @media (width >= 420) {
     font-size: 12px;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, }: {
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, }: {
     serviceItem: any;
     showTopLabel: any;
     colors: any;
@@ -8,5 +8,6 @@ declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut,
     cityOrigin: any;
     cityDestination: any;
     renderIcon: any;
+    viewersConfig: any;
 }) => React.JSX.Element;
 export default FeatureServiceUi;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -1,22 +1,84 @@
 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 FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+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 (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
+                React.createElement("path", { d: "M31.5 13.4A13 13 0 0 0 8 12.3", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }),
+                React.createElement("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" }),
+                React.createElement("path", { d: "m32.6 32.3-.2-5.2-5.1 1.2", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case "bus":
+            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
+                React.createElement("rect", { x: "8", y: "4.5", width: "24", height: "27", rx: "2.5", stroke: "currentColor", strokeWidth: "2.2" }),
+                React.createElement("path", { d: "M8 18.5h24M12 9h16M12 26h4m8 0h4M11 31.5v3h5v-3m8 0v3h5v-3M5.5 10v7m29-7v7", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" })));
+        case "price":
+            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
+                React.createElement("circle", { cx: "20", cy: "20", r: "14", stroke: "currentColor", strokeWidth: "2.2" }),
+                React.createElement("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" })));
+        default:
+            return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 40 40", fill: "none", "aria-hidden": "true" },
+                React.createElement("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" }),
+                React.createElement("path", { d: "M22 12.5v3m0 3v3m0 3v4", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" })));
+    }
+};
+const AssuranceIcon = ({ type }) => {
+    const iconClassName = "h-[18px] w-[18px] shrink-0 text-white";
+    if (type === "pending") {
+        return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
+            React.createElement("path", { d: "M4.2 8.2a6.2 6.2 0 1 1 .5 5.1", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+            React.createElement("path", { d: "M4.2 4.8v3.4h3.4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })));
+    }
+    return (React.createElement("svg", { className: iconClassName, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" },
+        React.createElement("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" }),
+        React.createElement("path", { d: "m6.9 9.7 2.1 2.1 4.3-4.4", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, }) => {
+    var _a, _b, _c, _d, _e;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? serviceItem.operators
         : HARDCODED_OPERATORS;
@@ -25,10 +87,36 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}` },
-        React.createElement("div", null,
+        React.createElement("div", { className: "", style: {
+                border: "1px solid #c0c0c0",
+                padding: "14px",
+                borderRadius: "14px",
+            } },
+            React.createElement("div", { className: "flex justify-between items-center px-[14px] pb-[10px] text-[13.33px]" },
+                React.createElement("div", { className: "flex items-center gap-[10px]" },
+                    React.createElement("span", null, "Salida flexible"),
+                    React.createElement("div", { className: "bold-text font-[9px]", style: {
+                            backgroundColor: "#FF5C60",
+                            padding: "1px 8px",
+                            borderRadius: "4px",
+                            color: "#fff",
+                        } },
+                        React.createElement("span", null, "AHORRAS 60%"))),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        renderIcon("fireIcon", "14px"),
+                        " ",
+                        React.createElement("span", { className: "bold-text" }, "Remate"),
+                        " t\u00E9rmina en",
+                        " ",
+                        React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
+                                fontVariantNumeric: "tabular-nums",
+                                display: "inline-block",
+                                color: "#FF5C60",
+                            } })))),
             React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]" },
                 React.createElement("div", { className: "grid grid-cols-[1.3fr_2fr_1.2fr] gap-[16px] items-stretch" },
-                    React.createElement("div", { className: "flex flex-col justify-between gap-[20px] py-[2px]" },
+                    React.createElement("div", { className: "flex flex-col justify-between gap-[20px] py-[2px]  " },
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
                                 React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
@@ -37,40 +125,64 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[16px] h-[16px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
-                            React.createElement("div", { className: "flex items-center gap-[6px] rounded-[8px] px-[8px] py-[4px] w-fit mb-[6px]", style: {
-                                    border: "1px solid #363c48",
-                                    backgroundColor: "#1a202e",
-                                } },
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.busIcon, alt: "bus", style: { width: "20px", height: "20px" } }),
-                                React.createElement("span", { className: "text-[12px] whitespace-nowrap" }, "Salida flexible")),
-                            React.createElement("div", { className: "text-[13px] bold-text whitespace-nowrap" }, "07:00 AM \u2013 10:00 AM"),
-                            React.createElement("div", { className: "text-[12px] bold-text" }, "Vie, 04/11")),
-                        React.createElement("div", { className: "flex items-start gap-[6px] text-[12px] " },
-                            React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.sheildIcon, alt: "shield", style: { width: "14px", height: "14px" } }),
-                            React.createElement("span", null, "Tu asiento confirmado al instante."))),
-                    React.createElement("div", { className: "px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px]" },
+                            React.createElement("div", { className: "text-[12px] bold-text whitespace-nowrap" }, "Entre 07:00 AM y 10:00 AM"),
+                            React.createElement("div", { className: "text-[11px] bold-text" }, "Viernes 23 de mayo")),
+                        React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
+                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                                React.createElement(AssuranceIcon, { type: "pending" }),
+                                React.createElement("span", { className: "text-[10px]", style: {
+                                        lineHeight: 1.3,
+                                    } }, "Empresa y hora a confirmar luego del pago.")),
+                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                                React.createElement(AssuranceIcon, { type: "secured" }),
+                                React.createElement("span", { className: "text-[10px]", style: {
+                                        lineHeight: 1.3,
+                                    } }, "Tu compra est\u00E1 100% asegurada.")))),
+                    React.createElement("div", { className: "px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
                         React.createElement("div", { className: "text-center" },
-                            React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra"),
-                            React.createElement("div", { className: "text-[12px]  mt-[8px]" }, "Empresa a confirmar despu\u00E9s de tu pago")),
+                            React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra")),
                         React.createElement("div", { className: "flex items-stretch justify-center gap-[8px] w-full mb-[16px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 width: "140px",
-                                height: "80px",
+                                // height: "80px",
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
+                                padding: "14px",
                             } },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] w-auto object-contain ${isSoldOut ? "grayscale" : ""}` }),
-                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]))))),
-                        React.createElement("div", { className: "flex items-center gap-[6px] text-[12px]" },
-                            React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.userIcon, alt: "eye", style: { width: "16px", height: "16px" } }),
+                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
+                            React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[16px] py-[4px] rounded-[4px] bold-text" },
+                                React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
+                            React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                        React.createElement("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",
+                            } },
+                            React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.userIcon, alt: "eye", style: { width: "16px", height: "16px" } }),
                             React.createElement("span", null,
-                                React.createElement("span", { className: "bold-text text-white" }, "50 personas"),
+                                React.createElement("span", { className: "bold-text text-white" },
+                                    " ",
+                                    React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
+                                            fontVariantNumeric: "tabular-nums",
+                                            color: "#FF5C60",
+                                        } }),
+                                    " ",
+                                    React.createElement("span", { style: {
+                                            color: "#FF5C60",
+                                        } }, "personas")),
+                                " ",
+                                "viendo este viaje |",
+                                " ",
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
-                                "est\u00E1n viendo este viaje"))),
+                                "han comprado"))),
                     React.createElement("div", { className: "flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]" },
                         React.createElement("div", { className: "flex flex-col gap-[6px] ", style: {
                                 alignItems: "center",
                             } },
-                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[22px] leading-tight" }, "60% OFF"),
+                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight" }, "60% OFF"),
                             React.createElement("span", { className: "text-[#666] text-[14px] line-through" }, "$10.000"),
                             React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, "$4.000")),
                         React.createElement("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: {
@@ -83,19 +195,16 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
                     React.createElement("div", { className: "absolute bottom-[11px] right-[18px]" },
-                        React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
+                        React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",
-                            } }))))),
-        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: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "14px", height: "14px" }),
-                React.createElement("span", null,
-                    React.createElement("strong", null, "Remate"),
-                    " | Termina en",
-                    " ",
-                    React.createElement("strong", null, HARDCODED_COUNTDOWN),
-                    " min")))));
+                            } })))),
+            React.createElement("div", { className: "px-[16px] pt-[14px] pb-[6px] text-[13.33px]" },
+                React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
+                React.createElement("div", { className: "mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] " }, HOW_IT_WORKS_STEPS.map((step) => (React.createElement("div", { key: step.name, className: "flex flex-col items-center text-center text-[#272727]" },
+                    React.createElement(FeatureStepIcon, { icon: step.icon }),
+                    React.createElement("span", { className: "bold-text mt-[10px] text-[12px] leading-[14px]" }, step.name),
+                    React.createElement("span", { className: "mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]" }, step.text)))))))));
 };
 export default FeatureServiceUi;