kupos-ui-components-lib 9.11.0 → 9.11.1

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);
@@ -117,6 +128,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     })();
     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 +144,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",

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 = () => {

package/package.json

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

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(
@@ -218,6 +238,25 @@ function SeatSection({
 
   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 +270,6 @@ function SeatSection({
 
       const operatorServiceName =
         serviceItem?.operator_service_name === "MovilBus";
-      const bottomLabel = operatorServiceName || "Desde";
 
       return (
         <>

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"