kupos-ui-components-lib 10.4.9 → 10.4.11

package/dist/ui/PeruOfferBanner.js

@@ -0,0 +1,94 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+import CommonService from "../utils/CommonService";
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const OFFER_TEXT_MAX_LENGTH = 30;
+function truncateOfferText(text) {
+    return text.length > OFFER_TEXT_MAX_LENGTH
+        ? `${text.slice(0, OFFER_TEXT_MAX_LENGTH)}...`
+        : text;
+}
+function hasDpDiscounts(serviceItem) {
+    var _a, _b;
+    return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
+        ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
+}
+const AnimationIcon = ({ getAnimationIcon, name, width = "18px", height = "18px", }) => (React.createElement(LottiePlayer, { animationData: getAnimationIcon(name), width: width, height: height }));
+// Shown when DP is enabled but no discounts / discounted seats are present
+const PopularServiceBanner = ({ getAnimationIcon }) => (React.createElement("div", { className: "flex items-center gap-[5px]" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "starAnimation" }),
+    React.createElement("span", null, "Servicio popular entre los usuarios")));
+const OfferBannerContent = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, showLoginButton, }) => (React.createElement("div", { className: "flex items-center" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "bombAnimation" }),
+    React.createElement("div", { className: "flex items-center mt-[0px]" },
+        React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } },
+            offerText,
+            " ",
+            isLoggedIn && showLoginOption
+                ? null
+                : showLoginOption &&
+                    showLoginButton && (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
+            " ",
+            "\u00A0"),
+        " ",
+        offerText ? "| " : "",
+        "Termina en\u00A0",
+        React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: { fontVariantNumeric: "tabular-nums", display: "inline-block" } }))));
+const LegacyOfferBanner = ({ offerText, getAnimationIcon, }) => (React.createElement("div", { className: "flex items-center" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "promoAnim" }),
+    React.createElement("div", { className: "flex items-center mb-[2px]" },
+        React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } }, offerText))));
+const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
+    const showScarcity = hasDpDiscounts(serviceItem);
+    return (React.createElement("div", { className: "flex items-center" },
+        React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "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", null,
+                    showScarcity && "Quedan pocos • ",
+                    React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
+                    " ",
+                    "comprando")))));
+};
+// ─── Main Component ───────────────────────────────────────────────────────────
+const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, colors, isLinatal, coachKey, isExpand, isNewUiEnabled, }) => {
+    const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
+    const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
+    const isLegacyOffer = !!offerText &&
+        !isNewUiEnabled;
+    // const showViewers = serviceItem?.is_dp_enabled;
+    const showViewers = isNewUiEnabled;
+    const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
+    const renderLeftContent = () => {
+        const hasDp = hasDpDiscounts(serviceItem);
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDp) {
+            return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
+        }
+        // If new UI is enabled, show offer with registro and countdown
+        if (isNewUiEnabled && offerText) {
+            return (React.createElement(OfferBannerContent, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button }));
+        }
+        // If new UI is disabled, show offer text only
+        if (offerText) {
+            return (React.createElement(LegacyOfferBanner, { offerText: offerText, getAnimationIcon: getAnimationIcon }));
+        }
+        return null;
+    };
+    return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
+            background: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+                ? offerGradient
+                : background,
+            opacity: isSoldOut ? 0.5 : 1,
+            zIndex: isLinatal ? "-1" : "0",
+        } },
+        React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },
+            React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
+            showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
+};
+export default PeruOfferBanner;

package/dist/ui/SeatSection/PeruSeatSection.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface SeatType {
+    label: string;
+    fare: number;
+    key: any;
+    apiSeatType?: string;
+    api_seat_type?: string;
+}
+interface PeruSeatSectionProps {
+    seatTypes: SeatType[];
+    availableSeats: number;
+    isSoldOut: boolean;
+    priceColor?: string;
+    currencySign?: string;
+    removeDuplicateSeats?: boolean;
+    serviceItem?: any;
+    renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
+    discountSeatPriceColor?: string;
+    isSeatIcon?: boolean;
+}
+declare function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }: PeruSeatSectionProps): React.ReactElement;
+export default PeruSeatSection;

package/dist/ui/SeatSection/PeruSeatSection.js

@@ -0,0 +1,247 @@
+import React from "react";
+import CommonService from "../../utils/CommonService";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+function getAllSeatTypes(seatTypes) {
+    if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
+        return [{ label: "Salon cama", price: 0 }];
+    }
+    let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
+        label: val === null || val === void 0 ? void 0 : val.label,
+        price: val === null || val === void 0 ? void 0 : val.fare,
+        key: val === null || val === void 0 ? void 0 : val.key,
+        apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
+    }));
+    seatTypesWithPrices.sort((a, b) => a.price - b.price);
+    return seatTypesWithPrices;
+}
+function getSortedSeatTypes(seatTypes) {
+    if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
+        return [{ label: "Salon cama", price: 0 }];
+    }
+    let seatTypesWithPrices = getAllSeatTypes(seatTypes);
+    const premiumIndex = seatTypesWithPrices.findIndex((item) => item.label === "Premium");
+    if (premiumIndex >= 3) {
+        seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
+    }
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    const seenPrices = new Set();
+    seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
+        if (seenPrices.has(seat.price))
+            return false;
+        seenPrices.add(seat.price);
+        return true;
+    });
+    return seatTypesWithPrices;
+}
+function getUniqueSeats(seatTypes) {
+    const allSeatTypes = getAllSeatTypes(seatTypes);
+    const seatMap = new Map();
+    allSeatTypes.forEach((seat) => {
+        if (SEAT_EXCEPTIONS.includes(seat.label))
+            return;
+        // Only check if the label already exists in the map, don't compare prices
+        if (!seatMap.has(seat.label)) {
+            seatMap.set(seat.label, seat);
+        }
+    });
+    const uniqueByLabel = Array.from(seatMap.values());
+    const seenPrices = new Set();
+    return uniqueByLabel.filter((seat) => {
+        if (seenPrices.has(seat.price))
+            return false;
+        seenPrices.add(seat.price);
+        return true;
+    });
+}
+function getNumberOfSeats(seatTypes) {
+    return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
+}
+function hasInclinationSeatTypes(seatTypes) {
+    return seatTypes.some((seat) => seat.label.includes("°"));
+}
+function getSeatTypeIcon(label, serviceItem) {
+    var _a, _b, _c, _d;
+    const seatLabel = String(label !== null && label !== void 0 ? label : "");
+    if (seatLabel.includes("180°"))
+        return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180Icon;
+    if (seatLabel.includes("160°"))
+        return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160Icon;
+    if (seatLabel.includes("140°"))
+        return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
+    return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
+}
+function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }) {
+    const uniqueSeats = getUniqueSeats(seatTypes);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+    const numberOfSeats = getNumberOfSeats(seatTypes);
+    const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
+    const formatPrice = (price) => availableSeats <= 0
+        ? CommonService.currency(0, currencySign)
+        : CommonService.currency(price, currencySign);
+    const renderSeatNames = () => {
+        const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+        return seats.map((val, key) => {
+            return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center" },
+                React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                    isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
+                            width: "20px",
+                            height: "20px",
+                            marginRight: "5px",
+                        } })),
+                    typeof val.label === "string" || typeof val.label === "number"
+                        ? CommonService.truncateSeatLabel(val.label)
+                        : null)));
+        });
+    };
+    const renderSeatPrices = () => {
+        const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
+        const hasInclination = hasInclinationSeatTypes(seatTypes);
+        // Multiple unique seat types → show a price row for each (MovilBus or inclination types)
+        if ((isMovilBus || hasInclination) && uniqueSeats.length > 1) {
+            const filteredSeats = uniqueSeats.filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
+            const prices = filteredSeats.map((val, key) => {
+                const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
+                return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice)));
+            });
+            // Only add "Desde" for inclination types, not for MovilBus
+            if (hasInclination && !isMovilBus) {
+                return (React.createElement("div", { className: "relative" },
+                    React.createElement("span", { key: "desde", className: "text-[12px] font-normal text-[#6a6a6a] absolute", style: { top: "-15px" } }, "Desde"),
+                    React.createElement("div", { className: "flex flex-col", style: { gap: "12px" } }, prices)));
+            }
+            return prices;
+        }
+        // Single seat type → original behaviour (one lowest-fare price)
+        const allSeats = getAllSeatTypes(seatTypes);
+        const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
+        const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
+    };
+    const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
+    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
+    const discountSeat = discountedSeats
+        .filter((seat) => !SEAT_EXCEPTIONS.includes(seat.label))
+        .sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+    const discountValue = (() => {
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
+            typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
+            return Math.round(serviceItem.discount_value);
+        }
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "fixed" && discountSeat) {
+            const { originalPrice, discountedPrice } = discountSeat;
+            if (originalPrice > 0 && originalPrice !== discountedPrice) {
+                return Math.round(((originalPrice - discountedPrice) / originalPrice) * 100);
+            }
+        }
+        return null;
+    })();
+    const isMaxDiscountApplied = (() => {
+        const { discount_type, discount_value, max_discount } = serviceItem !== null && serviceItem !== void 0 ? serviceItem : {};
+        if (discount_type === "percentage" &&
+            typeof discount_value === "number" &&
+            max_discount != null &&
+            max_discount > 0 &&
+            discountSeat) {
+            const rawPercentageDiscount = (discountSeat.originalPrice * discount_value) / 100;
+            return rawPercentageDiscount > max_discount;
+        }
+        return false;
+    })();
+    const renderLabels = () => {
+        const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
+        const hasInclination = hasInclinationSeatTypes(seatTypes);
+        // Multiple unique seat types → show a label row for each (MovilBus or inclination types)
+        if ((isMovilBus || hasInclination) && uniqueSeats.length > 1) {
+            return uniqueSeats
+                .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
+                .map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
+                        width: "20px",
+                        height: "20px",
+                        marginRight: "5px",
+                    } })),
+                CommonService.truncateSeatLabel(val.label))));
+        }
+        // Single seat type → original behaviour
+        const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+        const filteredSeats = seats.filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
+        const seatLabel = filteredSeats.length > 0
+            ? removeDuplicateSeats
+                ? filteredSeats[0].label
+                : filteredSeats[0].label
+            : null;
+        return (React.createElement(React.Fragment, null,
+            hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
+                    color: "#999",
+                } }, "Antes")),
+            React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center", style: {
+                    opacity: isSoldOut ? 0.5 : 1,
+                } },
+                isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
+                        width: "20px",
+                        height: "20px",
+                        marginRight: "5px",
+                    } })),
+                CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
+    };
+    if (hasDiscount && discountSeat) {
+        return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
+            React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
+            React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, discountValue != null || isMaxDiscountApplied ? (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                    backgroundColor: discountSeatPriceColor,
+                } }, isMaxDiscountApplied
+                ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
+                : `${discountValue}% OFF`)) : null),
+            React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px]  relative whitespace-nowrap", style: {
+                        position: "relative",
+                        color: discountSeatPriceColor,
+                    } },
+                    formatPrice(discountSeat.originalPrice),
+                    React.createElement("span", { style: {
+                            position: "absolute",
+                            left: "-2px",
+                            top: "50%",
+                            width: "calc(100% + 4px)",
+                            height: "1px",
+                            backgroundColor: discountSeatPriceColor,
+                            transform: "rotate(-10deg)",
+                            transformOrigin: "center",
+                        } }))),
+            React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
+                React.createElement("span", { className: "flex items-center gap-[6px]  bold-text leading-[30px]", style: {
+                        color: isSoldOut
+                            ? "#c0c0c0"
+                            : discountSeatPriceColor,
+                        fontSize: "22px",
+                    } },
+                    React.createElement("div", { className: "absolute", style: {
+                            left: "-16px",
+                            bottom: "1px",
+                        } }, renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon("fireIcon", "16px")),
+                    availableSeats <= 0
+                        ? CommonService.currency(0, currencySign)
+                        : CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign)))));
+    }
+    return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
+        React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
+        React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
+                color: isSoldOut ? "#c0c0c0" : priceColor,
+                top: 0,
+                bottom: 0,
+                left: "73%",
+                right: 0,
+                justifyContent: isCentered ? "center" : "",
+                gap: "10px",
+            } }, renderSeatPrices())));
+}
+export default PeruSeatSection;

package/dist/ui/SlidingModal/SlidingModal.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SlidingModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+}
+declare const SlidingModal: React.FC<SlidingModalProps>;
+export default SlidingModal;

package/dist/ui/SlidingModal/SlidingModal.js

@@ -0,0 +1,100 @@
+import React from "react";
+const SlidingModal = ({ isOpen, onClose, title = "Detalles del viaje", children, }) => {
+    // Close on backdrop click
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+        @keyframes slidingModalFadeIn {
+          from { opacity: 0; }
+          to   { opacity: 1; }
+        }
+        @keyframes slidingModalSlideUp {
+          from { transform: translateY(100%); }
+          to   { transform: translateY(0); }
+        }
+        @keyframes slidingModalSlideDown {
+          from { transform: translateY(0); }
+          to   { transform: translateY(100%); }
+        }
+        .sliding-modal-backdrop {
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.4);
+          z-index: 1000;
+          display: flex;
+          align-items: flex-end;
+          backdrop-filter: blur(2px);
+          -webkit-backdrop-filter: blur(2px);
+          animation: slidingModalFadeIn 0.25s ease forwards;
+        }
+        .sliding-modal-sheet {
+          width: 100%;
+          max-height: 85vh;
+          background: #fff;
+          border-radius: 24px 24px 0 0;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          animation: slidingModalSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+          box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
+        }
+        .sliding-modal-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 20px 20px 14px;
+          border-bottom: 1px solid #f0f0f0;
+          flex-shrink: 0;
+        }
+        .sliding-modal-handle {
+          width: 36px;
+          height: 4px;
+          background: #ddd;
+          border-radius: 99px;
+          margin: 12px auto 0;
+          flex-shrink: 0;
+        }
+        .sliding-modal-title {
+          font-size: 18px;
+          font-weight: 700;
+          color: #1a1a1a;
+          margin: 0;
+        }
+        .sliding-modal-close-btn {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: #f5f5f5;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: background 0.15s ease;
+          flex-shrink: 0;
+        }
+        .sliding-modal-close-btn:hover {
+          background: #e8e8e8;
+        }
+        .sliding-modal-body {
+          overflow-y: auto;
+          padding: 16px 20px 32px;
+          flex: 1;
+          -webkit-overflow-scrolling: touch;
+        }
+      `),
+        isOpen ? (React.createElement("div", { className: "sliding-modal-backdrop", onClick: handleBackdropClick },
+            React.createElement("div", { className: "sliding-modal-sheet" },
+                React.createElement("div", { className: "sliding-modal-handle" }),
+                React.createElement("div", { className: "sliding-modal-header" },
+                    React.createElement("h2", { className: "sliding-modal-title" }, title),
+                    React.createElement("button", { className: "sliding-modal-close-btn", onClick: onClose, "aria-label": "Close" },
+                        React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#555", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                            React.createElement("path", { d: "M18 6L6 18M6 6l12 12" })))),
+                React.createElement("div", { className: "sliding-modal-body" }, children)))) : null));
+};
+export default SlidingModal;

package/dist/ui/SlidingModal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SlidingModal } from "./SlidingModal";
+export type { SlidingModalProps } from "./SlidingModal";

package/dist/ui/SlidingModal/index.js

@@ -0,0 +1 @@
+export { default as SlidingModal } from "./SlidingModal";

package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts

@@ -24,6 +24,7 @@ interface BottomAmenitiesMobileProps {
     ladiesBookedSeats?: string;
     isDpEnabled?: boolean;
     isTrain?: boolean;
+    seatCategoryText?: string;
 }
-declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }: BottomAmenitiesMobileProps): React.ReactElement;
+declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }: BottomAmenitiesMobileProps): React.ReactElement;
 export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,7 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
-function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }) {
+function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }) {
     return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
         React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
             React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
@@ -11,6 +11,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
                 React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
                     DateService.formatDuration(duration),
                     "hrs"))),
+        seatCategoryText && (React.createElement("div", { className: "flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, seatCategoryText)),
         React.createElement("div", { className: "flex items-center" },
             React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },
                 petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -28,6 +28,9 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
 const getFilteredSeats = (item) => {
     return item;
 };
+function hasInclinationSeatTypes(seatTypes) {
+    return seatTypes.some((seat) => seat.label.includes("°"));
+}
 const getUniqueSeats = (data, limit) => {
     var _a;
     const seatMap = new Map();
@@ -68,6 +71,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
         const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
+        const hasInclination = hasInclinationSeatTypes(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : []);
         // Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
         const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], Infinity);
         // MovilBus + multiple unique seat types → render a row per seat
@@ -79,7 +83,17 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                     React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign))));
             })));
         }
-        // Single seat type (or non-MovilBus) → original behaviour
+        // Inclination seat types + multiple unique seat types → render a row per seat with "Desde" above prices
+        if (hasInclination && uniqueSeats.length > 1) {
+            return (React.createElement("div", { className: "relative" },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde"),
+                uniqueSeats.map((seat, key) => {
+                    const { discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
+                    return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center", style: { marginTop: key > 0 ? "8px" : "0" } },
+                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
+                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign))));
+                })));
+        }
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         const seatLabel = uniqueSeats.length > 0
             ? commonService.truncateSeatLabel(uniqueSeats[0].label)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.9",
+  "version": "10.4.11",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -33,10 +33,10 @@ 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 PeruSeatSection from "../../ui/SeatSection/PeruSeatSection";
 import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
-import OfferBanner from "../../ui/OfferBanner";
+import PeruOfferBanner from "../../ui/PeruOfferBanner";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
@@ -547,6 +547,19 @@ function PeruServiceItemDesktop({
         />
       ),
     },
+     {
+      key: "seatCategory",
+      width: "40%",
+      condition: serviceItem.api_type === 78 && !!serviceItem.number,
+      render: (
+        <span
+          className="text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]"
+          style={{ opacity: isSoldOut ? 0.5 : 1 }}
+        >
+          {serviceItem.number}
+        </span>
+      ),
+    },
 
     {
       key: "flexible",
@@ -614,7 +627,7 @@ function PeruServiceItemDesktop({
       }	`}
     >
       {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
-        <OfferBanner
+        <PeruOfferBanner
           offerGradient={offerGradient}
           isSoldOut={isSoldOut}
           serviceItem={serviceItem}
@@ -624,8 +637,10 @@ function PeruServiceItemDesktop({
           viewersConfig={viewersConfig}
           getAnimationIcon={getAnimationIcon}
           showLoginOption={showLoginOption}
-          isNewUiEnabled={isNewUiEnabled}
           colors={colors}
+          coachKey={coachKey}
+          isExpand={isExpand}
+          isNewUiEnabled={isNewUiEnabled}
         />
       )}
       <div
@@ -854,7 +869,7 @@ function PeruServiceItemDesktop({
             ></div>
             {/* SEATS */}
             <div className="content-center">
-              <SeatSection
+              <PeruSeatSection
                 seatTypes={serviceItem.seat_types}
                 serviceItem={serviceItem}
                 availableSeats={serviceItem.available_seats}
@@ -862,7 +877,6 @@ function PeruServiceItemDesktop({
                 priceColor={colors.priceColor}
                 currencySign={currencySign}
                 removeDuplicateSeats={removeDuplicateSeats}
-                isPeru={isPeru}
                 renderIcon={renderIcon}
                 discountSeatPriceColor={colors.discountSeatPriceColor}
                 isSeatIcon={isSeatIcon}