kupos-ui-components-lib 9.7.0 → 9.7.1

package/dist/KuposUIComponent.d.ts

@@ -15,6 +15,9 @@ interface KuposUIComponentProps {
     orignLabel?: string;
     destinationLabel?: string;
     t?: (key: string) => string;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: any) => void;
+    onDecreaseTicketQuantity?: (serviceItem: any) => void;
     id?: string;
     name?: string;
     description?: string;

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, isNewUi, 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, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -79,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, isNewUi, 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, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -248,7 +248,11 @@ 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 })) : 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) ||
+    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, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id) })) : (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]"

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

@@ -219,6 +219,11 @@ export interface ServiceItemProps {
     isAllinBus?: boolean;
     isExpand?: any;
     setIsExpand?: (value: any) => void;
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
     coachKey?: number;
     viewersConfig?: {
         min: number;

package/dist/styles.css

@@ -177,6 +177,9 @@
 .mx-auto {
   margin-inline: auto;
 }
+.my-\[14px\] {
+  margin-block: 14px;
+}
 .-mt-\[15px\] {
   margin-top: calc(15px * -1);
 }
@@ -249,9 +252,6 @@
 .mb-\[5px\] {
   margin-bottom: 5px;
 }
-.mb-\[6px\] {
-  margin-bottom: 6px;
-}
 .mb-\[8px\] {
   margin-bottom: 8px;
 }
@@ -357,6 +357,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[34px\] {
+  height: 34px;
+}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -396,6 +399,9 @@
 .w-\[30px\] {
   width: 30px;
 }
+.w-\[34px\] {
+  width: 34px;
+}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -500,6 +506,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -512,18 +521,21 @@
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 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;
 }
+.grid-cols-\[23\%_50\%_27\%\] {
+  grid-template-columns: 23% 50% 27%;
+}
 .grid-cols-\[26px_auto_26\%_1fr\] {
   grid-template-columns: 26px auto 26% 1fr;
 }
@@ -630,15 +642,15 @@
 .rounded-\[10px\] {
   border-radius: 10px;
 }
-.rounded-\[12px\] {
-  border-radius: 12px;
-}
 .rounded-\[14px\] {
   border-radius: 14px;
 }
 .rounded-\[15px\] {
   border-radius: 15px;
 }
+.rounded-\[16px\] {
+  border-radius: 16px;
+}
 .rounded-\[18px\] {
   border-radius: 18px;
 }
@@ -758,6 +770,12 @@
 .bg-\[\#0C1421\] {
   background-color: #0C1421;
 }
+.bg-\[\#2d374d\] {
+  background-color: #2d374d;
+}
+.bg-\[\#222b3d\] {
+  background-color: #222b3d;
+}
 .bg-\[\#E6E6E6\] {
   background-color: #E6E6E6;
 }
@@ -846,6 +864,9 @@
 .px-\[20px\] {
   padding-inline: 20px;
 }
+.px-\[22px\] {
+  padding-inline: 22px;
+}
 .py-\[2px\] {
   padding-block: 2px;
 }
@@ -894,6 +915,9 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[10px\] {
+  padding-right: 10px;
+}
 .pr-\[15px\] {
   padding-right: 15px;
 }
@@ -924,6 +948,9 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
+.pl-\[22px\] {
+  padding-left: 22px;
+}
 .text-center {
   text-align: center;
 }
@@ -969,9 +996,15 @@
 .text-\[18px\] {
   font-size: 18px;
 }
+.text-\[20px\] {
+  font-size: 20px;
+}
 .text-\[22px\] {
   font-size: 22px;
 }
+.text-\[25px\] {
+  font-size: 25px;
+}
 .text-\[26px\] {
   font-size: 26px;
 }
@@ -1092,6 +1125,9 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-50 {
+  opacity: 50%;
+}
 .opacity-100 {
   opacity: 100%;
 }

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, viewersConfig, }: {
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
     serviceItem: any;
     showTopLabel: any;
     colors: any;
@@ -9,5 +9,11 @@ declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut,
     cityDestination: any;
     renderIcon: any;
     viewersConfig: any;
+    isFeatureDropDownExpand: any;
+    onToggleExpand: any;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity: any;
+    onDecreaseTicketQuantity: any;
+    onBookButtonPress: any;
 }) => React.JSX.Element;
 export default FeatureServiceUi;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -77,11 +77,14 @@ const AssuranceIcon = ({ type }) => {
         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, }) => {
+const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
     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;
+    const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
+        isFeatureDropDownExpand === true;
+    const canDecreaseTicketQuantity = ticketQuantity > 1;
     return (React.createElement("div", { 
         // ${
         //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
@@ -118,52 +121,51 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 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-[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: "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("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-[16px] h-[16px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                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] 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"),
                             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("div", { className: "flex items-justify 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("div", { className: "flex items-justify 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: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] 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: "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",
+                        React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 // height: "80px",
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
-                                padding: "14px",
+                                padding: "14px 10px",
                             } },
-                            React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] w-auto object-contain ${isSoldOut ? "grayscale" : ""}` }),
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             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("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
                                 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: {
+                        React.createElement("div", { className: "flex w-full 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,
@@ -183,14 +185,38 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
                                 "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 justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]" },
                         React.createElement("div", { className: "flex flex-col gap-[6px] ", style: {
                                 alignItems: "center",
                             } },
                             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-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
+                                "$10.000",
+                                React.createElement("span", { style: {
+                                        position: "absolute",
+                                        left: "-2px",
+                                        top: "50%",
+                                        width: "calc(100% + 4px)",
+                                        height: "1px",
+                                        backgroundColor: "#FF5C60",
+                                        transform: "rotate(-10deg)",
+                                        transformOrigin: "center",
+                                    } })),
                             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: {
+                        React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
+                            React.createElement("span", { className: "text-[12px] text-white" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
+                            React.createElement("div", { className: "flex w-full items-center justify-between", style: {
+                                    border: "1px solid #363c48",
+                                    backgroundColor: "#1a202e",
+                                    padding: "6px 14px",
+                                    borderRadius: "14px",
+                                } },
+                                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("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("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer", style: {
                                 backgroundColor: "#FF5C60",
                             } },
                             React.createElement(LottiePlayer
@@ -199,17 +225,22 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 // animationData={serviceItem.icons.flexibleAnim}
                                 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("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: (_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: "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)))))))));
+            React.createElement("div", { className: "grid", style: {
+                    gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+                    opacity: isItemExpanded ? 1 : 0,
+                    transition: "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
+                } },
+                React.createElement("div", { className: `min-h-0 overflow-hidden px-[16px] text-[13.33px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"}`, style: { transition: "padding 300ms ease-in-out" } },
+                    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;

package/dist/utils/CommonService.js

@@ -296,10 +296,14 @@ 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);
@@ -310,6 +314,7 @@ 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)
@@ -339,6 +344,10 @@ 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));
@@ -355,6 +364,7 @@ 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.0",
+  "version": "9.7.1",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/KuposUIComponent.tsx

@@ -32,6 +32,9 @@ 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

@@ -123,6 +123,11 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -433,6 +438,20 @@ function ServiceItemPB({
           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

package/src/components/ServiceItem/types.ts

@@ -222,6 +222,11 @@ export interface ServiceItemProps {
   isAllinBus?: boolean;
   isExpand?: any;
   setIsExpand?: (value: any) => void;
+  isFeatureDropDownExpand?: any;
+  setIsFeatureDropDownExpand?: (value: any) => void;
+  ticketQuantity?: number;
+  onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
   coachKey?: number
   viewersConfig?: {
     min: number;

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -217,12 +217,23 @@ const FeatureServiceUi = ({
   cityDestination,
   renderIcon,
   viewersConfig,
+  isFeatureDropDownExpand,
+  onToggleExpand,
+  ticketQuantity = 1,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onBookButtonPress,
 }) => {
   const operators =
     serviceItem?.operators?.length > 0
       ? serviceItem.operators
       : HARDCODED_OPERATORS;
 
+  const isItemExpanded =
+    serviceItem.id === isFeatureDropDownExpand ||
+    isFeatureDropDownExpand === true;
+  const canDecreaseTicketQuantity = ticketQuantity > 1;
+
   return (
     <div
       // ${
@@ -271,6 +282,7 @@ const FeatureServiceUi = ({
                   fontVariantNumeric: "tabular-nums",
                   display: "inline-block",
                   color: "#FF5C60",
+                  minWidth: "40px",
                 }}
               />
             </span>
@@ -280,9 +292,9 @@ const FeatureServiceUi = ({
           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">
+          <div className="grid grid-cols-[23%_50%_27%] 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 justify-between gap-[20px] my-[14px] pr-[22px]">
               <div className="flex flex-col gap-[8px]">
                 <div className="flex items-center gap-[8px]">
                   <img
@@ -300,7 +312,7 @@ const FeatureServiceUi = ({
                   <img
                     src={serviceItem.icons?.whiteDestination}
                     alt="destination"
-                    className={`w-[16px] h-[16px] shrink-0 ${
+                    className={`w-[14px] h-[14px] shrink-0 ${
                       isSoldOut ? "grayscale" : ""
                     }`}
                     style={{ opacity: isSoldOut ? 0.5 : 1 }}
@@ -312,23 +324,6 @@ const FeatureServiceUi = ({
               </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>
@@ -336,7 +331,7 @@ const FeatureServiceUi = ({
               </div>
 
               <div className="flex flex-col items-start gap-[10px] text-[12px] ">
-                <div className="flex items-center gap-[8px]">
+                <div className="flex items-justify gap-[8px]">
                   <AssuranceIcon type="pending" />
 
                   <span
@@ -348,7 +343,7 @@ const FeatureServiceUi = ({
                     Empresa y hora a confirmar luego del pago.
                   </span>
                 </div>
-                <div className="flex items-center gap-[8px]">
+                <div className="flex items-justify gap-[8px]">
                   <AssuranceIcon type="secured" />
 
                   <span
@@ -364,7 +359,7 @@ const FeatureServiceUi = ({
             </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="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] 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
@@ -374,30 +369,29 @@ const FeatureServiceUi = ({
                 </div> */}
               </div>
 
-              <div className="flex items-stretch justify-center gap-[8px] w-full mb-[16px]">
+              <div className="grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]">
                 {operators.map((op, idx) => (
                   <div
                     key={idx}
-                    className="flex flex-col items-center justify-center gap-[8px] rounded-[8px]"
+                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
                     style={{
-                      width: "140px",
                       // height: "80px",
                       border: "1px solid #363c48",
                       backgroundColor: "#1a202e",
-                      padding: "14px",
+                      padding: "14px 10px",
                     }}
                   >
                     <img
                       src={serviceItem.operator_details[0]}
                       alt={op.name}
-                      className={`h-[24px] w-auto object-contain ${
+                      className={`h-[24px] max-w-full 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">
+                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
                       <span>{op?.time}</span>
                     </div>
                     <span className="text-[10px] mt-[6px]">
@@ -408,13 +402,12 @@ const FeatureServiceUi = ({
               </div>
 
               <div
-                className="flex items-center justify-center gap-[6px] text-[12px]"
+                className="flex w-full items-center justify-center gap-[6px] text-[12px]"
                 style={{
                   border: "1px solid #363c48",
                   backgroundColor: "#1a202e",
                   padding: "8px 14px",
                   borderRadius: "24px",
-                  width: "430px",
                 }}
               >
                 <img
@@ -457,7 +450,7 @@ const FeatureServiceUi = ({
             </div>
 
             {/* RIGHT: price + button */}
-            <div className="flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]">
+            <div className="flex flex-col justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]">
               <div
                 className="flex flex-col gap-[6px] "
                 style={{
@@ -467,16 +460,78 @@ const FeatureServiceUi = ({
                 <span className="text-[#FF8F45] bold-text text-[26px] leading-tight">
                   60% OFF
                 </span>
-                <span className="text-[#666] text-[14px] line-through">
+                {/* <span className="text-[#666] text-[14px] line-through">
+                  $10.000
+                </span> */}
+                <span
+                  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
+                  style={{ position: "relative" }}
+                >
                   $10.000
+                  <span
+                    style={{
+                      position: "absolute",
+                      left: "-2px",
+                      top: "50%",
+                      width: "calc(100% + 4px)",
+                      height: "1px",
+
+                      backgroundColor: "#FF5C60",
+
+                      transform: "rotate(-10deg)",
+                      transformOrigin: "center",
+                    }}
+                  />
                 </span>
                 <span className="text-white bold-text text-[28px] leading-none">
                   $4.000
                 </span>
               </div>
 
+              <div className="mt-[4px] flex flex-col items-center gap-[8px]">
+                <span className="text-[12px] text-white">
+                  ¿Cuántos pasajes quieres?
+                </span>
+                <div
+                  className="flex w-full items-center justify-between"
+                  style={{
+                    border: "1px solid #363c48",
+                    backgroundColor: "#1a202e",
+                    padding: "6px 14px",
+                    borderRadius: "14px",
+                  }}
+                >
+                  <button
+                    type="button"
+                    aria-label="Disminuir pasajes"
+                    disabled={!canDecreaseTicketQuantity}
+                    onClick={() => 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"
+                    }`}
+                  >
+                    -
+                  </button>
+                  <span className="bold-text text-[20px] text-white">
+                    {ticketQuantity}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label="Aumentar pasajes"
+                    onClick={() => 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"
+                  >
+                    +
+                  </button>
+                </div>
+              </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"
+                type="button"
+                onClick={onBookButtonPress}
+                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
                 style={{
                   backgroundColor: "#FF5C60",
                 }}
@@ -491,7 +546,10 @@ const FeatureServiceUi = ({
               </button>
             </div>
 
-            <div className="absolute bottom-[11px] right-[18px]">
+            <div
+              className={`absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
+              onClick={onToggleExpand}
+            >
               <img
                 src={serviceItem.icons?.downArrow}
                 alt="down arrow"
@@ -504,24 +562,39 @@ const FeatureServiceUi = ({
             </div>
           </div>
         </div>
-        <div className="px-[16px] pt-[14px] pb-[6px] text-[13.33px]">
-          <span className="bold-text">¿Cómo funciona?</span>
+        <div
+          className="grid"
+          style={{
+            gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+            opacity: isItemExpanded ? 1 : 0,
+            transition:
+              "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
+          }}
+        >
+          <div
+            className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${
+              isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
+            }`}
+            style={{ transition: "padding 300ms ease-in-out" }}
+          >
+            <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 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>
       </div>

package/src/utils/CommonService.ts

@@ -329,10 +329,15 @@ const commonService = {
   ) => {
     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: number) => Math.min(max, Math.max(min, v));
     const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
 
@@ -347,6 +352,7 @@ const commonService = {
     }, interval);
 
     node.dataset.viewerId = String(id);
+    node.dataset.viewerConfig = configKey;
   },
 
   startCountdown: (
@@ -388,6 +394,11 @@ const commonService = {
   ) => {
     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));
 
@@ -408,6 +419,7 @@ const commonService = {
     }, 5000); // Update every 5 seconds
 
     node.dataset.comprandoId = String(id);
+    node.dataset.comprandoConfig = configKey;
   },
 };