npm - kupos-ui-components-lib - Versions diffs - 10.4.63 → 10.4.64 - Mend

kupos-ui-components-lib 10.4.63 → 10.4.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/components/ServiceItem/PeruServiceItemDesktop.js +3 -1
package/dist/components/ServiceItem/PeruServiceItemMobile.js +5 -3
package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -2
package/dist/components/ServiceItem/ServiceItemMobile.js +11 -13
package/dist/components/ServiceItem/mobileTypes.d.ts +2 -0
package/dist/components/ServiceItem/types.d.ts +2 -0
package/dist/ui/OfferBanner.d.ts +1 -1
package/dist/ui/OfferBanner.js +9 -5
package/dist/ui/PeruOfferBanner.d.ts +1 -1
package/dist/ui/PeruOfferBanner.js +5 -1
package/dist/ui/SeatSection/SeatSection.js +6 -4
package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
package/dist/ui/mobileweb/SeatSectionMobile.js +7 -3
package/dist/utils/CommonService.d.ts +7 -0
package/dist/utils/CommonService.js +6 -0
package/package.json +1 -1
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +4 -1
package/src/components/ServiceItem/PeruServiceItemMobile.tsx +6 -3
package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -2
package/src/components/ServiceItem/ServiceItemMobile.tsx +12 -13
package/src/components/ServiceItem/mobileTypes.ts +2 -0
package/src/components/ServiceItem/types.ts +2 -0
package/src/ui/OfferBanner.tsx +10 -5
package/src/ui/PeruOfferBanner.tsx +7 -1
package/src/ui/SeatSection/SeatSection.tsx +20 -16
package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
package/src/ui/mobileweb/SeatSectionMobile.tsx +25 -18
package/src/utils/CommonService.ts +13 -0

package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED Viewed

@@ -110,7 +110,9 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         return label;
     })();
     let isSoldOut = serviceItem.available_seats <= 0;
-    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
+    // show_dp_ui: false renders a DP service with the regular card UI
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
+        !CommonService.isDpUiHidden(serviceItem);
     const peruDiscount = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0];
     const uiType = peruDiscount === null || peruDiscount === void 0 ? void 0 : peruDiscount.ui_type;
     const renderIcon = (iconKey, size = "14px") => {

package/dist/components/ServiceItem/PeruServiceItemMobile.js CHANGED Viewed

@@ -33,7 +33,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
     const displayOfferText = offerText.length > OFFER_TEXT_MAX_CHARS
         ? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
         : offerText;
-    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
+    // show_dp_ui: false renders a DP service with the regular card UI
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
+        !commonService.isDpUiHidden(serviceItem);
     const hasDpRibbon = hasDpEnabled && Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : 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).
@@ -117,7 +119,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
     const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
         ? extractStage(serviceItem.stage_details_arr, 1)
         : null;
-    return (React.createElement("div", { className: `relative  ${!hasOfferText || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement("div", { className: `relative  ${!hasOfferText || !hasDpEnabled ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel ||
@@ -185,7 +187,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
             } },
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
                 React.createElement("div", { className: "flex justify-between items-center" },
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+                    hasDpEnabled &&
                         Object.keys((_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _s !== void 0 ? _s : {}).length ===
                             0 &&
                         ((_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _t !== void 0 ? _t : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },

package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED Viewed

@@ -165,9 +165,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         }
         return false;
     })();
+    // show_dp_ui: false renders a DP service with the regular card UI
+    const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
     const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
-    const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
-    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
+    const dpDiscountPercent = isDpUiHidden ? undefined : dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true && !isDpUiHidden;
     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 = ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||

package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED Viewed

@@ -32,13 +32,15 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
     const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
+    // show_dp_ui: false renders a DP service with the regular card UI
+    const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !commonService.isDpUiHidden(serviceItem);
     const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
     const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
     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 = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
-        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+        (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
         ? {
             borderColor: isSoldOut ? "#ccc" : "transparent",
             borderStyle: "solid",
@@ -120,7 +122,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
                 ? null
-                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative  ${!hasOfferText || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(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  ${!hasOfferText || !showDpUi ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel ||
@@ -128,8 +130,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { zIndex: 1 } },
         React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
-                ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
+                (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
                 !isSoldOut
                 ? "rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -169,7 +170,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             isNewUiEnabled &&
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
             !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: {
+            !showDpUi && (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,
@@ -185,8 +186,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                             } },
                             React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
         ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
-            ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
+            (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
             !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
                 background: isSoldOut
                     ? offerGradientWithOpacity
@@ -197,7 +197,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             } },
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
                 React.createElement("div", { className: "flex justify-between items-center" },
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+                    showDpUi &&
                         Object.keys((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _k !== void 0 ? _k : {})
                             .length === 0 &&
                         ((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _l !== void 0 ? _l : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
@@ -242,8 +242,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText ||
-                    ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
+                    (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
                     (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
                     ? -2
                     : -1,
@@ -251,13 +250,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement("div", { style: {
                     overflow: "hidden",
                     minHeight: 0,
-                    position: hasOfferText || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+                    position: hasOfferText || isNewUiEnabled || showDpUi
                         ? "relative"
                         : undefined,
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
                         (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
-                        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+                        (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
                         ? -3
                         : undefined,
                     marginTop: hasOfferText ? "-15px" : "-10px",

package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED Viewed

@@ -37,6 +37,8 @@ export interface MobileServiceItemProps {
         train_type_label?: string;
         ladies_booked_seats?: string;
         is_dp_enabled?: boolean;
+        show_dp_ui?: boolean;
+        show_best_price?: boolean;
         offer_text?: string;
         is_direct_trip?: boolean;
         is_train_type?: boolean;

package/dist/components/ServiceItem/types.d.ts CHANGED Viewed

@@ -41,6 +41,8 @@ export interface ServiceItemProps {
         offer_text?: string;
         is_direct_trip?: boolean;
         is_dp_enabled?: boolean;
+        show_dp_ui?: boolean;
+        show_best_price?: boolean;
         dp_discount_percents?: any;
         dp_discounted_seats?: any;
         original_dp_price?: any;

package/dist/ui/OfferBanner.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 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" | "show_register_button" | "ui_type">;
+type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
 interface OfferBannerColors {
     bottomStripColor?: string;
 }

package/dist/ui/OfferBanner.js CHANGED Viewed

@@ -10,6 +10,8 @@ function truncateOfferText(text) {
 }
 function hasDpDiscounts(serviceItem) {
     var _a, _b;
+    if (CommonService.isDpUiHidden(serviceItem))
+        return false;
     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);
 }
@@ -64,16 +66,18 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
     const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
     const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
+    // With show_dp_ui: false the banner renders as for a non-DP service
+    const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !CommonService.isDpUiHidden(serviceItem);
     const isLegacyOffer = !!offerText &&
         isNewUiEnabled &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
-        !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
+        !showDpUi;
     const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
+        showDpUi;
     const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
     const renderLeftContent = () => {
         const hasDp = hasDpDiscounts(serviceItem);
-        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDp) {
+        if (showDpUi && !hasDp) {
             return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
         }
         if (isLegacyOffer) {
@@ -86,13 +90,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
     };
     return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end `, style: {
             background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
-                ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
+                (showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
                 ? offerGradient
                 : background,
             opacity: isSoldOut ? 0.5 : 1,
             zIndex: isLinatal ? "-1" : "0",
             paddingBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 2
-                ? "12px"
+                ? "7px"
                 : "9px",
         } },
         React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },

package/dist/ui/PeruOfferBanner.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 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" | "show_register_button">;
+type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
 interface OfferBannerColors {
     bottomStripColor?: string;
 }

package/dist/ui/PeruOfferBanner.js CHANGED Viewed

@@ -10,6 +10,8 @@ function truncateOfferText(text) {
 }
 function hasDpDiscounts(serviceItem) {
     var _a, _b;
+    if (CommonService.isDpUiHidden(serviceItem))
+        return false;
     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);
 }
@@ -64,7 +66,9 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, is
         ? (colors === null || colors === void 0 ? void 0 : colors.bottomStripColor) || offerGradient
         : offerGradient;
     const renderLeftContent = () => {
-        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDp) {
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+            !CommonService.isDpUiHidden(serviceItem) &&
+            !hasDp) {
             return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
         }
         if (isOfferTextOnly) {

package/dist/ui/SeatSection/SeatSection.js CHANGED Viewed

@@ -281,6 +281,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     // ).find(([, percent]) => Number(percent));
     const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {}).sort(([, a], [, b]) => Number(a) - Number(b))[0];
     const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
+    // show_dp_ui: false falls through to the regular fare layout
+    const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
     const getLowestDpValue = (source) => {
         if (!source)
             return undefined;
@@ -325,7 +327,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                         ? CommonService.currency(0, currencySign)
                         : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
     };
-    if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !dpDiscountEntry) {
+    if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !isDpUiHidden && !dpDiscountEntry) {
         const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
         const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
         return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] ", style: {
@@ -337,7 +339,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             React.createElement("div", null,
                 React.createElement("div", { className: "relative" },
                     React.createElement("div", { className: "absolute -left-[20px]  transform -translate-y-1/2 top-[16px]" }, renderIcon("fireIcon", "16px")),
-                    React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
+                    CommonService.showDpBestPrice(serviceItem) && (React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
                             animation: "pulse-zoom 2s ease-in-out infinite",
                             whiteSpace: "nowrap",
                         } },
@@ -346,12 +348,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                                 whiteSpace: "nowrap",
                                 color: dpSeatColor,
                                 backgroundColor: tooltipColor,
-                            } }, "Mejor precio")),
+                            } }, "Mejor precio"))),
                     React.createElement("div", { className: "text-[22px] bold-text leading-[30px] text-center", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } }, availableSeats <= 0
                         ? CommonService.currency(0, currencySign)
                         : CommonService.discountedCurrency(lowestFare, currencySign))))));
     }
-    if (dpDiscountEntry) {
+    if (dpDiscountEntry && !isDpUiHidden) {
         const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
         const allFares = ((_a = serviceItem.seat_types) !== null && _a !== void 0 ? _a : [])
             .map((st) => st.fare)

package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react";
 import CommonService from "../../utils/CommonService";
 const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
-    return (React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
+    return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut

package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED Viewed

@@ -156,7 +156,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const { discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
         return (React.createElement("div", { className: "relative flex flex-col justify-center h-full", style: { opacity: isSoldOut ? 0.5 : 1 } },
-            React.createElement("div", { className: "absolute right-[0px]", style: {
+            commonService.showDpBestPrice(serviceItem) && (React.createElement("div", { className: "absolute right-[0px]", style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     top: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0) ||
@@ -166,7 +166,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 } },
                 React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]", style: {
                         backgroundColor: tooltipBgColor,
-                    } }, "Mejor precio")),
+                    } }, "Mejor precio"))),
             React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]" }, "Desde"),
                 React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
@@ -255,12 +255,16 @@ 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 = (_h = (_g = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.fare - b.fare)[0]) === null || _h === void 0 ? void 0 : _h.fare;
-    const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
+    // show_dp_ui: false falls through to the regular fare layout
+    const isDpUiHidden = commonService.isDpUiHidden(serviceItem);
+    const hasDpDiscount = !isDpUiHidden &&
+        (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%", flexShrink: 0 } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+        !isDpUiHidden &&
         !((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _j === void 0 ? void 0 : _j.length) &&
         !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (
     // Antes/Desde rows spread top/bottom so they line up with the

package/dist/utils/CommonService.d.ts CHANGED Viewed

@@ -16,6 +16,13 @@ declare const commonService: {
     formatDefaultLabel: (label: string) => string;
     addSeatDegree: (label: string) => string;
     getSeatDegreeIcon: (label: string, icons: any) => string | null;
+    isDpUiHidden: (serviceItem?: {
+        is_dp_enabled?: boolean;
+        show_dp_ui?: boolean;
+    }) => boolean;
+    showDpBestPrice: (serviceItem?: {
+        show_best_price?: boolean;
+    }) => boolean;
     calculateDiscountedPrice: (originalPrice: number | string, serviceItem?: {
         discount_type?: string;
         discount_value?: number;

package/dist/utils/CommonService.js CHANGED Viewed

@@ -332,6 +332,12 @@ const commonService = {
         const match = String(label !== null && label !== void 0 ? label : "").match(/\b(120|140|160|180)\b/);
         return match ? (icons === null || icons === void 0 ? void 0 : icons[`seat${match[1]}`]) || null : null;
     },
+    // The backend can switch off the DP look (gradient card, ribbon, DP fare
+    // block) per DP service with show_dp_ui: false. DP fare rules (no changes /
+    // cancellations) still apply. A missing flag keeps the current UI.
+    isDpUiHidden: (serviceItem) => Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_dp_ui) === false,
+    // "Mejor precio" pill on DP fares; a missing flag keeps the current UI.
+    showDpBestPrice: (serviceItem) => (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_best_price) !== false,
     calculateDiscountedPrice: (originalPrice, serviceItem) => {
         var _a;
         const price = typeof originalPrice === "string"

package/package.json CHANGED Viewed

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

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED Viewed

@@ -180,7 +180,10 @@ function PeruServiceItemDesktop({
   })();
   let isSoldOut = serviceItem.available_seats <= 0;
-  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  // show_dp_ui: false renders a DP service with the regular card UI
+  const hasDpEnabled =
+    serviceItem?.is_dp_enabled === true &&
+    !CommonService.isDpUiHidden(serviceItem);
   const peruDiscount = (serviceItem as any)?.discounts?.[0];
   const uiType = peruDiscount?.ui_type;

package/src/components/ServiceItem/PeruServiceItemMobile.tsx CHANGED Viewed

@@ -100,7 +100,10 @@ function PeruServiceItemMobile({
     offerText.length > OFFER_TEXT_MAX_CHARS
       ? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
       : offerText;
-  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  // show_dp_ui: false renders a DP service with the regular card UI
+  const hasDpEnabled =
+    serviceItem?.is_dp_enabled === true &&
+    !commonService.isDpUiHidden(serviceItem);
   const hasDpRibbon = hasDpEnabled && Boolean(serviceItem?.dp_discount_percents);
   // ui_type comes from the active discount entry: 1 = offer-text-only tier,
@@ -224,7 +227,7 @@ function PeruServiceItemMobile({
   return (
     <div
-      className={`relative  ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
+      className={`relative  ${!hasOfferText || !hasDpEnabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
         serviceItem?.is_direct_trip ||
         isConexion ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -470,7 +473,7 @@ function PeruServiceItemMobile({
               style={{ lineHeight: 1.6 }}
             >
               <div className="flex justify-between items-center">
-                {serviceItem?.is_dp_enabled &&
+                {hasDpEnabled &&
                 Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
                   0 &&
                 (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (

package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED Viewed

@@ -278,11 +278,13 @@ function ServiceItemPB({
     return false;
   })();
+  // show_dp_ui: false renders a DP service with the regular card UI
+  const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
   const dpDiscountEntry = Object.entries(
     serviceItem?.dp_discount_percents || {},
   )[0];
-  const dpDiscountPercent = dpDiscountEntry?.[1];
-  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  const dpDiscountPercent = isDpUiHidden ? undefined : dpDiscountEntry?.[1];
+  const hasDpEnabled = serviceItem?.is_dp_enabled === true && !isDpUiHidden;
   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%)`;

package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED Viewed

@@ -94,6 +94,9 @@ function ServiceItemMobile({
   const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
   const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+  // show_dp_ui: false renders a DP service with the regular card UI
+  const showDpUi =
+    serviceItem?.is_dp_enabled && !commonService.isDpUiHidden(serviceItem);
   const isDiscountBelow20 =
     (serviceItem as any)?.discount_value > 0 &&
@@ -103,7 +106,7 @@ function ServiceItemMobile({
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
     (isNewUiEnabled && serviceItem?.ui_type === 2) ||
-    (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+    (showDpUi && serviceItem?.dp_discount_percents)
       ? {
           borderColor: isSoldOut ? "#ccc" : "transparent",
           borderStyle: "solid",
@@ -286,7 +289,7 @@ function ServiceItemMobile({
         />
       ) : (
         <div
-          className={`relative  ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
+          className={`relative  ${!hasOfferText || !showDpUi ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
             serviceItem?.is_direct_trip ||
             isConexion ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -300,8 +303,7 @@ function ServiceItemMobile({
           <div
             className={`z-1 ${
               ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
-                (serviceItem?.is_dp_enabled &&
-                  serviceItem?.dp_discount_percents)) &&
+                (showDpUi && serviceItem?.dp_discount_percents)) &&
               !isSoldOut
                 ? "rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"
@@ -492,7 +494,7 @@ function ServiceItemMobile({
             isNewUiEnabled &&
             serviceItem?.ui_type === 1 &&
             !isSoldOut &&
-            !serviceItem?.is_dp_enabled && (
+            !showDpUi && (
               <div
                 className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
                 style={{
@@ -535,8 +537,7 @@ function ServiceItemMobile({
           {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
           {((isNewUiEnabled && serviceItem?.ui_type === 2) ||
-            (serviceItem?.is_dp_enabled &&
-              serviceItem?.dp_discount_percents)) &&
+            (showDpUi && serviceItem?.dp_discount_percents)) &&
             !isSoldOut && (
               <div
                 className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
@@ -554,7 +555,7 @@ function ServiceItemMobile({
                   style={{ lineHeight: 1.6 }}
                 >
                   <div className="flex justify-between items-center">
-                    {serviceItem?.is_dp_enabled &&
+                    {showDpUi &&
                     Object.keys(serviceItem?.dp_discount_percents ?? {})
                       .length === 0 &&
                     (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
@@ -662,8 +663,7 @@ function ServiceItemMobile({
               position: "relative",
               zIndex:
                 hasOfferText ||
-                (serviceItem?.is_dp_enabled &&
-                  serviceItem?.dp_discount_percents) ||
+                (showDpUi && serviceItem?.dp_discount_percents) ||
                 (isNewUiEnabled && serviceItem?.ui_type === 2)
                   ? -2
                   : -1,
@@ -674,14 +674,13 @@ function ServiceItemMobile({
                 overflow: "hidden",
                 minHeight: 0,
                 position:
-                  hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
+                  hasOfferText || isNewUiEnabled || showDpUi
                     ? "relative"
                     : undefined,
                 zIndex:
                   serviceItem?.offer_text ||
                   (isNewUiEnabled && serviceItem?.ui_type === 2) ||
-                  (serviceItem?.is_dp_enabled &&
-                    serviceItem?.dp_discount_percents)
+                  (showDpUi && serviceItem?.dp_discount_percents)
                     ? -3
                     : undefined,
                 marginTop: hasOfferText ? "-15px" : "-10px",

package/src/components/ServiceItem/mobileTypes.ts CHANGED Viewed

@@ -40,6 +40,8 @@ export interface MobileServiceItemProps {
     train_type_label?: string;
     ladies_booked_seats?: string;
     is_dp_enabled?: boolean;
+    show_dp_ui?: boolean;
+    show_best_price?: boolean;
     offer_text?: string;
     is_direct_trip?: boolean;
     is_train_type?: boolean;

package/src/components/ServiceItem/types.ts CHANGED Viewed

@@ -43,6 +43,8 @@ export interface ServiceItemProps {
     offer_text?: string;
     is_direct_trip?: boolean;
     is_dp_enabled?: boolean;
+    show_dp_ui?: boolean;
+    show_best_price?: boolean;
     dp_discount_percents?: any;
     dp_discounted_seats?: any;
     original_dp_price?: any;

package/src/ui/OfferBanner.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import { ServiceItemProps } from "../components/ServiceItem/types";
 type ServiceItemSlice = Pick<
   ServiceItemProps["serviceItem"],
   | "is_dp_enabled"
+  | "show_dp_ui"
   | "offer_text"
   | "dp_discount_percents"
   | "dp_discounted_seats"
@@ -49,6 +50,7 @@ function truncateOfferText(text: string): string {
 }
 function hasDpDiscounts(serviceItem: ServiceItemSlice): boolean {
+  if (CommonService.isDpUiHidden(serviceItem)) return false;
   return (
     Object.keys(serviceItem?.dp_discount_percents ?? {}).length > 0 ||
     (serviceItem?.dp_discounted_seats ?? []).length > 0
@@ -238,23 +240,26 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
     (serviceItem as any)?.discount_value > 0 &&
     (serviceItem as any)?.discount_value < 20;
   const offerText = serviceItem?.offer_text || "";
+  // With show_dp_ui: false the banner renders as for a non-DP service
+  const showDpUi =
+    serviceItem?.is_dp_enabled && !CommonService.isDpUiHidden(serviceItem);
   const isLegacyOffer =
     !!offerText &&
     isNewUiEnabled &&
     serviceItem?.ui_type === 1 &&
-    !serviceItem?.is_dp_enabled;
+    !showDpUi;
   const showViewers =
     (isNewUiEnabled && serviceItem?.ui_type !== 1) ||
-    serviceItem?.is_dp_enabled;
+    showDpUi;
   const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
   const renderLeftContent = () => {
     const hasDp = hasDpDiscounts(serviceItem);
-    if (serviceItem?.is_dp_enabled && !hasDp) {
+    if (showDpUi && !hasDp) {
       return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
     }
@@ -292,14 +297,14 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
       style={{
         background:
           (isNewUiEnabled && serviceItem?.ui_type === 2) ||
-          (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+          (showDpUi && serviceItem?.dp_discount_percents)
             ? offerGradient
             : background,
         opacity: isSoldOut ? 0.5 : 1,
         zIndex: isLinatal ? "-1" : "0",
         paddingBottom:
           serviceItem?.offer_text && serviceItem?.ui_type !== 2
-            ? "12px"
+            ? "7px"
             : "9px",
       }}
     >

package/src/ui/PeruOfferBanner.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import { ServiceItemProps } from "../components/ServiceItem/types";
 type ServiceItemSlice = Pick<
   ServiceItemProps["serviceItem"],
   | "is_dp_enabled"
+  | "show_dp_ui"
   | "offer_text"
   | "dp_discount_percents"
   | "dp_discounted_seats"
@@ -49,6 +50,7 @@ function truncateOfferText(text: string): string {
 }
 function hasDpDiscounts(serviceItem: ServiceItemSlice): boolean {
+  if (CommonService.isDpUiHidden(serviceItem)) return false;
   return (
     Object.keys(serviceItem?.dp_discount_percents ?? {}).length > 0 ||
     (serviceItem?.dp_discounted_seats ?? []).length > 0
@@ -232,7 +234,11 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
     : offerGradient;
   const renderLeftContent = () => {
-    if (serviceItem?.is_dp_enabled && !hasDp) {
+    if (
+      serviceItem?.is_dp_enabled &&
+      !CommonService.isDpUiHidden(serviceItem) &&
+      !hasDp
+    ) {
       return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
     }

package/src/ui/SeatSection/SeatSection.tsx CHANGED Viewed

@@ -516,6 +516,8 @@ function SeatSection({
     serviceItem?.dp_discount_percents || {},
   ).sort(([, a], [, b]) => Number(a) - Number(b))[0];
   const dpDiscountPercent = dpDiscountEntry?.[1];
+  // show_dp_ui: false falls through to the regular fare layout
+  const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
   const getLowestDpValue = (source: any): number | undefined => {
     if (!source) return undefined;
     const values: any[] = Array.isArray(source)
@@ -611,7 +613,7 @@ function SeatSection({
     );
   };
-  if (serviceItem?.is_dp_enabled && !dpDiscountEntry) {
+  if (serviceItem?.is_dp_enabled && !isDpUiHidden && !dpDiscountEntry) {
     const dpSeats = (
       removeDuplicateSeats ? uniqueSeats : sortedSeatTypes
     ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
@@ -636,25 +638,27 @@ function SeatSection({
             <div className="absolute -left-[20px]  transform -translate-y-1/2 top-[16px]">
               {renderIcon("fireIcon", "16px")}
             </div>
-            <div
-              className="absolute bottom-[35px] left-1/2 -translate-x-1/2 "
-              style={{
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <span
-                className="rounded-[100px]  px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white"
+            {CommonService.showDpBestPrice(serviceItem) && (
+              <div
+                className="absolute bottom-[35px] left-1/2 -translate-x-1/2 "
                 style={{
                   animation: "pulse-zoom 2s ease-in-out infinite",
                   whiteSpace: "nowrap",
-                  color: dpSeatColor,
-                  backgroundColor: tooltipColor,
                 }}
               >
-                Mejor precio
-              </span>
-            </div>
+                <span
+                  className="rounded-[100px]  px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                    color: dpSeatColor,
+                    backgroundColor: tooltipColor,
+                  }}
+                >
+                  Mejor precio
+                </span>
+              </div>
+            )}
             <div
               className="text-[22px] bold-text leading-[30px] text-center"
               style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
@@ -669,7 +673,7 @@ function SeatSection({
     );
   }
-  if (dpDiscountEntry) {
+  if (dpDiscountEntry && !isDpUiHidden) {
     const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
     const allFares = (serviceItem.seat_types ?? [])
       .map((st: any) => st.fare)

package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
   getAnimationIcon,
 }) => {
   return (
-    <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
+    <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
       {showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}

package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED Viewed

@@ -360,27 +360,29 @@ function SeatSectionMobile({
         className="relative flex flex-col justify-center h-full"
         style={{ opacity: isSoldOut ? 0.5 : 1 }}
       >
-        <div
-          className="absolute right-[0px]"
-          style={{
-            animation: "pulse-zoom 2s ease-in-out infinite",
-            top:
-              (serviceItem?.available_seats < 10 &&
-                serviceItem?.available_seats > 0) ||
-              isSoldOut
-                ? "-20px"
-                : "-15px",
-          }}
-        >
-          <span
-            className="rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
+        {commonService.showDpBestPrice(serviceItem) && (
+          <div
+            className="absolute right-[0px]"
             style={{
-              backgroundColor: tooltipBgColor,
+              animation: "pulse-zoom 2s ease-in-out infinite",
+              top:
+                (serviceItem?.available_seats < 10 &&
+                  serviceItem?.available_seats > 0) ||
+                isSoldOut
+                  ? "-20px"
+                  : "-15px",
             }}
           >
-            Mejor precio
-          </span>
-        </div>
+            <span
+              className="rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
+              style={{
+                backgroundColor: tooltipBgColor,
+              }}
+            >
+              Mejor precio
+            </span>
+          </div>
+        )}
         <div className="w-[100%] flex flex-row justify-between items-center">
           <span
             className="min-[420]:text-[13px] text-[12px]"
@@ -568,7 +570,11 @@ function SeatSectionMobile({
     )
     ?.sort((a, b) => a.fare - b.fare)[0]?.fare;
+  // show_dp_ui: false falls through to the regular fare layout
+  const isDpUiHidden = commonService.isDpUiHidden(serviceItem);
   const hasDpDiscount =
+    !isDpUiHidden &&
     serviceItem?.dp_discounted_seats &&
     serviceItem?.dp_discount_percents &&
     originalDpPrice != null &&
@@ -581,6 +587,7 @@ function SeatSectionMobile({
       style={{ width: "40%", flexShrink: 0 }}
     >
       {serviceItem?.is_dp_enabled &&
+      !isDpUiHidden &&
       !serviceItem?.dp_discounted_seats?.length &&
       !dpDiscountPercent ? (
         <div

package/src/utils/CommonService.ts CHANGED Viewed

@@ -349,6 +349,19 @@ const commonService = {
     return match ? icons?.[`seat${match[1]}`] || null : null;
   },
+  // The backend can switch off the DP look (gradient card, ribbon, DP fare
+  // block) per DP service with show_dp_ui: false. DP fare rules (no changes /
+  // cancellations) still apply. A missing flag keeps the current UI.
+  isDpUiHidden: (serviceItem?: {
+    is_dp_enabled?: boolean;
+    show_dp_ui?: boolean;
+  }): boolean =>
+    Boolean(serviceItem?.is_dp_enabled) && serviceItem?.show_dp_ui === false,
+  // "Mejor precio" pill on DP fares; a missing flag keeps the current UI.
+  showDpBestPrice: (serviceItem?: { show_best_price?: boolean }): boolean =>
+    serviceItem?.show_best_price !== false,
   calculateDiscountedPrice: (
     originalPrice: number | string,
     serviceItem?: {