kupos-ui-components-lib 10.4.63 → 10.4.65

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;

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -7,6 +7,7 @@ interface ExpandedDropdownProps {
     pet_seat_info?: Record<string, any>;
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
+    operator_service_name?: string;
   };
   isPeru?: boolean;
   translation?: Record<string, string>;
@@ -34,7 +35,7 @@ function ExpandedDropdown({
   const hasPetInfo =
     serviceItem.pet_seat_info &&
     Object.keys(serviceItem.pet_seat_info).length > 0;
-
+console.log("ExpandedDropdown serviceItem:", serviceItem);
   return (
     <div
       className="px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9"
@@ -47,7 +48,16 @@ function ExpandedDropdown({
         className="flex flex-col gap-[6px] text-[13px] text-[#464647]"
         style={{ lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 }}
       >
-        {isPeru || isDpEnabled ? null : isChangeTicket ? (
+        {isPeru || isDpEnabled ? null : serviceItem?.operator_service_name ===
+          "Cóndor Bus" ? (
+          <div className="flex gap-[8px] text-[13.33px]">
+            <span>{renderIcon("changeTicketIcon", "16px")}</span>
+            <span>
+              <span className="bold-text">Pasaje flexible:</span> Esta empresa
+              permite cambios hasta la hora del viaje.
+            </span>
+          </div>
+        ) : isChangeTicket ? (
           <div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
             <span>{renderIcon("changeTicketIcon", "16px")}</span>
             {/* <span style={{ marginTop: "2px" }}>

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/SeatSection/SeatSection.tsx

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

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

@@ -7,6 +7,7 @@ interface ExpandedDropdownMobileProps {
     pet_seat_info?: Record<string, any>;
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
+    operator_service_name?: string;
   };
   isPeru?: boolean;
   petSeatInfo?: Record<string, any>;
@@ -48,7 +49,18 @@ function ExpandedDropdownMobile({
         className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
         style={{ lineHeight: 1.6 }}
       >
-        {isPeru || isDpEnabled ? null : isChangeTicket ? (
+        {isPeru || isDpEnabled ? null : serviceItem?.operator_service_name ===
+          "Cóndor Bus" ? (
+          <div className="flex gap-[6px]">
+            <span className="mt-[3px]">
+              {renderIcon("changeTicketIcon", "14px")}
+            </span>
+            <span>
+              <span className="bold-text">Pasaje flexible:</span> Esta empresa
+              permite cambios hasta la hora del viaje.
+            </span>
+          </div>
+        ) : isChangeTicket ? (
           <div className="flex gap-[6px]">
             <span className="mt-[3px]">
               {renderIcon("changeTicketIcon", "14px")}

package/src/ui/mobileweb/SeatSectionMobile.tsx

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

@@ -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?: {

package/dist/ServiceItemPb.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t, }: ServiceItemProps): React.ReactElement;
-export default ServiceItemPB;