kupos-ui-components-lib 9.7.3 → 9.7.5

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,4 @@
 import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
 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;
@@ -9,9 +8,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
         } },
         React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 } },
             isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
-                React.createElement("span", { style: { marginTop: "2px" } },
-                    " ",
-                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
+                React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                     " Tu pasaje puede ser cambiado de manera online",
@@ -22,28 +19,24 @@ 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" } },
-                    " ",
-                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
+                React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
                 React.createElement("span", null,
                     React.createElement("span", null,
                         React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                         " Esta empresa no permite cambios de pasajes.")))),
             hasPetInfo && (React.createElement("div", { className: "flex items-center gap-[10px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
+                React.createElement("span", null, renderIcon("petFriendlyIcon", "16px")),
                 React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
                     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] items-center" },
-                React.createElement("span", { style: { marginTop: "2px" } },
-                    " ",
-                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("femaaleAnimation"), width: "20px", height: "20px" })),
-                React.createElement("span", null,
+                React.createElement("span", null, renderIcon("womenSeatIcon", "16px")),
+                React.createElement("span", { className: "ml-[2px]" },
                     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", null, renderIcon("cancelTicketIcon", "14px")),
+                React.createElement("span", null, renderIcon("cancelTicketIcon", "16px")),
                 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/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -1,6 +1,12 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
+const TIME_SLOTS = [
+    "Entre 07:00 AM y 10:00 AM",
+    "Entre 11:00 AM y 14:00 AM",
+    "Entre 15:00 PM y 18:00 PM",
+    "Entre 19:00 PM y 22:00 PM",
+];
 const HARDCODED_OPERATORS = [
     {
         logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
@@ -21,29 +27,6 @@ const HARDCODED_OPERATORS = [
         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 FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
     var _a, _b, _c, _d;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
@@ -61,12 +44,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
         {
             icon: "bus",
             name: "2. Empresa asignada",
-            text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+            text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
         },
         {
             icon: "price",
             name: "3. Precio garantizado",
-            text: "Al seleccionar este servicio aseguras el precio reducido.",
+            text: "Mejor precio garantizado. Sin cambios ni cancelación.",
         },
         {
             icon: "ticket",
@@ -96,26 +79,15 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}` },
-        React.createElement("div", { className: "", style: {
+        React.createElement("div", { 
+            // className="shadow-service"
+            style: {
                 border: "1px solid #c0c0c0",
                 padding: "12px",
                 borderRadius: "14px",
             } },
             React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
-                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",
-                                minWidth: "40px",
-                            } }))),
-                React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement("div", { className: "flex items-center gap-[10px] mt-[10px]" },
                     React.createElement("span", null, "Salida flexible"),
                     React.createElement("div", { className: "bold-text font-[9px]", style: {
                             backgroundColor: "#FF5C60",
@@ -134,7 +106,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                 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" : ""}` }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 :
                                     cityOrigin.label.split(",")[0],
-                                    React.createElement("span", { className: "mx-[6px]" }, "\u2192"), cityDestination === null || cityDestination === void 0 ? void 0 :
+                                    React.createElement("span", { className: "mx-[10px]" }, "\u2192"), cityDestination === null || cityDestination === void 0 ? void 0 :
                                     cityDestination.label.split(",")[0])),
                             React.createElement("div", { style: {
                                     width: "1px",
@@ -148,10 +120,71 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                 } }),
                             React.createElement("div", { className: "flex items-center gap-[6px]" },
                                 React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
-                                React.createElement("span", { className: "text-[13px]" },
-                                    "23 de mayo,",
-                                    " ",
-                                    React.createElement("span", { className: "bold-text" }, "Entre 07:00 AM y 10:00 AM"))))),
+                                React.createElement("details", { className: "kupos-time-dd relative" },
+                                    React.createElement("summary", { className: "flex items-center gap-[6px] bold-text text-[13px] text-white", style: { cursor: "pointer", userSelect: "none" } },
+                                        React.createElement("span", { "data-time-label": "true" }, TIME_SLOTS[0]),
+                                        React.createElement("svg", { className: "kupos-time-chevron", width: "10", height: "6", viewBox: "0 0 10 6", fill: "none" },
+                                            React.createElement("path", { d: "M1 1l4 4 4-4", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
+                                    React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
+                                            zIndex: 20,
+                                            backgroundColor: "#fff",
+                                            borderRadius: "14px",
+                                            minWidth: "248px",
+                                            boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
+                                            overflow: "hidden",
+                                            padding: "6px 0",
+                                        } }, TIME_SLOTS.map((slot, index) => {
+                                        const isFirst = index === 0;
+                                        return (React.createElement("button", { key: slot, type: "button", "data-time-option": "true", "data-time-slot": slot, onClick: (e) => {
+                                                const details = e.currentTarget.closest("details");
+                                                if (details) {
+                                                    const label = details.querySelector("[data-time-label]");
+                                                    if (label)
+                                                        label.textContent = slot;
+                                                    details
+                                                        .querySelectorAll("[data-time-option]")
+                                                        .forEach((btn) => {
+                                                        const el = btn;
+                                                        const active = el.dataset.timeSlot === slot;
+                                                        el.style.background = active
+                                                            ? "#4169E1"
+                                                            : "transparent";
+                                                        el.style.color = active
+                                                            ? "#fff"
+                                                            : "#1a1a1a";
+                                                        const ck = el.querySelector("[data-checkmark]");
+                                                        if (ck)
+                                                            ck.style.display = active
+                                                                ? "flex"
+                                                                : "none";
+                                                        const lbl = el.querySelector("[data-slot-label]");
+                                                        if (lbl)
+                                                            lbl.style.fontWeight = active
+                                                                ? "bold"
+                                                                : "normal";
+                                                    });
+                                                    details.open = false;
+                                                }
+                                            }, className: "flex w-full items-center gap-[10px] px-[16px] py-[13px] text-[13px]", style: {
+                                                background: isFirst ? "#4169E1" : "transparent",
+                                                border: "none",
+                                                cursor: "pointer",
+                                                textAlign: "left",
+                                                color: isFirst ? "#fff" : "#1a1a1a",
+                                            } },
+                                            React.createElement("div", { "data-checkmark": "true", style: {
+                                                    width: "16px",
+                                                    flexShrink: 0,
+                                                    display: isFirst ? "flex" : "none",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                } },
+                                                React.createElement("svg", { width: "14", height: "11", viewBox: "0 0 14 11", fill: "none" },
+                                                    React.createElement("path", { d: "M1 5.5l3.5 4L13 1", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))),
+                                            React.createElement("span", { "data-slot-label": "true", style: {
+                                                    fontWeight: isFirst ? "bold" : "normal",
+                                                } }, slot)));
+                                    })))))),
                     React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
                     React.createElement("div", null,
                         React.createElement("span", { className: "text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]" }, "3 operadores compitiendo por tu compra"),
@@ -200,7 +233,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                 React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
                                         ? "cursor-pointer bg-[#2d374d]"
                                         : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
-                                React.createElement("span", { className: "bold-text text-[20px] text-white" }, ticketQuantity),
+                                React.createElement("span", { className: "bold-text text-[20px] text-[white]" }, ticketQuantity),
                                 React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]" }, "+"))),
                         React.createElement("div", { className: "mt-[10px] flex justify-between items-center rounded-[14px]", style: {
                                 // height: "80px",
@@ -222,11 +255,10 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                             transformOrigin: "center",
                                         } })),
                                 React.createElement("span", { className: "text-[white] bold-text text-[28px] leading-none mt-[4px]" }, `$${(4000 * ticketQuantity).toLocaleString()}`)),
-                            React.createElement("div", null,
-                                React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight", style: {
-                                        animation: "pulse-zoom 2s ease-in-out infinite",
-                                        whiteSpace: "nowrap",
-                                    } }, "60% OFF"))),
+                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight", style: {
+                                    animation: "pulse-zoom 2s ease-in-out infinite",
+                                    whiteSpace: "nowrap",
+                                } }, "60% OFF")),
                         React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px]  justify-center border-none cursor-pointer", style: {
                                 backgroundColor: "#FF5C60",
                                 animation: "pulse-zoom 2s ease-in-out infinite",
@@ -265,6 +297,20 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                     //     {step.text}
                     //   </span>
                     // </div>
-                    )))))))));
+                    ))))))),
+        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("span", { className: "flex items-center" },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }),
+                    React.createElement("span", { className: "bold-text ml-[5px] text-[white]" }, "Remate\u00A0"),
+                    " ",
+                    React.createElement("span", { className: "text-[white]" }, "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: "#fff",
+                            minWidth: "40px",
+                        } }))))));
 };
 export default FeatureServiceUiMobile;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -22,7 +22,7 @@ const HARDCODED_OPERATORS = [
     },
 ];
 const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
-    var _a, _b, _c, _d;
+    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;
@@ -38,12 +38,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
         {
             icon: "bus",
             name: "2. Empresa asignada",
-            text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+            text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
         },
         {
             icon: "price",
             name: "3. Precio garantizado",
-            text: "Al seleccionar este servicio aseguras el precio reducido.",
+            text: "Mejor precio garantizado. Sin cambios ni cancelación.",
         },
         {
             icon: "ticket",
@@ -73,8 +73,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}` },
-        React.createElement("div", { className: "", style: {
-                border: "1px solid #c0c0c0",
+        React.createElement("div", { className: "shadow-service", style: {
+                // border: "1px solid #c0c0c0",
                 padding: "14px",
                 borderRadius: "14px",
             } },
@@ -90,28 +90,26 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             whiteSpace: "nowrap",
                         } },
                         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",
-                                minWidth: "40px",
-                            } })))),
+                React.createElement("span", null,
+                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "w-[14px] h-[14px] mb-[4px] mr-[4px]" }),
+                    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",
+                            minWidth: "40px",
+                        } }))),
             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-[23%_50%_27%] items-stretch" },
                     React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
                         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" : ""}` }),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] 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: "text-[12px] bold-text whitespace-nowrap" }, "Entre 07:00 AM y 10:00 AM"),
@@ -119,12 +117,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                         React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
                             React.createElement("div", { className: "flex items-justify gap-[8px]" },
                                 renderIcon("sheildIcon", "16px"),
-                                React.createElement("span", { className: "text-[10px]", style: {
+                                React.createElement("span", { className: "text-[11px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Empresa y hora a confirmar luego del pago.")),
                             React.createElement("div", { className: "flex items-justify gap-[8px]" },
                                 renderIcon("confirmarIcon", "16px"),
-                                React.createElement("span", { className: "text-[10px]", style: {
+                                React.createElement("span", { className: "text-[11px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
                     React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
@@ -152,7 +150,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             , { 
                                 // animationData={serviceItem.icons.flexibleAnim}
                                 animationData: getAnimationIcon("usersAnimation"), width: "18px", height: "18px" }),
-                            React.createElement("span", null,
+                            React.createElement("span", { className: "text-[13px]" },
                                 React.createElement("span", { className: "bold-text text-white" },
                                     " ",
                                     React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
@@ -212,7 +210,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
                     React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
-                        React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.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)",

package/dist/ui/SeatSection/SeatSection.js

@@ -184,7 +184,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
             React.createElement("div", null,
                 React.createElement("div", { className: "relative" },
-                    React.createElement("div", { className: "absolute -left-[20px] top-1/3 transform -translate-y-1/2" }, renderIcon("fireIcon", "16px")),
+                    React.createElement("div", { className: "absolute -left-[20px]  transform -translate-y-1/2 top-[16px]" }, renderIcon("fireIcon", "16px")),
                     React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
                             animation: "pulse-zoom 2s ease-in-out infinite",
                             whiteSpace: "nowrap",

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,5 +1,4 @@
 import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
 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",
@@ -8,10 +7,7 @@ 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" } },
-                    " ",
-                    React.createElement("div", null,
-                        React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" }))),
+                React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                     " Tu pasaje puede ser cambiado de manera online",
@@ -22,10 +18,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                         " horas antes"),
                     " ",
                     "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
-                React.createElement("span", { style: { marginTop: "2px" } },
-                    " ",
-                    React.createElement("div", null,
-                        React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" }))),
+                React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", null,
                         React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -33,10 +26,9 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
             ladiesBookedSeats &&
                 String(ladiesBookedSeats).trim() !== "" &&
                 isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
-                React.createElement("span", { style: { marginTop: "2px" } },
+                React.createElement("span", { className: "mt-[3px]" },
                     " ",
-                    React.createElement("div", null,
-                        React.createElement(LottiePlayer, { animationData: femaleAnim, width: "16px", height: "16px" }))),
+                    renderIcon("womenSeatIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
                     " Esta empresa cuenta con asientos recomendados para mujeres."))),
@@ -44,15 +36,14 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                 React.createElement("div", { className: `relative group cursor-default ` },
                     React.createElement("div", { className: "flex items-center" },
                         React.createElement("div", { className: `flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
-                            React.createElement("div", null,
-                                React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })),
+                            React.createElement("span", { className: "mt-[3px]" }, renderIcon("petFriendlyIcon", "14px")),
                             React.createElement("div", null,
                                 React.createElement("span", null, "Servicio Pet friendly"),
                                 React.createElement("span", null,
                                     " ",
                                     "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", null, renderIcon("cancelTicketIcon", "14px")),
+                React.createElement("span", { className: "mt-[3px]" }, 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/utils/CommonService.js

@@ -296,14 +296,10 @@ const commonService = {
     startViewerCount: (node, viewersConfig) => {
         if (!node || !viewersConfig)
             return;
-        const { min, max, interval = 5000 } = viewersConfig;
-        const configKey = `${min}-${max}-${interval}`;
-        if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
-            return;
-        }
         const prevId = node.dataset.viewerId;
         if (prevId)
             clearInterval(Number(prevId));
+        const { min, max, interval = 5000 } = viewersConfig;
         const clamp = (v) => Math.min(max, Math.max(min, v));
         const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
         node.textContent = String(initialValue);
@@ -314,7 +310,6 @@ const commonService = {
             node.textContent = String(clamp(Math.round(next)));
         }, interval);
         node.dataset.viewerId = String(id);
-        node.dataset.viewerConfig = configKey;
     },
     startCountdown: (node, countdownSeconds = 599) => {
         if (!node)
@@ -344,10 +339,6 @@ const commonService = {
     startComprandoCount: (node, min = 4, max = 16) => {
         if (!node)
             return;
-        const configKey = `${min}-${max}`;
-        if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
-            return;
-        }
         const prevId = node.dataset.comprandoId;
         if (prevId)
             clearInterval(Number(prevId));
@@ -364,7 +355,6 @@ const commonService = {
             node.textContent = String(next);
         }, 5000); // Update every 5 seconds
         node.dataset.comprandoId = String(id);
-        node.dataset.comprandoConfig = configKey;
     },
 };
 export default commonService;

package/package.json

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

package/src/KuposUIComponent.tsx

@@ -32,9 +32,6 @@ interface KuposUIComponentProps {
   orignLabel?: string;
   destinationLabel?: string;
   t?: (key: string) => string;
-  ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (serviceItem: any) => void;
-  onDecreaseTicketQuantity?: (serviceItem: any) => void;
 
   // New ServiceItem props
   id?: string;

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,7 +27,6 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
-import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -38,9 +37,6 @@ 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"];
@@ -75,9 +71,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
-  thunderAnimation: {
-    kupos: thunderAnimation,
-  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -87,9 +80,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
-  usersAnimation: {
-    kupos: usersAnimation,
-  },
 };
 
 function ServiceItemPB({
@@ -123,15 +113,9 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
-  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isFeatureDropDownExpand,
-  setIsFeatureDropDownExpand,
-  ticketQuantity,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -431,31 +415,6 @@ function ServiceItemPB({
           siteType={siteType}
           isAllinBus={isAllinBus}
         />
-      ) : isNewUi ? (
-        <FeatureServiceUi
-          serviceItem={serviceItem}
-          showTopLabel={showTopLabel}
-          isSoldOut={isSoldOut}
-          getAnimationIcon={getAnimationIcon}
-          cityOrigin={cityOrigin}
-          cityDestination={cityDestination}
-          renderIcon={renderIcon}
-          viewersConfig={viewersConfig}
-          isFeatureDropDownExpand={isFeatureDropDownExpand}
-          ticketQuantity={ticketQuantity}
-          onIncreaseTicketQuantity={onIncreaseTicketQuantity}
-          onDecreaseTicketQuantity={onDecreaseTicketQuantity}
-          onBookButtonPress={onBookButtonPress}
-          onToggleExpand={() =>
-            setIsFeatureDropDownExpand &&
-            setIsFeatureDropDownExpand(
-              isFeatureDropDownExpand === serviceItem.id ||
-                isFeatureDropDownExpand === true
-                ? null
-                : serviceItem.id,
-            )
-          }
-        />
       ) : (
         <div
           className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${