kupos-ui-components-lib 10.4.9 → 10.4.11

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -25,10 +25,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"];
 const ANIMATION_MAP = {
@@ -363,6 +363,12 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                 Object.keys(serviceItem.pet_seat_info).length > 0,
             render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
         },
+        {
+            key: "seatCategory",
+            width: "40%",
+            condition: serviceItem.api_type === 78 && !!serviceItem.number,
+            render: (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem.number)),
+        },
         {
             key: "flexible",
             width: "20%",
@@ -396,7 +402,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
             showTopLabel
             ? "mt-[30px]"
             : "mt-[20px]"}	` },
-        ((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 })),
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(PeruOfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, colors: colors, coachKey: coachKey, isExpand: isExpand, isNewUiEnabled: isNewUiEnabled })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
@@ -458,7 +464,7 @@ 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, isSeatIcon: isSeatIcon })),
+                        React.createElement(PeruSeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon })),
                     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-[36px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { MobileServiceItemProps } from "./mobileTypes";
+interface PeruServiceItemMobileProps extends Omit<MobileServiceItemProps, 'isNewUi'> {
+    isNewUiEnabled?: boolean;
+}
+declare function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUiEnabled, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, }: PeruServiceItemMobileProps): React.ReactElement;
+export default PeruServiceItemMobile;

package/dist/components/ServiceItem/PeruServiceItemMobile.js

@@ -0,0 +1,235 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import commonService from "../../utils/CommonService";
+import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
+import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
+import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
+import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+const exceptions = [
+    "gy",
+    ".gy",
+    "GY",
+    ".GY",
+    "Gy",
+    ".Gy",
+    "BLANCO",
+    "blanco",
+    "asiento_mascota",
+];
+function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUiEnabled, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const isItemExpanded = serviceItem.id === isExpanded;
+    const isPetSeat = (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) !== null && _a !== void 0 ? _a : {}) || []).length > 0;
+    let isSoldOut = serviceItem.available_seats <= 0;
+    const seats = removeDuplicateSeats
+        ? ((_b = serviceItem.seat_types) === null || _b === void 0 ? void 0 : _b.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);
+    const isLongOfferText = (((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _c === void 0 ? void 0 : _c.length) || 0) > 35;
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
+    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 hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
+    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 = (isNewUiEnabled || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)))
+        ? {
+            borderColor: isSoldOut ? "#ccc" : "transparent",
+            borderStyle: "solid",
+            borderWidth: isSoldOut ? "1px" : "3px 3px 0 3px",
+            borderRadius: "18px",
+            background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient}  border-box`,
+        }
+        : {};
+    const labelId = typeof serviceItem.boarding_stages === "string"
+        ? serviceItem.boarding_stages.split("|")[0]
+        : "";
+    const showTopLabel = busStage &&
+        busStage[labelId] &&
+        busStage[labelId].split("|")[1] === "true" &&
+        busStage[labelId].split("|")[0];
+    const getServiceStars = (serviceItem) => {
+        try {
+            return serviceItem.operator_details && serviceItem.operator_details[1]
+                ? serviceItem.operator_details[1].toFixed(1)
+                : "0.0";
+        }
+        catch (e) {
+            return "";
+        }
+    };
+    const amenities = () => {
+        var _a;
+        const raw = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[3];
+        const list = Array.isArray(raw)
+            ? raw
+            : typeof raw === "string"
+                ? raw.split("|").filter(Boolean)
+                : [];
+        const nodes = list.slice(0, 2).map((am, i) => {
+            var _a;
+            return (React.createElement("img", { key: i, className: "amenity", height: 12, width: 12, src: commonService.getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), serviceItem), alt: "icon" }));
+        });
+        return nodes;
+    };
+    const renderIcon = (iconKey, size = "14px", styles) => {
+        var _a;
+        const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
+        if (iconValue) {
+            if (typeof iconValue === "string") {
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]`, style: Object.assign({ filter: isSoldOut ? "grayscale" : "" }, (styles || {})) }));
+            }
+        }
+        return null;
+    };
+    let isConexion = false;
+    if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
+        isConexion = true;
+    }
+    const extractStage = (stageArr, index) => {
+        const stageObj = stageArr[index];
+        const key = Object.keys(stageObj)[0];
+        return stageObj[key][0].split(", ")[0];
+    };
+    const boardingName = ((_d = serviceItem.stage_details_arr) === null || _d === void 0 ? void 0 : _d.length)
+        ? extractStage(serviceItem.stage_details_arr, 0)
+        : null;
+    const dropoffName = ((_e = serviceItem.stage_details_arr) === null || _e === void 0 ? void 0 : _e.length)
+        ? extractStage(serviceItem.stage_details_arr, 1)
+        : null;
+    return (React.createElement("div", { className: `relative  ${!hasOfferText || !(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 ||
+            boardingName
+            ? "mt-[20px]"
+            : "mt-[10px]"}	`, style: { zIndex: 1 } },
+        React.createElement("div", { className: `z-1 ${(isNewUiEnabled ||
+                ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
+                !isSoldOut
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
+            React.createElement("div", { style: {
+                    padding: "12px 12px 8px 12px",
+                    marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (showTopLabel || isConexion)
+                        ? " 10px"
+                        : "",
+                } },
+                React.createElement("div", { className: "flex justify-between  items-center mb-[10px]" },
+                    React.createElement("div", { className: "flex items-center justify-center gap-x-4", style: {
+                            marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDiscount ? "10px" : "",
+                        } },
+                        React.createElement("div", { className: `w-[115px]  ${isFlores ? "" : "overflow-y-hidden"} h-[30px]` },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain  ${isSoldOut ? "grayscale" : ""}` })),
+                        isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
+                            React.createElement("div", { className: "flex items-center" },
+                                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("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: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.origin, destinationIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.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, isTrain: isTrain }),
+                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)),
+                showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
+                        color: colors.tooltipBgColor,
+                    } }, "\u00A1\u00DAltimos Asientos!")))) : null,
+                React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]" }),
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_h = serviceItem.duration) === null || _h === void 0 ? void 0 : _h.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: (_j = serviceItem.icons) === null || _j === void 0 ? void 0 : _j.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_k = serviceItem.icons) === null || _k === void 0 ? void 0 : _k.petFriendlyAnim, flexibleAnim: (_l = serviceItem.icons) === null || _l === void 0 ? void 0 : _l.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: (_m = serviceItem.icons) === null || _m === void 0 ? void 0 : _m.locationAnim, downArrowIcon: (_o = serviceItem.icons) === null || _o === void 0 ? void 0 : _o.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
+                        setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
+                    }, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, seatCategoryText: serviceItem.api_type === 78 && serviceItem.number
+                        ? serviceItem.number
+                        : undefined })),
+            React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName !== null && boardingName !== void 0 ? boardingName : undefined })),
+        hasOfferText &&
+            !isNewUiEnabled &&
+            !isSoldOut &&
+            !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
+                background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                borderRadius: "0 0 14px 14px",
+                zIndex: -1,
+            } },
+            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" },
+                    React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
+                        React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
+                            React.createElement(LottiePlayer, { animationData: (_q = serviceItem.icons) === null || _q === void 0 ? void 0 : _q.promoAnim, width: "14px", height: "14px" })),
+                        React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
+                                color: "#fff",
+                                lineHeight: 1.4,
+                            } },
+                            React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
+        (isNewUiEnabled || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
+                background: isSoldOut
+                    ? offerGradientWithOpacity
+                    : offerGradient,
+                borderRadius: "0 0 14px 14px",
+                zIndex: -1,
+            } },
+            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((_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _r !== void 0 ? _r : {})
+                            .length === 0 &&
+                        ((_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _s !== void 0 ? _s : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
+                        React.createElement(LottiePlayer, { animationData: (_t = serviceItem.icons) === null || _t === void 0 ? void 0 : _t.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"}` },
+                        React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" }, ((_u = serviceItem.icons) === null || _u === void 0 ? void 0 : _u.bombAnim) && (React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }))),
+                        React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
+                                color: "#fff",
+                                lineHeight: 1.4,
+                            } }, !isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? (React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) : (React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
+                            "Termina en\u00A0",
+                            React.createElement("span", { className: "bold-text", ref: (node) => commonService.startCountdown(node, 599), style: {
+                                    fontVariantNumeric: "tabular-nums",
+                                    display: "inline-block",
+                                } })))))),
+                    React.createElement("div", { className: "flex flex-col items-end", style: {
+                            color: "#fff",
+                        } },
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: "mr-[4px]" },
+                                React.createElement(LottiePlayer, { animationData: (_v = serviceItem.icons) === null || _v === void 0 ? void 0 : _v.dotAnimation, width: "12px", height: "12px" })),
+                            React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
+                                React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                React.createElement("span", null, " viendo"),
+                                " |",
+                                " ",
+                                React.createElement("span", { className: "whitespace-nowrap" },
+                                    React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
+                                    " ",
+                                    "comprando")))))))),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+                opacity: isItemExpanded ? 1 : 0,
+                transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+                position: "relative",
+                zIndex: hasOfferText ||
+                    ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
+                    isNewUiEnabled
+                    ? -2
+                    : -1,
+            } },
+            React.createElement("div", { style: {
+                    overflow: "hidden",
+                    minHeight: 0,
+                    position: hasOfferText ||
+                        isNewUiEnabled ||
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+                        ? "relative"
+                        : undefined,
+                    zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
+                        isNewUiEnabled ||
+                        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+                        ? -3
+                        : undefined,
+                    marginTop: hasOfferText ? "-15px" : "-10px",
+                } },
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_w = serviceItem.icons) === null || _w === void 0 ? void 0 : _w.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: (_x = serviceItem.icons) === null || _x === void 0 ? void 0 : _x.femaleAnim, flexibleAnim: (_y = serviceItem.icons) === null || _y === void 0 ? void 0 : _y.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))));
+}
+export default PeruServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -88,7 +88,7 @@ const ANIMATION_MAP = {
     },
 };
 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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
-    var _a;
+    var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
         onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
@@ -129,10 +129,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     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 hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
-    // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
+    const isNewUiEnabledPeru = ((_b = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.new_ui_enabled) === true;
     const isNewUiEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled) === true;
     const seats = removeDuplicateSeats
-        ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
+        ? ((_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);
@@ -294,7 +294,7 @@ 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, isFlores: isFlores, isNewUiEnabled: isNewUiEnabled, showLoginOption: showLoginOption })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
+    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, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, 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

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

@@ -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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, }: 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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -6,6 +6,7 @@ import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
+import PeruServiceItemMobile from "./PeruServiceItemMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -18,7 +19,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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -102,7 +103,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
         ? extractStage(serviceItem.stage_details_arr, 1)
         : null;
-    return (React.createElement(React.Fragment, null, isNewUi && !isTrain ? (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 &&
+    return (React.createElement(React.Fragment, null, isPeruSite ? (React.createElement(PeruServiceItemMobile, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, busStage: busStage, orignLabel: orignLabel, destinationLabel: destinationLabel, amenitiesData: amenitiesData, setShowDropdown: setShowDropdown, showDropdown: showDropdown, isExpanded: isExpanded, setIsExpanded: setIsExpanded, setAmenetiesAtomValue: setAmenetiesAtomValue, isCiva: isCiva, currencySign: currencySign, isPeru: isPeru, showRating: showRating, showLastSeats: showLastSeats, removeDuplicateSeats: removeDuplicateSeats, isLinatal: isLinatal, viewersConfig: viewersConfig, operatorLabel: operatorLabel, isTrain: isTrain, isFeatureDropDownExpand: isFeatureDropDownExpand, setIsFeatureDropDownExpand: setIsFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, cityOrigin: cityOrigin, cityDestination: cityDestination, isNewUiEnabled: isNewUiEnabled, onRemateUiButtonClick: onRemateUiButtonClick, selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData, isFlores: isFlores, isAllinBus: isAllinBus })) : isNewUi && !isTrain ? (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

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

@@ -47,6 +47,8 @@ export interface MobileServiceItemProps {
         discount_value?: number;
         ui_type?: number;
         max_discount?: number;
+        api_type?: number;
+        number?: string;
         discounts?: Array<{
             id?: number;
             name?: string;
@@ -241,4 +243,5 @@ export interface MobileServiceItemProps {
     isFlores?: boolean;
     operatorLabel?: string;
     isAllinBus?: any;
+    isPeruSite?: boolean;
 }

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

@@ -61,6 +61,7 @@ export interface ServiceItemProps {
         show_top_label?: boolean;
         api_type?: number;
         apiType?: number;
+        number?: string;
         lottie?: {
             location?: string;
             flexible?: string;

package/dist/styles.css

@@ -201,6 +201,9 @@
 .-mt-\[16px\] {
   margin-top: calc(16px * -1);
 }
+.mt-\[0px\] {
+  margin-top: 0px;
+}
 .mt-\[2px\] {
   margin-top: 2px;
 }
@@ -339,6 +342,9 @@
 .ml-\[50px\] {
   margin-left: 50px;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .block {
   display: block;
 }
@@ -540,6 +546,10 @@
   --tw-translate-x: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.translate-x-\[100px\] {
+  --tw-translate-x: 100px;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .-translate-y-1\/2 {
   --tw-translate-y: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1165,6 +1175,9 @@
 .text-\[\#4a4a4a\] {
   color: #4a4a4a;
 }
+.text-\[\#6a6a6a\] {
+  color: #6a6a6a;
+}
 .text-\[\#9b9b9b\] {
   color: #9b9b9b;
 }

package/dist/ui/PaymentCardMobile/PaymentCardMobile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PaymentSideBarProps } from "../../components/PaymentSideBar/types";
+export declare const PaymentCardMobile: React.FC<PaymentSideBarProps>;
+export default PaymentCardMobile;