kupos-ui-components-lib 10.4.67 → 10.4.69

package/dist/components/DiscountBanners/DiscountBannerDesktop.js

@@ -28,6 +28,53 @@ const SIZE_CLASSES = {
         flamePercent: "text-[8px]",
     },
 };
+// Rows with logos scale every card up 20%, keeping the art's 5:2 ratio so the pill baked
+// into it doesn't distort. Inline so the sizes don't depend on the host's stylesheet.
+const OPERATOR_LOGO_LAYOUT = {
+    default: {
+        card: { width: "240px", height: "96px", paddingTop: "10px" },
+        chip: {
+            width: "97px",
+            height: "20px",
+            marginLeft: "5px",
+            fontSize: "10px",
+            lineHeight: "20px",
+        },
+        flameBadge: { fontSize: "22px", lineHeight: "19px" },
+        flamePercent: { fontSize: "12px" },
+        discount: { lineHeight: "16px" },
+        subtitle: {
+            fontSize: "11px",
+            lineHeight: "11px",
+            marginTop: 0,
+            maxWidth: "100px",
+        },
+        row: { gap: "3px", fontSize: "10px", marginTop: "4px", maxWidth: "128px" },
+        logo: { height: "18px", width: "84px", minWidth: 0 },
+    },
+    compact: {
+        card: { width: "204px", height: "82px", paddingTop: "9px" },
+        chip: {
+            width: "83px",
+            height: "18px",
+            marginLeft: "5px",
+            fontSize: "9px",
+            lineHeight: "18px",
+        },
+        flameBadge: { fontSize: "16px", lineHeight: "16px" },
+        flamePercent: { fontSize: "10px" },
+        discount: { lineHeight: "14px" },
+        subtitle: {
+            fontSize: "9.5px",
+            lineHeight: "9.5px",
+            marginTop: 0,
+            maxWidth: "85px",
+        },
+        row: { gap: "2px", fontSize: "8px", marginTop: "3px", maxWidth: "108px" },
+        logo: { height: "14px", width: "70px", minWidth: 0 },
+    },
+};
+const MAX_VISIBLE_OPERATOR_LOGOS = 3;
 const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
 const REMATE_KEY = "remate";
 function isRemateCard(card) {
@@ -84,6 +131,7 @@ class DiscountBannersDesktop extends React.Component {
     }
     render() {
         const { services = [], wowDealData, backgroundImages = [], artIncludesChipPill, accentColors = [], label = DEFAULT_LABEL, currencySign = "$", size = "default", selectedKey, className = "", style, } = this.props;
+        console.log("🚀 ~ DiscountBannersDesktop ~ render ~ services:", services);
         // Compute cards directly — no useMemo
         const cards = deriveDiscountCards(services, wowDealData, currencySign);
         if (!cards.length)
@@ -96,8 +144,17 @@ class DiscountBannersDesktop extends React.Component {
         const defaultArt = resolveArt(cards);
         const chipPillInArt = artIncludesChipPill !== null && artIncludesChipPill !== void 0 ? artIncludesChipPill : usingDefaultArt;
         const sizeClasses = SIZE_CLASSES[size !== null && size !== void 0 ? size : "default"];
+        const hasLogoRow = cards.some((card) => { var _a; return (_a = card.operatorLogos) === null || _a === void 0 ? void 0 : _a.length; });
+        const logoLayout = OPERATOR_LOGO_LAYOUT[size !== null && size !== void 0 ? size : "default"];
         return (React.createElement("div", { className: `kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`, style: style }, cards.map((card, index) => {
+            var _a;
             const isActive = activeKey === card.key;
+            const operatorLogos = (_a = card.operatorLogos) !== null && _a !== void 0 ? _a : [];
+            const hasLogos = operatorLogos.length > 0;
+            // Three logos fill the space beside the art, so a "+N" takes the third slot
+            const visibleLogos = operatorLogos.length > MAX_VISIBLE_OPERATOR_LOGOS
+                ? operatorLogos.slice(0, MAX_VISIBLE_OPERATOR_LOGOS - 1)
+                : operatorLogos;
             const isDimmed = activeKey != null && !isActive;
             const backgroundImage = card.campaignImageUrl
                 ? card.campaignImageUrl
@@ -114,25 +171,30 @@ class DiscountBannersDesktop extends React.Component {
                 isFlameArt &&
                 card.discountType === "percentage" &&
                 card.amount > 0;
-            return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => this.handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: {
-                    backgroundImage: backgroundImage
+            return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => this.handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: Object.assign({ backgroundImage: backgroundImage
                         ? `url(${backgroundImage})`
-                        : undefined,
-                    backgroundSize: "100% 100%",
-                } },
-                React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt || card.campaignImageUrl
+                        : undefined, backgroundSize: "100% 100%" }, (hasLogoRow ? logoLayout.card : undefined)) },
+                React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: Object.assign(Object.assign({}, (chipPillInArt || card.campaignImageUrl
                         ? undefined
-                        : { backgroundColor: "rgba(255,255,255,0.55)" } }, card.campaignTexts ? card.campaignTexts.text1 : label),
-                showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
+                        : { backgroundColor: "rgba(255,255,255,0.55)" })), (hasLogoRow ? logoLayout.chip : undefined)) }, card.campaignTexts ? card.campaignTexts.text1 : label),
+                showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }), (hasLogoRow ? logoLayout.flameBadge : undefined)) },
                     card.amount,
-                    React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
+                    React.createElement("span", { className: sizeClasses.flamePercent, style: Object.assign({ fontWeight: 700 }, (hasLogoRow ? logoLayout.flamePercent : undefined)) }, "%"))),
                 React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
-                    React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.campaignTexts
+                    React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}`, style: hasLogos ? logoLayout.discount : undefined }, card.campaignTexts
                         ? card.campaignTexts.text2
                         : card.discountLabel),
-                    React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.campaignTexts
+                    React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: Object.assign({ color: accentColor }, (hasLogos ? logoLayout.subtitle : undefined)) }, card.campaignTexts
                         ? card.campaignTexts.text3
-                        : card.subtitle))));
+                        : card.subtitle)),
+                hasLogos && (React.createElement("span", { className: "bold-text flex items-center whitespace-nowrap text-[#464647]", style: logoLayout.row },
+                    visibleLogos.map((logo) => {
+                        var _a;
+                        return (React.createElement("img", { key: logo.url, src: logo.url, alt: (_a = logo.name) !== null && _a !== void 0 ? _a : "", className: "block object-contain object-left", style: logoLayout.logo }));
+                    }),
+                    visibleLogos.length < operatorLogos.length && (React.createElement("span", null,
+                        "+",
+                        operatorLogos.length - visibleLogos.length))))));
         })));
     }
 }

package/dist/components/DiscountBanners/DiscountBannerMobile.js

@@ -28,6 +28,53 @@ const SIZE_CLASSES = {
         flamePercent: "text-[8px]",
     },
 };
+// Rows with logos scale every card up 20%, keeping the art's 5:2 ratio so the pill baked
+// into it doesn't distort. Inline so the sizes don't depend on the host's stylesheet.
+const OPERATOR_LOGO_LAYOUT = {
+    default: {
+        card: { width: "240px", height: "96px", paddingTop: "10px" },
+        chip: {
+            width: "97px",
+            height: "20px",
+            marginLeft: "5px",
+            fontSize: "10px",
+            lineHeight: "20px",
+        },
+        flameBadge: { fontSize: "22px", lineHeight: "19px" },
+        flamePercent: { fontSize: "12px" },
+        discount: { lineHeight: "16px" },
+        subtitle: {
+            fontSize: "11px",
+            lineHeight: "11px",
+            marginTop: 0,
+            maxWidth: "100px",
+        },
+        row: { gap: "3px", fontSize: "10px", marginTop: "4px", maxWidth: "128px" },
+        logo: { height: "18px", width: "84px", minWidth: 0 },
+    },
+    compact: {
+        card: { width: "204px", height: "82px", paddingTop: "9px" },
+        chip: {
+            width: "83px",
+            height: "18px",
+            marginLeft: "5px",
+            fontSize: "9px",
+            lineHeight: "18px",
+        },
+        flameBadge: { fontSize: "16px", lineHeight: "16px" },
+        flamePercent: { fontSize: "10px" },
+        discount: { lineHeight: "14px" },
+        subtitle: {
+            fontSize: "9.5px",
+            lineHeight: "9.5px",
+            marginTop: 0,
+            maxWidth: "85px",
+        },
+        row: { gap: "2px", fontSize: "8px", marginTop: "3px", maxWidth: "108px" },
+        logo: { height: "14px", width: "70px", minWidth: 0 },
+    },
+};
+const MAX_VISIBLE_OPERATOR_LOGOS = 3;
 const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
 const REMATE_KEY = "remate";
 function isRemateCard(card) {
@@ -95,8 +142,17 @@ class DiscountBannersMobile extends React.Component {
         const defaultArt = resolveArt(cards);
         const chipPillInArt = artIncludesChipPill !== null && artIncludesChipPill !== void 0 ? artIncludesChipPill : usingDefaultArt;
         const sizeClasses = SIZE_CLASSES[size !== null && size !== void 0 ? size : "default"];
+        const hasLogoRow = cards.some((card) => { var _a; return (_a = card.operatorLogos) === null || _a === void 0 ? void 0 : _a.length; });
+        const logoLayout = OPERATOR_LOGO_LAYOUT[size !== null && size !== void 0 ? size : "default"];
         return (React.createElement("div", { className: `kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`, style: style }, cards.map((card, index) => {
+            var _a;
             const isActive = activeKey === card.key;
+            const operatorLogos = (_a = card.operatorLogos) !== null && _a !== void 0 ? _a : [];
+            const hasLogos = operatorLogos.length > 0;
+            // Three logos fill the space beside the art, so a "+N" takes the third slot
+            const visibleLogos = operatorLogos.length > MAX_VISIBLE_OPERATOR_LOGOS
+                ? operatorLogos.slice(0, MAX_VISIBLE_OPERATOR_LOGOS - 1)
+                : operatorLogos;
             const isDimmed = activeKey != null && !isActive;
             const backgroundImage = card.campaignImageUrl
                 ? card.campaignImageUrl
@@ -113,25 +169,30 @@ class DiscountBannersMobile extends React.Component {
                 isFlameArt &&
                 card.discountType === "percentage" &&
                 card.amount > 0;
-            return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => this.handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: {
-                    backgroundImage: backgroundImage
+            return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => this.handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: Object.assign({ backgroundImage: backgroundImage
                         ? `url(${backgroundImage})`
-                        : undefined,
-                    backgroundSize: "100% 100%",
-                } },
-                React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt || card.campaignImageUrl
+                        : undefined, backgroundSize: "100% 100%" }, (hasLogoRow ? logoLayout.card : undefined)) },
+                React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: Object.assign(Object.assign({}, (chipPillInArt || card.campaignImageUrl
                         ? undefined
-                        : { backgroundColor: "rgba(255,255,255,0.55)" } }, card.campaignTexts ? card.campaignTexts.text1 : label),
-                showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
+                        : { backgroundColor: "rgba(255,255,255,0.55)" })), (hasLogoRow ? logoLayout.chip : undefined)) }, card.campaignTexts ? card.campaignTexts.text1 : label),
+                showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }), (hasLogoRow ? logoLayout.flameBadge : undefined)) },
                     card.amount,
-                    React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
+                    React.createElement("span", { className: sizeClasses.flamePercent, style: Object.assign({ fontWeight: 700 }, (hasLogoRow ? logoLayout.flamePercent : undefined)) }, "%"))),
                 React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
-                    React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.campaignTexts
+                    React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}`, style: hasLogos ? logoLayout.discount : undefined }, card.campaignTexts
                         ? card.campaignTexts.text2
                         : card.discountLabel),
-                    React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.campaignTexts
+                    React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: Object.assign({ color: accentColor }, (hasLogos ? logoLayout.subtitle : undefined)) }, card.campaignTexts
                         ? card.campaignTexts.text3
-                        : card.subtitle))));
+                        : card.subtitle)),
+                hasLogos && (React.createElement("span", { className: "bold-text flex items-center whitespace-nowrap text-[#464647]", style: logoLayout.row },
+                    visibleLogos.map((logo) => {
+                        var _a;
+                        return (React.createElement("img", { key: logo.url, src: logo.url, alt: (_a = logo.name) !== null && _a !== void 0 ? _a : "", className: "block object-contain object-left", style: logoLayout.logo }));
+                    }),
+                    visibleLogos.length < operatorLogos.length && (React.createElement("span", null,
+                        "+",
+                        operatorLogos.length - visibleLogos.length))))));
         })));
     }
 }

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

@@ -12,6 +12,7 @@ export interface DiscountBannerServiceItem {
     discounts?: Array<{
         new_ui_enabled?: boolean;
         campaign_type?: string;
+        operator_logo?: string;
         campaign_image_url?: string;
         campaign_text?: {
             text_1?: string;
@@ -43,6 +44,10 @@ export interface DiscountBannerCard {
         text2: string;
         text3: string;
     };
+    operatorLogos?: Array<{
+        url: string;
+        name?: string;
+    }>;
 }
 export interface DiscountBannersProps {
     services?: DiscountBannerServiceItem[];

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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, showSeatsWithDiscount, }: 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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, showSeatsWithDiscount, showSeatSoldOutLabel, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,7 +87,7 @@ const ANIMATION_MAP = {
         kupos: flameAnimation,
     },
 };
-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, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, showSeatsWithDiscount = false, }) {
+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, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, showSeatsWithDiscount = false, showSeatSoldOutLabel = false, }) {
     var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -366,7 +366,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel, showSeatsWithDiscount: showSeatsWithDiscount })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel, showSeatsWithDiscount: showSeatsWithDiscount, showSeatSoldOutLabel: showSeatSoldOutLabel })),
                     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, buttonTextColor: colors.primaryButtonTextColor }),
                         showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },

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, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: 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, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, showServiceTypeUnderLogo, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -19,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, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
+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, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showSeatSoldOutLabel = false, showServiceTypeUnderLogo = false, }) {
     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;
@@ -155,7 +155,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                         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: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.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, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel }),
+                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.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, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel, showSeatSoldOutLabel: showSeatSoldOutLabel }),
                 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: {

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

@@ -256,5 +256,6 @@ export interface MobileServiceItemProps {
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
     showServiceTypeUnderLogo?: boolean;
 }

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

@@ -278,5 +278,6 @@ export interface ServiceItemProps {
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
     showSeatsWithDiscount?: boolean;
+    showSeatSoldOutLabel?: boolean;
     showServiceTypeUnderLogo?: boolean;
 }

package/dist/styles.css

@@ -1027,6 +1027,10 @@
   -o-object-fit: contain;
      object-fit: contain;
 }
+.object-left {
+  -o-object-position: left;
+     object-position: left;
+}
 .p-\[4px\] {
   padding: 4px;
 }

package/dist/ui/DiscountBanners/DiscountBanners.js

@@ -28,6 +28,53 @@ const SIZE_CLASSES = {
         flamePercent: "text-[8px]",
     },
 };
+// Rows with logos scale every card up 20%, keeping the art's 5:2 ratio so the pill baked
+// into it doesn't distort. Inline so the sizes don't depend on the host's stylesheet.
+const OPERATOR_LOGO_LAYOUT = {
+    default: {
+        card: { width: "240px", height: "96px", paddingTop: "10px" },
+        chip: {
+            width: "97px",
+            height: "20px",
+            marginLeft: "5px",
+            fontSize: "10px",
+            lineHeight: "20px",
+        },
+        flameBadge: { fontSize: "22px", lineHeight: "19px" },
+        flamePercent: { fontSize: "12px" },
+        discount: { lineHeight: "16px" },
+        subtitle: {
+            fontSize: "11px",
+            lineHeight: "11px",
+            marginTop: 0,
+            maxWidth: "100px",
+        },
+        row: { gap: "3px", fontSize: "10px", marginTop: "4px", maxWidth: "128px" },
+        logo: { height: "18px", width: "84px", minWidth: 0 },
+    },
+    compact: {
+        card: { width: "204px", height: "82px", paddingTop: "9px" },
+        chip: {
+            width: "83px",
+            height: "18px",
+            marginLeft: "5px",
+            fontSize: "9px",
+            lineHeight: "18px",
+        },
+        flameBadge: { fontSize: "16px", lineHeight: "16px" },
+        flamePercent: { fontSize: "10px" },
+        discount: { lineHeight: "14px" },
+        subtitle: {
+            fontSize: "9.5px",
+            lineHeight: "9.5px",
+            marginTop: 0,
+            maxWidth: "85px",
+        },
+        row: { gap: "2px", fontSize: "8px", marginTop: "3px", maxWidth: "108px" },
+        logo: { height: "14px", width: "70px", minWidth: 0 },
+    },
+};
+const MAX_VISIBLE_OPERATOR_LOGOS = 3;
 const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
 const REMATE_KEY = "remate";
 function isRemateCard(card) {
@@ -78,8 +125,17 @@ const DiscountBanners = ({ services = [], wowDealData, backgroundImages = [], ar
     const defaultArt = resolveArt(cards);
     const chipPillInArt = artIncludesChipPill !== null && artIncludesChipPill !== void 0 ? artIncludesChipPill : usingDefaultArt;
     const sizeClasses = SIZE_CLASSES[size];
+    const hasLogoRow = cards.some((card) => { var _a; return (_a = card.operatorLogos) === null || _a === void 0 ? void 0 : _a.length; });
+    const logoLayout = OPERATOR_LOGO_LAYOUT[size !== null && size !== void 0 ? size : "default"];
     return (React.createElement("div", { className: `kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`, style: style }, cards.map((card, index) => {
+        var _a;
         const isActive = activeKey === card.key;
+        const operatorLogos = (_a = card.operatorLogos) !== null && _a !== void 0 ? _a : [];
+        const hasLogos = operatorLogos.length > 0;
+        // Three logos fill the space beside the art, so a "+N" takes the third slot
+        const visibleLogos = operatorLogos.length > MAX_VISIBLE_OPERATOR_LOGOS
+            ? operatorLogos.slice(0, MAX_VISIBLE_OPERATOR_LOGOS - 1)
+            : operatorLogos;
         const isDimmed = activeKey != null && !isActive;
         const backgroundImage = card.campaignImageUrl
             ? card.campaignImageUrl
@@ -96,21 +152,26 @@ const DiscountBanners = ({ services = [], wowDealData, backgroundImages = [], ar
             isFlameArt &&
             card.discountType === "percentage" &&
             card.amount > 0;
-        return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: {
-                backgroundImage: backgroundImage
+        return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: Object.assign({ backgroundImage: backgroundImage
                     ? `url(${backgroundImage})`
-                    : undefined,
-                backgroundSize: "100% 100%",
-            } },
-            React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt || card.campaignImageUrl
+                    : undefined, backgroundSize: "100% 100%" }, (hasLogoRow ? logoLayout.card : undefined)) },
+            React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: Object.assign(Object.assign({}, (chipPillInArt || card.campaignImageUrl
                     ? undefined
-                    : { backgroundColor: "rgba(255,255,255,0.55)" } }, card.campaignTexts ? card.campaignTexts.text1 : label),
-            showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
+                    : { backgroundColor: "rgba(255,255,255,0.55)" })), (hasLogoRow ? logoLayout.chip : undefined)) }, card.campaignTexts ? card.campaignTexts.text1 : label),
+            showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }), (hasLogoRow ? logoLayout.flameBadge : undefined)) },
                 card.amount,
-                React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
+                React.createElement("span", { className: sizeClasses.flamePercent, style: Object.assign({ fontWeight: 700 }, (hasLogoRow ? logoLayout.flamePercent : undefined)) }, "%"))),
             React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
-                React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.discountLabel),
-                React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.subtitle))));
+                React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}`, style: hasLogos ? logoLayout.discount : undefined }, card.discountLabel),
+                React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: Object.assign({ color: accentColor }, (hasLogos ? logoLayout.subtitle : undefined)) }, card.subtitle)),
+            hasLogos && (React.createElement("span", { className: "bold-text flex items-center whitespace-nowrap text-[#464647]", style: logoLayout.row },
+                visibleLogos.map((logo) => {
+                    var _a;
+                    return (React.createElement("img", { key: logo.url, src: logo.url, alt: (_a = logo.name) !== null && _a !== void 0 ? _a : "", className: "block object-contain object-left", style: logoLayout.logo }));
+                }),
+                visibleLogos.length < operatorLogos.length && (React.createElement("span", null,
+                    "+",
+                    operatorLogos.length - visibleLogos.length))))));
     })));
 };
 export default DiscountBanners;

package/dist/ui/DiscountBanners/discountUtils.js

@@ -2,6 +2,8 @@ import CommonService from "../../utils/CommonService";
 const DESCUENTOS_ESPECIALES_KEY = "descuentos_especiales";
 const DESCUENTOS_ESPECIALES_LABEL = "Descuentos especiales";
 const REMATE_KEY = "remate";
+const OPERATOR_LOGO_MIN_PERCENT = 30;
+const OPERATOR_LOGO_CAMPAIGN_TYPE = "operator_logo";
 export const CAMPAIGN_TYPE_LABELS = {
     last_minute: "Oferta de último minuto",
     first_time: "Primera compra",
@@ -80,6 +82,31 @@ function getServiceDiscount(service) {
     }
     return null;
 }
+// The check uses the rounded amount so it agrees with the percent printed on the card.
+function meetsLogoThreshold(type, amount) {
+    return type === "percentage" && Math.round(amount) >= OPERATOR_LOGO_MIN_PERCENT;
+}
+function showsOperatorLogo(service, discount) {
+    var _a;
+    const campaign = (_a = service.discounts) === null || _a === void 0 ? void 0 : _a[0];
+    return (!!(campaign === null || campaign === void 0 ? void 0 : campaign.operator_logo) ||
+        (campaign === null || campaign === void 0 ? void 0 : campaign.campaign_type) === OPERATOR_LOGO_CAMPAIGN_TYPE ||
+        meetsLogoThreshold(discount.type, discount.amount));
+}
+// Wow-deal services send operator_logo_url/operator_name; regular services send
+// operator_details. A logo sent on the campaign wins over both.
+function addOperatorLogo(card, service) {
+    var _a, _b, _c, _d, _e, _f;
+    const url = ((_b = (_a = service.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.operator_logo) ||
+        service.operator_logo_url ||
+        ((_c = service.operator_details) === null || _c === void 0 ? void 0 : _c[0]);
+    if (!url || ((_d = card.operatorLogos) === null || _d === void 0 ? void 0 : _d.some((logo) => logo.url === url)))
+        return;
+    card.operatorLogos = [
+        ...((_e = card.operatorLogos) !== null && _e !== void 0 ? _e : []),
+        { url, name: service.operator_name || ((_f = service.operator_details) === null || _f === void 0 ? void 0 : _f[2]) },
+    ];
+}
 function toDiscountLabel(discount, currencySign) {
     if (discount.type === "fixed") {
         return `${CommonService.currencyRounded(discount.amount, currencySign)} de dcto`;
@@ -108,12 +135,18 @@ export function deriveDiscountCards(services = [], wowDealData, currencySign = "
             matchedServices: Array.isArray(wowServices) ? wowServices : [],
             isWowDeal: true,
         });
+        if (meetsLogoThreshold(remateDiscount.type, remateDiscount.amount)) {
+            for (const service of cards.get(REMATE_KEY).matchedServices) {
+                addOperatorLogo(cards.get(REMATE_KEY), service);
+            }
+        }
     }
     for (const service of services || []) {
         const discount = getServiceDiscount(service);
         if (!discount)
             continue;
         const roundedAmount = Math.round(discount.amount);
+        const showsLogo = showsOperatorLogo(service, discount);
         // Backend-driven cards: art and text come from the service; services with the
         // same discount (and same campaign content) are grouped into one card.
         const backendCampaign = discount.isDp ? null : getBackendCampaign(service);
@@ -138,15 +171,19 @@ export function deriveDiscountCards(services = [], wowDealData, currencySign = "
                     campaignTexts: texts,
                 });
             }
+            if (showsLogo)
+                addOperatorLogo(cards.get(key), service);
             continue;
         }
         const campaignType = (_d = (_c = service.discounts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.campaign_type;
         const campaignLabel = campaignType
             ? CAMPAIGN_TYPE_LABELS[campaignType]
             : undefined;
-        const category = campaignType
+        // Logo cards group purely by discount, so every operator offering the same percent
+        // lands on one banner even when their offer_text differs.
+        const category = campaignType && campaignType !== OPERATOR_LOGO_CAMPAIGN_TYPE
             ? slugify(campaignType)
-            : service.offer_text
+            : service.offer_text && !showsLogo
                 ? slugify(service.offer_text)
                 : DESCUENTOS_ESPECIALES_KEY;
         const subtitle = campaignLabel || DESCUENTOS_ESPECIALES_LABEL;
@@ -167,6 +204,8 @@ export function deriveDiscountCards(services = [], wowDealData, currencySign = "
                 isWowDeal: false,
             });
         }
+        if (showsLogo)
+            addOperatorLogo(cards.get(key), service);
     }
     return Array.from(cards.values());
 }

package/dist/ui/DiscountBanners/types.d.ts

@@ -12,6 +12,7 @@ export interface DiscountBannerServiceItem {
     discounts?: Array<{
         new_ui_enabled?: boolean;
         campaign_type?: string;
+        operator_logo?: string;
         campaign_image_url?: string;
         campaign_text?: {
             text_1?: string;
@@ -43,6 +44,10 @@ export interface DiscountBannerCard {
         text2: string;
         text3: string;
     };
+    operatorLogos?: Array<{
+        url: string;
+        name?: string;
+    }>;
 }
 export interface DiscountBannersProps {
     services?: DiscountBannerServiceItem[];

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

@@ -17,6 +17,7 @@ interface SeatSectionProps {
     isPeru?: boolean;
     showDesdeLabel?: boolean;
     showSeatsWithDiscount?: boolean;
+    showSeatSoldOutLabel?: boolean;
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
@@ -29,5 +30,5 @@ interface SeatSectionProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatsWithDiscount, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatsWithDiscount, showSeatSoldOutLabel, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;