kupos-ui-components-lib 9.1.6 → 9.1.7

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -1,10 +1,10 @@
 import React from "react";
+import DateService from "../../utils/DateService";
 import CommonService from "../../utils/CommonService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
 import LottiePlayer from "../../assets/LottiePlayer";
 import PeruServiceItemDesktop from "./PeruServiceItemDesktop";
-import ExpandedDropdown from "../../ui/ExpendedDropDown/ExpandedDropdown";
 import promoAnimation from "../../assets/images/anims/service_list/promocion.json";
 import flexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
 import locationAnimation from "../../assets/images/anims/service_list/location.json";
@@ -15,71 +15,70 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
 import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
 import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
 import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
+import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
 import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
 import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
-import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
+import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
+import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
+import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
-import DirectoBlock from "../../ui/DirectoBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
-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 StageTooltip from "../../ui/StagesTooltip";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
-const ANIMATION_MAP = {
-    promoAnim: {
-        kupos: promoAnimation,
-    },
-    locationAnim: {
-        kupos: locationAnimation,
-        pullman: pullmanLocationAnimation,
-        opsites: opsitesLocationAnimation,
-    },
-    directoAnim: {
-        kupos: directoAnimation,
-    },
-    petFriendlyAnim: {
-        kupos: petFriendlyAnimation,
-        pullman: pullmanPetFriendlyAnimation,
-        opsites: opsitesPetFriendlyAnimation,
-    },
-    priorityStageAnim: {
-        kupos: priorityStageAnimation,
-        pullman: pullmanPriorityStageAnimation,
-        opsites: opsitesPriorityStageAnimation,
-    },
-    flexibleIcon: {
-        kupos: flexibleAnimation,
-        pullman: pullmanFlexibleAnimation,
-        opsites: opsitesFlexibleAnimation,
-    },
-    bombAnimation: {
-        kupos: bombAnimation,
-    },
-};
-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, }) {
-    const startViewerCount = (node) => {
-        if (!node || !viewersConfig)
-            return;
-        const prevId = node.dataset.viewerId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        const { min, max, interval = 5000 } = viewersConfig;
-        const getRandom = () => Math.floor(Math.random() * (max - min + 1)) + min;
-        node.textContent = String(getRandom());
-        const id = setInterval(() => {
-            node.textContent = String(getRandom());
-        }, interval);
-        node.dataset.viewerId = String(id);
+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, }) {
+    var _a, _b;
+    const animationMap = {
+        promoAnim: {
+            kupos: promoAnimation,
+            pullman: pullmanPromoAnimation,
+            opsites: opsitesPromoAnimation,
+            linatal: linatalPromoAnimation,
+        },
+        locationAnim: {
+            kupos: locationAnimation,
+            pullman: pullmanLocationAnimation,
+            opsites: opsitesLocationAnimation,
+            linatal: linatalLocationAnimation,
+        },
+        directoAnim: {
+            kupos: directoAnimation,
+            pullman: pullmanDirectoAnimation,
+            opsites: opsitesDirectoAnimation,
+            linatal: linatalDirectoAnimation,
+        },
+        petFriendlyAnim: {
+            kupos: petFriendlyAnimation,
+            pullman: pullmanPetFriendlyAnimation,
+            opsites: opsitesPetFriendlyAnimation,
+            linatal: linatalPetFriendlyAnimation,
+        },
+        priorityStageAnim: {
+            kupos: priorityStageAnimation,
+            pullman: pullmanPriorityStageAnimation,
+            opsites: opsitesPriorityStageAnimation,
+            linatal: linatalPriorityStageAnimation,
+        },
+        flexibleIcon: {
+            kupos: flexibleAnimation,
+            pullman: pullmanFlexibleAnimation,
+            opsites: opsitesFlexibleAnimation,
+            linatal: linatalFlexibleAnimation,
+        },
     };
     const getAnimationIcon = (icon) => {
         var _a;
-        const animation = ANIMATION_MAP[icon];
+        const animation = animationMap[icon];
         if (!animation)
             return null;
         return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
@@ -98,7 +97,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         const iconPath = getIconPath();
         return (React.createElement("img", { src: iconPath, alt: name, style: {
                 filter: color === "white" ? "brightness(0) invert(1)" : "",
-            }, className: "object-contain w-[16px] h-[16px]" }));
+            }, className: `object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"}` }));
     };
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
@@ -108,22 +107,98 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         busStage[labelId].split("|")[1] === "true" &&
         busStage[labelId].split("|")[0];
     let isSoldOut = serviceItem.available_seats <= 0;
-    const showPromo = Math.random() > 0.5;
-    const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
-    const grayscaleClass = isSoldOut ? "grayscale" : "";
     const renderIcon = (iconKey, size = "14px") => {
         var _a;
         const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
         if (iconValue) {
             if (typeof iconValue === "string") {
-                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} ` }));
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]` }));
             }
         }
         return null;
     };
+    const getAllSeatTypes = () => {
+        var _a;
+        if (!((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [{ label: "Salon cama", price: 0 }];
+        }
+        let seatTypesWithPrices = serviceItem.seat_types
+            .filter((item) => getFilteredSeats(item))
+            .map((val) => ({
+            label: val === null || val === void 0 ? void 0 : val.label,
+            price: val === null || val === void 0 ? void 0 : val.fare,
+        }));
+        seatTypesWithPrices.sort((a, b) => a.price - b.price);
+        return seatTypesWithPrices;
+    };
+    const getSortedSeatTypes = () => {
+        var _a;
+        if (!((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [{ label: "Salon cama", price: 0 }];
+        }
+        let seatTypesWithPrices = getAllSeatTypes();
+        const premiumIndex = seatTypesWithPrices.findIndex((item) => item.label === "Premium");
+        if (premiumIndex >= 3) {
+            seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
+        }
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+        return seatTypesWithPrices;
+    };
+    const getUniqueSeats = () => {
+        const allSeatTypes = getAllSeatTypes();
+        const seatMap = new Map();
+        allSeatTypes.forEach((seat) => {
+            if (SEAT_EXCEPTIONS.includes(seat.label))
+                return;
+            // Only check if the label already exists in the map, don't compare prices
+            if (!seatMap.has(seat.label)) {
+                seatMap.set(seat.label, seat);
+            }
+        });
+        return Array.from(seatMap.values());
+    };
+    const getNumberOfSeats = () => {
+        return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
+    };
+    const getSeatNames = () => {
+        const uniqueSeats = getUniqueSeats();
+        const sortedSeatTypes = getSortedSeatTypes();
+        if (removeDuplicateSeats) {
+            return uniqueSeats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+                ? isPeru
+                    ? CommonService.truncateSeatLabel(val.label)
+                    : val.label
+                : null)));
+        }
+        return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+            ? val.label
+            : null)));
+    };
+    const getSeatPrice = () => {
+        const sortedSeatTypes = getSortedSeatTypes();
+        const uniqueSeats = getUniqueSeats();
+        if (removeDuplicateSeats) {
+            return uniqueSeats.map((val, key) => (React.createElement("span", { key: key }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) <= 0
+                ? CommonService.currency(0, currencySign)
+                : CommonService.currency(val.price, currencySign))));
+        }
+        return sortedSeatTypes.map((val, key) => {
+            return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof val.price === "string"
+                ? (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) <= 0
+                    ? CommonService.currency(0, currencySign)
+                    : CommonService.currency(val.price, currencySign)
+                : typeof val.price === "number"
+                    ? (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) <= 0
+                        ? CommonService.currency(0, currencySign)
+                        : CommonService.currency(val.price, currencySign)
+                    : null));
+        });
+    };
+    const getFilteredSeats = (item) => {
+        return item;
+    };
     const checkMidnight = () => {
         var _a, _b;
-        setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
         if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
             (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
             ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -194,52 +269,45 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             });
             return;
         }
-        onBookButtonPress();
-    };
-    const countdownSeconds = 7830;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const h = Math.floor(totalSecs / 3600);
-            const m = Math.floor((totalSecs % 3600) / 60);
-            const s = totalSecs % 60;
-            return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = 0;
-                clearInterval(id);
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
+        else {
+            onBookButtonPress();
+        }
     };
+    const depTime = serviceItem.dep_time || "";
+    // Extract hours and minutes and check for AM/PM
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+    const [hour, minute] = timePart.split(":").map(Number);
+    // Convert to 24-hour format
+    let cleanedDepTime;
+    if (hasAM) {
+        cleanedDepTime =
+            hour === 12
+                ? `00:${minute < 10 ? "0" + minute : minute}`
+                : `${hour < 10 ? "0" + hour : hour}:${minute < 10 ? "0" + minute : minute}`;
+    }
+    else if (hasPM) {
+        cleanedDepTime =
+            hour === 12
+                ? `${hour}:${minute < 10 ? "0" + minute : minute}`
+                : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
+    }
+    else {
+        cleanedDepTime = timePart;
+    }
     const items = [
         {
-            key: "amenities",
-            width: "20%",
-            condition: true,
-            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
+            key: "rating",
+            width: "30%",
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",
-            width: "12%",
+            width: "20%",
             condition: serviceItem.duration,
             render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
         },
-        {
-            key: "directo",
-            width: "12%",
-            condition: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) === true,
-            render: (React.createElement(DirectoBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
-        },
         {
             key: "pet",
             width: "20%",
@@ -253,100 +321,116 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             condition: serviceItem.is_change_ticket === true,
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
+        {
+            key: "amenities",
+            width: "20%",
+            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
+        },
     ];
-    const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { 
-        // className={`relative ${
-        //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-        // } mt-[14px]`}
-        className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    const amenitiesItem = items.find((i) => i.key === "amenities");
+    const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "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]"
             : "mt-[20px]"}	` },
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative rounded-[10px] border border-[#ccc]" },
-            React.createElement("div", { 
-                //  className="p-[15px] pt-[20px]"
-                className: " pt-[20px]", style: {
-                    padding: coachKey
-                        ? "15px 15px 20px 15px"
-                        : "20px 15px 11px 15px",
-                } },
-                React.createElement("div", { 
-                    // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
-                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
-                    React.createElement("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            // gap: "5px",
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
+            React.createElement("div", { className: "p-[15px] pt-[20px]" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_30%_2.5%_30%_15.5%] gap-x-[2%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
+                    React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
+                        React.createElement("div", { className: " " },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
+                        isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
+                    React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
+                            gridTemplateRows: "1fr",
                         } },
-                        React.createElement("div", { 
-                            // className="flex items-center justify-center m-[auto]"
-                            className: "" },
-                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-auto w-[150px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
-                            isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
-                    React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
+                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+                            orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                                React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                            !isCiva &&
+                                (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
+                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+                            React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
+                            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
+                        React.createElement("div", { className: "flex flex-col gap-[6px] items-center" },
+                            React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
+                                React.createElement("div", null, "\u2022")),
+                            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
+                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+                            React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                                React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
+                                    cleanedDepTime,
+                                    " ",
+                                    React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : ""),
+                                    !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("AM")) &&
+                                        !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM")) &&
+                                        DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
+                            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                                React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
+                                    ? null
+                                    : serviceItem.arr_time
+                                        ? DateService.formatTime(serviceItem.arr_time)
+                                        : null))))),
                     React.createElement("div", { style: {
                             width: "1px",
                             height: "2.5rem",
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
+                        React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 || removeDuplicateSeats
+                                ? { alignItems: "center" }
+                                : {} },
+                            React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, getSeatNames()),
+                            React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
+                                    color: isSoldOut ? "#c0c0c0" : colors.priceColor,
+                                    top: 0,
+                                    bottom: 0,
+                                    left: "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
+                                    //  left: "68%",
+                                    right: 0,
+                                    justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
+                                        ? "center"
+                                        : "",
+                                    gap: "10px",
+                                } }, getSeatPrice()))),
                     React.createElement("div", null,
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
-                                position: "absolute",
-                                top: "8px",
-                                right: "16px",
-                            } }, (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] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
-                        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 }))),
-                React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
-                        setIsExpand(isItemExpanded ? null : serviceItem.id) }))),
-        React.createElement("div", { style: {
-                display: "grid",
-                gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
-                opacity: isItemExpanded ? 1 : 0,
-                transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
-                position: "relative",
-                zIndex: -1,
-            } },
-            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem }))),
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut
+                                ? "py-[12px]"
+                                : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
+                                backgroundColor: serviceDetailsLoading || isSoldOut
+                                    ? "lightgray"
+                                    : colors.kuposButtonColor,
+                                cursor: serviceDetailsLoading || isSoldOut
+                                    ? "not-allowed"
+                                    : "pointer",
+                            } },
+                            React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
+                                isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
+                                serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
+                showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (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] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
+                React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
+                    React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
+                            gridTemplateColumns: "40% 18% 23% 23%",
+                            // otherItems
+                            //   .map((i) => i.width)
+                            //   .join(" "),
+                        } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
+                    React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
         children,
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]", style: {
-                backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
+                backgroundColor: isSoldOut
+                    ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
+                    : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
-            React.createElement("div", { className: "flex  justify-between items-center w-full" },
-                React.createElement("div", { className: "flex items-center " },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
-                        React.createElement("div", { className: "flex items-center mt-[2px]" },
-                            React.createElement("span", { className: "bold-text ml-[6px]" },
-                                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                                "\u00A0"),
-                            " ",
-                            "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
-                                    fontVariantNumeric: "tabular-nums",
-                                    display: "inline-block",
-                                    // minWidth: "70px",
-                                } })))),
-                React.createElement("div", { className: "flex items-center" },
-                    renderIcon("personIcon", "16px"),
-                    "\u00A0",
-                    React.createElement("span", { className: "ml-[6px]" },
-                        React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
-                        " ",
-                        React.createElement("span", { className: "bold-text" }, "personas"),
-                        " ",
-                        React.createElement("span", null,
-                            " ",
-                            viewersConfig.label || " están viendo este viaje")))))),
+            React.createElement(LottiePlayer, { animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
+            React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
         React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
-            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`, style: {
+            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
                     backgroundColor: isSoldOut
                         ? "#ddd"
                         : colors.ratingBottomColor,
@@ -365,6 +449,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                     // animationData={getAnimationIcon(connectingServiceIcon)}
                     width: "14px", height: "14px" }),
                 React.createElement("div", null, "Conexión"))),
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
+                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                } },
+                React.createElement(LottiePlayer
+                // animationData={serviceItem.icons.directoAnim}
+                , { 
+                    // animationData={serviceItem.icons.directoAnim}
+                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
+                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
                 } },

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, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;