kupos-ui-components-lib 10.4.67 → 10.4.69

package/dist/ui/SeatSection/SeatSection.js

@@ -100,7 +100,7 @@ function addSeatDegree(label) {
         return label;
     return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatsWithDiscount = false, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatsWithDiscount = false, showSeatSoldOutLabel = false, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -115,6 +115,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const formatPrice = (price) => availableSeats <= 0
         ? CommonService.currency(0, currencySign)
         : CommonService.currency(price, currencySign);
+    // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+    const isSeatTypeSoldOut = (seat) => {
+        var _a, _b;
+        return showSeatSoldOutLabel &&
+            (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _a === void 0 ? void 0 : _a[seat === null || seat === void 0 ? void 0 : seat.key]) === true ||
+                ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _b === void 0 ? void 0 : _b[seat === null || seat === void 0 ? void 0 : seat.label]) === true);
+    };
+    const renderSeatPrice = (seat, price) => isSeatTypeSoldOut(seat) ? (React.createElement("span", { style: { color: priceColor } }, "Agotado")) : (formatPrice(price));
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
         return seats.map((val, key) => {
@@ -162,7 +170,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                     .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
                     .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)));
+                    return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(val, discountedPrice)));
                 });
             }
             // Single seat type → original behaviour (one lowest-fare price)
@@ -170,12 +178,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             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))));
+                React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(allSeats[0], discountedPrice))));
         }
         if (removeDuplicateSeats) {
             return uniqueSeats.map((val, key) => {
                 const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
-                return React.createElement("span", { key: key }, formatPrice(discountedPrice));
+                return React.createElement("span", { key: key }, renderSeatPrice(val, discountedPrice));
             });
         }
         return sortedSeatTypes.map((val, key) => {
@@ -184,7 +192,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
             return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof discountedPrice === "string" ||
                 typeof discountedPrice === "number"
-                ? formatPrice(discountedPrice)
+                ? renderSeatPrice(val, discountedPrice)
                 : null));
         });
     };

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

@@ -26,6 +26,7 @@ interface DateTimeSectionMobileProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: DateTimeSectionMobileProps): React.ReactElement;
+declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -38,7 +38,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
                     React.createElement("div", null, "\u2022"),
                     React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
 };
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -66,6 +66,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 margin: "auto 6px",
                 flexShrink: 0,
             } }),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel, showSeatSoldOutLabel: showSeatSoldOutLabel })));
 }
 export default DateTimeSectionMobile;

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

@@ -21,6 +21,7 @@ interface SeatSectionMobileProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -64,7 +64,7 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatSoldOutLabel = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -85,6 +85,13 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const { discountedPrice } = commonService.calculateDiscountedPrice(fare, serviceItem);
         return commonService.currency(discountedPrice, currencySign);
     };
+    // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+    const isSeatTypeSoldOut = (seat) => {
+        var _a, _b;
+        return showSeatSoldOutLabel &&
+            (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _a === void 0 ? void 0 : _a[seat === null || seat === void 0 ? void 0 : seat.key]) === true ||
+                ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _b === void 0 ? void 0 : _b[seat === null || seat === void 0 ? void 0 : seat.label]) === true);
+    };
     const getLowestFare = () => {
         var _a;
         const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.filter((item) => !EXCEPTIONS.includes(item.label));
@@ -118,7 +125,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                                     filter: isSoldOut ? "grayscale(1)" : "",
                                 } })),
                             commonService.truncateSeatLabel(commonService.addSeatDegree(seat.label))),
-                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
+                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, isSeatTypeSoldOut(seat)
+                            ? "Agotado"
+                            : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
                 })));
         }
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
@@ -146,7 +155,11 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                     hasStrikeOff
                         ? "Desde"
                         : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: {
+                        color: priceColor,
+                    } }, isSeatTypeSoldOut(uniqueSeats[0])
+                    ? "Agotado"
+                    : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {
         var _a;

package/package.json

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

package/src/components/DiscountBanners/DiscountBannerDesktop.tsx

@@ -38,6 +38,55 @@ const SIZE_CLASSES = {
   },
 };
 
+// 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";
@@ -130,6 +179,7 @@ class DiscountBannersDesktop extends React.Component<
       className = "",
       style,
     } = this.props;
+      console.log("🚀 ~ DiscountBannersDesktop ~ render ~ services:", services)
 
     // Compute cards directly — no useMemo
     const cards = deriveDiscountCards(services, wowDealData, currencySign);
@@ -145,6 +195,8 @@ class DiscountBannersDesktop extends React.Component<
     const defaultArt = resolveArt(cards);
     const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
     const sizeClasses = SIZE_CLASSES[size ?? "default"];
+    const hasLogoRow = cards.some((card) => card.operatorLogos?.length);
+    const logoLayout = OPERATOR_LOGO_LAYOUT[size ?? "default"];
 
     return (
       <div
@@ -153,6 +205,13 @@ class DiscountBannersDesktop extends React.Component<
       >
         {cards.map((card, index) => {
           const isActive = activeKey === card.key;
+          const operatorLogos = card.operatorLogos ?? [];
+          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
@@ -186,15 +245,17 @@ class DiscountBannersDesktop extends React.Component<
                   ? `url(${backgroundImage})`
                   : undefined,
                 backgroundSize: "100% 100%",
+                ...(hasLogoRow ? logoLayout.card : undefined),
               }}
             >
               <span
                 className={`bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`}
-                style={
-                  chipPillInArt || card.campaignImageUrl
+                style={{
+                  ...(chipPillInArt || card.campaignImageUrl
                     ? undefined
-                    : { backgroundColor: "rgba(255,255,255,0.55)" }
-                }
+                    : { backgroundColor: "rgba(255,255,255,0.55)" }),
+                  ...(hasLogoRow ? logoLayout.chip : undefined),
+                }}
               >
                 {card.campaignTexts ? card.campaignTexts.text1 : label}
               </span>
@@ -207,12 +268,16 @@ class DiscountBannersDesktop extends React.Component<
                     textShadow: "0 1px 2px rgba(0,0,0,0.28)",
                     fontWeight: 900,
                     whiteSpace: "nowrap",
+                    ...(hasLogoRow ? logoLayout.flameBadge : undefined),
                   }}
                 >
                   {card.amount}
                   <span
                     className={sizeClasses.flamePercent}
-                    style={{ fontWeight: 700 }}
+                    style={{
+                      fontWeight: 700,
+                      ...(hasLogoRow ? logoLayout.flamePercent : undefined),
+                    }}
                   >
                     %
                   </span>
@@ -221,6 +286,7 @@ class DiscountBannersDesktop extends React.Component<
               <span className={`flex flex-col ${sizeClasses.column}`}>
                 <span
                   className={`bold-text text-[#464647] ${sizeClasses.discount}`}
+                  style={hasLogos ? logoLayout.discount : undefined}
                 >
                   {card.campaignTexts
                     ? card.campaignTexts.text2
@@ -228,13 +294,35 @@ class DiscountBannersDesktop extends React.Component<
                 </span>
                 <span
                   className={`bold-text ${sizeClasses.subtitle}`}
-                  style={{ color: accentColor }}
+                  style={{
+                    color: accentColor,
+                    ...(hasLogos ? logoLayout.subtitle : undefined),
+                  }}
                 >
                   {card.campaignTexts
                     ? card.campaignTexts.text3
                     : card.subtitle}
                 </span>
               </span>
+              {hasLogos && (
+                <span
+                  className="bold-text flex items-center whitespace-nowrap text-[#464647]"
+                  style={logoLayout.row}
+                >
+                  {visibleLogos.map((logo) => (
+                    <img
+                      key={logo.url}
+                      src={logo.url}
+                      alt={logo.name ?? ""}
+                      className="block object-contain object-left"
+                      style={logoLayout.logo}
+                    />
+                  ))}
+                  {visibleLogos.length < operatorLogos.length && (
+                    <span>+{operatorLogos.length - visibleLogos.length}</span>
+                  )}
+                </span>
+              )}
             </button>
           );
         })}

package/src/components/DiscountBanners/DiscountBannerMobile.tsx

@@ -38,6 +38,55 @@ const SIZE_CLASSES = {
   },
 };
 
+// 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";
@@ -139,6 +188,8 @@ class DiscountBannersMobile extends React.Component<
     const defaultArt = resolveArt(cards);
     const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
     const sizeClasses = SIZE_CLASSES[size ?? "default"];
+    const hasLogoRow = cards.some((card) => card.operatorLogos?.length);
+    const logoLayout = OPERATOR_LOGO_LAYOUT[size ?? "default"];
 
     return (
       <div
@@ -147,6 +198,13 @@ class DiscountBannersMobile extends React.Component<
       >
         {cards.map((card, index) => {
           const isActive = activeKey === card.key;
+          const operatorLogos = card.operatorLogos ?? [];
+          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
@@ -180,15 +238,17 @@ class DiscountBannersMobile extends React.Component<
                   ? `url(${backgroundImage})`
                   : undefined,
                 backgroundSize: "100% 100%",
+                ...(hasLogoRow ? logoLayout.card : undefined),
               }}
             >
               <span
                 className={`bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`}
-                style={
-                  chipPillInArt || card.campaignImageUrl
+                style={{
+                  ...(chipPillInArt || card.campaignImageUrl
                     ? undefined
-                    : { backgroundColor: "rgba(255,255,255,0.55)" }
-                }
+                    : { backgroundColor: "rgba(255,255,255,0.55)" }),
+                  ...(hasLogoRow ? logoLayout.chip : undefined),
+                }}
               >
                 {card.campaignTexts ? card.campaignTexts.text1 : label}
               </span>
@@ -201,12 +261,16 @@ class DiscountBannersMobile extends React.Component<
                     textShadow: "0 1px 2px rgba(0,0,0,0.28)",
                     fontWeight: 900,
                     whiteSpace: "nowrap",
+                    ...(hasLogoRow ? logoLayout.flameBadge : undefined),
                   }}
                 >
                   {card.amount}
                   <span
                     className={sizeClasses.flamePercent}
-                    style={{ fontWeight: 700 }}
+                    style={{
+                      fontWeight: 700,
+                      ...(hasLogoRow ? logoLayout.flamePercent : undefined),
+                    }}
                   >
                     %
                   </span>
@@ -215,6 +279,7 @@ class DiscountBannersMobile extends React.Component<
               <span className={`flex flex-col ${sizeClasses.column}`}>
                 <span
                   className={`bold-text text-[#464647] ${sizeClasses.discount}`}
+                  style={hasLogos ? logoLayout.discount : undefined}
                 >
                   {card.campaignTexts
                     ? card.campaignTexts.text2
@@ -222,13 +287,35 @@ class DiscountBannersMobile extends React.Component<
                 </span>
                 <span
                   className={`bold-text ${sizeClasses.subtitle}`}
-                  style={{ color: accentColor }}
+                  style={{
+                    color: accentColor,
+                    ...(hasLogos ? logoLayout.subtitle : undefined),
+                  }}
                 >
                   {card.campaignTexts
                     ? card.campaignTexts.text3
                     : card.subtitle}
                 </span>
               </span>
+              {hasLogos && (
+                <span
+                  className="bold-text flex items-center whitespace-nowrap text-[#464647]"
+                  style={logoLayout.row}
+                >
+                  {visibleLogos.map((logo) => (
+                    <img
+                      key={logo.url}
+                      src={logo.url}
+                      alt={logo.name ?? ""}
+                      className="block object-contain object-left"
+                      style={logoLayout.logo}
+                    />
+                  ))}
+                  {visibleLogos.length < operatorLogos.length && (
+                    <span>+{operatorLogos.length - visibleLogos.length}</span>
+                  )}
+                </span>
+              )}
             </button>
           );
         })}

package/src/components/DiscountBanners/types.ts

@@ -13,6 +13,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; text_2?: string; text_3?: string };
   }>;
@@ -39,6 +40,9 @@ export interface DiscountBannerCard {
   // Present when the card's art and copy come from the backend
   campaignImageUrl?: string;
   campaignTexts?: { text1: string; text2: string; text3: string };
+  // One entry per operator on the card; set on percentage cards of 30% or more, or when
+  // the campaign asks for a logo
+  operatorLogos?: Array<{ url: string; name?: string }>;
 }
 
 export interface DiscountBannersProps {

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -156,6 +156,7 @@ function ServiceItemPB({
   showDesdeLabel = false,
   showServiceTypeUnderLogo = false,
   showSeatsWithDiscount = false,
+  showSeatSoldOutLabel = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -723,6 +724,7 @@ function ServiceItemPB({
                     isShowSeatIcon={isShowSeatIcon}
                     showDesdeLabel={showDesdeLabel}
                     showSeatsWithDiscount={showSeatsWithDiscount}
+                    showSeatSoldOutLabel={showSeatSoldOutLabel}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -69,6 +69,7 @@ function ServiceItemMobile({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showSeatSoldOutLabel = false,
   showServiceTypeUnderLogo = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
@@ -411,6 +412,7 @@ function ServiceItemMobile({
                 discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
                 isShowSeatIcon={isShowSeatIcon}
                 showDesdeLabel={showDesdeLabel}
+                showSeatSoldOutLabel={showSeatSoldOutLabel}
               />
 
               {hasDiscount && (

package/src/components/ServiceItem/mobileTypes.ts

@@ -269,5 +269,7 @@ export interface MobileServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
   showServiceTypeUnderLogo?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -292,5 +292,7 @@ export interface ServiceItemProps {
   showDesdeLabel?: boolean;
   // keeps listing the seat types next to the discounted price
   showSeatsWithDiscount?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
   showServiceTypeUnderLogo?: boolean;
 }