kupos-ui-components-lib 9.1.2 → 9.1.4

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 BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
-import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
-import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -16,37 +14,10 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
     var _a, _b, _c;
-    const isItemExpanded = serviceItem.id === isExpanded;
     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 countdownSeconds = 7830;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const h = Math.floor(totalSecs / 3600);
-            const m = Math.floor((totalSecs % 3600) / 60);
-            const s = totalSecs % 60;
-            return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = 0;
-                clearInterval(id);
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -64,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];
@@ -74,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" }));
         });
@@ -94,46 +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-[20px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement("div", { className: " rounded-[20px]", style: {
-                backgroundColor: "#fff",
-                zIndex: 1,
-                // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "12px",
-                border: "1px solid #ccc",
-            } },
-            React.createElement("div", { 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("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] text-ellipsis" }, 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: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), 
-                    // onDropdownToggle={() => {
-                    //   setShowDropdown(!showDropdown);
-                    //   setAmenetiesAtomValue({
-                    //     service: serviceItem,
-                    //     showTopLabel: showTopLabel,
-                    //   });
-                    // }}
-                    onDropdownToggle: () => {
-                        setIsExpanded(isItemExpanded ? null : serviceItem.id);
-                    } })),
+                                    React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.petFriendlyAnim, width: "20px", height: "20px" })))))) : null,
+                        serviceItem.is_change_ticket === true && (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" })))))),
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) === true && (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,
@@ -142,19 +347,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     opacity: isSoldOut ? 0.5 : 1,
                 } },
                 React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
-                React.createElement("div", { className: " flex items-center mt-[2px]" },
-                    React.createElement("span", { className: "ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]" },
-                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                        "\u00A0"),
-                    " ",
-                    "| Termina en\u00A0",
-                    React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
-                            fontVariantNumeric: "tabular-nums",
-                            display: "inline-block",
-                            // minWidth: "70px",
-                        } })))),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
-                showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `, style: {
+                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 " },
+                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" : "" },
@@ -165,20 +360,16 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     } },
                     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"))))),
-        React.createElement("div", { style: {
-                display: "grid",
-                gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
-                opacity: isItemExpanded ? 1 : 0,
-                transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
-                position: "relative",
-                zIndex: -1,
-            } },
-            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
+                    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[];
@@ -121,8 +118,6 @@ export interface MobileServiceItemProps {
     terminals?: any[];
     showDropdown?: boolean;
     setShowDropdown?: (value: boolean) => void;
-    isExpanded?: string | null;
-    setIsExpanded?: (value: string | null) => void;
     setAmenetiesAtomValue?: (value: {
         service: MobileServiceItemProps["serviceItem"];
         showTopLabel: string | boolean;

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;
 }