kupos-ui-components-lib 10.1.4 → 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/components/ServiceItem/PeruServiceItemDesktop.js

@@ -394,7 +394,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
     return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
-            ? "mt-[30px]"
+            ? "mt-[20px]"
             : "mt-[20px]"}	` },
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -296,14 +296,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
-            ? "mt-[30px]"
+            ? "mt-[20px]"
             : "mt-[20px]"}	` },
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { className: " pt-[20px]", style: {
-                    padding: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
+                    padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
                         ? "20px 15px 10px 15px"
                         : coachKey
                             ? "20px 15px 20px 15px"

package/dist/styles.css

@@ -90,8 +90,8 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
-.-bottom-\[44px\] {
-  bottom: calc(44px * -1);
+.-bottom-\[40px\] {
+  bottom: calc(40px * -1);
 }
 .bottom-\[11px\] {
   bottom: 11px;
@@ -243,9 +243,6 @@
 .mt-\[24px\] {
   margin-top: 24px;
 }
-.mt-\[30px\] {
-  margin-top: 30px;
-}
 .mt-\[50px\] {
   margin-top: 50px;
 }
@@ -396,6 +393,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[44px\] {
+  height: 44px;
+}
 .h-\[90px\] {
   height: 90px;
 }
@@ -626,6 +626,9 @@
 .justify-end {
   justify-content: flex-end;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .gap-\[1px\] {
   gap: 1px;
 }

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/OfferBanner.js

@@ -72,13 +72,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
         }
         return null;
     };
-    return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
+    return (React.createElement("div", { className: "text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
             background,
             opacity: isSoldOut ? 0.5 : 1,
-            zIndex: isLinatal ? "-1" : "",
+            zIndex: isLinatal ? "-1" : "-1",
         } },
-        React.createElement("div", { className: "flex justify-between items-center w-full" },
-            React.createElement("div", { className: "flex items-center" }, renderLeftContent()),
+        React.createElement("div", { className: "flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]" },
+            React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
             showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
 };
 export default OfferBanner;

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/ServiceBadges/ServiceBadges.js

@@ -4,7 +4,7 @@ import CommonService from "../../utils/CommonService";
 const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
     return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
-                backgroundColor: colors.topLabelBgColor || "rgb(255, 242, 235)",
+                backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"
                     : `1px solid ${colors.topLabelColor}`,

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/ui/mobileweb/ServiceBadgesMobile.js

@@ -3,7 +3,7 @@ import CommonService from "../../utils/CommonService";
 const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, isAllinBus = false, boardingName, }) => {
     return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
-                backgroundColor: "#fff",
+                backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"
                     : `1px solid ${colors.topLabelColor}`,

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.4",
+  "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/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -609,7 +609,7 @@ function PeruServiceItemDesktop({
         serviceItem?.is_direct_trip ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
-          ? "mt-[30px]"
+          ? "mt-[20px]"
           : "mt-[20px]"
       }	`}
     >

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -539,7 +539,7 @@ function ServiceItemPB({
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
-              ? "mt-[30px]"
+              ? "mt-[20px]"
               : "mt-[20px]"
           }	`}
         >
@@ -572,7 +572,7 @@ function ServiceItemPB({
               className=" pt-[20px]"
               style={{
                 padding:
-                  hasDpEnabled || serviceItem?.offer_text
+                  hasDpEnabled || (isNewUiEnabled && !isSoldOut)
                     ? "20px 15px 10px 15px"
                     : coachKey
                       ? "20px 15px 20px 15px"

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/OfferBanner.tsx

@@ -251,15 +251,17 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
 
   return (
     <div
-      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
+      className="text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]"
       style={{
         background,
         opacity: isSoldOut ? 0.5 : 1,
-        zIndex: isLinatal ? "-1" : "",
+        zIndex: isLinatal ? "-1" : "-1",
       }}
     >
-      <div className="flex justify-between items-center w-full">
-        <div className="flex items-center">{renderLeftContent()}</div>
+      <div className="flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]">
+        <div className="flex items-center justify-start">
+          {renderLeftContent()}
+        </div>
         {showViewers && (
           <ViewersCount
             serviceItem={serviceItem}

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/ServiceBadges/ServiceBadges.tsx

@@ -37,7 +37,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
           style={{
-            backgroundColor: colors.topLabelBgColor || "rgb(255, 242, 235)",
+            backgroundColor: colors.topLabelBgColor || "#fff",
             border: isSoldOut
               ? "1px solid #ccc"
               : `1px solid ${colors.topLabelColor}`,

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/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -35,7 +35,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
         <div
           className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
           style={{
-            backgroundColor: "#fff",
+            backgroundColor: colors.topLabelBgColor || "#fff",
             border: isSoldOut
               ? "1px solid #ccc"
               : `1px solid ${colors.topLabelColor}`,

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;