kupos-ui-components-lib 9.11.1 → 9.11.2

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -130,6 +130,24 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         : serviceItem.seat_types || [];
     const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
+    // Mirror the same check as SeatSection: hide badge (and its top margin) when
+    // both percentage and max_discount exist and the cap is being applied.
+    const isMaxDiscountApplied = (() => {
+        const { discount_type, discount_value, max_discount } = serviceItem;
+        if (discount_type === "percentage" &&
+            typeof discount_value === "number" &&
+            max_discount != null &&
+            max_discount > 0) {
+            const lowestFare = discountedSeats
+                .map((s) => s.originalPrice)
+                .filter((p) => p > 0)
+                .sort((a, b) => a - b)[0];
+            if (lowestFare != null) {
+                return (lowestFare * discount_value) / 100 > max_discount;
+            }
+        }
+        return false;
+    })();
     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;
@@ -277,7 +295,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         : coachKey
                             ? "20px 15px 20px 15px"
                             : "20px 15px 10px 15px",
-                    marginTop: hasDiscount || hasOfferText || dpDiscountPercent
+                    marginTop: (hasDiscount || hasOfferText || dpDiscountPercent) &&
+                        !isMaxDiscountApplied
                         ? "14px"
                         : "",
                 } },

package/dist/ui/SeatSection/SeatSection.js

@@ -126,6 +126,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         }
         return null;
     })();
+    // Hide the % OFF badge when max_discount is capping the percentage discount
+    // (i.e. both percentage and max_discount exist, and the raw % amount exceeds the cap)
+    const isMaxDiscountApplied = (() => {
+        const { discount_type, discount_value, max_discount } = serviceItem !== null && serviceItem !== void 0 ? serviceItem : {};
+        if (discount_type === "percentage" &&
+            typeof discount_value === "number" &&
+            max_discount != null &&
+            max_discount > 0 &&
+            discountSeat) {
+            const rawPercentageDiscount = (discountSeat.originalPrice * discount_value) / 100;
+            return rawPercentageDiscount > max_discount;
+        }
+        return false;
+    })();
     const renderLabels = () => {
         if (isPeru) {
             const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
@@ -242,7 +256,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
-            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, discountValue != null && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white", style: {
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, discountValue != null && !isMaxDiscountApplied && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white", style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     whiteSpace: "nowrap",
                     backgroundColor: discountSeatPriceColor,

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -154,6 +154,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         }
         return null;
     })();
+    // Hide the % OFF badge when max_discount is capping the percentage discount
+    const isMaxDiscountApplied = (() => {
+        const { discount_type, discount_value, max_discount } = serviceItem !== null && serviceItem !== void 0 ? serviceItem : {};
+        if (discount_type === "percentage" &&
+            typeof discount_value === "number" &&
+            max_discount != null &&
+            max_discount > 0 &&
+            discountSeat) {
+            const rawPercentageDiscount = (discountSeat.originalPrice * discount_value) / 100;
+            return rawPercentageDiscount > max_discount;
+        }
+        return false;
+    })();
     const getMinValue = (data) => {
         const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(Number);
         if (!vals.length)
@@ -206,7 +219,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
-            discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
+            discountValue != null && !isMaxDiscountApplied && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     opacity: isSoldOut ? 0.5 : 1,
                 } },

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -225,6 +225,27 @@ function ServiceItemPB({
     (seat) => seat.originalPrice !== seat.discountedPrice,
   );
 
+  // Mirror the same check as SeatSection: hide badge (and its top margin) when
+  // both percentage and max_discount exist and the cap is being applied.
+  const isMaxDiscountApplied = (() => {
+    const { discount_type, discount_value, max_discount } = serviceItem as any;
+    if (
+      discount_type === "percentage" &&
+      typeof discount_value === "number" &&
+      max_discount != null &&
+      max_discount > 0
+    ) {
+      const lowestFare = discountedSeats
+        .map((s) => s.originalPrice)
+        .filter((p) => p > 0)
+        .sort((a, b) => a - b)[0];
+      if (lowestFare != null) {
+        return (lowestFare * discount_value) / 100 > max_discount;
+      }
+    }
+    return false;
+  })();
+
   const dpDiscountEntry = Object.entries(
     serviceItem?.dp_discount_percents || {},
   )[0];
@@ -532,7 +553,8 @@ function ServiceItemPB({
                       : "20px 15px 10px 15px",
 
                 marginTop:
-                  hasDiscount || hasOfferText || dpDiscountPercent
+                  (hasDiscount || hasOfferText || dpDiscountPercent) &&
+                  !isMaxDiscountApplied
                     ? "14px"
                     : "",
               }}

package/src/ui/SeatSection/SeatSection.tsx

@@ -236,6 +236,24 @@ function SeatSection({
     return null;
   })();
 
+  // Hide the % OFF badge when max_discount is capping the percentage discount
+  // (i.e. both percentage and max_discount exist, and the raw % amount exceeds the cap)
+  const isMaxDiscountApplied = (() => {
+    const { discount_type, discount_value, max_discount } = serviceItem ?? {};
+    if (
+      discount_type === "percentage" &&
+      typeof discount_value === "number" &&
+      max_discount != null &&
+      max_discount > 0 &&
+      discountSeat
+    ) {
+      const rawPercentageDiscount =
+        (discountSeat.originalPrice * discount_value) / 100;
+      return rawPercentageDiscount > max_discount;
+    }
+    return false;
+  })();
+
   const renderLabels = () => {
     if (isPeru) {
       const isMovilBus = serviceItem?.operator_service_name === "MovilBus";
@@ -490,7 +508,7 @@ function SeatSection({
           className="col-start-2 row-start-1 flex items-center justify-center absolute"
           style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
         >
-          {discountValue != null && (
+          {discountValue != null && !isMaxDiscountApplied && (
             <span
               className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
               style={{

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -393,6 +393,23 @@ function SeatSectionMobile({
     return null;
   })();
 
+  // Hide the % OFF badge when max_discount is capping the percentage discount
+  const isMaxDiscountApplied = (() => {
+    const { discount_type, discount_value, max_discount } = serviceItem ?? {};
+    if (
+      discount_type === "percentage" &&
+      typeof discount_value === "number" &&
+      max_discount != null &&
+      max_discount > 0 &&
+      discountSeat
+    ) {
+      const rawPercentageDiscount =
+        (discountSeat.originalPrice * discount_value) / 100;
+      return rawPercentageDiscount > max_discount;
+    }
+    return false;
+  })();
+
   const getMinValue = (data: any): number | undefined => {
     const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(
       Number,
@@ -510,7 +527,7 @@ function SeatSectionMobile({
       ) : hasDiscount && discountSeat ? (
         <div>
           <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
-            {discountValue != null && (
+            {discountValue != null && !isMaxDiscountApplied && (
               <div
                 className="absolute -top-[18px] right-[0px]"
                 style={{