kupos-ui-components-lib 10.4.28 → 10.4.30

package/src/ui/PeruOfferBanner.tsx

@@ -33,6 +33,9 @@ interface PeruOfferBannerProps {
   coachKey?: number;
   isExpand?: any;
   isNewUiEnabled?: boolean;
+  // ui_type from the active discount entry: 1 = offer-text-only tier,
+  // 2 = full new-UI tier (timer, bomb animation, viewers).
+  uiType?: number;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -121,19 +124,13 @@ const OfferBannerContent: React.FC<OfferBannerContentProps> = ({
               </span>
             )}{" "}
         &nbsp;
-      </span>{" "}
-      {offerText ? "| " : ""}
-      Termina en&nbsp;
-      <span
-        className="bold-text text-end"
-        ref={(node) => CommonService.startCountdown(node, 599)}
-        style={{ fontVariantNumeric: "tabular-nums", display: "inline-block" }}
-      />
+      </span>
     </div>
   </div>
 );
 
-// Shown for legacy promo offers
+// Shown for the offer-text-only tier (ui_type 1): the announcement icon and
+// the offer text, nothing else — no timer, no viewers.
 interface LegacyOfferBannerProps {
   offerText: string;
   getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
@@ -207,6 +204,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
   offerGradient,
   isSoldOut,
   serviceItem,
+  renderIcon,
   isLoggedIn,
   showLoginModal,
   viewersConfig,
@@ -217,28 +215,32 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
   coachKey,
   isExpand,
   isNewUiEnabled,
+  uiType,
 }) => {
-  const isDiscountBelow20 =
-    (serviceItem as any)?.discount_value > 0 &&
-    (serviceItem as any)?.discount_value < 20;
   const offerText = serviceItem?.offer_text || "";
+  const hasDp = hasDpDiscounts(serviceItem);
 
-  const isLegacyOffer = !!offerText && !isNewUiEnabled;
+  // Tier B: new UI enabled, ui_type 1 — offer text only, no timer, no viewers.
+  const isOfferTextOnly = isNewUiEnabled && uiType === 1 && !!offerText;
+  // Tier C: new UI enabled, ui_type 2 — full ribbon (timer, bomb, viewers).
+  const isFullNewUi = isNewUiEnabled && uiType === 2;
 
-  // const showViewers = serviceItem?.is_dp_enabled;
-  const showViewers = isNewUiEnabled;
+  const showViewers = isFullNewUi || hasDp;
 
-  const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
+  const background = isOfferTextOnly
+    ? colors?.bottomStripColor || offerGradient
+    : offerGradient;
 
   const renderLeftContent = () => {
-    const hasDp = hasDpDiscounts(serviceItem);
-
     if (serviceItem?.is_dp_enabled && !hasDp) {
       return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
     }
 
-    // If new UI is enabled, show offer with registro and countdown
-    if (isNewUiEnabled || offerText || (serviceItem as any)?.discount_value) {
+    if (isOfferTextOnly) {
+      return <LegacyOfferBanner offerText={offerText} getAnimationIcon={getAnimationIcon}/>;
+    }
+
+    if (isFullNewUi || hasDp) {
       return (
         <OfferBannerContent
           offerText={offerText}
@@ -252,16 +254,6 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
       );
     }
 
-    // If new UI is disabled, show offer text only
-    if (offerText) {
-      return (
-        <LegacyOfferBanner
-          offerText={offerText}
-          getAnimationIcon={getAnimationIcon}
-        />
-      );
-    }
-
     return null;
   };
 
@@ -269,12 +261,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
     <div
       className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
       style={{
-        background:
-          serviceItem?.is_dp_enabled ||
-          serviceItem?.dp_discount_percents ||
-          (serviceItem as any)?.discount_value
-            ? offerGradient
-            : background,
+        background,
         opacity: isSoldOut ? 0.5 : 1,
         zIndex: isLinatal ? "-1" : "0",
       }}

package/src/ui/SeatSection/PeruSeatSection.tsx

@@ -236,14 +236,19 @@ function PeruSeatSection({
     .filter((seat) => !SEAT_EXCEPTIONS.includes(seat.label))
     .sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
 
+  // discount_type/discount_value/max_discount live on the service item
+  // itself; only ui_type and the ready-made badge text come from discounts[0].
+  const peruDiscount = serviceItem?.discounts?.[0];
+  const uiType = peruDiscount?.ui_type;
+  const discountType = serviceItem?.discount_type;
+  const discountValueRaw = serviceItem?.discount_value;
+  const maxDiscount = serviceItem?.max_discount;
+
   const discountValue = (() => {
-    if (
-      serviceItem?.discount_type === "percentage" &&
-      typeof serviceItem?.discount_value === "number"
-    ) {
-      return Math.round(serviceItem.discount_value);
+    if (discountType === "percentage" && typeof discountValueRaw === "number") {
+      return Math.round(discountValueRaw);
     }
-    if (serviceItem?.discount_type === "fixed" && discountSeat) {
+    if (discountType === "fixed" && discountSeat) {
       const { originalPrice, discountedPrice } = discountSeat;
       if (originalPrice > 0 && originalPrice !== discountedPrice) {
         return Math.round(
@@ -255,21 +260,30 @@ function PeruSeatSection({
   })();
 
   const isMaxDiscountApplied = (() => {
-    const { discount_type, discount_value, max_discount } = serviceItem ?? {};
     if (
-      discount_type === "percentage" &&
-      typeof discount_value === "number" &&
-      max_discount != null &&
-      max_discount > 0 &&
+      discountType === "percentage" &&
+      typeof discountValueRaw === "number" &&
+      maxDiscount != null &&
+      maxDiscount > 0 &&
       discountSeat
     ) {
       const rawPercentageDiscount =
-        (discountSeat.originalPrice * discount_value) / 100;
-      return rawPercentageDiscount > max_discount;
+        (discountSeat.originalPrice * discountValueRaw) / 100;
+      return rawPercentageDiscount > maxDiscount;
     }
     return false;
   })();
 
+  // Backend-provided ready-made badge text (e.g. "30% OFF" / "$2.000 OFF")
+  // takes precedence over the value computed client-side.
+  const discountBadgeText =
+    peruDiscount?.discount_display_badge ||
+    (isMaxDiscountApplied
+      ? `${CommonService.currency(maxDiscount)} OFF`
+      : discountValue != null
+        ? `${discountValue}% OFF`
+        : null);
+
   const renderLabels = () => {
     const isMovilBus =
       serviceItem?.operator_service_name === "MovilBus" ||
@@ -363,6 +377,41 @@ function PeruSeatSection({
   };
 
   if (hasDiscount && discountSeat) {
+    // Tier B (ui_type 1): offer text is announced elsewhere, but the fare
+    // itself must render exactly as it would with no discount — no
+    // strike-off, no badge, no fire icon.
+    if (uiType === 1) {
+      return (
+        <div
+          className="grid grid-cols-2 items-center text-[13.33px] relative"
+          style={{ opacity: isSoldOut ? 0.5 : 1 }}
+        >
+          <div className="col-start-1 row-start-3 flex h-[20px] items-end">
+            <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
+              {discountSeat.label}
+            </span>
+          </div>
+
+          <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
+            <span
+              className="flex items-center gap-[6px] bold-text leading-[30px]"
+              style={{
+                color: isSoldOut ? "#c0c0c0" : "#464647",
+                fontSize: "13.33px",
+              }}
+            >
+              {availableSeats <= 0
+                ? CommonService.currency(0, currencySign)
+                : CommonService.discountedCurrency(
+                    discountSeat.originalPrice,
+                    currencySign,
+                  )}
+            </span>
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div
         className="grid grid-cols-2 items-center text-[13.33px] relative"
@@ -384,7 +433,7 @@ function PeruSeatSection({
           className="col-start-2 row-start-1 flex items-center justify-center absolute"
           style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
         >
-          {discountValue != null || isMaxDiscountApplied ? (
+          {discountBadgeText ? (
             <span
               className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
               style={{
@@ -393,9 +442,7 @@ function PeruSeatSection({
                 backgroundColor: discountSeatPriceColor,
               }}
             >
-              {isMaxDiscountApplied
-                ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
-                : `${discountValue}% OFF`}
+              {discountBadgeText}
             </span>
           ) : null}
         </div>

package/src/ui/SeatSection/SeatSection.tsx

@@ -653,6 +653,7 @@ function SeatSection({
           style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
         >
           {serviceItem?.ui_type !== 1 &&
+            !isPeru &&
             (discountValue != null || isMaxDiscountApplied) && (
               <span
                 className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
@@ -667,6 +668,21 @@ function SeatSection({
                   : `${discountValue}% OFF`}
               </span>
             )}
+
+          {serviceItem?.ui_type !== 1 &&
+            isPeru &&
+            serviceItem?.discount_display_badge && (
+              <span
+                className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
+                style={{
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  whiteSpace: "nowrap",
+                  backgroundColor: discountSeatCrossPriceColor,
+                }}
+              >
+                {serviceItem?.discount_display_badge}
+              </span>
+            )}
         </div>
 
         {serviceItem?.ui_type === 1 ? null : (
@@ -678,7 +694,7 @@ function SeatSection({
               className="text-[13.33px] font-normal leading-[20px]  relative whitespace-nowrap"
               style={{
                 position: "relative",
-                color: discountSeatPriceColor,
+                color: discountSeatCrossPriceColor,
               }}
             >
               {formatPrice(discountSeat.originalPrice)}

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -478,6 +478,16 @@ function SeatSectionMobile({
     return false;
   })();
 
+  // Backend-provided ready-made badge text (e.g. "30% OFF" / "$2.000 OFF")
+  // takes precedence over the value computed client-side.
+  const discountBadgeText =
+    serviceItem?.discounts?.[0]?.discount_display_badge ||
+    (isMaxDiscountApplied
+      ? `${commonService.currency(serviceItem?.max_discount)} OFF`
+      : discountValue != null
+        ? `${discountValue}% OFF`
+        : null);
+
   const getMinValue = (data: any): number | undefined => {
     const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(
       Number,
@@ -595,59 +605,56 @@ function SeatSectionMobile({
       ) : hasDiscount && discountSeat ? (
         <div>
           <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
-            {serviceItem?.ui_type !== 1 &&
-              (discountValue != null || isMaxDiscountApplied) && (
-                <>
-                  <div
-                    className="absolute -top-[18px] right-[0px]"
+            {serviceItem?.ui_type !== 1 && discountBadgeText && (
+              <>
+                <div
+                  className="absolute -top-[18px] right-[0px]"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    opacity: isSoldOut ? 0.5 : 1,
+                  }}
+                >
+                  <span
+                    className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
                     style={{
-                      animation: "pulse-zoom 2s ease-in-out infinite",
-                      opacity: isSoldOut ? 0.5 : 1,
+                      backgroundColor: tooltipBgColor,
                     }}
                   >
-                    <span
-                      className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
-                      style={{
-                        backgroundColor: tooltipBgColor,
-                      }}
-                    >
-                      {isMaxDiscountApplied
-                        ? `${commonService.currency(serviceItem?.max_discount)} OFF`
-                        : `${discountValue}% OFF`}
-                    </span>
-                  </div>
-
-                  <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
-                    Antes
+                    {discountBadgeText}
                   </span>
+                </div>
+
+                <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
+                  Antes
+                </span>
+                <span
+                  className="min-[420]:text-[13px] text-[12px] leading-[20px] text-right "
+                  style={{
+                    position: "relative",
+                    display: "inline-block",
+                    overflow: "hidden",
+                    color: discountSeatPriceColor,
+                  }}
+                >
+                  {commonService.currency(
+                    discountSeat.originalPrice,
+                    currencySign,
+                  )}
                   <span
-                    className="min-[420]:text-[13px] text-[12px] leading-[20px] text-right"
                     style={{
-                      position: "relative",
-                      display: "inline-block",
-                      overflow: "hidden",
-                      color: discountSeatPriceColor,
+                      position: "absolute",
+                      top: "35%",
+                      left: "50%",
+                      width: "80%",
+                      height: "1px",
+                      background: discountSeatCrossPriceColor,
+                      transform: "rotate(-12deg)",
+                      transformOrigin: "center",
                     }}
-                  >
-                    {commonService.currency(
-                      discountSeat.originalPrice,
-                      currencySign,
-                    )}
-                    <span
-                      style={{
-                        position: "absolute",
-                        top: "35%",
-                        left: "50%",
-                        width: "80%",
-                        height: "1px",
-                        background: discountSeatCrossPriceColor,
-                        transform: "rotate(-12deg)",
-                        transformOrigin: "center",
-                      }}
-                    />
-                  </span>
-                </>
-              )}
+                  />
+                </span>
+              </>
+            )}
 
             <span
               className="min-[420]:text-[13px] text-[12px] leading-[24px]"