kupos-ui-components-lib 9.1.1 → 9.1.2

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -1,7 +1,9 @@
 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",
@@ -14,10 +16,37 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, 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]
         : "";
@@ -35,146 +64,6 @@ 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];
@@ -185,7 +74,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: 14, width: 14, 
+            return (React.createElement("img", { key: i, className: "amenity", height: 12, width: 12, 
                 // 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" }));
         });
@@ -205,140 +94,46 @@ 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: "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: " 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: "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] 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 ` },
+                        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" },
                                 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("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 })))))),
+                                    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);
+                    } })),
             (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,
@@ -347,9 +142,19 @@ 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("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: {
+                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: {
                         backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
                     } },
                     React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
@@ -360,16 +165,20 @@ 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", 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 })))));
 }
 export default ServiceItemMobile;

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

@@ -110,6 +110,9 @@ 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[];
@@ -118,6 +121,8 @@ 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,6 +115,9 @@ 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[];
@@ -190,7 +193,11 @@ 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;
 }