kupos-ui-components-lib 10.4.74 → 10.4.75

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -498,7 +498,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[11px]  mt-1 text-center  whitespace-nowrap", style: {
                                 color: colors.seatPriceColor,
                             } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
-                React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
+                React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, availableSeats: showAvailableSeats ? serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats : undefined }))),
         children,
         React.createElement(ServiceBadges, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem, isAllinBus: isAllinBus, boardingName: boardingName, getAnimationIcon: getAnimationIcon })));
 }

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -378,7 +378,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 color: colors.seatPriceColor,
                             } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
                 React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
-                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem.service_type, renderIcon: renderIcon }))),
+                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem.service_type, renderIcon: renderIcon, availableSeats: showAvailableSeats ? serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats : undefined }))),
         isPeru ? null : (React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/styles.css

@@ -552,9 +552,6 @@
 .w-\[120px\] {
   width: 120px;
 }
-.w-\[150px\] {
-  width: 150px;
-}
 .w-\[170px\] {
   width: 170px;
 }
@@ -623,6 +620,9 @@
 .min-w-\[75px\] {
   min-width: 75px;
 }
+.min-w-\[150px\] {
+  min-width: 150px;
+}
 .flex-1 {
   flex: 1;
 }

package/dist/ui/BottomAmenities/BottomAmenities.d.ts

@@ -28,6 +28,7 @@ interface BottomAmenitiesProps {
     isDpEnabled?: boolean;
     serviceType?: string;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
+    availableSeats?: number;
 }
-declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }: BottomAmenitiesProps): React.ReactElement;
+declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, availableSeats, }: BottomAmenitiesProps): React.ReactElement;
 export default BottomAmenities;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -4,7 +4,7 @@ import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
 import FemaleBlock from "../FemaleBlock";
 import CommonService from "../../utils/CommonService";
-function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }) {
+function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, availableSeats, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -20,7 +20,11 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
             serviceType && (React.createElement("div", { className: `flex items-center gap-[3px] text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : "text-[#464647]"}`, style: { gridColumn: 4 } }, renderIcon === null || renderIcon === void 0 ? void 0 :
                 renderIcon("serviceTypeIcon", "15px"),
                 React.createElement("span", { className: "bold-text" }, CommonService.capitalizeFirstLetter(serviceType))))),
-        React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
+        React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] min-w-[150px]" },
+            availableSeats !== undefined && availableSeats > 0 && !isSoldOut && (React.createElement("div", { className: "text-[13.33px] whitespace-nowrap mr-[10px]", style: { color: "#464647" } },
+                availableSeats,
+                " ",
+                availableSeats === 1 ? "asiento restante" : "asientos restantes")),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
             serviceItem.is_change_ticket && !isDpEnabled && !isPeru && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),

package/package.json

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

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -979,6 +979,9 @@ function PeruServiceItemDesktop({
               setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id)
             }
             isPeru={isPeru}
+            availableSeats={
+              showAvailableSeats ? serviceItem?.available_seats : undefined
+            }
           />
         </div>
       </div>

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -791,6 +791,9 @@ function ServiceItemPB({
                   showServiceTypeUnderLogo ? undefined : serviceItem.service_type
                 }
                 renderIcon={renderIcon}
+                availableSeats={
+                  showAvailableSeats ? serviceItem?.available_seats : undefined
+                }
               />
             </div>
           </div>

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -33,6 +33,7 @@ interface BottomAmenitiesProps {
   isDpEnabled?: boolean;
   serviceType?: string;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
+  availableSeats?: number;
 }
 
 function BottomAmenities({
@@ -51,6 +52,7 @@ function BottomAmenities({
   isDpEnabled,
   serviceType,
   renderIcon,
+  availableSeats,
 }: BottomAmenitiesProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -93,7 +95,16 @@ function BottomAmenities({
       </div>
 
       {/* PET + FLEXIBLE (always visible) */}
-      <div className="flex items-center justify-end shrink-0 ml-[5px] w-[150px]">
+      <div className="flex items-center justify-end shrink-0 ml-[5px] min-w-[150px]">
+        {availableSeats !== undefined && availableSeats > 0 && !isSoldOut && (
+          <div
+            className="text-[13.33px] whitespace-nowrap mr-[10px]"
+            style={{ color:"#464647" }}
+          >
+            {availableSeats}{" "}
+            {availableSeats === 1 ? "asiento restante" : "asientos restantes"}
+          </div>
+        )}
         {serviceItem?.is_tracking_enabled && (
           <div className={grayscaleClass + " mr-[10px]"}>
             <LottiePlayer