kupos-ui-components-lib 9.0.4 → 9.0.6

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 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",
@@ -18,6 +20,7 @@ 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]
         : "";
@@ -35,146 +38,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 +48,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 +68,52 @@ 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]"
             : "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(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: "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 ` },
-                                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" },
+                        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.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]" }, 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,
+                        });
+                    } })),
             (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,
@@ -348,28 +123,6 @@ 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 " },
-                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")))))));
+            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " }))));
 }
 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[];

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

package/dist/styles.css

@@ -3,6 +3,9 @@
 .pointer-events-none {
   pointer-events: none;
 }
+.visible {
+  visibility: visible;
+}
 .absolute {
   position: absolute;
 }
@@ -27,6 +30,9 @@
 .-top-\[14px\] {
   top: calc(14px * -1);
 }
+.-top-\[16px\] {
+  top: calc(16px * -1);
+}
 .top-\[2px\] {
   top: 2px;
 }
@@ -42,6 +48,9 @@
 .top-\[88\%\] {
   top: 88%;
 }
+.right-\[0\] {
+  right: 0;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -78,6 +87,9 @@
 .left-\[80px\] {
   left: 80px;
 }
+.-z-9 {
+  z-index: calc(9 * -1);
+}
 .-z-10 {
   z-index: calc(10 * -1);
 }
@@ -117,18 +129,27 @@
 .-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;
 }
@@ -171,9 +192,6 @@
 .mb-\[5px\] {
   margin-bottom: 5px;
 }
-.mb-\[8px\] {
-  margin-bottom: 8px;
-}
 .mb-\[10px\] {
   margin-bottom: 10px;
 }
@@ -201,6 +219,9 @@
 .ml-\[3px\] {
   margin-left: 3px;
 }
+.ml-\[4px\] {
+  margin-left: 4px;
+}
 .ml-\[5px\] {
   margin-left: 5px;
 }
@@ -297,6 +318,9 @@
 .w-\[50\%\] {
   width: 50%;
 }
+.w-\[55\%\] {
+  width: 55%;
+}
 .w-\[60\%\] {
   width: 60%;
 }
@@ -318,6 +342,9 @@
 .w-\[130px\] {
   width: 130px;
 }
+.w-\[150px\] {
+  width: 150px;
+}
 .w-\[188px\] {
   width: 188px;
 }
@@ -342,6 +369,13 @@
 .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;
 }
@@ -371,12 +405,15 @@
 .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;
 }
@@ -509,9 +546,6 @@
   --tw-border-style: none;
   border-style: none;
 }
-.border-\[\#E6E6E6\] {
-  border-color: #E6E6E6;
-}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -570,9 +604,6 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
-.p-\[12px\] {
-  padding: 12px;
-}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -588,6 +619,9 @@
 .px-\[14px\] {
   padding-inline: 14px;
 }
+.px-\[15px\] {
+  padding-inline: 15px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
@@ -600,6 +634,9 @@
 .py-\[6px\] {
   padding-block: 6px;
 }
+.py-\[10px\] {
+  padding-block: 10px;
+}
 .py-\[12px\] {
   padding-block: 12px;
 }
@@ -609,12 +646,18 @@
 .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;
 }
@@ -636,6 +679,12 @@
 .pb-\[10px\] {
   padding-bottom: 10px;
 }
+.pb-\[14px\] {
+  padding-bottom: 14px;
+}
+.pl-\[6px\] {
+  padding-left: 6px;
+}
 .pl-\[15px\] {
   padding-left: 15px;
 }
@@ -691,6 +740,9 @@
   overflow-wrap: normal;
   word-break: normal;
 }
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
 .whitespace-normal {
   white-space: normal;
 }
@@ -724,6 +776,9 @@
 .uppercase {
   text-transform: uppercase;
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .opacity-0 {
   opacity: 0%;
 }