kupos-ui-components-lib 10.4.67 → 10.4.69

package/src/ui/DiscountBanners/DiscountBanners.tsx

@@ -37,6 +37,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";
@@ -121,6 +170,8 @@ const DiscountBanners: React.FC<DiscountBannersProps> = ({
   const defaultArt = resolveArt(cards);
   const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
   const sizeClasses = SIZE_CLASSES[size];
+  const hasLogoRow = cards.some((card) => card.operatorLogos?.length);
+  const logoLayout = OPERATOR_LOGO_LAYOUT[size ?? "default"];
 
   return (
     <div
@@ -129,6 +180,13 @@ const DiscountBanners: React.FC<DiscountBannersProps> = ({
     >
       {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
@@ -162,15 +220,17 @@ const DiscountBanners: React.FC<DiscountBannersProps> = ({
                 ? `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>
@@ -183,12 +243,16 @@ const DiscountBanners: React.FC<DiscountBannersProps> = ({
                   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>
@@ -197,16 +261,39 @@ const DiscountBanners: React.FC<DiscountBannersProps> = ({
             <span className={`flex flex-col ${sizeClasses.column}`}>
               <span
                 className={`bold-text text-[#464647] ${sizeClasses.discount}`}
+                style={hasLogos ? logoLayout.discount : undefined}
               >
                 {card.discountLabel}
               </span>
               <span
                 className={`bold-text ${sizeClasses.subtitle}`}
-                style={{ color: accentColor }}
+                style={{
+                  color: accentColor,
+                  ...(hasLogos ? logoLayout.subtitle : undefined),
+                }}
               >
                 {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/ui/DiscountBanners/discountUtils.ts

@@ -8,6 +8,8 @@ import {
 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: Record<string, string> = {
   last_minute: "Oferta de último minuto",
@@ -112,6 +114,40 @@ function getServiceDiscount(
   return null;
 }
 
+// The check uses the rounded amount so it agrees with the percent printed on the card.
+function meetsLogoThreshold(type: ServiceDiscount["type"], amount: number) {
+  return type === "percentage" && Math.round(amount) >= OPERATOR_LOGO_MIN_PERCENT;
+}
+
+function showsOperatorLogo(
+  service: DiscountBannerServiceItem,
+  discount: ServiceDiscount,
+): boolean {
+  const campaign = service.discounts?.[0];
+  return (
+    !!campaign?.operator_logo ||
+    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: DiscountBannerCard,
+  service: DiscountBannerServiceItem,
+) {
+  const url =
+    service.discounts?.[0]?.operator_logo ||
+    service.operator_logo_url ||
+    service.operator_details?.[0];
+  if (!url || card.operatorLogos?.some((logo) => logo.url === url)) return;
+  card.operatorLogos = [
+    ...(card.operatorLogos ?? []),
+    { url, name: service.operator_name || service.operator_details?.[2] },
+  ];
+}
+
 function toDiscountLabel(
   discount: ServiceDiscount,
   currencySign: string,
@@ -150,6 +186,11 @@ export function deriveDiscountCards(
       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 || []) {
@@ -158,6 +199,8 @@ export function deriveDiscountCards(
 
     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);
@@ -183,6 +226,7 @@ export function deriveDiscountCards(
           campaignTexts: texts,
         });
       }
+      if (showsLogo) addOperatorLogo(cards.get(key)!, service);
       continue;
     }
 
@@ -191,11 +235,14 @@ export function deriveDiscountCards(
       ? CAMPAIGN_TYPE_LABELS[campaignType]
       : undefined;
 
-    const category = campaignType
-      ? slugify(campaignType)
-      : service.offer_text
-        ? slugify(service.offer_text)
-        : DESCUENTOS_ESPECIALES_KEY;
+    // 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 && !showsLogo
+          ? slugify(service.offer_text)
+          : DESCUENTOS_ESPECIALES_KEY;
     const subtitle = campaignLabel || DESCUENTOS_ESPECIALES_LABEL;
     const key = `${category}_${discount.type}_${roundedAmount}`;
 
@@ -217,6 +264,7 @@ export function deriveDiscountCards(
         isWowDeal: false,
       });
     }
+    if (showsLogo) addOperatorLogo(cards.get(key)!, service);
   }
 
   return Array.from(cards.values());

package/src/ui/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/ui/SeatSection/SeatSection.tsx

@@ -22,6 +22,7 @@ interface SeatSectionProps {
   isPeru?: boolean;
   showDesdeLabel?: boolean;
   showSeatsWithDiscount?: boolean;
+  showSeatSoldOutLabel?: boolean;
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
@@ -174,6 +175,7 @@ function SeatSection({
   isShowSeatIcon,
   showDesdeLabel = false,
   showSeatsWithDiscount = false,
+  showSeatSoldOutLabel = false,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -193,6 +195,19 @@ function SeatSection({
       ? 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: any) =>
+    showSeatSoldOutLabel &&
+    (serviceItem?.sold_out?.[seat?.key] === true ||
+      serviceItem?.sold_out?.[seat?.label] === true);
+
+  const renderSeatPrice = (seat: any, price: number) =>
+    isSeatTypeSoldOut(seat) ? (
+      <span style={{ color: priceColor }}>Agotado</span>
+    ) : (
+      formatPrice(price)
+    );
+
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
@@ -287,7 +302,7 @@ function SeatSection({
                 key={key}
                 className="flex items-center text-[13.33px] bold-text"
               >
-                {formatPrice(discountedPrice)}
+                {renderSeatPrice(val, discountedPrice)}
               </span>
             );
           });
@@ -304,7 +319,7 @@ function SeatSection({
       return (
         <>
           <span className="flex items-center text-[13.33px] bold-text">
-            {formatPrice(discountedPrice)}
+            {renderSeatPrice(allSeats[0], discountedPrice)}
           </span>
         </>
       );
@@ -316,7 +331,7 @@ function SeatSection({
           val.price,
           serviceItem,
         );
-        return <span key={key}>{formatPrice(discountedPrice)}</span>;
+        return <span key={key}>{renderSeatPrice(val, discountedPrice)}</span>;
       });
     }
 
@@ -332,7 +347,7 @@ function SeatSection({
         <span key={key} className="flex items-center text-[13.33px] bold-text">
           {typeof discountedPrice === "string" ||
           typeof discountedPrice === "number"
-            ? formatPrice(discountedPrice)
+            ? renderSeatPrice(val, discountedPrice)
             : null}
         </span>
       );

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -29,6 +29,7 @@ interface DateTimeSectionMobileProps {
   discountSeatCrossPriceColor?: string;
   isShowSeatIcon?: boolean;
   showDesdeLabel?: boolean;
+  showSeatSoldOutLabel?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -151,6 +152,7 @@ function DateTimeSectionMobile({
   discountSeatCrossPriceColor,
   isShowSeatIcon,
   showDesdeLabel,
+  showSeatSoldOutLabel,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -234,6 +236,7 @@ function DateTimeSectionMobile({
         discountSeatCrossPriceColor={discountSeatCrossPriceColor}
         isShowSeatIcon={isShowSeatIcon}
         showDesdeLabel={showDesdeLabel}
+        showSeatSoldOutLabel={showSeatSoldOutLabel}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -37,6 +37,8 @@ interface SeatSectionMobileProps {
   isShowSeatIcon?: boolean;
   // shows "Desde" above the price on every service, not only inclination ones
   showDesdeLabel?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
 }
 
 interface SeatRowProps {
@@ -155,6 +157,7 @@ function SeatSectionMobile({
   discountSeatCrossPriceColor,
   isShowSeatIcon,
   showDesdeLabel = false,
+  showSeatSoldOutLabel = false,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -186,6 +189,12 @@ function SeatSectionMobile({
     return commonService.currency(discountedPrice, currencySign);
   };
 
+  // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+  const isSeatTypeSoldOut = (seat: any) =>
+    showSeatSoldOutLabel &&
+    (serviceItem?.sold_out?.[seat?.key] === true ||
+      serviceItem?.sold_out?.[seat?.label] === true);
+
   const getLowestFare = (): number | null => {
     const filtered = seatTypesData
       ?.filter((item) => getFilteredSeats(item.label))
@@ -256,10 +265,12 @@ function SeatSectionMobile({
                   className="min-[420]:text-[13px] text-[12px] bold-text"
                   style={{ color: priceColor }}
                 >
-                  {commonService.currency(
-                    showOriginalFare ? originalPrice : discountedPrice,
-                    currencySign,
-                  )}
+                  {isSeatTypeSoldOut(seat)
+                    ? "Agotado"
+                    : commonService.currency(
+                        showOriginalFare ? originalPrice : discountedPrice,
+                        currencySign,
+                      )}
                 </span>
               </div>
             );
@@ -333,12 +344,16 @@ function SeatSectionMobile({
           </span>
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"
-            style={{ color: priceColor }}
+            style={{
+              color: priceColor,
+            }}
           >
-            {commonService.currency(
-              showOriginalFare ? originalPrice : discountedPrice,
-              currencySign,
-            )}
+            {isSeatTypeSoldOut(uniqueSeats[0])
+              ? "Agotado"
+              : commonService.currency(
+                  showOriginalFare ? originalPrice : discountedPrice,
+                  currencySign,
+                )}
           </span>
         </div>
       </>