kupos-ui-components-lib 9.10.3 → 9.10.5

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -391,10 +391,10 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         : serviceItem.seat_types || [];
     const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
-    return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
-            ? "mt-[24px]"
+            ? "mt-[30px]"
             : "mt-[20px]"}	` },
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -261,7 +261,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
                 ? null
-                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[30px]"

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -136,7 +136,10 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })),
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
+            !isNewUiEnabled &&
+            !isSoldOut &&
+            !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
                 background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,

package/dist/components/Survey/SurveyDesktop.js

@@ -15,9 +15,9 @@ const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feed
         React.createElement(React.Fragment, null,
             React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
                 React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
-            (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-2 mt-2" },
                 React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
-            React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+            React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center  mb-2" }, "Ay\u00FAdanos a mejorar"),
             React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
                 "Bas\u00E1ndote en tu experiencia de compra.",
                 React.createElement("br", null),

package/dist/components/Survey/SurveyMobile.js

@@ -15,17 +15,17 @@ const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedb
         React.createElement(React.Fragment, null,
             React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
                 React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
-            (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-2 mt-2" },
                 React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
-            React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
-            React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+            React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center  mb-2" }, "Ay\u00FAdanos a mejorar"),
+            React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-8 max-w-[460px] mx-auto" },
                 "Bas\u00E1ndote en tu experiencia de compra.",
                 React.createElement("br", null),
                 "\u00BFNos recomendar\u00EDas a un amigo?"),
             React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6, colors: colors }),
             React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-            React.createElement("div", { className: "flex justify-center mt-[20px]" },
-                React.createElement("div", { className: "w-[180px]" },
+            React.createElement("div", { className: "flex justify-center mt-[50px] mb-[50px]" },
+                React.createElement("div", { className: "w-[100px]" },
                     React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit }))))));
 };
 export default SurveyMobile;

package/dist/styles.css

@@ -246,6 +246,9 @@
 .mt-\[30px\] {
   margin-top: 30px;
 }
+.mt-\[50px\] {
+  margin-top: 50px;
+}
 .-mr-\[12px\] {
   margin-right: calc(12px * -1);
 }
@@ -306,6 +309,9 @@
 .mb-\[55px\] {
   margin-bottom: 55px;
 }
+.mb-\[65px\] {
+  margin-bottom: 65px;
+}
 .-ml-\[12px\] {
   margin-left: calc(12px * -1);
 }

package/dist/ui/OfferBanner.d.ts

@@ -1,17 +1,21 @@
 import React from "react";
 import { ServiceItemProps } from "../components/ServiceItem/types";
+type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats">;
+interface OfferBannerColors {
+    bottomStripColor?: string;
+}
 interface OfferBannerProps {
     offerGradient: string;
     isSoldOut: boolean;
-    serviceItem: Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats">;
+    serviceItem: ServiceItemSlice;
     renderIcon: (name: string, size: string) => React.ReactNode;
-    isLoggedIn: any;
-    showLoginModal: any;
+    isLoggedIn: boolean;
+    showLoginModal: () => void;
     viewersConfig: ServiceItemProps["viewersConfig"];
-    getAnimationIcon: (name: string) => any;
+    getAnimationIcon: (name: string) => unknown;
     showLoginOption?: boolean;
     isNewUiEnabled?: boolean;
-    colors: any;
+    colors: OfferBannerColors;
 }
 declare const OfferBanner: React.FC<OfferBannerProps>;
 export default OfferBanner;

package/dist/ui/OfferBanner.js

@@ -1,66 +1,80 @@
 import React from "react";
 import LottiePlayer from "../assets/LottiePlayer";
 import CommonService from "../utils/CommonService";
-const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
-    var _a, _b, _c, _d;
-    return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]", style: {
-            background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled
-                ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
-                : offerGradient,
-            opacity: isSoldOut ? 0.5 : 1,
-            // zIndex: 0,
-        } },
-        React.createElement("div", { className: "flex  justify-between items-center w-full" },
-            React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length === 0 &&
-                ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[5px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("starAnimation"), width: "18px", height: "18px" }),
-                React.createElement("span", null, "Servicio popular entre los usuarios"))) : isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? (React.createElement("div", { className: "flex items-center" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
-                React.createElement("div", { className: "flex items-center mt-[2px]" },
-                    React.createElement("span", { className: "bold-text", style: {
-                            marginLeft: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "6px" : "3px",
-                        } },
-                        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
-                            ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
-                            : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                        " ",
-                        isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
-                        " ",
-                        "\u00A0"),
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const OFFER_TEXT_MAX_LENGTH = 30;
+function truncateOfferText(text) {
+    return text.length > OFFER_TEXT_MAX_LENGTH
+        ? `${text.slice(0, OFFER_TEXT_MAX_LENGTH)}...`
+        : text;
+}
+function hasDpDiscounts(serviceItem) {
+    var _a, _b;
+    return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
+        ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
+}
+const AnimationIcon = ({ getAnimationIcon, name, width = "18px", height = "18px", }) => (React.createElement(LottiePlayer, { animationData: getAnimationIcon(name), width: width, height: height }));
+// Shown when DP is enabled but no discounts / discounted seats are present
+const PopularServiceBanner = ({ getAnimationIcon }) => (React.createElement("div", { className: "flex items-center gap-[5px]" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "starAnimation" }),
+    React.createElement("span", null, "Servicio popular entre los usuarios")));
+const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, }) => (React.createElement("div", { className: "flex items-center" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "bombAnimation" }),
+    React.createElement("div", { className: "flex items-center mt-[2px]" },
+        React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } },
+            truncateOfferText(offerText),
+            " ",
+            !hideRegister &&
+                (isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro"))),
+            " ",
+            "\u00A0"),
+        " ",
+        offerText ? "| " : "",
+        "Termina en\u00A0",
+        React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: { fontVariantNumeric: "tabular-nums", display: "inline-block" } }))));
+const LegacyOfferBanner = ({ offerText, getAnimationIcon, }) => (React.createElement("div", { className: "flex items-center" },
+    React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "promoAnim" }),
+    React.createElement("div", { className: "flex items-center mt-[2px]" },
+        React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } }, offerText))));
+const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
+    const showScarcity = hasDpDiscounts(serviceItem);
+    return (React.createElement("div", { className: "flex items-center" },
+        React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "dotAnimation", width: "12px", height: "12px" }),
+        React.createElement("span", { className: "ml-[6px]" },
+            React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
+            " ",
+            React.createElement("span", null,
+                (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
+                " |",
+                " ",
+                React.createElement("span", null,
+                    showScarcity && "Quedan pocos • ",
+                    React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                     " ",
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "|" : "",
-                    "Termina en\u00A0",
-                    React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
-                            fontVariantNumeric: "tabular-nums",
-                            display: "inline-block",
-                        } })))) : ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
-                !isNewUiEnabled && (React.createElement("div", { className: "flex items-center" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
-                React.createElement("div", { className: "flex items-center mt-[2px]" },
-                    React.createElement("span", { className: "bold-text", style: {
-                            marginLeft: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "6px" : "3px",
-                        } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
-                    " "))))),
-            (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "flex items-center" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
-                React.createElement("span", { className: "ml-[6px]" },
-                    React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
-                    " ",
-                    React.createElement("span", null,
-                        " ",
-                        (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
-                        " |",
-                        " ",
-                        React.createElement("span", { className: "" },
-                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                                Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {})
-                                    .length === 0 &&
-                                ((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length === 0
-                                ? null
-                                : "Quedan pocos • ",
-                            React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
-                            " ",
-                            "comprando"))))))));
+                    "comprando")))));
+};
+// ─── Main Component ───────────────────────────────────────────────────────────
+const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
+    const isLegacyOffer = !!(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
+    const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDpDiscounts(serviceItem);
+    const showViewers = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
+    const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
+    const renderLeftContent = () => {
+        if (isDpEnabledWithoutDiscounts) {
+            return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
+        }
+        const hasDp = hasDpDiscounts(serviceItem);
+        if (hasDp || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))) {
+            return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp }));
+        }
+        if (isLegacyOffer) {
+            return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
+        }
+        return null;
+    };
+    return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: { background, opacity: isSoldOut ? 0.5 : 1 } },
+        React.createElement("div", { className: "flex justify-between items-center w-full" },
+            React.createElement("div", { className: "flex items-center" }, renderLeftContent()),
+            showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
 };
 export default OfferBanner;

package/package.json

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

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -605,11 +605,11 @@ function PeruServiceItemDesktop({
 
   return (
     <div
-      className={`relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${
+      className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
         serviceItem?.is_direct_trip ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
-          ? "mt-[24px]"
+          ? "mt-[30px]"
           : "mt-[20px]"
       }	`}
     >

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -487,7 +487,7 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${
+          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -386,46 +386,49 @@ function ServiceItemMobile({
           </div>
 
           {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
-          {serviceItem?.offer_text && !isNewUiEnabled && !isSoldOut && (
-            <div
-              className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
-              style={{
-                background: colors?.bottomStripColor,
-                borderRadius: "0 0 14px 14px",
-                zIndex: -1,
-              }}
-            >
+          {serviceItem?.offer_text &&
+            !isNewUiEnabled &&
+            !isSoldOut &&
+            !serviceItem?.is_dp_enabled && (
               <div
-                className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
-                style={{ lineHeight: 1.6 }}
+                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="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 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={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                      style={{
-                        color: "#fff",
-                        lineHeight: 1.4,
-                      }}
+                      className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
                     >
-                      <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                        {serviceItem?.offer_text}
-                      </span>
+                      <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>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
 
           {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
           {((serviceItem?.offer_text && isNewUiEnabled) ||

package/src/components/Survey/SurveyDesktop.tsx

@@ -63,7 +63,7 @@ const SurveyDesktop = ({
 
         {/* Centered Illustration */}
         {icons?.surveyIcon && (
-          <div className="flex justify-center mb-3 mt-2">
+          <div className="flex justify-center mb-2 mt-2">
             <img
               src={icons.surveyIcon}
               alt="Survey Illustration"
@@ -73,7 +73,7 @@ const SurveyDesktop = ({
         )}
 
         {/* Centered Title */}
-        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center  mb-2">
           Ayúdanos a mejorar
         </h2>
 

package/src/components/Survey/SurveyMobile.tsx

@@ -66,7 +66,7 @@ const SurveyMobile = ({
 
         {/* Centered Illustration */}
         {icons?.surveyIcon && (
-          <div className="flex justify-center mb-3 mt-2">
+          <div className="flex justify-center mb-2 mt-2">
             <img
               src={icons.surveyIcon}
               alt="Survey Illustration"
@@ -76,12 +76,12 @@ const SurveyMobile = ({
         )}
 
         {/* Centered Title */}
-        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center  mb-2">
           Ayúdanos a mejorar
         </h2>
 
         {/* Centered Subtitle */}
-        <p className="text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto">
+        <p className="text-[13.33px] text-center leading-[1.4] mb-8 max-w-[460px] mx-auto">
           Basándote en tu experiencia de compra.
           <br />
           ¿Nos recomendarías a un amigo?
@@ -104,8 +104,8 @@ const SurveyMobile = ({
           onFeedbackChange={onFeedbackChange}
         />
 
-        <div className="flex justify-center mt-[20px]">
-          <div className="w-[180px]">
+        <div className="flex justify-center mt-[50px] mb-[50px]">
+          <div className="w-[100px]">
             <KuposButton
               isSoldOut={selectedScore == null}
               isLoading={isLoading || false}

package/src/ui/OfferBanner.tsx

@@ -3,31 +3,202 @@ import LottiePlayer from "../assets/LottiePlayer";
 import CommonService from "../utils/CommonService";
 import { ServiceItemProps } from "../components/ServiceItem/types";
 
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type ServiceItemSlice = Pick<
+  ServiceItemProps["serviceItem"],
+  | "is_dp_enabled"
+  | "offer_text"
+  | "dp_discount_percents"
+  | "dp_discounted_seats"
+>;
+
+interface OfferBannerColors {
+  bottomStripColor?: string;
+}
+
 interface OfferBannerProps {
   offerGradient: string;
   isSoldOut: boolean;
-  serviceItem: Pick<
-    ServiceItemProps["serviceItem"],
-    | "is_dp_enabled"
-    | "offer_text"
-    | "dp_discount_percents"
-    | "dp_discounted_seats"
-  >;
+  serviceItem: ServiceItemSlice;
   renderIcon: (name: string, size: string) => React.ReactNode;
-  isLoggedIn: any;
-  showLoginModal: any;
+  isLoggedIn: boolean;
+  showLoginModal: () => void;
   viewersConfig: ServiceItemProps["viewersConfig"];
-  getAnimationIcon: (name: string) => any;
+  getAnimationIcon: (name: string) => unknown;
   showLoginOption?: boolean;
   isNewUiEnabled?: boolean;
-  colors: any;
+  colors: OfferBannerColors;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const OFFER_TEXT_MAX_LENGTH = 30;
+
+function truncateOfferText(text: string): string {
+  return text.length > OFFER_TEXT_MAX_LENGTH
+    ? `${text.slice(0, OFFER_TEXT_MAX_LENGTH)}...`
+    : text;
+}
+
+function hasDpDiscounts(serviceItem: ServiceItemSlice): boolean {
+  return (
+    Object.keys(serviceItem?.dp_discount_percents ?? {}).length > 0 ||
+    (serviceItem?.dp_discounted_seats ?? []).length > 0
+  );
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+interface AnimationIconProps {
+  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
+  name: string;
+  width?: string;
+  height?: string;
+}
+
+const AnimationIcon: React.FC<AnimationIconProps> = ({
+  getAnimationIcon,
+  name,
+  width = "18px",
+  height = "18px",
+}) => (
+  <LottiePlayer
+    animationData={getAnimationIcon(name)}
+    width={width}
+    height={height}
+  />
+);
+
+// Shown when DP is enabled but no discounts / discounted seats are present
+const PopularServiceBanner: React.FC<{
+  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
+}> = ({ getAnimationIcon }) => (
+  <div className="flex items-center gap-[5px]">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="starAnimation" />
+    <span>Servicio popular entre los usuarios</span>
+  </div>
+);
+
+// Shown when the new UI is enabled and an offer text exists
+interface NewUiOfferBannerProps {
+  offerText: string;
+  isLoggedIn: boolean;
+  showLoginModal: () => void;
+  showLoginOption?: boolean;
+  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
+  hideRegister?: boolean;
 }
 
+const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
+  offerText,
+  isLoggedIn,
+  showLoginModal,
+  showLoginOption,
+  getAnimationIcon,
+  hideRegister,
+}) => (
+  <div className="flex items-center">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
+    <div className="flex items-center mt-[2px]">
+      <span
+        className="bold-text"
+        style={{ marginLeft: offerText ? "6px" : "3px" }}
+      >
+        {truncateOfferText(offerText)}{" "}
+        {!hideRegister &&
+          (isLoggedIn && showLoginOption ? null : (
+            <span onClick={showLoginModal} className="cursor-pointer">
+              - registro
+            </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" }}
+      />
+    </div>
+  </div>
+);
+
+// Shown for legacy (non-new-UI) promo offers
+interface LegacyOfferBannerProps {
+  offerText: string;
+  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
+}
+
+const LegacyOfferBanner: React.FC<LegacyOfferBannerProps> = ({
+  offerText,
+  getAnimationIcon,
+}) => (
+  <div className="flex items-center">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="promoAnim" />
+    <div className="flex items-center mt-[2px]">
+      <span
+        className="bold-text"
+        style={{ marginLeft: offerText ? "6px" : "3px" }}
+      >
+        {offerText}
+      </span>
+    </div>
+  </div>
+);
+
+// Right-side viewers / buying count
+interface ViewersCountProps {
+  serviceItem: ServiceItemSlice;
+  viewersConfig: ServiceItemProps["viewersConfig"];
+  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
+}
+
+const ViewersCount: React.FC<ViewersCountProps> = ({
+  serviceItem,
+  viewersConfig,
+  getAnimationIcon,
+}) => {
+  const showScarcity = hasDpDiscounts(serviceItem);
+
+  return (
+    <div className="flex items-center">
+      <AnimationIcon
+        getAnimationIcon={getAnimationIcon}
+        name="dotAnimation"
+        width="12px"
+        height="12px"
+      />
+      <span className="ml-[6px]">
+        <span
+          className="bold-text"
+          ref={(node) => CommonService.startViewerCount(node, viewersConfig)}
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        />{" "}
+        <span>
+          {viewersConfig?.label || " viendo"} |{" "}
+          <span>
+            {showScarcity && "Quedan pocos • "}
+            <span
+              className="bold-text"
+              ref={(node) => CommonService.startComprandoCount(node, 4, 16)}
+              style={{ fontVariantNumeric: "tabular-nums" }}
+            />{" "}
+            comprando
+          </span>
+        </span>
+      </span>
+    </div>
+  );
+};
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
 const OfferBanner: React.FC<OfferBannerProps> = ({
   offerGradient,
   isSoldOut,
   serviceItem,
-  renderIcon,
   isLoggedIn,
   showLoginModal,
   viewersConfig,
@@ -36,132 +207,59 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   isNewUiEnabled,
   colors,
 }) => {
+  const isLegacyOffer =
+    !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
+
+  const isDpEnabledWithoutDiscounts =
+    serviceItem?.is_dp_enabled && !hasDpDiscounts(serviceItem);
+
+  const showViewers = isNewUiEnabled || serviceItem?.is_dp_enabled;
+
+  const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
+
+  const renderLeftContent = () => {
+    if (isDpEnabledWithoutDiscounts) {
+      return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
+    }
+
+    const hasDp = hasDpDiscounts(serviceItem);
+
+    if (hasDp || (isNewUiEnabled && serviceItem?.offer_text)) {
+      return (
+        <NewUiOfferBanner
+          offerText={serviceItem.offer_text || ""}
+          isLoggedIn={isLoggedIn}
+          showLoginModal={showLoginModal}
+          showLoginOption={showLoginOption}
+          getAnimationIcon={getAnimationIcon}
+          hideRegister={hasDp}
+        />
+      );
+    }
+    if (isLegacyOffer) {
+      return (
+        <LegacyOfferBanner
+          offerText={serviceItem.offer_text!}
+          getAnimationIcon={getAnimationIcon}
+        />
+      );
+    }
+    return null;
+  };
+
   return (
     <div
-      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
-      style={{
-        background:
-          serviceItem?.offer_text && !isNewUiEnabled
-            ? colors?.bottomStripColor
-            : offerGradient,
-        opacity: isSoldOut ? 0.5 : 1,
-        // zIndex: 0,
-      }}
+      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
+      style={{ background, opacity: isSoldOut ? 0.5 : 1 }}
     >
-      <div className="flex  justify-between items-center w-full">
-        <div className="flex items-center ">
-          {serviceItem?.is_dp_enabled &&
-          Object.keys(serviceItem?.dp_discount_percents ?? {}).length === 0 &&
-          (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
-            <div className="flex items-center gap-[5px]">
-              {/* {renderIcon("whiteFireIcon", "14px")} */}
-              <LottiePlayer
-                animationData={getAnimationIcon("starAnimation")}
-                width="18px"
-                height="18px"
-              />
-              {/* starAnimation */}
-              <span>Servicio popular entre los usuarios</span>
-            </div>
-          ) : isNewUiEnabled && serviceItem?.offer_text ? (
-            <div className="flex items-center">
-              <LottiePlayer
-                animationData={getAnimationIcon("bombAnimation")}
-                width="18px"
-                height="18px"
-              />
-              <div className="flex items-center mt-[2px]">
-                <span
-                  className="bold-text"
-                  style={{
-                    marginLeft: serviceItem?.offer_text ? "6px" : "3px",
-                  }}
-                >
-                  {(serviceItem?.offer_text || "").length > 30
-                    ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
-                    : serviceItem?.offer_text || ""}{" "}
-                  {isLoggedIn && showLoginOption ? null : (
-                    <span onClick={showLoginModal} className="cursor-pointer">
-                      - registro
-                    </span>
-                  )}{" "}
-                  &nbsp;
-                </span>{" "}
-                {serviceItem?.offer_text ? "|" : ""}
-                Termina en&nbsp;
-                <span
-                  className="bold-text text-end"
-                  ref={(node) => CommonService.startCountdown(node, 599)}
-                  style={{
-                    fontVariantNumeric: "tabular-nums",
-                    display: "inline-block",
-                  }}
-                />
-              </div>
-            </div>
-          ) : (
-            serviceItem?.offer_text &&
-            !isNewUiEnabled && (
-              <div className="flex items-center">
-                <LottiePlayer
-                  animationData={getAnimationIcon("promoAnim")}
-                  width="18px"
-                  height="18px"
-                />
-                <div className="flex items-center mt-[2px]">
-                  <span
-                    className="bold-text"
-                    style={{
-                      marginLeft: serviceItem?.offer_text ? "6px" : "3px",
-                    }}
-                  >
-                    {serviceItem?.offer_text || ""}
-                  </span>{" "}
-                </div>
-              </div>
-            )
-          )}
-        </div>
-        {(isNewUiEnabled || serviceItem?.is_dp_enabled) && (
-          <div className="flex items-center">
-            {/* {renderIcon("personIcon", "16px")} */}
-            <LottiePlayer
-              animationData={getAnimationIcon("dotAnimation")}
-              width="12px"
-              height="12px"
-            />
-
-            <span className="ml-[6px]">
-              <span
-                className="bold-text"
-                ref={(node) =>
-                  CommonService.startViewerCount(node, viewersConfig)
-                }
-                style={{ fontVariantNumeric: "tabular-nums" }}
-              />{" "}
-              {/* <span className="bold-text">personas</span>{" "} */}
-              <span>
-                {" "}
-                {viewersConfig?.label || " viendo"} |{" "}
-                <span className="">
-                  {serviceItem?.is_dp_enabled &&
-                  Object.keys(serviceItem?.dp_discount_percents ?? {})
-                    .length === 0 &&
-                  (serviceItem?.dp_discounted_seats ?? []).length === 0
-                    ? null
-                    : "Quedan pocos • "}
-                  <span
-                    className="bold-text"
-                    ref={(node) =>
-                      CommonService.startComprandoCount(node, 4, 16)
-                    }
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  comprando
-                </span>
-              </span>
-            </span>
-          </div>
+      <div className="flex justify-between items-center w-full">
+        <div className="flex items-center">{renderLeftContent()}</div>
+        {showViewers && (
+          <ViewersCount
+            serviceItem={serviceItem}
+            viewersConfig={viewersConfig}
+            getAnimationIcon={getAnimationIcon}
+          />
         )}
       </div>
     </div>