kupos-ui-components-lib 10.4.73 → 10.4.75

package/dist/components/DiscountBanners/DiscountBannerDesktop.js

@@ -147,7 +147,6 @@ class DiscountBannersDesktop extends React.Component {
     }
     render() {
         const { services = [], wowDealData, backgroundImages = [], artIncludesChipPill, accentColors = [], label = DEFAULT_LABEL, currencySign = "$", size = "default", selectedKey, className = "", style, } = this.props;
-        console.log("🚀 ~ DiscountBannersDesktop ~ render ~ services:", services);
         // Compute cards directly — no useMemo
         const cards = deriveDiscountCards(services, wowDealData, currencySign);
         if (!cards.length)

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/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -91,31 +91,13 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
             selectedSlotService.original_price) *
             100)
         : savingsPercent;
-    // Convert "HH:MM" (24h) → "H:MM AM/PM"
-    const formatTimeAmPm = (time) => {
-        const match = time.match(/(\d{1,2}):(\d{2})/);
-        if (!match)
-            return time;
-        let h = parseInt(match[1], 10);
-        const m = match[2];
-        const period = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-        return `${h}:${m} ${period}`;
-    };
-    // Convert all HH:MM occurrences in a label string to AM/PM
-    const formatLabelAmPm = (label) => label.replace(/(\d{1,2}):(\d{2})/g, (_, hh, mm) => {
-        let h = parseInt(hh, 10);
-        const period = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-        return `${h}:${mm} ${period}`;
-    });
-    // The label shown on the dropdown button
-    const departureRange = formatLabelAmPm((activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `Entre ${dealWindowFrom} y ${dealWindowTo}`);
-    const currentWindowFrom = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
-        ? activeSlot.label.split(" - ")[0]
+    // The label shown on the dropdown button (24h format, e.g. "Entre 16:00 y 20:00")
+    const departureRange = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
+    const currentWindowFrom = activeSlot
+        ? commonService.minutesToTime(activeSlot.start)
         : dealWindowFrom;
-    const currentWindowTo = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
-        ? activeSlot.label.split(" - ")[1]
+    const currentWindowTo = activeSlot
+        ? commonService.minutesToTime(activeSlot.end === 1440 ? 1439 : activeSlot.end)
         : dealWindowTo;
     const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
         isFeatureDropDownExpand === true;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -105,11 +105,11 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
     // The label shown on the dropdown button
     const departureRange = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label) || `${dealWindowFrom} y ${dealWindowTo}`;
     // activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
-    const currentWindowFrom = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
-        ? activeSlot.label.split(" - ")[0]
+    const currentWindowFrom = activeSlot
+        ? commonService.minutesToTime(activeSlot.start)
         : dealWindowFrom;
-    const currentWindowTo = (activeSlot === null || activeSlot === void 0 ? void 0 : activeSlot.label)
-        ? activeSlot.label.split(" - ")[1]
+    const currentWindowTo = activeSlot
+        ? commonService.minutesToTime(activeSlot.end === 1440 ? 1439 : activeSlot.end)
         : dealWindowTo;
     if (expandedStateMap[serviceItem.id] === undefined) {
         expandedStateMap[serviceItem.id] = true;

package/package.json

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

package/src/components/DiscountBanners/DiscountBannerDesktop.tsx

@@ -197,7 +197,6 @@ class DiscountBannersDesktop extends React.Component<
       className = "",
       style,
     } = this.props;
-      console.log("🚀 ~ DiscountBannersDesktop ~ render ~ services:", services)
 
     // Compute cards directly — no useMemo
     const cards = deriveDiscountCards(services, wowDealData, currencySign);

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

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx

@@ -131,36 +131,17 @@ const FeatureServiceUiMobile = ({
         )
       : savingsPercent;
 
-  // Convert "HH:MM" (24h) → "H:MM AM/PM"
-  const formatTimeAmPm = (time: string): string => {
-    const match = time.match(/(\d{1,2}):(\d{2})/);
-    if (!match) return time;
-    let h = parseInt(match[1], 10);
-    const m = match[2];
-    const period = h >= 12 ? "PM" : "AM";
-    h = h % 12 || 12;
-    return `${h}:${m} ${period}`;
-  };
-
-  // Convert all HH:MM occurrences in a label string to AM/PM
-  const formatLabelAmPm = (label: string): string =>
-    label.replace(/(\d{1,2}):(\d{2})/g, (_, hh, mm) => {
-      let h = parseInt(hh, 10);
-      const period = h >= 12 ? "PM" : "AM";
-      h = h % 12 || 12;
-      return `${h}:${mm} ${period}`;
-    });
+  // The label shown on the dropdown button (24h format, e.g. "Entre 16:00 y 20:00")
+  const departureRange =
+    activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
 
-  // The label shown on the dropdown button
-  const departureRange = formatLabelAmPm(
-    activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`,
-  );
-
-  const currentWindowFrom = activeSlot?.label
-    ? activeSlot.label.split(" - ")[0]
+  const currentWindowFrom = activeSlot
+    ? commonService.minutesToTime(activeSlot.start)
     : dealWindowFrom;
-  const currentWindowTo = activeSlot?.label
-    ? activeSlot.label.split(" - ")[1]
+  const currentWindowTo = activeSlot
+    ? commonService.minutesToTime(
+        activeSlot.end === 1440 ? 1439 : activeSlot.end,
+      )
     : dealWindowTo;
 
   const isItemExpanded =

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -147,11 +147,13 @@ const FeatureServiceUi = ({
     activeSlot?.label || `${dealWindowFrom} y ${dealWindowTo}`;
   // activeSlot?.label || `Entre ${dealWindowFrom} y ${dealWindowTo}`;
 
-  const currentWindowFrom = activeSlot?.label
-    ? activeSlot.label.split(" - ")[0]
+  const currentWindowFrom = activeSlot
+    ? commonService.minutesToTime(activeSlot.start)
     : dealWindowFrom;
-  const currentWindowTo = activeSlot?.label
-    ? activeSlot.label.split(" - ")[1]
+  const currentWindowTo = activeSlot
+    ? commonService.minutesToTime(
+        activeSlot.end === 1440 ? 1439 : activeSlot.end,
+      )
     : dealWindowTo;
 
   if (expandedStateMap[serviceItem.id] === undefined) {