npm - kupos-ui-components-lib - Versions diffs - 9.7.8 → 9.7.10 - Mend

kupos-ui-components-lib 9.7.8 → 9.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/KuposUIComponent.d.ts +3 -0
package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
package/dist/components/ServiceItem/PeruServiceItemDesktop.js +134 -188
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
package/dist/components/ServiceItem/ServiceItemDesktop.js +16 -2
package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
package/dist/components/ServiceItem/ServiceItemMobile.js +16 -7
package/dist/components/ServiceItem/mobileTypes.d.ts +32 -0
package/dist/components/ServiceItem/types.d.ts +22 -0
package/dist/styles.css +221 -0
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +13 -11
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +9 -9
package/dist/utils/CommonService.js +11 -1
package/package.json +1 -1
package/src/KuposUIComponent.tsx +3 -0
package/src/assets/images/anims/service_list/thunder_icon.json +1 -0
package/src/assets/images/anims/service_list/users_anim.json +1 -0
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +254 -345
package/src/components/ServiceItem/ServiceItemDesktop.tsx +50 -5
package/src/components/ServiceItem/ServiceItemMobile.tsx +340 -286
package/src/components/ServiceItem/mobileTypes.ts +29 -1
package/src/components/ServiceItem/types.ts +23 -1
package/src/styles.css +15 -0
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +525 -0
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +555 -0
package/src/utils/CommonService.ts +13 -1

package/dist/KuposUIComponent.d.ts CHANGED Viewed

@@ -15,6 +15,9 @@ interface KuposUIComponentProps {
     orignLabel?: string;
     destinationLabel?: string;
     t?: (key: string) => string;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: any) => void;
+    onDecreaseTicketQuantity?: (serviceItem: any) => void;
     id?: string;
     name?: string;
     description?: string;

package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t, }: ServiceItemProps & {
+declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default PeruServiceItemDesktop;

package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED Viewed

@@ -14,65 +14,73 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
 import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
 import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
 import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
+import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
 import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
 import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
-import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
-import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
+import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
+import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
+import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
+import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
+import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
+import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
 import StageTooltip from "../../ui/StagesTooltip";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
-import SeatSection from "../../ui/SeatSection/SeatSection";
-import KuposButton from "../../ui/KuposButton/KuposButton";
-import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
-const ANIMATION_MAP = {
-    promoAnim: {
-        kupos: promoAnimation,
-    },
-    locationAnim: {
-        kupos: locationAnimation,
-        pullman: pullmanLocationAnimation,
-        opsites: opsitesLocationAnimation,
-    },
-    directoAnim: {
-        kupos: directoAnimation,
-    },
-    petFriendlyAnim: {
-        kupos: petFriendlyAnimation,
-        pullman: pullmanPetFriendlyAnimation,
-        opsites: opsitesPetFriendlyAnimation,
-    },
-    priorityStageAnim: {
-        kupos: priorityStageAnimation,
-        pullman: pullmanPriorityStageAnimation,
-        opsites: opsitesPriorityStageAnimation,
-    },
-    flexibleIcon: {
-        kupos: flexibleAnimation,
-        pullman: pullmanFlexibleAnimation,
-        opsites: opsitesFlexibleAnimation,
-    },
-    bombAnimation: {
-        kupos: bombAnimation,
-    },
-    dotAnimation: {
-        kupos: dotAnimation,
-        opsites: dotAnimation,
-    },
-};
-function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t = (key) => key, }) {
-    var _a, _b, _c, _d, _e;
+function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t = (key) => key, }) {
+    var _a, _b, _c, _d;
+    const animationMap = {
+        promoAnim: {
+            kupos: promoAnimation,
+            pullman: pullmanPromoAnimation,
+            opsites: opsitesPromoAnimation,
+            linatal: linatalPromoAnimation,
+        },
+        locationAnim: {
+            kupos: locationAnimation,
+            pullman: pullmanLocationAnimation,
+            opsites: opsitesLocationAnimation,
+            linatal: linatalLocationAnimation,
+        },
+        directoAnim: {
+            kupos: directoAnimation,
+            pullman: pullmanDirectoAnimation,
+            opsites: opsitesDirectoAnimation,
+            linatal: linatalDirectoAnimation,
+        },
+        petFriendlyAnim: {
+            kupos: petFriendlyAnimation,
+            pullman: pullmanPetFriendlyAnimation,
+            opsites: opsitesPetFriendlyAnimation,
+            linatal: linatalPetFriendlyAnimation,
+        },
+        priorityStageAnim: {
+            kupos: priorityStageAnimation,
+            pullman: pullmanPriorityStageAnimation,
+            opsites: opsitesPriorityStageAnimation,
+            linatal: linatalPriorityStageAnimation,
+        },
+        flexibleIcon: {
+            kupos: flexibleAnimation,
+            pullman: pullmanFlexibleAnimation,
+            opsites: opsitesFlexibleAnimation,
+            linatal: linatalFlexibleAnimation,
+        },
+    };
     const getAnimationIcon = (icon) => {
-        var _a;
-        const animation = ANIMATION_MAP[icon];
+        const animation = animationMap[icon];
         if (!animation)
             return null;
-        return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
+        const currentSiteType = siteType || "kupos";
+        return animation[currentSiteType];
     };
     const SvgAmenities = ({ moreAnemities, name, color, }) => {
         var _a;
@@ -216,7 +224,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
     };
     const checkMidnight = () => {
         var _a, _b;
-        setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
         if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
             (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
             ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -305,55 +312,18 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
     const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
         ? extractStage(serviceItem.stage_details_arr, 1)
         : null;
-    const countdownSeconds = 599;
-    const startCountdown = (node) => {
-        if (!node)
-            return;
-        const prevId = node.dataset.countdownId;
-        if (prevId)
-            clearInterval(Number(prevId));
-        let remaining = countdownSeconds;
-        const formatTime = (totalSecs) => {
-            const m = Math.floor(totalSecs / 60);
-            const s = totalSecs % 60;
-            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        };
-        node.textContent = formatTime(remaining);
-        const id = setInterval(() => {
-            remaining -= 1;
-            if (remaining <= 0) {
-                remaining = countdownSeconds;
-            }
-            node.textContent = formatTime(remaining);
-        }, 1000);
-        node.dataset.countdownId = String(id);
-    };
     const items = [
         {
-            key: "amenities",
-            width: "20%",
-            condition: true,
-            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
+            key: "rating",
+            width: "30%",
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",
-            width: "12%",
+            width: "20%",
             condition: serviceItem.duration,
             render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
         },
-        // {
-        //   key: "directo",
-        //   width: "12%",
-        //   condition: serviceItem?.is_direct_trip === true,
-        //   render: (
-        //     <DirectoBlock
-        //       translation={translation}
-        //       getAnimationIcon={getAnimationIcon}
-        //       colors={colors}
-        //       isSoldOut={isSoldOut}
-        //     />
-        //   ),
-        // },
         {
             key: "pet",
             width: "20%",
@@ -364,82 +334,48 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "flexible",
             width: "20%",
-            condition: serviceItem.is_change_ticket === true,
+            condition: false,
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
+        {
+            key: "amenities",
+            width: "20%",
+            render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
+        },
     ];
-    const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
-    const grayscaleClass = isSoldOut ? "grayscale" : "";
-    const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
-    const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
-    const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
-    const serviceCardStyle = hasOfferText
-        ? {
-            borderColor: "transparent",
-            borderStyle: "solid",
-            borderWidth: "3px 3px 0 3px",
-            borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
-            background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
-            // zIndex: 1,
-        }
-        : {};
-    const seats = removeDuplicateSeats
-        ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
-        : serviceItem.seat_types || [];
-    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
-    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
-    return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    const amenitiesItem = items.find((i) => i.key === "amenities");
+    const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
+    return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText && !isSoldOut
-                ? "z-[3] rounded-[18px]"
-                : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
-            React.createElement("div", { className: " pt-[20px]", style: {
-                    padding: hasOfferText
-                        ? "20px 15px 10px 15px"
-                        : coachKey
-                            ? "20px 15px 20px 15px"
-                            : "20px 15px 10px 15px",
-                    marginTop: hasDiscount || hasOfferText ? "14px" : "",
-                } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center",
-                    // style={{ marginTop: showTopLabel ? "8px" : "" }}
-                    style: {
-                        marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
-                    } },
-                    React.createElement("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            // gap: "5px",
-                        } },
-                        React.createElement("div", {
-                            // className="flex items-center justify-center m-[auto]"
-                            className: "" },
-                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
-                            isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
+            React.createElement("div", { className: "p-[15px] pt-[20px]" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
+                    React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
+                        React.createElement("div", { className: " " },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
+                        isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
                     React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
                             gridTemplateRows: "1fr",
                         } },
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
                             !isCiva &&
                                 (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                    React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                                    React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
                             !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
                             React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
                                 React.createElement("div", null, "\u2022")),
                             !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
-                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[10px]" },
                             React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
                                 React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
                             !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
@@ -455,53 +391,63 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                             margin: "auto",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
-                    React.createElement("div", { className: "relative" },
-                        React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
-                        showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
-                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px]  mt-1 text-center", style: {
-                                color: colors.seatPriceColor,
-                            } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
-                React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
+                        React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2
+                                ? { alignItems: "center" }
+                                : { alignItems: "center" } },
+                            React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
+                            React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
+                                    color: isSoldOut ? "#c0c0c0" : colors.priceColor,
+                                    top: 0,
+                                    bottom: 0,
+                                    left: "68%",
+                                    right: 0,
+                                    justifyContent: getNumberOfSeats() < 2 ? "center" : "center",
+                                    gap: "5px",
+                                } },
+                                React.createElement("span", { style: {
+                                        position: "absolute",
+                                        top: getNumberOfSeats() > 1 ? -10 : -5,
+                                        fontWeight: "initial",
+                                        fontSize: "12px",
+                                        left: 0,
+                                        color: "#6a6a6a",
+                                    } }, "Desde"),
+                                getSeatPrice()))),
+                    React.createElement("div", null,
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
+                                backgroundColor: serviceDetailsLoading || isSoldOut
+                                    ? "lightgray"
+                                    : colors.kuposButtonColor,
+                                cursor: serviceDetailsLoading || isSoldOut
+                                    ? "not-allowed"
+                                    : "pointer",
+                            } },
+                            React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
+                                isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
+                                serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
+                showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
+                React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
+                    React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
+                            gridTemplateColumns: "30% 18% 23% 23%",
+                            // otherItems
+                            //   .map((i) => i.width)
+                            //   .join(" "),
+                        } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
+                    React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
         children,
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]", style: {
-                background: offerGradient,
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
+                backgroundColor: isSoldOut
+                    ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
+                    : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
             } },
-            React.createElement("div", { className: "flex  justify-between items-center w-full" },
-                React.createElement("div", { className: "flex items-center " },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
-                        React.createElement("div", { className: "flex items-center mt-[2px]" },
-                            React.createElement("span", { className: "bold-text ml-[6px]" },
-                                ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
-                                    ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
-                                    : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                                " ",
-                                isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
-                                " ",
-                                "\u00A0"),
-                            " ",
-                            "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
-                                    fontVariantNumeric: "tabular-nums",
-                                    display: "inline-block",
-                                } })))),
-                React.createElement("div", { className: "flex items-center" },
-                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
-                    React.createElement("span", { className: "ml-[6px]" },
-                        React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
-                        " ",
-                        React.createElement("span", null,
-                            " ",
-                            (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
-                            " |",
-                            " ",
-                            React.createElement("span", { className: "" },
-                                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
-                                React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
-                                " ",
-                                "comprando"))))))),
+            React.createElement(LottiePlayer
+            // animationData={serviceItem.icons.promoAnim}
+            , {
+                // animationData={serviceItem.icons.promoAnim}
+                animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
+            React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
         React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
             showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
@@ -526,7 +472,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
                 } },
-                renderIcon("connectingServiceIcon", "12px"),
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
                 React.createElement("div", null, "Conexión"))),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
                     backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,

package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED Viewed

@@ -23,6 +23,7 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
+import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -32,6 +33,8 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
@@ -64,6 +67,9 @@ const ANIMATION_MAP = {
     bombAnimation: {
         kupos: bombAnimation,
     },
+    thunderAnimation: {
+        kupos: thunderAnimation,
+    },
     dotAnimation: {
         kupos: dotAnimation,
     },
@@ -73,8 +79,11 @@ const ANIMATION_MAP = {
     femaaleAnimation: {
         kupos: femaleAnimation,
     },
+    usersAnimation: {
+        kupos: usersAnimation,
+    },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -243,7 +252,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
@@ -290,6 +303,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-10px",
             } },
             React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
                     ? {

package/dist/components/ServiceItem/ServiceItemMobile.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED Viewed

@@ -5,6 +5,7 @@ import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
+import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -17,7 +18,7 @@ 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, viewersConfig, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -87,7 +88,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
-    return (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(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
@@ -108,7 +113,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                 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("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 overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
                 React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
                 hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
@@ -123,7 +130,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
             !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
-                background: isSoldOut ? offerGradientWithOpacity : offerGradient,
+                background: isSoldOut
+                    ? offerGradientWithOpacity
+                    : offerGradient,
                 // opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,
@@ -131,8 +140,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
                 React.createElement("div", { className: "flex justify-between items-center" },
                     (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {}).length ===
-                            0 &&
+                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
+                            .length === 0 &&
                         ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _g !== void 0 ? _g : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
                         React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
                         React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
@@ -180,6 +189,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))))));
 }
 export default ServiceItemMobile;