kupos-ui-components-lib 9.9.4 → 9.9.6

package/dist/KuposUIComponent.d.ts

@@ -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

@@ -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, isFlores, 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, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, t, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default PeruServiceItemDesktop;

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -3,7 +3,6 @@ import DateService from "../../utils/DateService";
 import CommonService from "../../utils/CommonService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
-import LottiePlayer from "../../assets/LottiePlayer";
 import promoAnimation from "../../assets/images/anims/service_list/promocion.json";
 import flexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
 import locationAnimation from "../../assets/images/anims/service_list/location.json";
@@ -14,73 +13,67 @@ 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 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 bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import dotAnimation from "../../assets/images/anims/service_list/dot_animation.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";
+import OfferBanner from "../../ui/OfferBanner";
+import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
-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, isFlores, 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 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, isFlores, isNewUiEnabled, showLoginOption, t = (key) => key, }) {
+    var _a, _b, _c, _d, _e;
     const getAnimationIcon = (icon) => {
-        const animation = animationMap[icon];
+        var _a;
+        const animation = ANIMATION_MAP[icon];
         if (!animation)
             return null;
-        const currentSiteType = siteType || "kupos";
-        return animation[currentSiteType];
+        return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
     };
     const SvgAmenities = ({ moreAnemities, name, color, }) => {
         var _a;
@@ -106,6 +99,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         busStage[labelId].split("|")[1] === "true" &&
         busStage[labelId].split("|")[0];
     let isSoldOut = serviceItem.available_seats <= 0;
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
     const renderIcon = (iconKey, size = "14px") => {
         var _a;
         const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
@@ -224,6 +218,7 @@ 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") &&
@@ -312,18 +307,55 @@ 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: "rating",
-            width: "30%",
-            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
+            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: "duration",
-            width: "20%",
+            width: "12%",
             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%",
@@ -334,48 +366,83 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "flexible",
             width: "20%",
-            condition: false,
+            condition: serviceItem.is_change_ticket === true,
             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 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) ||
+    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 && isNewUiEnabled) || hasDpEnabled
+        ? {
+            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) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        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 ${isFlores ? "w-[80%]" : "w-full"} ${isSoldOut ? "grayscale" : ""}` })),
-                        isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
+        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
+                ? "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-auto object-contain ${isFlores ? "w-[80%]" : "w-full"} ${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: `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-[10px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
                             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: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                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" : ""}` }))),
                             !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: (_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("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(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-[10px] items-center" },
+                        React.createElement("div", { className: "flex flex-col gap-[4px] 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-[10px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[4px]" },
                             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 },
@@ -391,102 +458,15 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                             margin: "auto",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        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)))),
+                        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 }))),
         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] -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(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,
-                } },
-                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                    React.createElement(LottiePlayer
-                    // animationData={serviceItem.icons.priorityStageAnim}
-                    , { 
-                        // animationData={serviceItem.icons.priorityStageAnim}
-                        animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
-                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-            boardingName && isAllinBus && (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,
-                } },
-                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-                    React.createElement(LottiePlayer
-                    // animationData={serviceItem.icons.priorityStageAnim}
-                    , { 
-                        // animationData={serviceItem.icons.priorityStageAnim}
-                        animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
-                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, boardingName))),
-            (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,
-                } },
-                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,
-                } },
-                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "14px", height: "14px" }),
-                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (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,
-                } },
-                React.createElement(LottiePlayer
-                // animationData={serviceItem.icons.directoAnim}
-                , { 
-                    // animationData={serviceItem.icons.directoAnim}
-                    animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
-                React.createElement("div", null, "Tren Express"))))));
+        React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })));
 }
 export default PeruServiceItemDesktop;

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

@@ -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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFlores, operatorLabel, }: 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, wowDealData, isFlores, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;