kupos-ui-components-lib 9.0.10 → 9.0.11

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -316,7 +316,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
         {
             key: "rating",
             width: "30%",
-            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+            render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         },
         {
             key: "duration",

package/dist/components/ServiceItem/RatingHover.d.ts

@@ -7,6 +7,7 @@ interface RatingHoverProps {
     translation?: {
         [key: string]: string;
     };
+    isPeru?: boolean;
 }
 declare const RatingHover: React.FC<RatingHoverProps>;
 export default RatingHover;

package/dist/components/ServiceItem/RatingHover.js

@@ -1,6 +1,7 @@
 import React from "react";
 import RatingItem from "./RatingItem";
-const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, }) => {
+const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, isPeru, }) => {
+    const ratingIndex = isPeru ? 7 : 6;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
             React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
@@ -22,37 +23,37 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
                     React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
                     React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
                 React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[0]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[0]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[1]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[1]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[2]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[2]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
-                    React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]] &&
-                            parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]]).toFixed(1)
-                            ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
-                                serviceItem.operator_details[6])[3]]).toFixed(1)
+                    React.createElement(RatingItem, { rating: serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]] &&
+                            parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
+                            ? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
+                                serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
                             : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
                 React.createElement("div", { className: "px-1 py-2 text-center text-[12px]  font9", style: {
                         backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -110,7 +110,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     };
     const checkMidnight = () => {
         var _a, _b;
-        setIsExpand(null);
+        setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
         if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
             (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
             ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -258,7 +258,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             className: "" },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-auto w-[150px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
                     React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
                     React.createElement("div", { style: {
                             width: "1px",
@@ -283,9 +283,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
                 opacity: isItemExpanded ? 1 : 0,
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+                position: "relative",
+                zIndex: -1,
             } },
             React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, showPromo: showPromo, colors: colors, grayscaleClass: grayscaleClass, translation: translation, getAnimationIcon: getAnimationIcon }))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem }))),
         children,
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]", style: {
                 backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,

package/dist/components/ServiceItem/ServiceItemMobile.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -4,6 +4,7 @@ import commonService from "../../utils/CommonService";
 import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
 import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
+import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -16,11 +17,13 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, }) {
     var _a, _b, _c;
+    const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
     let isSoldOut = serviceItem.available_seats <= 0;
     const showPromo = Math.random() > 0.5;
+    const countdownSeconds = 7830;
     const labelId = typeof serviceItem.boarding_stages === "string"
         ? serviceItem.boarding_stages.split("|")[0]
         : "";
@@ -74,12 +77,20 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             showTopLabel
             ? "mt-[10px]"
             : "mt-[10px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
-        React.createElement(TopAmenitieMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, seatPriceColor: colors.seatPriceColor, bombAnim: serviceItem.icons.bombAnim, priorityStageAnim: serviceItem.icons.priorityStageAnim }),
+        React.createElement(TopAmenitieMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, seatPriceColor: colors.seatPriceColor, bombAnim: serviceItem.icons.bombAnim, priorityStageAnim: serviceItem.icons.priorityStageAnim, countdownSeconds: countdownSeconds, onCountdownEnd: () => {
+                const cardEl = document.getElementById(`service-card-${serviceItem.id}`);
+                if (!cardEl)
+                    return;
+                cardEl.style.border = "1px solid #ccc";
+                if (!showTopLabel) {
+                    cardEl.style.borderRadius = "10px";
+                }
+            } }),
         React.createElement("div", { className: " rounded-[20px]", style: {
                 backgroundColor: "#fff",
                 zIndex: 1,
                 // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-                borderRadius: "14px 0 14px 14px",
+                borderRadius: "12px 0 12px 12px",
                 border: `1px solid ${colors.bottomStripColor}`,
             } },
             React.createElement("div", { 
@@ -107,12 +118,16 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
                 React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, destinationIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats }),
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: showDropdown, setShowDropdown: setShowDropdown, onDropdownToggle: () => {
-                        setShowDropdown(!showDropdown);
-                        setAmenetiesAtomValue({
-                            service: serviceItem,
-                            showTopLabel: showTopLabel,
-                        });
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), 
+                    // onDropdownToggle={() => {
+                    //   setShowDropdown(!showDropdown);
+                    //   setAmenetiesAtomValue({
+                    //     service: serviceItem,
+                    //     showTopLabel: showTopLabel,
+                    //   });
+                    // }}
+                    onDropdownToggle: () => {
+                        setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     } })),
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] z-10 rounded-b-[14px] min-[420]:text-[14px] text-[12px]`, style: {
                     backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -123,6 +138,16 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 } },
                 React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
                 React.createElement("span", { className: "ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
-            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " }))));
+            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " })),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+                opacity: isItemExpanded ? 1 : 0,
+                transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+                position: "relative",
+                zIndex: -1,
+            } },
+            React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
 }
 export default ServiceItemMobile;

package/dist/components/ServiceItem/mobileTypes.d.ts

@@ -121,6 +121,8 @@ export interface MobileServiceItemProps {
     terminals?: any[];
     showDropdown?: boolean;
     setShowDropdown?: (value: boolean) => void;
+    isExpanded?: string | null;
+    setIsExpanded?: (value: string | null) => void;
     setAmenetiesAtomValue?: (value: {
         service: MobileServiceItemProps["serviceItem"];
         showTopLabel: string | boolean;

package/dist/styles.css

@@ -626,6 +626,9 @@
 .px-\[10px\] {
   padding-inline: 10px;
 }
+.px-\[12px\] {
+  padding-inline: 12px;
+}
 .px-\[14px\] {
   padding-inline: 14px;
 }
@@ -665,6 +668,9 @@
 .pt-\[20px\] {
   padding-top: 20px;
 }
+.pt-\[22px\] {
+  padding-top: 22px;
+}
 .pt-\[26px\] {
   padding-top: 26px;
 }
@@ -689,6 +695,9 @@
 .pb-\[10px\] {
   padding-bottom: 10px;
 }
+.pb-\[12px\] {
+  padding-bottom: 12px;
+}
 .pb-\[14px\] {
   padding-bottom: 14px;
 }
@@ -786,6 +795,10 @@
 .uppercase {
   text-transform: uppercase;
 }
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+}
 .line-through {
   text-decoration-line: line-through;
 }
@@ -877,6 +890,11 @@
     font-size: 11px;
   }
 }
+.min-\[420px\]\:text-\[12px\] {
+  @media (width >= 420px) {
+    font-size: 12px;
+  }
+}
 @keyframes load8 {
   0% {
     transform: rotate(0deg);
@@ -962,6 +980,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1043,6 +1081,11 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -18,6 +18,6 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
             serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
             hasPetInfo && (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
-            showDownArrow ? (React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand }, downArrowIcon)) : null)));
+            React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] `, onClick: onToggleExpand }, downArrowIcon))));
 }
 export default BottomAmenities;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -6,15 +6,6 @@ interface ExpandedDropdownProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
-    showPromo: boolean;
-    colors: {
-        priceColor?: string;
-    };
-    grayscaleClass: string;
-    translation?: {
-        [key: string]: string;
-    };
-    getAnimationIcon: (icon: string) => any;
 }
-declare function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }) {
+function ExpandedDropdown({ serviceItem, }) {
     var _a, _b;
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;

package/dist/ui/RatingBlock.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, }: {
+declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, }: {
     showRating: any;
     serviceItem: any;
     isSoldOut: any;
     colors: any;
     t: any;
     translation: any;
+    isPeru: any;
 }) => React.JSX.Element;
 export default RatingBlock;

package/dist/ui/RatingBlock.js

@@ -1,7 +1,7 @@
 import React from "react";
 import RatingHover from "../components/ServiceItem/RatingHover";
-const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
-    showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
+const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
+    showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
     React.createElement("div", { className: "group relative ml-[10px] text-[13.33px]", style: {
             marginLeft: showRating ? "10px" : "0",
             color: isSoldOut ? "#c0c0c0" : "#464647",

package/dist/ui/SeatSection/SeatSection.js

@@ -22,6 +22,13 @@ function getSortedSeatTypes(seatTypes) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
     seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    const seenPrices = new Set();
+    seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
+        if (seenPrices.has(seat.price))
+            return false;
+        seenPrices.add(seat.price);
+        return true;
+    });
     return seatTypesWithPrices;
 }
 function getUniqueSeats(seatTypes) {
@@ -35,7 +42,14 @@ function getUniqueSeats(seatTypes) {
             seatMap.set(seat.label, seat);
         }
     });
-    return Array.from(seatMap.values());
+    const uniqueByLabel = Array.from(seatMap.values());
+    const seenPrices = new Set();
+    return uniqueByLabel.filter((seat) => {
+        if (seenPrices.has(seat.price))
+            return false;
+        seenPrices.add(seat.price);
+        return true;
+    });
 }
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
@@ -67,7 +81,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const renderLabels = () => {
         if (isPeru) {
             return (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "text-[13.33px]", style: { color: "#999" } }, "Antes"),
+                React.createElement("span", { className: "text-[13.33px]", style: {
+                        color: "#999",
+                        // position: "relative",
+                        // bottom: numberOfSeats ? "10px" : "",
+                    } }, "Antes"),
                 React.createElement("span", { className: "text-[13.33px]" }, "Desde")));
         }
         return renderSeatNames();

package/dist/ui/TopAmenities/TopAmenities.js

@@ -43,11 +43,15 @@ function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonCo
                 borderTopLeftRadius: "10px",
             } },
             React.createElement("div", { style: { display: "flex", alignItems: "center" } },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "16px", height: "16px" }),
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "20px", height: "20px" }),
                 React.createElement("span", { className: "flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20", style: { paddingRight: showTopLabel ? "18px" : "" } },
                     React.createElement("span", { className: "bold-text" }, "kuponazo 20%\u00A0"),
                     " | Termina en\u00A0",
-                    React.createElement("span", { className: "bold-text", ref: startCountdown })))),
+                    React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                            minWidth: "70px",
+                        } })))),
         showTopLabel && (React.createElement("div", { className: "flex items-center py-[10px] px-[14px] text-[13.33px] z-20", style: {
                 backgroundColor: isSoldOut ? "#ddd" : buttonColor,
                 borderTopRightRadius: "10px",

package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts

@@ -18,6 +18,7 @@ interface BottomAmenitiesMobileProps {
     showDropdown: boolean;
     setShowDropdown: (val: boolean) => void;
     onDropdownToggle: () => void;
+    isItemExpanded?: boolean;
 }
-declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, }: BottomAmenitiesMobileProps): React.ReactElement;
+declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, }: BottomAmenitiesMobileProps): React.ReactElement;
 export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, }) {
+function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, }) {
     return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
         React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
             React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
@@ -16,22 +16,22 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
                 } },
                 React.createElement(LottiePlayer, { animationData: directoAnim, width: "14px", height: "14px" }),
                 React.createElement("div", { className: "ml-[5px]" }, "Directo")))),
-        React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { onClick: onDropdownToggle, className: "flex items-center" },
-            petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
-                React.createElement("div", { className: `relative group cursor-default ` },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
-                            React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })))))) : null,
-            isChangeTicket && (React.createElement("div", { className: "flex items-center" },
-                React.createElement("div", { className: "relative group cursor-default" },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
-                            React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" })))))),
-            isTrackingEnabled && (React.createElement("div", { className: "flex items-center mr-[10px]" },
-                React.createElement("div", { className: `h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
-                    React.createElement(LottiePlayer, { animationData: locationAnim, width: "16px", height: "16px" })))),
-            (isChangeTicket || isPetSeat) && (
-            // <img src={serviceItem.icons.plus} alt="icon" width={11} />
-            React.createElement("img", { src: downArrowIcon, alt: "icon", width: 14, height: 14 })))))));
+        React.createElement("div", { className: "flex items-center" },
+            React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },
+                petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
+                    React.createElement("div", { className: `relative group cursor-default ` },
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })))))) : null,
+                isChangeTicket && (React.createElement("div", { className: "flex items-center" },
+                    React.createElement("div", { className: "relative group cursor-default" },
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" })))))),
+                isTrackingEnabled && (React.createElement("div", { className: "flex items-center mr-[10px]" },
+                    React.createElement("div", { className: `h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
+                        React.createElement(LottiePlayer, { animationData: locationAnim, width: "16px", height: "16px" }))))))),
+            React.createElement("div", { onClick: onDropdownToggle },
+                React.createElement("img", { src: downArrowIcon, alt: "icon", width: 14, height: 14, className: `${showDropdown ? "rotate-180" : ""} transition-transform duration-300` })))));
 }
 export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ExpandedDropdownMobileProps {
+    serviceItem: {
+        change_ticket_hours?: number;
+        pet_seat_info?: Record<string, any>;
+        is_change_ticket?: boolean;
+        is_tracking_enabled?: boolean;
+    };
+}
+declare function ExpandedDropdownMobile({ serviceItem, }: ExpandedDropdownMobileProps): React.ReactElement;
+export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -0,0 +1,32 @@
+import React from "react";
+function ExpandedDropdownMobile({ serviceItem, }) {
+    var _a, _b;
+    return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
+            backgroundColor: "#ffefef",
+            borderRadius: "0 0 14px 14px",
+        } },
+        React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
+            React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
+                    " Tu pasaje puede ser anulado de forma online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ", (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _a !== void 0 ? _a : 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
+            React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
+                    " Tu pasaje puede ser cambiado de manera online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ", (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _b !== void 0 ? _b : 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
+}
+export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/TopAmenitieMobile.d.ts

@@ -5,6 +5,9 @@ interface TopAmenitieMobileProps {
     seatPriceColor?: string;
     bombAnim?: any;
     priorityStageAnim?: any;
+    countdownSeconds?: number;
+    promoText?: string;
+    onCountdownEnd?: () => void;
 }
-declare function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, }: TopAmenitieMobileProps): React.ReactElement;
+declare function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds, onCountdownEnd, }: TopAmenitieMobileProps): React.ReactElement;
 export default TopAmenitieMobile;