kupos-ui-components-lib 10.4.28 → 10.4.30

package/dist/ui/SeatSection/SeatSection.js

@@ -329,18 +329,27 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
-            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
-                (discountValue != null || isMaxDiscountApplied) && (React.createElement("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: discountSeatPriceColor,
-                } }, isMaxDiscountApplied
-                ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
-                : `${discountValue}% OFF`))),
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
+                    !isPeru &&
+                    (discountValue != null || isMaxDiscountApplied) && (React.createElement("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: discountSeatPriceColor,
+                    } }, isMaxDiscountApplied
+                    ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
+                    : `${discountValue}% OFF`)),
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
+                    isPeru &&
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge) && (React.createElement("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 === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge))),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px]  relative whitespace-nowrap", style: {
                         position: "relative",
-                        color: discountSeatPriceColor,
+                        color: discountSeatCrossPriceColor,
                     } },
                     formatPrice(discountSeat.originalPrice),
                     React.createElement("span", { style: {

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -48,7 +48,7 @@ const getUniqueSeats = (data, limit) => {
         .slice(0, limit);
 };
 function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -193,6 +193,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         }
         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 = ((_d = (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.discount_display_badge) ||
+        (isMaxDiscountApplied
+            ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
+            : discountValue != null
+                ? `${discountValue}% OFF`
+                : null);
     const getMinValue = (data) => {
         const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(Number);
         if (!vals.length)
@@ -202,14 +210,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
     };
     const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
     const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
-    const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
         dpDiscountPercent != null &&
         firstSeatFare != null;
     return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-        !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
+        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
         !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         !isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
@@ -241,23 +249,20 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                 color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
             } },
-            ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
-                (discountValue != null || isMaxDiscountApplied) && (React.createElement(React.Fragment, null,
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText && (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
                         animation: "pulse-zoom 2s ease-in-out infinite",
                         opacity: isSoldOut ? 0.5 : 1,
                     } },
                     React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
                             backgroundColor: tooltipBgColor,
-                        } }, isMaxDiscountApplied
-                        ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
-                        : `${discountValue}% OFF`)),
+                        } }, discountBadgeText)),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-right", style: {
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-right ", style: {
                         position: "relative",
                         display: "inline-block",
                         overflow: "hidden",
@@ -282,7 +287,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                             ? "#464647"
                             : discountSeatPriceColor || "#ff5964",
                 } },
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
                 commonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
                     ? discountSeat.originalPrice
                     : discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {

package/package.json

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

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -180,6 +180,8 @@ function PeruServiceItemDesktop({
 
   let isSoldOut = serviceItem.available_seats <= 0;
   const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  const peruDiscount = (serviceItem as any)?.discounts?.[0];
+  const uiType = peruDiscount?.ui_type;
 
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
@@ -609,12 +611,18 @@ function PeruServiceItemDesktop({
   const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
   const grayscaleClass = isSoldOut ? "grayscale" : "";
 
-  const hasOfferText = Boolean(serviceItem?.offer_text);
+  // Offer text is only ever shown when the discount's new UI is enabled
+  // (tiers B/C). Tier A must stay unchanged even if the backend still sends
+  // an offer_text.
+  const hasOfferText = isNewUiEnabled && Boolean(serviceItem?.offer_text);
+  // Tier C (ui_type 2) always shows the bottom ribbon — timer, bomb
+  // animation and viewers count don't depend on offer_text being present.
+  const isFullNewUi = isNewUiEnabled && uiType === 2;
 
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
-    (hasOfferText || isNewUiEnabled || hasDpEnabled || hasDiscount) &&
+    (isFullNewUi || hasDpEnabled) &&
     !isSoldOut
       ? {
           borderColor: "transparent",
@@ -628,7 +636,7 @@ function PeruServiceItemDesktop({
 
   return (
     <div
-      className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
+      className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isFullNewUi) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
         serviceItem?.is_direct_trip ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
@@ -636,28 +644,28 @@ function PeruServiceItemDesktop({
           : "mt-[20px]"
       }	`}
     >
-      {(serviceItem?.offer_text || hasDpEnabled || hasDiscount) &&
-        !isSoldOut && (
-          <PeruOfferBanner
-            offerGradient={offerGradient}
-            isSoldOut={isSoldOut}
-            serviceItem={serviceItem}
-            renderIcon={renderIcon}
-            isLoggedIn={isLoggedIn}
-            showLoginModal={showLoginModal}
-            viewersConfig={viewersConfig}
-            getAnimationIcon={getAnimationIcon}
-            showLoginOption={showLoginOption}
-            colors={colors}
-            coachKey={coachKey}
-            isExpand={isExpand}
-            isNewUiEnabled={isNewUiEnabled}
-          />
-        )}
+      {(hasOfferText || hasDpEnabled || isFullNewUi) && !isSoldOut && (
+        <PeruOfferBanner
+          offerGradient={offerGradient}
+          isSoldOut={isSoldOut}
+          serviceItem={serviceItem}
+          renderIcon={renderIcon}
+          isLoggedIn={isLoggedIn}
+          showLoginModal={showLoginModal}
+          viewersConfig={viewersConfig}
+          getAnimationIcon={getAnimationIcon}
+          showLoginOption={showLoginOption}
+          colors={colors}
+          coachKey={coachKey}
+          isExpand={isExpand}
+          isNewUiEnabled={isNewUiEnabled}
+          uiType={uiType}
+        />
+      )}
       <div
         id={`service-card-${serviceItem.id}`}
         className={`bg-white mx-auto relative ${
-          (hasOfferText || isNewUiEnabled || hasDiscount || hasDpEnabled) &&
+          (isFullNewUi || hasDpEnabled) &&
           !isSoldOut
             ? "z-[3] rounded-[18px]"
             : "rounded-[10px] border border-[#ccc]"
@@ -667,13 +675,13 @@ function PeruServiceItemDesktop({
         <div
           className=" pt-[20px]"
           style={{
-            padding: hasOfferText
+            padding: hasOfferText || isFullNewUi
               ? "20px 15px 10px 15px"
               : coachKey
                 ? "20px 15px 20px 15px"
                 : "20px 15px 10px 15px",
 
-            marginTop: hasDiscount || hasOfferText ? "14px" : "",
+            marginTop: hasDiscount || hasOfferText || isFullNewUi ? "14px" : "",
           }}
         >
           {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}

package/src/components/ServiceItem/PeruServiceItemMobile.tsx

@@ -12,6 +12,7 @@ import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
+const OFFER_TEXT_MAX_CHARS = 20;
 
 const exceptions = [
   "gy",
@@ -94,17 +95,33 @@ function PeruServiceItemMobile({
   );
 
   const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
+  const offerText = serviceItem?.offer_text || "";
+  const displayOfferText =
+    offerText.length > OFFER_TEXT_MAX_CHARS
+      ? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
+      : offerText;
   const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  const hasDpRibbon = hasDpEnabled && Boolean(serviceItem?.dp_discount_percents);
+
+  // ui_type comes from the active discount entry: 1 = offer-text-only tier,
+  // 2 = full new-UI tier (timer, bomb animation, viewers).
+  const peruDiscount = (serviceItem as any)?.discounts?.[0];
+  const uiType = peruDiscount?.ui_type;
 
   const isDiscountBelow20 =
     (serviceItem as any)?.discount_value > 0 &&
     (serviceItem as any)?.discount_value < 20;
-  const hasOfferText = Boolean(serviceItem?.offer_text);
+  // Offer text is only ever shown when the discount's new UI is enabled
+  // (tiers B/C). Tier A must stay unchanged even if the backend still sends
+  // an offer_text.
+  const hasOfferText = isNewUiEnabled && Boolean(serviceItem?.offer_text);
+  // Tier B: offer text only, no timer/viewers. Tier C: full ribbon.
+  const isOfferTextOnly = isNewUiEnabled && uiType === 1 && hasOfferText;
+  const isFullNewUi = isNewUiEnabled && uiType === 2;
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
-    isNewUiEnabled ||
-    (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+    isFullNewUi || hasDpRibbon
       ? {
           borderColor: isSoldOut ? "#ccc" : "transparent",
           borderStyle: "solid",
@@ -220,10 +237,7 @@ function PeruServiceItemMobile({
     >
       <div
         className={`z-1 ${
-          (isNewUiEnabled ||
-            (serviceItem?.is_dp_enabled &&
-              serviceItem?.dp_discount_percents)) &&
-          !isSoldOut
+          (isFullNewUi || hasDpRibbon) && !isSoldOut
             ? "rounded-[18px]"
             : "rounded-[10px] border border-[#ccc]"
         }`}
@@ -398,55 +412,50 @@ function PeruServiceItemMobile({
         />
       </div>
 
-      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Simple offer text when new UI is disabled */}
-      {hasOfferText &&
-        !isNewUiEnabled &&
-        !isSoldOut &&
-        !serviceItem?.is_dp_enabled && (
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Tier B: offer text only, no timer/viewers */}
+      {isOfferTextOnly && !isSoldOut && !hasDpRibbon && (
+        <div
+          className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
+          style={{
+            background: colors?.bottomStripColor,
+            borderRadius: "0 0 14px 14px",
+            zIndex: -1,
+          }}
+        >
           <div
-            className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
-            style={{
-              background: colors?.bottomStripColor,
-              borderRadius: "0 0 14px 14px",
-              zIndex: -1,
-            }}
+            className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
+            style={{ lineHeight: 1.6 }}
           >
-            <div
-              className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
-              style={{ lineHeight: 1.6 }}
-            >
-              <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center">
+              <div
+                className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
+              >
+                <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                        <LottiePlayer
+                          animationData={serviceItem?.icons?.promoAnim}
+                          width="14px"
+                          height="14px"
+                        />
+                </div>
                 <div
-                  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
+                  className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                  style={{
+                    color: "#fff",
+                    lineHeight: 1.4,
+                  }}
                 >
-                  <div className={isLongOfferText ? "mt-[2px]" : ""}>
-                    <LottiePlayer
-                      animationData={serviceItem.icons?.promoAnim}
-                      width="14px"
-                      height="14px"
-                    />
-                  </div>
-                  <div
-                    className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                    style={{
-                      color: "#fff",
-                      lineHeight: 1.4,
-                    }}
-                  >
-                    <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                      {serviceItem?.offer_text}
-                    </span>
-                  </div>
+                  <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                    {serviceItem?.offer_text}
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-        )}
+        </div>
+      )}
 
-      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Countdown/registro when new UI is enabled */}
-      {(isNewUiEnabled ||
-        (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
-        !isSoldOut && (
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Tier C / DP: full ribbon with timer, bomb animation, viewers */}
+      {(isFullNewUi || hasDpRibbon) && !isSoldOut && (
           <div
             className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
             style={{
@@ -493,25 +502,9 @@ function PeruServiceItemMobile({
                         lineHeight: 1.4,
                       }}
                     >
-                      {!isNewUiEnabled && serviceItem?.offer_text ? (
-                        <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                          {serviceItem?.offer_text}
-                        </span>
-                      ) : (
-                        <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                          Termina en&nbsp;
-                          <span
-                            className="bold-text"
-                            ref={(node) =>
-                              commonService.startCountdown(node, 599)
-                            }
-                            style={{
-                              fontVariantNumeric: "tabular-nums",
-                              display: "inline-block",
-                            }}
-                          />
-                        </span>
-                      )}
+                      <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                        {displayOfferText}
+                      </span>
                     </div>
                   </div>
                 )}
@@ -563,12 +556,7 @@ function PeruServiceItemMobile({
           transition:
             "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
           position: "relative",
-          zIndex:
-            hasOfferText ||
-            (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
-            isNewUiEnabled
-              ? -2
-              : -1,
+          zIndex: isOfferTextOnly || isFullNewUi || hasDpRibbon ? -2 : -1,
         }}
       >
         <div
@@ -576,15 +564,10 @@ function PeruServiceItemMobile({
             overflow: "hidden",
             minHeight: 0,
             position:
-              hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
+              isOfferTextOnly || isFullNewUi || hasDpEnabled
                 ? "relative"
                 : undefined,
-            zIndex:
-              serviceItem?.offer_text ||
-              isNewUiEnabled ||
-              (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
-                ? -3
-                : undefined,
+            zIndex: isOfferTextOnly || isFullNewUi || hasDpRibbon ? -3 : undefined,
             marginTop: hasOfferText ? "-15px" : "-10px",
           }}
         >

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -579,6 +579,7 @@ function ServiceItemPB({
                 isLinatal={isLinatal}
                 coachKey={coachKey}
                 isExpand={isItemExpanded}
+                isPeru={isPeru}
               />
             )}
           <div

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -68,6 +68,7 @@ function ServiceItemMobile({
   isPeruSite,
   priority_stage_ids,
 }: MobileServiceItemProps): React.ReactElement {
+  console.log("🚀 ~ ServiceItemMobile ~ serviceItem:", serviceItem);
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
@@ -569,17 +570,22 @@ function ServiceItemMobile({
                           }}
                         >
                           <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                            Termina en&nbsp;
-                            <span
-                              className="bold-text"
-                              ref={(node) =>
-                                commonService.startCountdown(node, 599)
-                              }
-                              style={{
-                                fontVariantNumeric: "tabular-nums",
-                                display: "inline-block",
-                              }}
-                            />
+                            {serviceItem?.ui_type === 2 && isPeru
+                              ? serviceItem?.offer_text
+                              : "Termina en"}
+                            &nbsp;
+                            {isPeru ? null : (
+                              <span
+                                className="bold-text"
+                                ref={(node) =>
+                                  commonService.startCountdown(node, 599)
+                                }
+                                style={{
+                                  fontVariantNumeric: "tabular-nums",
+                                  display: "inline-block",
+                                }}
+                              />
+                            )}
                           </span>
                         </div>
                       </div>

package/src/ui/OfferBanner.tsx

@@ -35,6 +35,7 @@ interface OfferBannerProps {
   coachKey?: number;
   isExpand?: any;
   ui_type?: number;
+  isPeru?: boolean;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -97,6 +98,7 @@ interface NewUiOfferBannerProps {
   isNewUiEnabled?: any;
   showLoginButton?: boolean;
   ui_type?: number;
+  isPeru?: boolean;
 }
 
 const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
@@ -109,6 +111,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
   isNewUiEnabled,
   showLoginButton,
   ui_type,
+  isPeru,
 }) => (
   <div className="flex items-center">
     <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
@@ -130,12 +133,17 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
         &nbsp;
       </span>{" "}
       {offerText && ui_type !== 2 ? "| " : ui_type === 2 ? "" : ""}
-      Termina en&nbsp;
-      <span
-        className="bold-text text-end"
-        ref={(node) => CommonService.startCountdown(node, 599)}
-        style={{ fontVariantNumeric: "tabular-nums", display: "inline-block" }}
-      />
+      {ui_type === 2 && isPeru ? offerText : "Termina en"}&nbsp;
+      {isPeru ? null : (
+        <span
+          className="bold-text text-end"
+          ref={(node) => CommonService.startCountdown(node, 599)}
+          style={{
+            fontVariantNumeric: "tabular-nums",
+            display: "inline-block",
+          }}
+        />
+      )}
     </div>
   </div>
 );
@@ -224,6 +232,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   isLinatal,
   coachKey,
   isExpand,
+  isPeru,
 }) => {
   const isDiscountBelow20 =
     (serviceItem as any)?.discount_value > 0 &&
@@ -270,6 +279,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
           isNewUiEnabled={isNewUiEnabled}
           showLoginButton={serviceItem?.show_register_button}
           ui_type={serviceItem?.ui_type}
+          isPeru={isPeru}
         />
       );
     }
@@ -278,7 +288,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
 
   return (
     <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]`}
+      className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[32px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
       style={{
         background:
           (isNewUiEnabled && serviceItem?.ui_type === 2) ||