kupos-ui-components-lib 1.0.0

package/dist/ServiceItemPb.js

@@ -0,0 +1,486 @@
+import React from "react";
+import LottiePlayer from "./assets/LottiePlayer";
+import DateService from "./utils/DateService";
+import ModalEventManager from "./utils/ModalEventManager";
+import InternationalServicePopupBody from "./components/InternationalServicePopupBody";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t = (key) => key, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const SvgAmenities = ({ moreAnemities, name, color, }) => {
+        const amenityKey = name.toLowerCase().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-[20px] h-[20px]" : "w-[16px] h-[16px]"}` }));
+    };
+    const getAmenitiesImage = (name) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        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;
+            }
+            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 "";
+            default:
+                return rawAmenity;
+        }
+    };
+    const currency = (amount) => {
+        const formattedAmount = amount
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return "$" + formattedAmount;
+    };
+    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 renderStages = (stageData) => {
+        if (typeof stageData === "string") {
+            return (React.createElement("div", { className: "flex flex-col space-y-1 text-justify gap-[4px]" }, stageData.split(",").map((stageInfo, index) => {
+                const parts = stageInfo.split("|");
+                const id = parts[0];
+                const time = parts[1];
+                const label = parts[3] || ""; // Skip empty part [2]
+                return (React.createElement("div", { key: index },
+                    label,
+                    " | ",
+                    time));
+            })));
+        }
+        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 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 = 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);
+        const premiumIndex = seatTypesWithPrices.findIndex((item) => item.label === "Premium");
+        if (premiumIndex >= 3) {
+            seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
+        }
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+        return seatTypesWithPrices;
+    };
+    const getNumberOfSeats = () => {
+        return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
+    };
+    const getSeatNames = () => {
+        const sortedSeatTypes = getSortedSeatTypes();
+        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();
+        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]" }, typeof val.price === "string"
+            ? currency(val.price)
+            : typeof val.price === "number"
+                ? currency(val.price)
+                : 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 || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip)
+            ? "mb-[60px]"
+            : "mb-[20px]"} ${(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-[30px]"
+            : "mt-[20px]"}	` },
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
+            React.createElement("div", { className: "p-[15px]" },
+                React.createElement("div", { className: "flex justify-between items-center mb-[15px]" },
+                    React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
+                        React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[120px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` }))),
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:minmax(0,1.4fr)_minmax(0,0.2fr)_minmax(0,1fr)_auto] gap-x-[7rem] min-[640px]:gap-x-[6rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem]" },
+                    React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[10px]" },
+                        React.createElement("div", { className: `flex items-center text-[13.33px] justify-between  ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
+                                    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" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
+                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute top-[29%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal 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 border-t-8 border-b-8 border-r-8 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]" }, renderStages(serviceItem.boarding_stages))))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900] relative" }, DateService.formatTime(serviceItem.dep_time))),
+                        React.createElement("div", { className: `flex items-center text-[13.33px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
+                                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
+                                serviceItem.dropoff_stages && (React.createElement("div", { className: `hidden group-hover:block absolute top-[46%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal 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 border-t-8 border-b-8 border-r-8 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]" }, renderStages(serviceItem.dropoff_stages))))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900]" }, DateService.formatTime(serviceItem.arr_time)))),
+                    React.createElement("div", { style: {
+                            width: "1px",
+                            height: "2.5rem",
+                            backgroundColor: "#ccc",
+                            margin: "auto",
+                        } }),
+                    React.createElement("div", { className: "content-center" },
+                        React.createElement("div", { className: `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", 
+                                // className={`flex flex-col ${
+                                //   getNumberOfSeats() < 3 ? "justify-between" : ""
+                                // }`}
+                                style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, getSeatPrice()))),
+                    React.createElement("div", null,
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[6px]" : "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" },
+                                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))))),
+                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!"))),
+                React.createElement("div", { 
+                    // className={`${
+                    //   serviceItem.is_change_ticket &&
+                    //   serviceItem.pet_seat_info &&
+                    //   serviceItem?.is_tracking_enabled &&
+                    //   Object.keys(serviceItem.pet_seat_info || {}).length > 0
+                    //     ? "grid grid-cols-[1.4fr_4.8fr] gap-[3.4rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
+                    //     : "grid grid-cols-[3.17fr_4.8fr] gap-[3rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
+                    // }`}
+                    className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}` },
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "flex items-center " },
+                            React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#c0c0c0" : "" } },
+                                React.createElement("div", { className: "flex items-center" },
+                                    React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
+                                        React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
+                                                const tooltip = e.currentTarget
+                                                    .nextElementSibling;
+                                                if (tooltip)
+                                                    tooltip.style.display = "block";
+                                            }, onMouseLeave: (e) => {
+                                                const tooltip = e.currentTarget
+                                                    .nextElementSibling;
+                                                if (tooltip)
+                                                    tooltip.style.display = "none";
+                                            } }),
+                                        React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden  rounded-[14px] border-[2px]", style: {
+                                                borderColor: colors.ratingBorderColor,
+                                                color: isSoldOut ? "#c0c0c0" : "",
+                                            } },
+                                            React.createElement("div", { className: "pt-[20px] text-center" },
+                                                React.createElement("div", { className: "text-[12px] bold-text text-[#464647]" }, "PUNTUACI\u00D3N"),
+                                                React.createElement("div", { className: "text-[12px] font-light text-[#464647]" }, serviceItem.operator_service_name)),
+                                            React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px]" }, [
+                                                { key: "1", label: "Calidad del bus" },
+                                                { key: "2", label: "Puntualidad" },
+                                                {
+                                                    key: "3",
+                                                    label: "Calidad del servicio",
+                                                },
+                                                {
+                                                    key: "4",
+                                                    label: "Recomendación del servicio",
+                                                },
+                                            ].map((rating, index, array) => {
+                                                const isLast = index === array.length - 1;
+                                                // Use operator_details[6] for rating values
+                                                const ratingData = serviceItem.operator_details[6] || {};
+                                                const value = (ratingData === null || ratingData === void 0 ? void 0 : ratingData[rating.key]) || 0;
+                                                return (React.createElement("div", { key: rating.key, className: `flex items-center ${isLast ? "mb-2" : ""}` },
+                                                    React.createElement("div", { className: "relative w-[3rem] h-[3rem]" },
+                                                        React.createElement("div", { className: "absolute inset-0 w-full h-full rounded-full" },
+                                                            React.createElement("div", { className: "w-full h-full rounded-full border-[2px] border-[lightgray]" })),
+                                                        React.createElement("div", { className: "absolute inset-0 w-full h-full" },
+                                                            React.createElement("svg", { className: "w-full h-full", viewBox: "0 0 100 100" },
+                                                                React.createElement("circle", { cx: "50", cy: "50", r: "48", fill: "none", strokeWidth: "4", stroke: value >= 4
+                                                                        ? "#00A650"
+                                                                        : colors.ratingBorderColor, strokeDasharray: value > 0
+                                                                        ? `${value * 75.4} 301.6`
+                                                                        : "150.8 301.6", strokeDashoffset: "75.4", transform: "rotate(-90, 50, 50)" }))),
+                                                        React.createElement("div", { className: "absolute inset-0 flex items-center justify-center top-[40%] left-[36%]" },
+                                                            React.createElement("span", { className: "text-[#464647] font-medium text-[12px] " }, value.toFixed(1)))),
+                                                    React.createElement("span", { className: "text-[#464647] text-[13.33px] ml-[10px]" }, rating.label)));
+                                            })),
+                                            React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45]", style: { backgroundColor: colors.ratingBottomColor } },
+                                                "Esta puntuaci\u00F3n se obtuvo de las opiniones de",
+                                                " ",
+                                                serviceItem.operator_details[5] || 0,
+                                                " usuarios."))),
+                                    React.createElement("span", { className: "text-[#464647] bold-text text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
+                                        ? serviceItem.operator_details[1].toFixed(1)
+                                        : serviceItem.operator_details[1])),
+                                React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]" }, serviceItem.operator_details[2])))),
+                    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-[230px] text-center break-normal shadow-service", 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" },
+                        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-[13.33px]", 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 } }),
+                                "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 z-10 mt-2.5 text-center shadow-service text-[13.33px]", 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,
+                                                } }),
+                                            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 items-center justify-center text-sm font-bold ml-[5px] group" },
+                                    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 } },
+            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-[17px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
+            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[20px] rounded-[38px] text-[13.33px]  z-20 ${isSoldOut ? "bg-[#ddd]" : ``}`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
+                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "20px", height: "20px" })),
+                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-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "20px", height: "20px" }),
+                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-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                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-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                React.createElement("div", null, "Tren Express"))))));
+}
+export default ServiceItemPB;

package/dist/ServivceItemPbMobile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MobileServiceItemProps } from "./mobileTypes";
+declare function ServiceItemPBMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, }: MobileServiceItemProps): React.ReactElement;
+export default ServiceItemPBMobile;