kupos-ui-components-lib 10.4.62 → 10.4.64

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -45,7 +45,8 @@ function addSeatDegree(label) {
     return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 function hasInclinationSeatTypes(seatTypes) {
-    return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "").includes("°"); });
+    // Matches "160°" as well as a bare "160" label
+    return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return /\b(120|140|160|180)\b/.test(String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "")); });
 }
 const getUniqueSeats = (data, limit) => {
     var _a;
@@ -116,7 +117,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                                     marginRight: "4px",
                                     filter: isSoldOut ? "grayscale(1)" : "",
                                 } })),
-                            commonService.truncateSeatLabel(seat.label)),
+                            commonService.truncateSeatLabel(commonService.addSeatDegree(seat.label))),
                         React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
                 })));
         }
@@ -155,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) ||
@@ -165,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 } },
@@ -254,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

@@ -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

@@ -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

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -221,6 +221,22 @@ const FilterBarDesktop = ({
           });
         }
 
+        if (fil.type == "service_type") {
+          const activeOptions = fil.options.filter((it) => it.active);
+          if (activeOptions.length) {
+            filteredRoutes = filteredRoutes.filter((it) =>
+              activeOptions.some(
+                (f) =>
+                  f.value ===
+                  String(it.service_type || "")
+                    .trim()
+                    .replace(/\s+/g, " ")
+                    .toLowerCase(),
+              ),
+            );
+          }
+        }
+
         if (fil.type == "operator") {
           let activeOptions = fil.options.filter((it) => it.active);
           filteredRoutes = filteredRoutes.filter((it) => {

package/src/components/FilterBar/ServiceFilter.tsx

@@ -23,6 +23,7 @@ interface ServiceFilterBarDesktopState {
   showTrainType: boolean;
   addMargin: boolean;
   showAmenities: boolean;
+  showServiceType: boolean;
   sortedFilters: any[];
 }
 
@@ -43,6 +44,7 @@ class ServiceFilter extends React.Component<
       showTrainType: props.initialOpenFilters?.includes("train_type") || true,
       addMargin: false,
       showAmenities: props.initialOpenFilters?.includes("amenities") || true,
+      showServiceType: true,
       sortedFilters: this.sortFilters(props.filtersArray),
     };
 
@@ -80,6 +82,7 @@ class ServiceFilter extends React.Component<
     const FILTER_ORDER = [
       "time",
       "operator",
+      "service_type",
       "special_departure",
       "tipo",
       "seat_types",
@@ -173,6 +176,10 @@ class ServiceFilter extends React.Component<
           type === "amenities"
             ? !prevState.showAmenities
             : prevState.showAmenities,
+        showServiceType:
+          type === "service_type"
+            ? !prevState.showServiceType
+            : prevState.showServiceType,
       };
     });
   }
@@ -186,6 +193,7 @@ class ServiceFilter extends React.Component<
       showSpecialDeparture,
       showTrainType,
       showAmenities,
+      showServiceType,
     } = this.state;
 
     const isOpen =
@@ -195,7 +203,8 @@ class ServiceFilter extends React.Component<
       (option.type === "tipo" && showTypeOptions) ||
       (option.type === "special_departure" && showSpecialDeparture) ||
       (option.type === "train_type" && showTrainType) ||
-      (option.type === "amenities" && showAmenities);
+      (option.type === "amenities" && showAmenities) ||
+      (option.type === "service_type" && showServiceType);
 
     if (option?.type === "train_type" && !this.props.isTrain) {
       return null;
@@ -249,7 +258,8 @@ class ServiceFilter extends React.Component<
               option.type !== "seat_types" &&
               option.type !== "tipo" &&
               option.type !== "special_departure" &&
-              option.type !== "train_type")) &&
+              option.type !== "train_type" &&
+              option.type !== "service_type")) &&
             option.options.map((val: any, i: number) => {
               let iconKey = "";
               if (val.icon === "sunrise") {

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -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

@@ -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

@@ -154,6 +154,7 @@ function ServiceItemPB({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showServiceTypeUnderLogo = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -277,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%)`;
@@ -669,6 +672,7 @@ function ServiceItemPB({
                     translation={translation}
                     isPeru={isPeru}
                     isTrain={isTrain}
+                    showServiceTypeUnderLogo={showServiceTypeUnderLogo}
                   />
                 </div>
 
@@ -778,7 +782,9 @@ function ServiceItemPB({
                 isPeru={isPeru}
                 isTrain={isTrain}
                 isDpEnabled={serviceItem.is_dp_enabled}
-                serviceType={serviceItem.service_type}
+                serviceType={
+                  showServiceTypeUnderLogo ? undefined : serviceItem.service_type
+                }
                 renderIcon={renderIcon}
               />
             </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -69,6 +69,7 @@ function ServiceItemMobile({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showServiceTypeUnderLogo = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -93,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 &&
@@ -102,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",
@@ -285,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)" ||
@@ -299,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]"
@@ -340,6 +343,15 @@ function ServiceItemMobile({
                     <div className="black-text min-[420]:text-[12px] text-[12px]">
                       {serviceItem?.operator_details[2]}
                     </div>
+                  ) : showServiceTypeUnderLogo && serviceItem?.service_type ? (
+                    <div
+                      className="min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[150px]"
+                      style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+                    >
+                      {commonService.capitalizeFirstLetter(
+                        serviceItem.service_type,
+                      )}
+                    </div>
                   ) : showRating ? (
                     <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
                       <div className="flex items-center">
@@ -436,7 +448,9 @@ function ServiceItemMobile({
                 hoursIcon={renderIcon("hours", "14px")}
                 duration={serviceItem.duration?.toString()}
                 isDirectTrip={serviceItem?.is_direct_trip}
-                serviceType={serviceItem?.service_type}
+                serviceType={
+                  showServiceTypeUnderLogo ? undefined : serviceItem?.service_type
+                }
                 directoColor={colors.directoColor}
                 directoAnim={serviceItem.icons.directoAnim}
                 isChangeTicket={serviceItem.is_change_ticket}
@@ -480,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={{
@@ -523,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]"
@@ -542,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 ? (
@@ -650,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,
@@ -662,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

@@ -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;
@@ -267,4 +269,5 @@ export interface MobileServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  showServiceTypeUnderLogo?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -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;
@@ -288,4 +290,5 @@ export interface ServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  showServiceTypeUnderLogo?: boolean;
 }

package/src/ui/OfferBanner.tsx

@@ -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

@@ -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/RatingBlock.tsx

@@ -11,7 +11,12 @@ const RatingBlock = ({
   translation,
   isPeru = false,
   isTrain = false,
+  showServiceTypeUnderLogo = false,
 }: any) => {
+  const operatorLabel = showServiceTypeUnderLogo
+    ? commonService.capitalizeFirstLetter(serviceItem?.service_type)
+    : serviceItem.operator_details[2];
+
   return (
     <div
       className="flex items-center whitespace-nowrap"
@@ -38,7 +43,7 @@ const RatingBlock = ({
         <span
           className={`block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}`}
         >
-          {serviceItem.operator_details[2]}
+          {operatorLabel}
         </span>
         <div
           className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
@@ -48,7 +53,7 @@ const RatingBlock = ({
             className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
             style={{ borderBottomColor: colors.bottomStripColor }}
           ></div>
-          {serviceItem.operator_details[2]}
+          {operatorLabel}
         </div>
       </div>
     </div>