kupos-ui-components-lib 9.0.6 → 9.0.7

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -1,9 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
+import DateService from "../../utils/DateService";
 import commonService from "../../utils/CommonService";
-import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
-import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
-import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -20,7 +18,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     var _a, _b, _c;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
     let isSoldOut = serviceItem.available_seats <= 0;
-    const showPromo = Math.random() > 0.5;
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -38,6 +35,146 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             return "";
         }
     };
+    const seatTypes = () => {
+        var _a, _b, _c, _d;
+        let seatTypes = (_d = (_c = (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare) // Add this line to sort by fare
+        ) === null || _c === void 0 ? void 0 : _c.slice(0, 2)) === null || _d === void 0 ? void 0 : _d.map((type, i) => {
+            var _a;
+            return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
+                    ? "w-[100%] flex flex-row justify-between "
+                    : "w-[100%] flex flex-row justify-between items-center", key: i },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] ", style: {
+                        // marginLeft: "10px",
+                        color: isSoldOut ? "#bbb" : "#464647",
+                    } }, type.label),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]  bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, commonService.currency(type.fare, currencySign))));
+        });
+        return seatTypes;
+    };
+    const seatTypesWithRemoveDuplicateSeats = () => {
+        var _a, _b;
+        const seatMap = new Map();
+        (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
+            if (exceptions.includes(item.key))
+                return;
+            const existing = seatMap.get(item.label);
+            if (!existing ||
+                parseFloat(item.fare) < parseFloat(existing.fare)) {
+                seatMap.set(item.label, item);
+            }
+        });
+        const uniqueSeats = Array.from(seatMap.values())
+            .sort((a, b) => a.fare - b.fare)
+            .slice(0, 3);
+        return uniqueSeats.map((type, i) => {
+            var _a;
+            return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
+                    ? "w-[100%] flex flex-row justify-between "
+                    : "w-[100%] flex flex-row justify-between items-center", key: i },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] ", style: {
+                        // marginLeft: "10px",
+                        color: isSoldOut ? "#bbb" : "#464647",
+                    } }, commonService.truncateSeatLabel(type.label)),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[11px]  bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) <= 0 && !isPeru
+                    ? commonService.currency(0, currencySign)
+                    : commonService.currency(type.fare, currencySign))));
+        });
+    };
+    const getFilteredSeats = (item) => {
+        return item;
+    };
+    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, _2, _3;
+        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;
+            }
+            case "headset.png": {
+                return (_2 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _2 === void 0 ? void 0 : _2.headPhoneIcon;
+            }
+            case "allows_cancellation.png": {
+                return (_3 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _3 === void 0 ? void 0 : _3.allowCancellationIcon;
+            }
+            default: {
+                return "";
+            }
+        }
+    };
     const amenities = () => {
         var _a;
         const raw = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[3];
@@ -48,7 +185,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 : [];
         const nodes = list.slice(0, 2).map((am, i) => {
             var _a;
-            return (React.createElement("img", { key: i, className: "amenity", height: 12, width: 12, 
+            return (React.createElement("img", { key: i, className: "amenity", height: 14, width: 14, 
                 // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
                 src: commonService.getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), serviceItem), alt: "icon" }));
         });
@@ -68,52 +205,140 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
+    const depTime = serviceItem.dep_time || "";
+    // Extract hours and minutes and check for AM/PM
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+    const [hour, minute] = timePart.split(":").map(Number);
+    // Convert to 24-hour format
+    let cleanedDepTime;
+    if (hasAM) {
+        cleanedDepTime =
+            hour === 12
+                ? `00:${minute < 10 ? "0" + minute : minute}`
+                : `${hour < 10 ? "0" + hour : hour}:${minute < 10 ? "0" + minute : minute}`;
+    }
+    else if (hasPM) {
+        cleanedDepTime =
+            hour === 12
+                ? `${hour}:${minute < 10 ? "0" + minute : minute}`
+                : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
+    }
+    else {
+        cleanedDepTime = timePart;
+    }
     return (React.createElement("div", { className: `relative  ${serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
-            ? "mt-[10px]"
+            ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement(TopAmenitieMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, seatPriceColor: colors.seatPriceColor, bombAnim: serviceItem.icons.bombAnim, priorityStageAnim: serviceItem.icons.priorityStageAnim }),
-        React.createElement("div", { className: " rounded-[20px]", style: {
-                backgroundColor: "#fff",
-                zIndex: 1,
-                // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "14px 0 14px 14px",
-                border: `1px solid ${colors.bottomStripColor}`,
-            } },
-            React.createElement("div", { 
-                // className={` ${
-                //   serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-                //   showTopLabel ||
-                //   serviceItem?.is_direct_trip ||
-                //   serviceItem?.is_transpordo
-                //     ? "mt-[10px]"
-                //     : ""
-                // }`}
-                style: { padding: "12px 12px 8px 12px" } },
-                React.createElement("div", { className: "flex justify-between  items-center mb-[10px]" },
-                    React.createElement("div", { className: "flex items-center  justify-between" },
+        React.createElement("div", { className: "border border-[#E6E6E6] rounded-[20px]", style: { backgroundColor: "#fff", zIndex: 1 } },
+            React.createElement("div", { className: `p-[12px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+                    showTopLabel ||
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo)
+                    ? "mt-[10px]"
+                    : ""}` },
+                React.createElement("div", { className: "flex justify-between  mb-[8px]" },
+                    React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
                         React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
-                        isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px]  items-center" },
-                            React.createElement("div", { className: "flex items-center" },
+                        isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] bold-text items-center" },
+                            React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
+                            React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem)))) : null),
+                    showLastSeats ? (React.createElement("div", { className: "flex justify-end  -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("span", { className: "text-[12px] text-[red] mt-1  flex justify-end pt-[5px] pb-[5px] pl-[15px] pr-[15px] rounded-[8px] ", style: {
+                            backgroundColor: colors.lastSeatBg,
+                            color: colors.lastSeatText,
+                        } }, "\u00A1 \u00DAltimos Asientos!")))) : null),
+                React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
+                    React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
+                        React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between   ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
+                                React.createElement("div", null,
+                                    " ",
+                                    orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
+                                        React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
+                                React.createElement("div", { className: "flex items-center relative capitalize  justify-between ", style: { flex: 1 } },
+                                    React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
+                                    React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
+                                    React.createElement("div", { className: "font-[900] relative black-text" }, isLinatal ? (React.createElement("div", null,
+                                        React.createElement("span", null,
+                                            " ",
+                                            cleanedDepTime,
+                                            " ",
+                                            React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : "")),
+                                        React.createElement("span", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("AM")) ||
+                                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM"))
+                                            ? null
+                                            : DateService.ampmOnly(serviceItem.dep_time)))) : (DateService.formatTime(serviceItem.dep_time)))))),
+                        isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between  ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
+                                React.createElement("div", null,
+                                    " ",
+                                    destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
+                                        React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, alt: "destination", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
+                                React.createElement("div", { className: "flex items-center relative capitalize  justify-between ", style: { flex: 1 } },
+                                    React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
+                                    React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
+                                    React.createElement("div", { className: "font-[900] relative black-text" }, DateService.formatTime(serviceItem.arr_time))))))),
+                    React.createElement("div", { style: {
+                            width: "1px",
+                            height: "2.5rem",
+                            backgroundColor: "#ccc",
+                            margin: "auto",
+                        } }),
+                    React.createElement("div", { className: "content-center", style: {
+                            width: isPeru ? "40%" : "40%",
+                        } },
+                        React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
+                                gap: isSoldOut ? "0px" : "5px",
+                                justifyContent: ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.length) > 2
+                                    ? "space-between"
+                                    : "center",
+                            } },
+                            removeDuplicateSeats
+                                ? seatTypesWithRemoveDuplicateSeats()
+                                : seatTypes(),
+                            isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
+                                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))),
+                React.createElement("div", { className: "bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]" }),
+                React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "flex items-center " },
+                            React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                                React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] bold-text" }, serviceItem.operator_details[2])))),
+                    React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                        React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
+                        "\u00A0",
+                        React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
+                            serviceItem.duration,
+                            "hrs")),
+                    React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenities()),
+                    (serviceItem.is_change_ticket || isPetSeat) && (React.createElement("div", { onClick: () => {
+                            setShowDropdown(!showDropdown);
+                            setAmenetiesAtomValue({
+                                service: serviceItem,
+                                showTopLabel: showTopLabel,
+                            });
+                        }, className: "flex items-center" },
+                        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" })))))) : 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("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
-                                    React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
-                                React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
-                                    React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px]" }, serviceItem.operator_details[2]))))) : null),
-                    showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (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-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
-                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, destinationIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats }),
-                React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownToggle: () => {
-                        setShowDropdown(!showDropdown);
-                        setAmenetiesAtomValue({
-                            service: serviceItem,
-                            showTopLabel: showTopLabel,
-                        });
-                    } })),
+                                    React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })))))),
+                        (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] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.locationAnim, width: "20px", height: "20px" })))),
+                        (serviceItem.is_change_ticket || isPetSeat) && (React.createElement("img", { src: serviceItem.icons.plus, alt: "icon", width: 11 })))))),
             (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-[35px] pt-[50px] z-10 rounded-b-[14px] min-[420]:text-[14px] text-[12px]`, style: {
                     backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                     zIndex: -1,
@@ -123,6 +348,28 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 } },
                 React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
                 React.createElement("span", { className: "ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " }))));
+            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
+                showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `, style: {
+                        backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
+                    } },
+                    React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
+                    React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+                isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
+                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                    } },
+                    renderIcon("airportIcon", "14px"),
+                    React.createElement("div", null, "Conexi\u00F3n"))),
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20  `, style: {
+                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipBgColor,
+                        color: isSoldOut ? "#bbb" : colors.directoColor,
+                    } },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
+                    React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
+                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                    } },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                    React.createElement("div", null, "Tren Express")))))));
 }
 export default ServiceItemMobile;

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

@@ -110,9 +110,6 @@ export interface MobileServiceItemProps {
             seatFallBackIcon: string;
             headPhoneIcon?: string;
             allowCancellationIcon?: string;
-            bombAnim?: string;
-            whiteBoardingIcon?: string;
-            downArrow?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

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

@@ -115,9 +115,6 @@ export interface ServiceItemProps {
             seatFallBackIcon: string;
             headPhoneIcon?: string;
             allowCancellationIcon?: string;
-            whiteBoardingIcon?: string;
-            bombJson?: string;
-            downArrow?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
@@ -193,11 +190,7 @@ export interface ServiceItemProps {
     petFriendlyAnim?: string;
     priorityStageAnim?: string;
     promoAnim?: string;
-    bombAnimation?: string;
     isPeru?: boolean;
     siteType?: "kupos" | "pullman" | "opsites" | "linatal";
     isAllinBus?: boolean;
-    isExpand?: any;
-    setIsExpand?: (value: any) => void;
-    coachKey?: number;
 }

package/dist/styles.css

@@ -30,9 +30,6 @@
 .-top-\[14px\] {
   top: calc(14px * -1);
 }
-.-top-\[16px\] {
-  top: calc(16px * -1);
-}
 .top-\[2px\] {
   top: 2px;
 }
@@ -48,9 +45,6 @@
 .top-\[88\%\] {
   top: 88%;
 }
-.right-\[0\] {
-  right: 0;
-}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -87,9 +81,6 @@
 .left-\[80px\] {
   left: 80px;
 }
-.-z-9 {
-  z-index: calc(9 * -1);
-}
 .-z-10 {
   z-index: calc(10 * -1);
 }
@@ -129,27 +120,18 @@
 .-mt-\[5px\] {
   margin-top: calc(5px * -1);
 }
-.-mt-\[16px\] {
-  margin-top: calc(16px * -1);
-}
 .mt-\[2px\] {
   margin-top: 2px;
 }
 .mt-\[5px\] {
   margin-top: 5px;
 }
-.mt-\[6px\] {
-  margin-top: 6px;
-}
 .mt-\[10px\] {
   margin-top: 10px;
 }
 .mt-\[13px\] {
   margin-top: 13px;
 }
-.mt-\[14px\] {
-  margin-top: 14px;
-}
 .mt-\[15px\] {
   margin-top: 15px;
 }
@@ -192,6 +174,9 @@
 .mb-\[5px\] {
   margin-bottom: 5px;
 }
+.mb-\[8px\] {
+  margin-bottom: 8px;
+}
 .mb-\[10px\] {
   margin-bottom: 10px;
 }
@@ -219,9 +204,6 @@
 .ml-\[3px\] {
   margin-left: 3px;
 }
-.ml-\[4px\] {
-  margin-left: 4px;
-}
 .ml-\[5px\] {
   margin-left: 5px;
 }
@@ -318,9 +300,6 @@
 .w-\[50\%\] {
   width: 50%;
 }
-.w-\[55\%\] {
-  width: 55%;
-}
 .w-\[60\%\] {
   width: 60%;
 }
@@ -342,9 +321,6 @@
 .w-\[130px\] {
   width: 130px;
 }
-.w-\[150px\] {
-  width: 150px;
-}
 .w-\[188px\] {
   width: 188px;
 }
@@ -357,8 +333,8 @@
 .w-\[260px\] {
   width: 260px;
 }
-.w-\[280px\] {
-  width: 280px;
+.w-\[320px\] {
+  width: 320px;
 }
 .w-\[auto\] {
   width: auto;
@@ -369,13 +345,6 @@
 .w-full {
   width: 100%;
 }
-.w-max {
-  width: -moz-max-content;
-  width: max-content;
-}
-.max-w-\[120px\] {
-  max-width: 120px;
-}
 .max-w-\[165px\] {
   max-width: 165px;
 }
@@ -405,15 +374,12 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.\[grid-template-columns\:14\%_30\%_2\.5\%_30\%_15\.5\%\] {
+  grid-template-columns: 14% 30% 2.5% 30% 15.5%;
+}
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
-.\[grid-template-columns\:18\%_28\%_2\.5\%_28\%_15\.5\%\] {
-  grid-template-columns: 18% 28% 2.5% 28% 15.5%;
-}
-.\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
-  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
-}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
@@ -546,6 +512,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\[\#E6E6E6\] {
+  border-color: #E6E6E6;
+}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -604,6 +573,9 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
+.p-\[12px\] {
+  padding: 12px;
+}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -619,9 +591,6 @@
 .px-\[14px\] {
   padding-inline: 14px;
 }
-.px-\[15px\] {
-  padding-inline: 15px;
-}
 .px-\[20px\] {
   padding-inline: 20px;
 }
@@ -634,9 +603,6 @@
 .py-\[6px\] {
   padding-block: 6px;
 }
-.py-\[10px\] {
-  padding-block: 10px;
-}
 .py-\[12px\] {
   padding-block: 12px;
 }
@@ -646,18 +612,12 @@
 .pt-\[5px\] {
   padding-top: 5px;
 }
-.pt-\[6px\] {
-  padding-top: 6px;
-}
 .pt-\[10px\] {
   padding-top: 10px;
 }
 .pt-\[20px\] {
   padding-top: 20px;
 }
-.pt-\[26px\] {
-  padding-top: 26px;
-}
 .pt-\[35px\] {
   padding-top: 35px;
 }
@@ -679,12 +639,6 @@
 .pb-\[10px\] {
   padding-bottom: 10px;
 }
-.pb-\[14px\] {
-  padding-bottom: 14px;
-}
-.pl-\[6px\] {
-  padding-left: 6px;
-}
 .pl-\[15px\] {
   padding-left: 15px;
 }
@@ -736,13 +690,13 @@
   --tw-font-weight: 900;
   font-weight: 900;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
 .break-normal {
   overflow-wrap: normal;
   word-break: normal;
 }
-.text-ellipsis {
-  text-overflow: ellipsis;
-}
 .whitespace-normal {
   white-space: normal;
 }
@@ -776,9 +730,6 @@
 .uppercase {
   text-transform: uppercase;
 }
-.line-through {
-  text-decoration-line: line-through;
-}
 .opacity-0 {
   opacity: 0%;
 }