kupos-ui-components-lib 10.4.11 → 10.4.13

package/dist/components/ServiceItem/ServiceItemDesktopPeru.js

@@ -1,612 +0,0 @@
-import React from "react";
-import DateService from "../../utils/DateService";
-import CommonService from "../../utils/CommonService";
-import RatingHover from "./RatingHover";
-import ModalEventManager from "../../utils/ModalEventManager";
-import InternationalServicePopupBody from "../InternationalServicePopupBody";
-import LottiePlayer from "../../assets/LottiePlayer";
-const SEAT_EXCEPTIONS = ["Asiento mascota"];
-function ServiceItemDesktopPeru({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, originIconStyle, showAvailableSeats, isSeatIcon, isTurbus, t = (key) => key, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    console.log("🚀 ~ ServiceItemPB ~ isSeatIcon:", serviceItem);
-    const SvgAmenities = ({ moreAnemities, name, color, }) => {
-        var _a;
-        const amenityKey = (_a = name === null || name === void 0 ? void 0 : name.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "_");
-        const getIconPath = () => {
-            const amenityFileName = `${amenityKey}.png`;
-            const imagePath = getAmenitiesImage(amenityFileName);
-            if (!imagePath) {
-                return `/public/images/amenities/${amenityKey}.svg`;
-            }
-            return imagePath;
-        };
-        const iconPath = getIconPath();
-        return (React.createElement("img", { src: iconPath, alt: name, style: {
-                filter: color === "white" ? "brightness(0) invert(1)" : "",
-            }, className: `object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"}` }));
-    };
-    const getAmenitiesImage = (name) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-        switch (name) {
-            case "air_condtion.png": {
-                return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
-            }
-            case "baggage.png": {
-                return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
-            }
-            case "charging_plug.png": {
-                return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
-            }
-            case "coffee.png": {
-                return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
-            }
-            case "food_new_icon.png": {
-                return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
-            }
-            case "gaming.png": {
-                return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
-            }
-            case "handicap.png": {
-                return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
-            }
-            case "mobile_ticket.png": {
-                return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
-            }
-            case "movie.png": {
-                return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
-            }
-            case "restrooms.png": {
-                return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
-            }
-            case "snacks_new.png": {
-                return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
-            }
-            case "wifi.png": {
-                return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
-            }
-            case "cortina_divisoria.png": {
-                return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
-            }
-            case "frazada.png": {
-                return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
-            }
-            case "blanket.png": {
-                return (_q = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _q === void 0 ? void 0 : _q.blankketIcon;
-            }
-            case "cctv.png": {
-                return (_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _r === void 0 ? void 0 : _r.cctvIcon;
-            }
-            case "cup_holder.png": {
-                return (_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _s === void 0 ? void 0 : _s.cupHolderIcon;
-            }
-            case "emergency_contact.png": {
-                return (_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _t === void 0 ? void 0 : _t.emergencyContactIcon;
-            }
-            case "emergency_exit.png": {
-                return (_u = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _u === void 0 ? void 0 : _u.emergencyExitIcon;
-            }
-            case "fire_extinguisher.png": {
-                return (_v = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _v === void 0 ? void 0 : _v.fireExtinguisherIcon;
-            }
-            case "reading_light.png": {
-                return (_w = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _w === void 0 ? void 0 : _w.readingLIghtIcon;
-            }
-            case "seat_belt.png": {
-                return (_x = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _x === void 0 ? void 0 : _x.sercurityBeltIcon;
-            }
-            case "service_on_board.png": {
-                return (_y = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _y === void 0 ? void 0 : _y.serviceOnBoardIcon;
-            }
-            case "personal_tv.png": {
-                return (_z = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _z === void 0 ? void 0 : _z.personalTVIcon;
-            }
-            case "pet_admission.png": {
-                return (_0 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _0 === void 0 ? void 0 : _0.petAdmissionIcon;
-            }
-            case "music.png": {
-                return (_1 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _1 === void 0 ? void 0 : _1.musicIcon;
-            }
-            default: {
-                return "";
-            }
-        }
-    };
-    const getAmenityName = (rawAmenity) => {
-        switch (rawAmenity) {
-            case "mobile ticket":
-                return "Ticket móvil";
-            case "charging plug":
-                return "Cargador";
-            case "wifi":
-                return "WiFi";
-            case "movie":
-                return "Entretenimiento";
-            case "baggage":
-                return "Equipaje";
-            case "Restrooms":
-                return "Baños";
-            case "air condtion":
-                return "Aire acondicionado";
-            case "snacks new":
-                return "Snacks";
-            case "coffee":
-                return "Café";
-            case "cortina divisoria":
-                return "Cortina Divisoria";
-            case "frazada":
-                return "Frazada";
-            case "blanket":
-                return "Mantas";
-            case "cctv":
-                return "Cámara de seguridad";
-            case "cup holder":
-                return "Portavasos";
-            case "emergency contact":
-                return "Contacto de emergencia";
-            case "emergency exit":
-                return "Salida de emergencia";
-            case "fire extinguisher":
-                return "Extintor de incendio";
-            case "reading light":
-                return "Luz de lectura";
-            case "seat belt":
-                return "Cinturón de seguridad";
-            case "service on board":
-                return "Servicio a bordo";
-            case "personal tv":
-                return "TV personal";
-            case "pet admission":
-                return "Admisión de mascotas";
-            case "music":
-                return "Música";
-            default:
-                return rawAmenity;
-        }
-    };
-    const labelId = typeof serviceItem.boarding_stages === "string"
-        ? serviceItem.boarding_stages.split("|")[0]
-        : "";
-    const showTopLabel = "";
-    // busStage &&
-    // busStage[labelId] &&
-    // busStage[labelId].split("|")[1] === "true" &&
-    // busStage[labelId].split("|")[0];
-    const showTopLabelTurbus = busStage && busStage[labelId] && busStage[labelId][1]
-        ? busStage[labelId][0]
-        : null;
-    const hideBoardingTime = (serviceItemApiType) => {
-        var _a;
-        let exceptions = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.sibus_stage_api_types) !== null && _a !== void 0 ? _a : [];
-        let found = false;
-        if (exceptions && exceptions.length) {
-            found = exceptions.includes(serviceItemApiType);
-        }
-        return found;
-    };
-    const renderStages = (stageData, direction = 1, terminals = null, hideTime = false) => {
-        if (typeof stageData === "string") {
-            const arr = direction === 1 ? stageData.split(",") : stageData.split(",");
-            const formattedStages = [];
-            for (let i = 0; i < arr.length; i++) {
-                let terminal = arr[i].split("||")[1];
-                let locationName = terminals[arr[i].split("||")[0].split("|")[0]] || "";
-                let time = arr[i].split("||")[0].split("|")[1];
-                if (direction !== 1 && i > 0) {
-                }
-                else {
-                    formattedStages.push(`${locationName} ${time}`);
-                }
-            }
-            const extractTiming = (location) => {
-                const timingIndex = location.lastIndexOf(" ") + 1;
-                return location.substring(timingIndex);
-            };
-            const compareTimings = (locationA, locationB) => {
-                const timingA = extractTiming(locationA);
-                const timingB = extractTiming(locationB);
-                return timingA.localeCompare(timingB);
-            };
-            const sortedStages = hideTime
-                ? [...formattedStages].sort()
-                : [...formattedStages].sort(compareTimings);
-            return (React.createElement("div", { className: "flex flex-col space-y-3 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key, className: "font-normal", style: { fontWeight: 400 } }, hideTime
-                ? item === null || item === void 0 ? void 0 : item.split("|")[0]
-                : item
-                    .replace(/false/g, "")
-                    .replace("true", "")
-                    .replace("|", " |")
-                    .replace("||", " |"))))));
-        }
-        return null;
-    };
-    let isSoldOut = serviceItem.available_seats <= 0;
-    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}]`} 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 getSeatTypeIcon = (seatLabel) => {
-        var _a, _b, _c, _d;
-        // Default icons
-        if (seatLabel.includes("180°"))
-            return (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180Icon;
-        if (seatLabel.includes("160°"))
-            return (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160Icon;
-        if (seatLabel.includes("140°"))
-            return (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
-        return (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
-    };
-    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]" : ""}` },
-                isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(val.label), alt: val.label, className: "w-[18px] h-[18px] mr-[6px]" })),
-                typeof val.label === "string" || typeof val.label === "number"
-                    ? 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]" : ""}` },
-            isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(val.label), alt: val.label, className: "w-[18px] h-[18px] mr-[6px]" })),
-            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;
-        if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
-            (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
-            ((cityOrigin.label.toLowerCase().includes("argentina") &&
-                !cityDestination.label.toLowerCase().includes("argentina")) ||
-                (!cityOrigin.label.toLowerCase().includes("argentina") &&
-                    cityDestination.label.toLowerCase().includes("argentina")))) {
-            ModalEventManager.showPopup({
-                modalIcon: (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.warningIcon,
-                title: translation === null || translation === void 0 ? void 0 : translation.title,
-                showPrimaryButton: false,
-                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
-                onSecondaryButtonClick: () => {
-                    onBookButtonPress && onBookButtonPress();
-                },
-                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
-                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
-                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
-                secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
-                secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
-                children: React.createElement(InternationalServicePopupBody, null),
-            });
-            return;
-        }
-        if (serviceItem.dep_validation_text) {
-            ModalEventManager.showPopup({
-                body: serviceItem.dep_validation_text,
-                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
-                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
-                onPrimaryButtonClick: () => {
-                    onBookButtonPress && onBookButtonPress();
-                },
-                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
-                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
-                secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
-                secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
-            });
-            return;
-        }
-        if (serviceItem.operator_service_name === "Classe Reale " &&
-            cityOrigin.label.toLowerCase() === "santiago,chile" &&
-            cityDestination.label.toLowerCase() === "portillo,chile") {
-            ModalEventManager.showPopup({
-                modalIcon: (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.warningIcon,
-                title: translation === null || translation === void 0 ? void 0 : translation.title,
-                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
-                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
-                onPrimaryButtonClick: () => {
-                    onBookButtonPress && onBookButtonPress();
-                },
-                showSecondaryButton: false,
-                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
-                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
-                children: (React.createElement(React.Fragment, null,
-                    React.createElement("p", { className: "mt-[5px] text-justify" },
-                        translation.classeNormalText,
-                        React.createElement("span", { className: "bold-text" },
-                            "\u00A0",
-                            translation.classeBoldText),
-                        translation.classeNormalText1),
-                    React.createElement("p", { className: "mt-[10px] text-justify" },
-                        translation.classeNormalText2,
-                        "\u00A0",
-                        React.createElement("span", { className: "bold-text" },
-                            "\u00A0",
-                            translation.classeBoldText1),
-                        " ",
-                        translation.classeNormalText3))),
-            });
-            return;
-        }
-        else {
-            onBookButtonPressHandler();
-        }
-    };
-    const onBookButtonPressHandler = () => {
-        onBookButtonPress();
-    };
-    return (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-[14px]"}	` },
-        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%_32%_0.5%_24%_13.5%] gap-x-[4%] 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: isCiva ? "1fr" : "1fr 1fr",
-                            gridTemplateRows: "1fr",
-                            // gap: isCiva ? "0" : "10px 16px"
-                        } },
-                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
-                            orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center mr-[50px]" }, 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-[10px]" },
-                            React.createElement("div", { className: "h-[20px] flex items-center group relative" },
-                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date)),
-                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                 border-t-8 border-b-8 border-r-8 \n                 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
-                                    React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
-                            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
-                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
-                                serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                   border-t-8 border-b-8 border-r-8 \n                   border-t-transparent border-b-transparent", style: {
-                                            borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
-                                        } }),
-                                    React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))),
-                        React.createElement("div", { className: "flex flex-col gap-[10px] 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-[10px]" },
-                            React.createElement("div", { className: "h-[20px] flex items-center group relative" },
-                                React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time)),
-                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                 border-t-8 border-b-8 border-r-8 \n                 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
-                                    React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
-                            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
-                                React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
-                                    ? null
-                                    : serviceItem.arr_time
-                                        ? DateService.formatTime(serviceItem.arr_time)
-                                        : null),
-                                serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                   border-t-8 border-b-8 border-r-8 \n                   border-t-transparent border-b-transparent", style: {
-                                            borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
-                                        } }),
-                                    React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),
-                    React.createElement("div", { style: {
-                            width: "1px",
-                            height: "2.5rem",
-                            backgroundColor: "#ccc",
-                            margin: "auto",
-                        } }),
-                    React.createElement("div", { className: "content-center" },
-                        React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
-                            React.createElement("div", { className: "flex flex-col justify-between" }, 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: "68%",
-                                    right: 0,
-                                    justifyContent: getNumberOfSeats() < 2 ? "center" : "",
-                                } }, getSeatPrice()))),
-                    React.createElement("div", null,
-                        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 justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[10px]"}` },
-                    showAvailableSeats ? (React.createElement("div", { className: "text-[#464647] text-[13.33px]" }, serviceItem === null || serviceItem === void 0 ? void 0 :
-                        serviceItem.available_seats,
-                        " ",
-                        "Asientos restantes")) : (React.createElement("div", { className: "flex items-center " },
-                        React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
-                            showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
-                            React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
-                    serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
-                        React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
-                        React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
-                            serviceItem.duration,
-                            " ",
-                            translation.hours,
-                            React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
-                                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.tooltipColor } }),
-                                "Duraci\u00F3n estimada del viaje")))),
-                    serviceItem.pet_seat_info &&
-                        Object.keys(serviceItem.pet_seat_info).length > 0 ? (React.createElement("div", { className: "flex items-center text-[13.33px]" },
-                        React.createElement("div", { className: `relative group cursor-default ` },
-                            React.createElement("div", { className: "flex items-center" },
-                                React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
-                                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.petFriendlyAnim, width: "20px", height: "20px" })),
-                                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
-                                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly))),
-                            React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
-                                React.createElement("div", { className: "tooltip-arrow absolute text-[13.33px] -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
-                                "Este servicio incluye asientos para mascotas.")))) : null,
-                    serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center" },
-                        React.createElement("div", { className: "relative group cursor-default" },
-                            React.createElement("div", { className: "flex items-center" },
-                                React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
-                                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })),
-                                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
-                                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
-                            React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
-                                    backgroundColor: colors.tooltipColor,
-                                    lineHeight: "1.5",
-                                } },
-                                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
-                                "Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
-                                ") horas antes del viaje.")))),
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement("div", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
-                            React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
-                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.locationAnim, width: "20px", height: "20px" }))))),
-                        React.createElement("div", null, metaData && serviceItem.operator_details[4] && (React.createElement("div", { className: "flex items-center gap-[6px]" },
-                            (((_d = serviceItem.operator_details[3]) === null || _d === void 0 ? void 0 : _d.includes("18"))
-                                ? [...serviceItem.operator_details[4], "18"]
-                                : serviceItem.operator_details[4]).map((val, key) => {
-                                var _a, _b, _c, _d;
-                                return (key < 3 &&
-                                    ((_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER") ||
-                                    val === "18" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
-                                    React.createElement("div", { className: "group" },
-                                        React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
-                                            React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
-                                        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]", style: {
-                                                backgroundColor: colors.tooltipColor,
-                                                zIndex: 21,
-                                            } },
-                                            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
-                                                    borderBottomColor: colors.tooltipColor,
-                                                } }),
-                                            getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
-                            }),
-                            ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
-                                React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold  group", style: { alignItems: "flex-end", marginTop: "3px" } },
-                                    React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
-                                            "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
-                                    React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
-                                        React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: { backgroundColor: colors.tooltipColor } },
-                                            metaData &&
-                                                ((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
-                                                    var _a, _b, _c, _d, _e, _f, _g;
-                                                    const exceptions = [
-                                                        1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
-                                                    ];
-                                                    return exceptions.includes(key) ? null : key >= 3 &&
-                                                        ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] whitespace-nowrap text-[13.33px]" },
-                                                        React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
-                                                            React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
-                                                        React.createElement("span", { className: "text-white text-xs" }, getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
-                                                })),
-                                            React.createElement("div", { className: "tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent ", style: {
-                                                    borderRightColor: colors.tooltipColor,
-                                                } }))))))))))))),
-        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: 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(LottiePlayer, { animationData: serviceItem.icons.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-20`, style: {
-                    backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
-                } },
-                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "14px", height: "14px" })),
-                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (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.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, 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,
-                } },
-                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "14px", height: "14px" }),
-                React.createElement("div", null, "Tren Express"))))));
-}
-export default ServiceItemDesktopPeru;