kupos-ui-components-lib 9.10.9 → 9.11.0

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: 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, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,12 +87,9 @@ const ANIMATION_MAP = {
         kupos: flameAnimation,
     },
 };
-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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
+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, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
     var _a, _b, _c;
-    const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
-        onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
-        onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
-    };
+    console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -231,16 +228,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             });
             return;
         }
-        if (isTrain) {
-            if (!selectedSeatKey) {
-                onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
-                return;
-            }
-            if (onTrainButtonClick) {
-                onTrainButtonClick();
-                return;
-            }
-        }
         onBookButtonPress();
     };
     const items = [
@@ -307,13 +294,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, tooltipColor: colors.tooltipColor })),
                     React.createElement("div", { className: "relative" },
                         React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
-                        showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
-                            React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
-                                    color: colors.seatPriceColor,
-                                } }, "Selecciona el tipo de servicio"))),
                         showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px]  mt-1 text-center", style: {
                                 color: colors.seatPriceColor,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -18,7 +18,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;

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

@@ -215,7 +215,6 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
-    isTrain?: boolean;
     isFeatureDropDownExpand?: any;
     setIsFeatureDropDownExpand?: (value: any) => void;
     ticketQuantity?: number;

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

@@ -245,13 +245,6 @@ export interface ServiceItemProps {
     showLoginModal?: any;
     isLoggedIn?: any;
     showLoginOption?: boolean;
-    isTrain?: boolean;
-    selectedSeatKey?: any;
-    onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
-    onTrainButtonClick?: any;
-    showSeatSelectionError?: string | null;
-    onShowSeatSelectionError?: (serviceId: string) => void;
-    onClearSeatSelectionError?: () => void;
     selectedTimeSlot?: string;
     onTimeSlotChange?: (slot: string) => void;
     isTimeDropdownOpen?: string | number | null;

package/dist/styles.css

@@ -572,9 +572,6 @@
 .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));
 }
@@ -854,6 +851,9 @@
 .bg-\[lightgray\] {
   background-color: lightgray;
 }
+.bg-\[white\] {
+  background-color: white;
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -1023,9 +1023,6 @@
 .text-right {
   text-align: right;
 }
-.text-\[9px\] {
-  font-size: 9px;
-}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -1277,6 +1274,13 @@
     }
   }
 }
+.hover\:z-\[200\] {
+  &:hover {
+    @media (hover: hover) {
+      z-index: 200;
+    }
+  }
+}
 .hover\:z-\[500\] {
   &:hover {
     @media (hover: hover) {

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts

@@ -14,7 +14,7 @@ declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSo
     onIncreaseTicketQuantity: any;
     onDecreaseTicketQuantity: any;
     onBookButtonPress: any;
-    selectedTimeSlot?: string;
+    selectedTimeSlot: any;
     onTimeSlotChange: any;
     isTimeDropdownOpen: any;
     onTimeDropdownToggle: any;

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -2,12 +2,6 @@ import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
 import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
-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",
@@ -28,8 +22,8 @@ const HARDCODED_OPERATORS = [
         seatsAvailable: "3 disponibles",
     },
 ];
-const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot = TIME_SLOTS[0], onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
+    var _a, _b, _c, _d, _e, _f;
     // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
     const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? wowDealData.services.slice(0, 3).map((service) => ({
@@ -52,6 +46,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
     const dealWindowFrom = (wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.deal_window_from) || "07:00";
     const dealWindowTo = (wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.deal_window_to) || "10:00";
     const travelDate = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.travel_date;
+    const serviceWindowHours = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.service_window_hours;
     // Calculate countdown seconds from expires_at ISO timestamp
     const getCountdownSeconds = () => {
         if (!expiresAt)
@@ -61,23 +56,47 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
         const seconds = Math.max(0, Math.floor((expires - now) / 1000));
         return seconds;
     };
-    // Generate time slot from deal window
-    const dynamicTimeSlot = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
-    const displayTimeSlot = selectedTimeSlot || dynamicTimeSlot;
+    // Generate dynamic time slots from deal window + service window hours
+    const allTimeSlots = serviceWindowHours
+        ? commonService.generateTimeSlots(dealWindowFrom, dealWindowTo, serviceWindowHours)
+        : [];
+    // Filter slots to only those that have at least one service
+    const services = (wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) || [];
+    const availableTimeSlots = allTimeSlots.filter((slot) => services.some((s) => {
+        const depMin = commonService.timeToMinutes(s.departure_time);
+        return depMin >= slot.start && depMin < slot.end;
+    }));
+    // Active slot: the one matching selectedTimeSlot label, or the first available
+    const activeSlot = availableTimeSlots.find((s) => s.label === selectedTimeSlot) ||
+        availableTimeSlots[0];
+    // Services that fall within the active slot, sorted by final price ascending
+    const servicesInActiveSlot = activeSlot
+        ? services
+            .filter((s) => {
+            const depMin = commonService.timeToMinutes(s.departure_time);
+            return depMin >= activeSlot.start && depMin < activeSlot.end;
+        })
+            .sort((a, b) => a.final_price - b.final_price)
+        : services;
+    // The selected price (final and original) from the cheapest service in the active slot
+    const selectedSlotService = servicesInActiveSlot === null || servicesInActiveSlot === void 0 ? void 0 : servicesInActiveSlot[0];
+    const displayFinalPrice = selectedSlotService
+        ? selectedSlotService.final_price
+        : finalPrice;
+    const displayOriginalPrice = selectedSlotService
+        ? selectedSlotService.original_price
+        : originalPrice;
+    const displaySavingsPercent = selectedSlotService && selectedSlotService.original_price
+        ? Math.round(((selectedSlotService.original_price - selectedSlotService.final_price) /
+            selectedSlotService.original_price) *
+            100)
+        : savingsPercent;
+    // The label shown on the dropdown button
+    const departureRange = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
     const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
         isFeatureDropDownExpand === true;
     const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
     const canDecreaseTicketQuantity = ticketQuantity > 1;
-    const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
-    let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
-    if (departures === null || departures === void 0 ? void 0 : departures.length) {
-        const sorted = [...departures].sort((a, b) => {
-            const [ah, am] = a.split(":").map(Number);
-            const [bh, bm] = b.split(":").map(Number);
-            return ah * 60 + am - (bh * 60 + bm);
-        });
-        departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
-    }
     const HOW_IT_WORKS_STEPS = [
         {
             icon: "flexible",
@@ -145,28 +164,91 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                         } },
                         React.createElement("span", null,
                             "AHORRAS ",
-                            savingsPercent,
+                            displaySavingsPercent,
                             "%")))),
             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: "flex flex-col gap-[10px]" },
                     React.createElement("div", { className: " text-[white]" },
                         React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
                             React.createElement("div", { className: "flex items-center gap-[6px]" },
-                                React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[14px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0]),
                                 React.createElement("span", { className: "mx-[6px] text-[14px] bold-text" }, "\u2192"),
-                                React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] 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-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[14px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[6px]" },
-                                React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)))),
+                                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, departureRange),
+                                        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: "190px",
+                                                boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
+                                                overflow: "hidden",
+                                                padding: "6px 0",
+                                            } }, availableTimeSlots.map((slot) => {
+                                            const isActive = slot.label === selectedTimeSlot ||
+                                                slot === activeSlot;
+                                            // Count services in this slot
+                                            const count = services.filter((s) => {
+                                                const depMin = commonService.timeToMinutes(s.departure_time);
+                                                return depMin >= slot.start && depMin < slot.end;
+                                            }).length;
+                                            return (React.createElement("button", { key: slot.label, type: "button", onClick: () => {
+                                                    onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot.label);
+                                                    onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
+                                                    // const slotServices = services.filter((s) => {
+                                                    //   const depMin = commonService.timeToMinutes(
+                                                    //     s.departure_time,
+                                                    //   );
+                                                    //   return (
+                                                    //     depMin >= slot.start && depMin < slot.end
+                                                    //   );
+                                                    // });
+                                                    // console.log(
+                                                    //   "Selected slot label:",
+                                                    //   slot.label,
+                                                    // );
+                                                    // console.log(
+                                                    //   "Services in selected slot:",
+                                                    //   slotServices,
+                                                    // );
+                                                }, className: `flex w-full cursor-pointer items-center justify-between 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.label),
+                                                count > 0 && (React.createElement("span", { className: `text-[11px] rounded-full px-[6px] py-[2px] font-bold ${isActive
+                                                        ? "bg-[white] text-[#FF5C60]"
+                                                        : "bg-[#FF5C60] text-[white]"}` }, count))));
+                                        })))))))),
                     React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
                     React.createElement("div", null,
                         React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
-                            operatorsCompetingCount,
-                            " operadores compitiendo ",
+                            servicesInActiveSlot.length > 0
+                                ? servicesInActiveSlot.length
+                                : operatorsCompetingCount,
+                            " ",
+                            "operadores compitiendo ",
                             React.createElement("br", null),
                             "por tu compra"),
-                        React.createElement("div", { className: "flex gap-[8px] text-[white]", style: { width: "100%" } }, 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: {
+                        React.createElement("div", { className: "flex gap-[8px] text-[white]", style: { width: "100%" } }, (servicesInActiveSlot.length > 0
+                            ? servicesInActiveSlot.slice(0, 3).map((s) => ({
+                                logo: s.operator_logo_url,
+                                name: s.operator_name,
+                                time: s.departure_time,
+                                seatsAvailable: `${s.available_seats} disponibles`,
+                            }))
+                            : 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: {
                                 flex: 1,
                                 minWidth: 0,
                                 height: "100px",
@@ -176,7 +258,9 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement("img", { src: op.logo, alt: op.name, onError: (e) => {
                                     var _a;
-                                    e.currentTarget.src = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) || "/images/service-list/bus-icon.svg";
+                                    e.currentTarget.src =
+                                        ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
+                                            "/images/service-list/bus-icon.svg";
                                 }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, op.name),
                             React.createElement("span", { className: "text-[11px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
@@ -220,7 +304,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement("div", { className: "flex flex-col" },
                                 React.createElement("span", { className: "text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
-                                    `$${((originalPrice * ticketQuantity)).toLocaleString()}`,
+                                    `$${(displayOriginalPrice * ticketQuantity).toLocaleString()}`,
                                     React.createElement("span", { style: {
                                             position: "absolute",
                                             left: "-2px",
@@ -231,12 +315,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                             transform: "rotate(-10deg)",
                                             transformOrigin: "center",
                                         } })),
-                                React.createElement("span", { className: "text-[white] bold-text text-[24px] leading-none mt-[4px]" }, `$${(finalPrice * ticketQuantity).toLocaleString()}`)),
+                                React.createElement("span", { className: "text-[white] bold-text text-[24px] leading-none mt-[4px]" }, `$${(displayFinalPrice * ticketQuantity).toLocaleString()}`)),
                             React.createElement("span", { className: "text-[#FF8F45] bold-text text-[22px] leading-tight", style: {
                                     animation: "pulse-zoom 2s ease-in-out infinite",
                                     whiteSpace: "nowrap",
                                 } },
-                                savingsPercent,
+                                displaySavingsPercent,
                                 "% 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",
@@ -246,7 +330,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "16px", height: "16px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
                         React.createElement("div", { className: "flex justify-end mt-[10px]", onClick: onToggleExpand },
-                            React.createElement("img", { src: (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
+                            React.createElement("img", { src: (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.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)",