kupos-ui-components-lib 9.7.5 → 9.7.7

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -27,13 +27,14 @@ const HARDCODED_OPERATORS = [
         seatsAvailable: "3 disponibles",
     },
 ];
-const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
-    var _a, _b, _c, _d;
+const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot = TIME_SLOTS[0], onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) => {
+    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 isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
     const canDecreaseTicketQuantity = ticketQuantity > 1;
     const HOW_IT_WORKS_STEPS = [
         {
@@ -120,94 +121,54 @@ 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("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: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
+                                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                                            onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
+                                        }
+                                    }, style: { outline: "none" } },
+                                    React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]" },
+                                        React.createElement("span", null, selectedTimeSlot),
+                                        React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
+                                                width: "12px",
+                                                height: "8px",
+                                                filter: "brightness(0) invert(1)",
+                                            } })),
+                                    isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
+                                        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) => {
+                                            const isActive = slot === selectedTimeSlot;
+                                            return (React.createElement("button", { key: slot, type: "button", onClick: () => {
+                                                    onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
+                                                    onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
+                                                }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
+                                                React.createElement("span", null, 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"),
                         React.createElement("div", { className: "flex gap-[8px] text-[white]" }, 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",
+                                height: "100px",
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
                                 padding: "14px 10px",
                             } },
                             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-[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("span", { className: "text-[12px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
+                            React.createElement("span", { className: "text-[11px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
                         React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
                                 padding: "4px 14px",
                                 borderRadius: "24px",
                             } },
-                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.personsAnim, 
-                                // animationData={getAnimationIcon("usersAnimation")}
-                                width: "18px", height: "18px" }),
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.personsAnim, width: "18px", height: "18px" }),
                             React.createElement("span", null,
                                 React.createElement("span", { className: "bold-text text-[white]" },
                                     " ",
@@ -227,7 +188,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             React.createElement("div", { className: "flex w-[50%] items-center justify-between", style: {
                                     border: "1px solid #363c48",
                                     backgroundColor: "#1a202e",
-                                    padding: "6px 14px",
+                                    padding: "4px 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
@@ -267,8 +228,8 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
-                        React.createElement("div", { className: `flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
-                            React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
+                        React.createElement("div", { className: "flex justify-end mt-[10px]", onClick: onToggleExpand },
+                            React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
                                     width: "14px",
                                     height: "8px",
                                     filter: "brightness(0) invert(1)",
@@ -284,20 +245,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             React.createElement(FeatureStepIcon, { icon: step.icon })),
                         React.createElement("div", { className: "flex flex-col" },
                             React.createElement("span", { className: "bold-text" }, step.name),
-                            React.createElement("span", null, step.text)))
-                    // <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>
-                    ))))))),
+                            React.createElement("span", null, step.text)))))))))),
         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" },

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

@@ -1,5 +1,5 @@
 import React from "react";
-declare const FeatureServiceUi: ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: {
     serviceItem: any;
     showTopLabel: any;
     isSoldOut: any;
@@ -14,5 +14,9 @@ declare const FeatureServiceUi: ({ serviceItem, showTopLabel, isSoldOut, getAnim
     onIncreaseTicketQuantity: any;
     onDecreaseTicketQuantity: any;
     onBookButtonPress: any;
+    selectedTimeSlot: any;
+    onTimeSlotChange: any;
+    isTimeDropdownOpen: any;
+    onTimeDropdownToggle: any;
 }) => React.JSX.Element;
 export default FeatureServiceUi;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.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,13 +27,14 @@ const HARDCODED_OPERATORS = [
         seatsAvailable: "3 disponibles",
     },
 ];
-const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
-    var _a, _b, _c, _d, _e;
+const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) => {
+    var _a, _b, _c, _d, _e, _f;
     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 isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
     const canDecreaseTicketQuantity = ticketQuantity > 1;
     const HOW_IT_WORKS_STEPS = [
         {
@@ -102,7 +109,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             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: "grid grid-cols-[25%_48%_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]" },
@@ -112,7 +119,35 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 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"),
+                            React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
+                                    if (!e.currentTarget.contains(e.relatedTarget)) {
+                                        onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
+                                    }
+                                }, style: { outline: "none" } },
+                                React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
+                                    React.createElement("span", null, selectedTimeSlot),
+                                    React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
+                                            width: "12px",
+                                            height: "8px",
+                                            filter: "brightness(0) invert(1)",
+                                        } })),
+                                isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
+                                    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) => {
+                                        const isActive = slot === selectedTimeSlot;
+                                        return (React.createElement("button", { key: slot, type: "button", onClick: () => {
+                                                onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
+                                                onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
+                                            }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
+                                            React.createElement("span", null, slot)));
+                                    }))))),
                             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-justify gap-[8px]" },
@@ -210,7 +245,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: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
+                        React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",

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.5",
+  "version": "9.7.7",
   "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/assets/images/anims/service_list/thunder_icon.json

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

package/src/assets/images/anims/service_list/users_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":512,"w":512,"meta":{"g":"@lottiefiles/creator@1.90.1"},"layers":[{"ty":2,"nm":"111","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[54.49996512276783,38.99999128069197]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[436.62,436.62],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[300,300],"t":58},{"s":[436.62,436.62],"t":112}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[255.99996512276783,255.99999128069197]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":58},{"s":[100],"t":112}]}},"refId":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","ind":1}],"v":"5.7.0","fr":30,"op":114,"ip":0,"assets":[{"id":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","e":1,"w":109,"h":78,"p":"data:image/png;base64,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","u":""}]}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,6 +27,7 @@ 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";
@@ -37,6 +38,9 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
@@ -71,6 +75,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -80,6 +87,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
+  usersAnimation: {
+    kupos: usersAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -113,9 +123,20 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -415,6 +436,35 @@ 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={onRemateUiButtonClick}
+          onToggleExpand={() =>
+            setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(
+              isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id,
+            )
+          }
+          selectedTimeSlot={selectedTimeSlot}
+          onTimeSlotChange={onTimeSlotChange}
+          isTimeDropdownOpen={isTimeDropdownOpen}
+          onTimeDropdownToggle={onTimeDropdownToggle}
+        />
       ) : (
         <div
           className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${