kupos-ui-components-lib 10.1.5 → 10.1.6

package/dist/components/FilterBar/ServiceFilter.js

@@ -147,7 +147,7 @@ class ServiceFilter extends React.Component {
             ((option === null || option === void 0 ? void 0 : option.type) === "tipo" && this.props.isTrain) ||
             !this.props.isTrain;
         return (React.createElement("div", { key: key },
-            shouldShowHeader && (React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[13px] mb-[5px]" },
+            shouldShowHeader && (React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[20px] mb-[5px]" },
                 this.props.t("RESULTS_PAGE." + option.title),
                 React.createElement("img", { src: this.props.icons.downArrow, alt: "downArrow", className: `${isOpen ? "rotate-180" : ""} w-[auto] h-[9px] transition-all duration-300 cursor-pointer` }))),
             React.createElement("div", { className: ` transition-all duration-300 ease-in-out

package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js

@@ -174,7 +174,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
                         React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.hours, className: "w-[16px] h-[16px] mr-[5px]" })),
                     React.createElement("span", null,
                         "Duraci\u00F3n : ",
-                        duration,
+                        DateService.formatDuration(duration),
                         " horas")))))));
 };
 const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, walletLabel, creditosLabel, currency, customSideBarwidth, isLinatal, insuranceData, isPeru, serviceFeeDataStateValue, }) => {

package/dist/components/PaymentSideBar/PaymentSideBarMobile.js

@@ -71,7 +71,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
                         " ",
                         isTacna
                             ? `${getRoundedHour(duration)}hrs aprox`
-                            : `${duration} horas`)))))));
+                            : `${DateService.formatDuration(duration)} horas`)))))));
 };
 const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, currency, showWhatsappChargesInfo, setShowWhatsappChargesInfo, t, countdown, walletLabel, creditosLabel, isTacna, isLinatal, insuranceData, isPeru, setShowServicefeeModal, serviceFeeDataStateValue, }) => {
     var _a, _b, _c, _d, _e;

package/dist/ui/AmenitiesBlock.js

@@ -7,33 +7,51 @@ const getAmenityBaseName = (amenityStr) => {
 };
 const isWater = (amenityStr) => { var _a; return ((_a = getAmenityBaseName(amenityStr)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "WATER"; };
 const TooltipArrow = ({ color }) => (React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: color } }));
+/*
 const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
-    const priority = amenities.filter((id) => priorityIds.includes(id));
-    const nonPriority = amenities.filter((id) => !priorityIds.includes(id));
-    const hasPriority = priority.length > 0;
-    /* ============================
-         🇵🇪 PERU LOGIC
-    ============================ */
-    // if (isPeru) {
-    //   return hasPriority
-    //     ? { visible: priority, plus: nonPriority }
-    //     : { visible: [], plus: amenities };
-    // }
-    if (isPeru) {
-        return hasPriority
-            ? {
-                visible: priority.slice(0, 2),
-                plus: [...priority.slice(2), ...nonPriority],
-            }
-            : { visible: amenities.slice(0, 2), plus: amenities.slice(2) };
+  const priority = amenities.filter((id) => priorityIds.includes(id));
+  const nonPriority = amenities.filter((id) => !priorityIds.includes(id));
+  const hasPriority = priority.length > 0;
+
+  // if (isPeru) {
+  //   return hasPriority
+  //     ? { visible: priority, plus: nonPriority }
+  //     : { visible: [], plus: amenities };
+  // }
+
+  if (isPeru) {
+    return hasPriority
+      ? {
+          visible: priority.slice(0, 2),
+          plus: [...priority.slice(2), ...nonPriority],
+        }
+      : { visible: amenities.slice(0, 2), plus: amenities.slice(2) };
+  }
+
+  const sorted = [...amenities].sort(
+    (a, b) => Number(priorityIds.includes(b)) - Number(priorityIds.includes(a)),
+  );
+
+  return {
+    visible: sorted.slice(0, 2),
+    plus: sorted.slice(2),
+  };
+};
+*/
+const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
+    // The three important amenities: Mobile ticket ("3"), USB charger ("2"), WiFi ("13")
+    const IMPORTANT_AMENITY_IDS = ["2", "3", "13"];
+    const important = amenities.filter((id) => IMPORTANT_AMENITY_IDS.includes(id));
+    const nonImportant = amenities.filter((id) => !IMPORTANT_AMENITY_IDS.includes(id));
+    if (important.length > 0) {
+        return {
+            visible: important,
+            plus: nonImportant,
+        };
     }
-    /* ============================
-         🌍 NON-PERU LOGIC
-    ============================ */
-    const sorted = [...amenities].sort((a, b) => Number(priorityIds.includes(b)) - Number(priorityIds.includes(a)));
     return {
-        visible: sorted.slice(0, 2),
-        plus: sorted.slice(2),
+        visible: [],
+        plus: amenities,
     };
 };
 const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
@@ -53,6 +71,7 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
         amenities,
         priorityIds,
     });
+    console.log("🚀 ~ AmenitiesBlock ~ visibleAmenities:", visibleAmenities, amenities);
     const shouldShowPlus = plusAmenities.length > 0;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
     return (React.createElement("div", { className: "relative flex items-center gap-[6px]" },

package/dist/ui/DurationBlock.js

@@ -1,9 +1,10 @@
 import React from "react";
+import DateService from "../utils/DateService";
 const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
     React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }, renderIcon("hours", "14px")),
     React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
         React.createElement("span", { style: { opacity: isSoldOut ? 0.5 : 1 } },
-            serviceItem.duration,
+            DateService.formatDuration(serviceItem.duration),
             " ",
             translation.hours),
         React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },

package/dist/ui/SeatSection/SeatSection.js

@@ -217,7 +217,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
                         color: "#999",
                     } }, "Antes")),
-                React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center" },
+                React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center", style: {
+                        opacity: isSoldOut ? 0.5 : 1,
+                    } },
                     isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
                             width: "20px",
                             height: "20px",

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,5 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
+import DateService from "../../utils/DateService";
 function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, }) {
     return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
         React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
@@ -8,7 +9,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
                 React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, hoursIcon),
                 "\u00A0",
                 React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
-                    duration,
+                    DateService.formatDuration(duration),
                     "hrs"))),
         React.createElement("div", { className: "flex items-center" },
             React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },

package/dist/utils/DateService.d.ts

@@ -14,5 +14,9 @@ declare const DateService: {
      * Format time string (HH:MM) to AM/PM format
      */
     formatTime: (time: string) => string;
+    /**
+     * Format duration string (HH:MM:SS) to HH:MM format
+     */
+    formatDuration: (duration: string | number | undefined | null) => string;
 };
 export default DateService;

package/dist/utils/DateService.js

@@ -168,5 +168,23 @@ const DateService = {
             return time;
         }
     },
+    /**
+     * Format duration string (HH:MM:SS) to HH:MM format
+     */
+    formatDuration: (duration) => {
+        if (duration === null || duration === undefined) {
+            return "";
+        }
+        const durationStr = duration.toString().trim();
+        if (durationStr.includes(":")) {
+            const parts = durationStr.split(":");
+            if (parts.length >= 2) {
+                const hours = parts[0].trim().padStart(2, "0");
+                const minutes = parts[1].trim();
+                return `${hours}:${minutes}`;
+            }
+        }
+        return durationStr;
+    },
 };
 export default DateService;

package/package.json

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

package/src/components/FilterBar/ServiceFilter.tsx

@@ -223,7 +223,7 @@ class ServiceFilter extends React.Component<
         {shouldShowHeader && (
           <div
             onClick={() => this.toggleFilter(option.type)}
-            className="bold-text flex items-center justify-between mt-[13px] mb-[5px]"
+            className="bold-text flex items-center justify-between mt-[20px] mb-[5px]"
           >
             {this.props.t("RESULTS_PAGE." + option.title)}
             <img

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -266,7 +266,7 @@ const renderSummaryDetailsCard = ({
                   className="w-[16px] h-[16px] mr-[5px]"
                 />
               </div>
-              <span>Duración : {duration} horas</span>
+              <span>Duración : {DateService.formatDuration(duration)} horas</span>
             </div>
           )}
         </div>

package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx

@@ -167,7 +167,7 @@ const renderSummaryDetailsCard = ({
                 <span className="bold-text">Duración:</span>{" "}
                 {isTacna
                   ? `${getRoundedHour(duration)}hrs aprox`
-                  : `${duration} horas`}
+                  : `${DateService.formatDuration(duration)} horas`}
               </span>
             </div>
           )}

package/src/ui/AmenitiesBlock.tsx

@@ -20,14 +20,12 @@ const TooltipArrow = ({ color }) => (
   />
 );
 
+/*
 const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
   const priority = amenities.filter((id) => priorityIds.includes(id));
   const nonPriority = amenities.filter((id) => !priorityIds.includes(id));
   const hasPriority = priority.length > 0;
 
-  /* ============================
-       🇵🇪 PERU LOGIC
-  ============================ */
   // if (isPeru) {
   //   return hasPriority
   //     ? { visible: priority, plus: nonPriority }
@@ -43,9 +41,6 @@ const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
       : { visible: amenities.slice(0, 2), plus: amenities.slice(2) };
   }
 
-  /* ============================
-       🌍 NON-PERU LOGIC
-  ============================ */
   const sorted = [...amenities].sort(
     (a, b) => Number(priorityIds.includes(b)) - Number(priorityIds.includes(a)),
   );
@@ -55,6 +50,32 @@ const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
     plus: sorted.slice(2),
   };
 };
+*/
+
+const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
+  // The three important amenities: Mobile ticket ("3"), USB charger ("2"), WiFi ("13")
+  const IMPORTANT_AMENITY_IDS = ["2", "3", "13"];
+
+  const important = amenities.filter((id) =>
+    IMPORTANT_AMENITY_IDS.includes(id),
+  );
+
+  const nonImportant = amenities.filter(
+    (id) => !IMPORTANT_AMENITY_IDS.includes(id),
+  );
+
+  if (important.length > 0) {
+    return {
+      visible: important,
+      plus: nonImportant,
+    };
+  }
+
+  return {
+    visible: [],
+    plus: amenities,
+  };
+};
 
 const AmenitiesBlock = ({
   serviceItem,
@@ -87,6 +108,11 @@ const AmenitiesBlock = ({
     amenities,
     priorityIds,
   });
+  console.log(
+    "🚀 ~ AmenitiesBlock ~ visibleAmenities:",
+    visibleAmenities,
+    amenities,
+  );
 
   const shouldShowPlus = plusAmenities.length > 0;
   const grayscaleClass = isSoldOut ? "grayscale" : "";

package/src/ui/DurationBlock.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import DateService from "../utils/DateService";
 
 const DurationBlock = ({
   serviceItem,
@@ -17,7 +18,7 @@ const DurationBlock = ({
 
     <div className="group text-[13.33px] cursor-pointer">
       <span style={{ opacity: isSoldOut ? 0.5 : 1 }}>
-        {serviceItem.duration} {translation.hours}
+        {DateService.formatDuration(serviceItem.duration)} {translation.hours}
       </span>
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"

package/src/ui/SeatSection/SeatSection.tsx

@@ -411,7 +411,12 @@ function SeatSection({
 
           <span className="text-[13.33px] flex flex-col">
             {!hasDiscount ? (
-              <span className="text-[13.33px] whitespace-nowrap flex items-center">
+              <span
+                className="text-[13.33px] whitespace-nowrap flex items-center"
+                style={{
+                  opacity: isSoldOut ? 0.5 : 1,
+                }}
+              >
                 {isSeatIcon && !hasDiscount && (
                   <img
                     src={

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
+import DateService from "../../utils/DateService";
 
 interface BottomAmenitiesMobileProps {
   isSoldOut: boolean;
@@ -75,7 +76,7 @@ function BottomAmenitiesMobile({
             }`}
             style={{ lineHeight: "normal" }}
           >
-            {duration}hrs
+            {DateService.formatDuration(duration)}hrs
           </div>
         </div>
 

package/src/utils/DateService.ts

@@ -206,6 +206,25 @@ const DateService = {
       return time;
     }
   },
+
+  /**
+   * Format duration string (HH:MM:SS) to HH:MM format
+   */
+  formatDuration: (duration: string | number | undefined | null): string => {
+    if (duration === null || duration === undefined) {
+      return "";
+    }
+    const durationStr = duration.toString().trim();
+    if (durationStr.includes(":")) {
+      const parts = durationStr.split(":");
+      if (parts.length >= 2) {
+        const hours = parts[0].trim().padStart(2, "0");
+        const minutes = parts[1].trim();
+        return `${hours}:${minutes}`;
+      }
+    }
+    return durationStr;
+  },
 };
 
 export default DateService;