kupos-ui-components-lib 9.11.0 → 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

@@ -74,6 +74,17 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     };
     const renderSeatPrices = () => {
         if (isPeru) {
+            const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
+            // Multiple unique seat types → show a price row for each (MovilBus only)
+            if (isMovilBus && uniqueSeats.length > 1) {
+                return uniqueSeats
+                    .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
+                    .map((val, key) => {
+                    const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
+                    return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice)));
+                });
+            }
+            // Single seat type → original behaviour (one lowest-fare price)
             const allSeats = getAllSeatTypes(seatTypes);
             const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
             const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
@@ -115,8 +126,30 @@ 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";
+            // Multiple unique seat types → show a label row for each (MovilBus only)
+            if (isMovilBus && uniqueSeats.length > 1) {
+                return uniqueSeats
+                    .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
+                    .map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, CommonService.truncateSeatLabel(val.label))));
+            }
+            // Single seat type → original behaviour
             const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
             const filteredSeats = seats.filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
             const seatLabel = filteredSeats.length > 0
@@ -125,7 +158,6 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                     : filteredSeats[0].label
                 : null;
             const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
-            const bottomLabel = operatorServiceName || "Desde";
             return (React.createElement(React.Fragment, null,
                 hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
                         color: "#999",
@@ -224,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

@@ -64,21 +64,29 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         if (lowestFare === null)
             return null;
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
-        const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
-        const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], 1);
+        // Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
+        const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], Infinity);
+        // MovilBus + multiple unique seat types → render a row per seat
+        if (isMovilBus && uniqueSeats.length > 1) {
+            return (React.createElement(React.Fragment, null, uniqueSeats.map((seat, key) => {
+                const { discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
+                return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center" },
+                    React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
+                    React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign))));
+            })));
+        }
+        // Single seat type (or non-MovilBus) → original behaviour
+        const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         const seatLabel = uniqueSeats.length > 0
             ? commonService.truncateSeatLabel(uniqueSeats[0].label)
             : null;
-        const bottomLabel = isMovilBus ? seatLabel || "Desde" : "Desde";
         return (React.createElement(React.Fragment, null,
             originalPrice !== discountedPrice && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
             React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus"
-                    ? seatLabel
-                    : "Desde"),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isMovilBus ? seatLabel || "Desde" : "Desde"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {
@@ -146,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)
@@ -198,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.0",
+  "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

@@ -139,6 +139,26 @@ function SeatSection({
 
   const renderSeatPrices = () => {
     if (isPeru) {
+      const isMovilBus = serviceItem?.operator_service_name === "MovilBus";
+
+      // Multiple unique seat types → show a price row for each (MovilBus only)
+      if (isMovilBus && uniqueSeats.length > 1) {
+        return uniqueSeats
+          .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
+          .map((val, key) => {
+            const { discountedPrice } = CommonService.calculateDiscountedPrice(
+              val.price,
+              serviceItem,
+            );
+            return (
+              <span key={key} className="flex items-center text-[13.33px] bold-text">
+                {formatPrice(discountedPrice)}
+              </span>
+            );
+          });
+      }
+
+      // Single seat type → original behaviour (one lowest-fare price)
       const allSeats = getAllSeatTypes(seatTypes);
       const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
       const { discountedPrice } = CommonService.calculateDiscountedPrice(
@@ -216,8 +236,45 @@ 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";
+
+      // Multiple unique seat types → show a label row for each (MovilBus only)
+      if (isMovilBus && uniqueSeats.length > 1) {
+        return uniqueSeats
+          .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
+          .map((val, key) => (
+            <span
+              key={key}
+              className={`flex items-center justify-between text-[13.33px] ${
+                isSoldOut ? "text-[#c0c0c0]" : ""
+              }`}
+            >
+              {CommonService.truncateSeatLabel(val.label)}
+            </span>
+          ));
+      }
+
+      // Single seat type → original behaviour
       const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
       const filteredSeats = seats.filter(
         (s) => !SEAT_EXCEPTIONS.includes(s.label),
@@ -231,7 +288,6 @@ function SeatSection({
 
       const operatorServiceName =
         serviceItem?.operator_service_name === "MovilBus";
-      const bottomLabel = operatorServiceName || "Desde";
 
       return (
         <>
@@ -452,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

@@ -149,16 +149,52 @@ function SeatSectionMobile({
     if (lowestFare === null) return null;
 
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
+    const isMovilBus = serviceItem?.operator_service_name === "MovilBus";
+
+    // Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
+    const uniqueSeats = getUniqueSeats(seatTypesData ?? [], Infinity as number);
+
+    // MovilBus + multiple unique seat types → render a row per seat
+    if (isMovilBus && uniqueSeats.length > 1) {
+      return (
+        <>
+          {uniqueSeats.map((seat, key) => {
+            const { discountedPrice } = commonService.calculateDiscountedPrice(
+              Number(seat.fare),
+              serviceItem,
+            );
+            return (
+              <div
+                key={key}
+                className="w-[100%] flex flex-row justify-between items-center"
+              >
+                <span
+                  className="min-[420]:text-[13px] text-[12px] bold-text"
+                  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+                >
+                  {commonService.truncateSeatLabel(seat.label)}
+                </span>
+                <span
+                  className="min-[420]:text-[13px] text-[12px] bold-text"
+                  style={{ color: priceColor }}
+                >
+                  {commonService.currency(discountedPrice, currencySign)}
+                </span>
+              </div>
+            );
+          })}
+        </>
+      );
+    }
+
+    // Single seat type (or non-MovilBus) → original behaviour
     const { originalPrice, discountedPrice } =
       commonService.calculateDiscountedPrice(lowestFare, serviceItem);
 
-    const isMovilBus = serviceItem?.operator_service_name === "MovilBus";
-    const uniqueSeats = getUniqueSeats(seatTypesData ?? [], 1);
     const seatLabel =
       uniqueSeats.length > 0
         ? commonService.truncateSeatLabel(uniqueSeats[0].label)
         : null;
-    const bottomLabel = isMovilBus ? seatLabel || "Desde" : "Desde";
 
     return (
       <>
@@ -183,9 +219,7 @@ function SeatSectionMobile({
             className="min-[420]:text-[13px] text-[12px] bold-text"
             style={{ color: isSoldOut ? "#bbb" : "#464647" }}
           >
-            {serviceItem?.operator_service_name === "MovilBus"
-              ? seatLabel
-              : "Desde"}
+            {isMovilBus ? seatLabel || "Desde" : "Desde"}
           </span>
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"
@@ -359,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,
@@ -476,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={{