kupos-ui-components-lib 9.1.9 → 9.2.0

package/dist/components/FilterBar/FilterBarDesktop.js

@@ -1,42 +1,43 @@
 import React from "react";
 import commonService from "../../utils/CommonService";
 import ServiceFilter from "./ServiceFilter";
+let cachedStageOptions = null;
 const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, }) => {
     const getEnrichedFilters = () => {
-        if (!isAllinBus || !(allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length))
-            return filtersArray;
         const hasSpecialDeparture = filtersArray.some((f) => { var _a; return f.type === "special_departure" && ((_a = f.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
         if (hasSpecialDeparture)
             return filtersArray;
-        const stageMap = new Map();
-        allSchedules.forEach((schedule) => {
-            var _a, _b, _c;
-            if ((_a = schedule.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length) {
-                const stageObj = schedule.stage_details_arr[0];
-                const stageId = Object.keys(stageObj)[0];
-                const stageName = (_c = (_b = stageObj[stageId]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.split(", ")[0];
-                if (stageId && stageName) {
-                    stageMap.set(stageId, stageName);
+        if (isAllinBus && (allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length)) {
+            const stageMap = new Map();
+            allSchedules.forEach((schedule) => {
+                var _a, _b, _c;
+                if ((_a = schedule.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length) {
+                    const stageObj = schedule.stage_details_arr[0];
+                    const stageId = Object.keys(stageObj)[0];
+                    const stageName = (_c = (_b = stageObj[stageId]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.split(", ")[0];
+                    if (stageId && stageName) {
+                        stageMap.set(stageId, stageName);
+                    }
                 }
+            });
+            if (stageMap.size > 0) {
+                cachedStageOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
+                    label: name,
+                    value: id,
+                    active: false,
+                }));
             }
-        });
-        if (stageMap.size === 0)
-            return filtersArray;
-        const specialDeptOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
-            label: name,
-            value: id,
-            active: false,
-        }));
-        return [
-            ...filtersArray,
-            {
-                type: "special_departure",
-                title: "SPECIAL_DEPARTURE",
-                options: specialDeptOptions,
-            },
-        ];
+        }
+        if (cachedStageOptions === null || cachedStageOptions === void 0 ? void 0 : cachedStageOptions.length) {
+            return filtersArray.map((f) => f.type === "special_departure"
+                ? Object.assign(Object.assign({}, f), { options: cachedStageOptions }) : f);
+        }
+        return filtersArray;
     };
     const enrichedFilters = getEnrichedFilters();
+    if (enrichedFilters !== filtersArray) {
+        setFiltersArray(enrichedFilters);
+    }
     const filterBy = (filters) => {
         try {
             let routes = allSchedules;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -217,8 +217,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         const id = setInterval(() => {
             remaining -= 1;
             if (remaining <= 0) {
-                remaining = 0;
-                clearInterval(id);
+                remaining = countdownSeconds;
             }
             node.textContent = formatTime(remaining);
         }, 1000);
@@ -284,7 +283,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 } },
                 React.createElement("div", { 
                     // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
-                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", 
+                    // style={{ marginTop: showTopLabel ? "8px" : "" }}
+                    style: {
+                        marginTop: showTopLabel && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
+                    } },
                     React.createElement("div", { style: {
                             display: "flex",
                             flexDirection: "column",
@@ -323,7 +326,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 zIndex: -1,
             } },
             React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem }))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon }))),
         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.js

@@ -17,10 +17,11 @@ const exceptions = [
     "asiento_mascota",
 ];
 function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     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 isLongOfferText = (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _a === void 0 ? void 0 : _a.length) || 0) > 35;
     const startViewerCount = (node) => {
         if (!node || !viewersConfig)
             return;
@@ -56,8 +57,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
         const id = setInterval(() => {
             remaining -= 1;
             if (remaining <= 0) {
-                remaining = 0;
-                clearInterval(id);
+                remaining = countdownSeconds;
             }
             node.textContent = formatTime(remaining);
         }, 1000);
@@ -141,9 +141,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : null),
                     showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                         (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, serviceItem: serviceItem }),
+                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.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, serviceItem: serviceItem }),
                 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: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), 
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_d = serviceItem.duration) === null || _d === void 0 ? void 0 : _d.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({
@@ -177,35 +177,36 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     } },
                     React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
                     React.createElement("div", null, "Tren Express"))))),
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9 -mt-[15px]", style: {
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
                 backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,
             } },
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
-                React.createElement("div", { className: "flex flex-col" },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" }),
-                        React.createElement("div", { className: "ml-[6px] flex items-center mt-[2px]", style: {
+                React.createElement("div", { className: "flex flex-col gap-[4px]" },
+                    React.createElement("div", { className: `flex ${isLongOfferText ? "items-start" : "items-center"}` },
+                        React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" })),
+                        React.createElement("div", { className: `ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
                                 color: "#fff",
+                                lineHeight: 1.4,
                             } },
-                            React.createElement("span", { className: " min-[380px]:text-[12px]" },
-                                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
-                                "\u00A0"),
+                            React.createElement("span", { className: "min-[380px]:text-[12px] bold-text" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
                             " ",
-                            "| Termina en\u00A0",
-                            React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
-                                    fontVariantNumeric: "tabular-nums",
-                                    display: "inline-block",
-                                    // minWidth: "70px",
-                                } }))),
-                    React.createElement("div", { className: "flex items-center", style: {
+                            React.createElement("span", { className: "min-[380px]:text-[12px]" }, "|"),
+                            " ",
+                            React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
+                                "Termina en\u00A0",
+                                React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
+                                        fontVariantNumeric: "tabular-nums",
+                                        display: "inline-block",
+                                    } })))),
+                    React.createElement("div", { className: "flex items-start", style: {
                             color: "#fff",
                         } },
-                        renderIcon("personIcon", "16px"),
-                        "\u00A0",
-                        React.createElement("span", { className: "" },
+                        React.createElement("div", null, renderIcon("personIcon", "16px")),
+                        React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
                             React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
                             " ",
                             React.createElement("span", { className: "bold-text" }, "personas"),
@@ -228,6 +229,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru })))));
 }
 export default ServiceItemMobile;

package/dist/styles.css

@@ -460,6 +460,9 @@
 .items-center {
   align-items: center;
 }
+.items-start {
+  align-items: flex-start;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -741,6 +744,9 @@
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
+.pb-\[8px\] {
+  padding-bottom: 8px;
+}
 .pb-\[10px\] {
   padding-bottom: 10px;
 }
@@ -895,6 +901,10 @@
   --tw-duration: 300ms;
   transition-duration: 300ms;
 }
+.outline-none {
+  --tw-outline-style: none;
+  outline-style: none;
+}
 .group-hover\:block {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {

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

@@ -6,6 +6,9 @@ interface ExpandedDropdownProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
+    isPeru?: boolean;
+    translation?: Record<string, string>;
+    getAnimationIcon?: (iconName: string) => any;
 }
-declare function ExpandedDropdown({ serviceItem, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,6 @@
 import React from "react";
-function ExpandedDropdown({ serviceItem, }) {
+import LottiePlayer from "../../assets/LottiePlayer";
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -10,6 +11,10 @@ function ExpandedDropdown({ serviceItem, }) {
             // borderTop: "none",
         } },
         React.createElement("div", { className: "flex flex-col gap-[10px] text-[13px] text-[#464647]", style: { lineHeight: 1.6 } },
+            hasPetInfo && (React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
+                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
+                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
             React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
@@ -22,7 +27,7 @@ function ExpandedDropdown({ serviceItem, }) {
                         " 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-[8px]" },
+            isPeru ? null : (React.createElement("div", { className: "flex gap-[8px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
@@ -33,6 +38,6 @@ function ExpandedDropdown({ serviceItem, }) {
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
 }
 export default ExpandedDropdown;

package/dist/ui/SeatSection/SeatSection.js

@@ -95,25 +95,25 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 : null));
         });
     };
+    const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
+        ? { position: "relative", top: 0 }
+        : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
+    const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
+    const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
+    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     const renderLabels = () => {
         if (isPeru) {
             return (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "text-[13.33px]", style: {
+                hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
                         color: "#999",
                         // position: "relative",
                         // bottom: numberOfSeats ? "10px" : "",
-                    } }, "Antes"),
+                    } }, "Antes")),
                 React.createElement("span", { className: "text-[13.33px]" }, "Desde")));
         }
         return renderSeatNames();
     };
-    const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
-        ? { position: "relative", top: 0 }
-        : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
-    const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
-    const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
-    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
         React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
         React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
@@ -125,8 +125,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 justifyContent: isCentered ? "center" : "",
                 gap: "10px",
             } },
-            isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(1000))),
-            hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
+            hasDiscount && !isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
             renderSeatPrices())));
 }
 export default SeatSection;

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

@@ -6,6 +6,7 @@ interface ExpandedDropdownMobileProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
+    isPeru?: boolean;
 }
-declare function ExpandedDropdownMobile({ serviceItem, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdownMobile({ serviceItem, }) {
+function ExpandedDropdownMobile({ serviceItem, isPeru, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
@@ -17,7 +17,7 @@ function ExpandedDropdownMobile({ serviceItem, }) {
                         " 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]" },
+            isPeru ? null : (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:"),
@@ -28,6 +28,6 @@ function ExpandedDropdownMobile({ serviceItem, }) {
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
 }
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -70,11 +70,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
+            originalPrice !== discountedPrice && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, originalPrice !== discountedPrice
-                    ? commonService.currency(originalPrice, currencySign)
-                    : commonService.currency(getHighestFare(), currencySign))),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
             React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));

package/package.json

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -3,6 +3,8 @@ import { FilterBarProps } from "./tyoes";
 import commonService from "../../utils/CommonService";
 import ServiceFilter from "./ServiceFilter";
 
+let cachedStageOptions: any[] | null = null;
+
 const FilterBarDesktop = ({
   t,
   serviceList,
@@ -28,47 +30,52 @@ const FilterBarDesktop = ({
   isAllinBus,
 }: FilterBarProps) => {
   const getEnrichedFilters = () => {
-    if (!isAllinBus || !allSchedules?.length) return filtersArray;
-
     const hasSpecialDeparture = filtersArray.some(
       (f: any) => f.type === "special_departure" && f.options?.length > 0,
     );
     if (hasSpecialDeparture) return filtersArray;
 
-    const stageMap = new Map<string, string>();
-    allSchedules.forEach((schedule: any) => {
-      if (schedule.stage_details_arr?.length) {
-        const stageObj = schedule.stage_details_arr[0];
-        const stageId = Object.keys(stageObj)[0];
-        const stageName = stageObj[stageId]?.[0]?.split(", ")[0];
-        if (stageId && stageName) {
-          stageMap.set(stageId, stageName);
+    if (isAllinBus && allSchedules?.length) {
+      const stageMap = new Map<string, string>();
+      allSchedules.forEach((schedule: any) => {
+        if (schedule.stage_details_arr?.length) {
+          const stageObj = schedule.stage_details_arr[0];
+          const stageId = Object.keys(stageObj)[0];
+          const stageName = stageObj[stageId]?.[0]?.split(", ")[0];
+          if (stageId && stageName) {
+            stageMap.set(stageId, stageName);
+          }
         }
-      }
-    });
+      });
 
-    if (stageMap.size === 0) return filtersArray;
+      if (stageMap.size > 0) {
+        cachedStageOptions = Array.from(stageMap.entries()).map(
+          ([id, name]) => ({
+            label: name,
+            value: id,
+            active: false,
+          }),
+        );
+      }
+    }
 
-    const specialDeptOptions = Array.from(stageMap.entries()).map(
-      ([id, name]) => ({
-        label: name,
-        value: id,
-        active: false,
-      }),
-    );
+    if (cachedStageOptions?.length) {
+      return filtersArray.map((f: any) =>
+        f.type === "special_departure"
+          ? { ...f, options: cachedStageOptions! }
+          : f,
+      );
+    }
 
-    return [
-      ...filtersArray,
-      {
-        type: "special_departure",
-        title: "SPECIAL_DEPARTURE",
-        options: specialDeptOptions,
-      },
-    ];
+    return filtersArray;
   };
 
   const enrichedFilters = getEnrichedFilters();
 
+  if (enrichedFilters !== filtersArray) {
+    setFiltersArray(enrichedFilters);
+  }
+
   const filterBy = (filters) => {
     try {
       let routes = allSchedules;

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -310,8 +310,7 @@ function ServiceItemPB({
     const id = setInterval(() => {
       remaining -= 1;
       if (remaining <= 0) {
-        remaining = 0;
-        clearInterval(id);
+        remaining = countdownSeconds;
       }
       node.textContent = formatTime(remaining);
     }, 1000);
@@ -497,6 +496,10 @@ function ServiceItemPB({
                 // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
                 className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
                 // style={{ marginTop: showTopLabel ? "8px" : "" }}
+                style={{
+                  marginTop:
+                    showTopLabel && serviceItem?.is_direct_trip ? "8px" : "",
+                }}
               >
                 {/* OPERATOR LOGO */}
                 <div
@@ -632,7 +635,12 @@ function ServiceItemPB({
             <div
               style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
             >
-              <ExpandedDropdown serviceItem={serviceItem} />
+              <ExpandedDropdown
+                serviceItem={serviceItem}
+                isPeru={isPeru}
+                translation={translation}
+                getAnimationIcon={getAnimationIcon}
+              />
             </div>
           </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -48,6 +48,8 @@ function ServiceItemMobile({
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   let isSoldOut = serviceItem.available_seats <= 0;
+  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
+
   const startViewerCount = (node: HTMLSpanElement | null) => {
     if (!node || !viewersConfig) return;
 
@@ -92,8 +94,7 @@ function ServiceItemMobile({
     const id = setInterval(() => {
       remaining -= 1;
       if (remaining <= 0) {
-        remaining = 0;
-        clearInterval(id);
+        remaining = countdownSeconds;
       }
       node.textContent = formatTime(remaining);
     }, 1000);
@@ -405,7 +406,7 @@ function ServiceItemMobile({
       {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
       {serviceItem?.offer_text && (
         <div
-          className="px-[12px] pt-[22px] pb-[12px] relative -z-9 -mt-[15px]"
+          className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
           style={{
             backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
             opacity: isSoldOut ? 0.5 : 1,
@@ -417,43 +418,49 @@ function ServiceItemMobile({
             className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
             style={{ lineHeight: 1.6 }}
           >
-            <div className="flex flex-col">
-              <div className="flex items-center">
-                <LottiePlayer
-                  animationData={serviceItem.icons.bombAnim}
-                  width="18px"
-                  height="18px"
-                />
+            <div className="flex flex-col gap-[4px]">
+              <div
+                className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
+              >
+                <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                  <LottiePlayer
+                    animationData={serviceItem.icons.bombAnim}
+                    width="18px"
+                    height="18px"
+                  />
+                </div>
                 <div
-                  className="ml-[6px] flex items-center mt-[2px]"
+                  className={`ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
                   style={{
                     color: "#fff",
+                    lineHeight: 1.4,
                   }}
                 >
-                  <span className=" min-[380px]:text-[12px]">
-                    {serviceItem?.offer_text || ""}&nbsp;
+                  <span className="min-[380px]:text-[12px] bold-text">
+                    {serviceItem?.offer_text || ""}
                   </span>{" "}
-                  | Termina en&nbsp;
-                  <span
-                    className="bold-text"
-                    ref={startCountdown}
-                    style={{
-                      fontVariantNumeric: "tabular-nums",
-                      display: "inline-block",
-                      // minWidth: "70px",
-                    }}
-                  />
+                  <span className="min-[380px]:text-[12px]">|</span>{" "}
+                  <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                    Termina en&nbsp;
+                    <span
+                      className="bold-text"
+                      ref={startCountdown}
+                      style={{
+                        fontVariantNumeric: "tabular-nums",
+                        display: "inline-block",
+                      }}
+                    />
+                  </span>
                 </div>
               </div>
               <div
-                className="flex items-center"
+                className="flex items-start"
                 style={{
                   color: "#fff",
                 }}
               >
-                {renderIcon("personIcon", "16px")}
-                &nbsp;
-                <span className="">
+                <div>{renderIcon("personIcon", "16px")}</div>
+                <span className="flex-1" style={{ lineHeight: 1.4 }}>
                   <span
                     className="bold-text"
                     ref={startViewerCount}
@@ -490,7 +497,7 @@ function ServiceItemMobile({
             marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
           }}
         >
-          <ExpandedDropdownMobile serviceItem={serviceItem} />
+          <ExpandedDropdownMobile serviceItem={serviceItem} isPeru={isPeru} />
         </div>
       </div>
     </div>

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -8,10 +8,16 @@ interface ExpandedDropdownProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
+  isPeru?: boolean;
+  translation?: Record<string, string>;
+  getAnimationIcon?: (iconName: string) => any;
 }
 
 function ExpandedDropdown({
   serviceItem,
+  isPeru = false,
+  translation = {},
+  getAnimationIcon,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -71,6 +77,18 @@ function ExpandedDropdown({
         className="flex flex-col gap-[10px] text-[13px] text-[#464647]"
         style={{ lineHeight: 1.6 }}
       >
+        {hasPetInfo && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("petFriendlyAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.petFriendly}</span>
+            </div>
+          </div>
+        )}
         <div className="flex gap-[8px] text-[13.33px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>
@@ -83,18 +101,20 @@ function ExpandedDropdown({
             del 85% del monto de tu compra.
           </span>
         </div>
-        <div className="flex gap-[8px]">
-          <span style={{ marginTop: "2px" }}>•</span>
-          <span>
-            <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-            puede ser cambiado de manera online{" "}
-            <span className="bold-text">
-              hasta {serviceItem?.change_ticket_hours || 6} horas antes
-            </span>{" "}
-            de la salida del bus. El monto será reembolsado a tu billetera
-            kupospay.
-          </span>
-        </div>
+        {isPeru ? null : (
+          <div className="flex gap-[8px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -178,27 +178,6 @@ function SeatSection({
     });
   };
 
-  const renderLabels = () => {
-    if (isPeru) {
-      return (
-        <>
-          <span
-            className="text-[13.33px]"
-            style={{
-              color: "#999",
-              // position: "relative",
-              // bottom: numberOfSeats ? "10px" : "",
-            }}
-          >
-            Antes
-          </span>
-          <span className="text-[13.33px]">Desde</span>
-        </>
-      );
-    }
-    return renderSeatNames();
-  };
-
   const strikethroughStyle: React.CSSProperties = {
     color: "#ccc",
     display: "flex",
@@ -223,6 +202,29 @@ function SeatSection({
     (seat) => seat.originalPrice !== seat.discountedPrice,
   );
 
+  const renderLabels = () => {
+    if (isPeru) {
+      return (
+        <>
+          {hasDiscount && (
+            <span
+              className="text-[13.33px]"
+              style={{
+                color: "#999",
+                // position: "relative",
+                // bottom: numberOfSeats ? "10px" : "",
+              }}
+            >
+              Antes
+            </span>
+          )}
+          <span className="text-[13.33px]">Desde</span>
+        </>
+      );
+    }
+    return renderSeatNames();
+  };
+
   return (
     <div
       className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
@@ -243,13 +245,13 @@ function SeatSection({
           gap: "10px",
         }}
       >
-        {isPeru && (
+        {/* {isPeru && (
           <span className="text-[13.33px]" style={strikethroughStyle}>
             {formatPrice(1000)}
           </span>
-        )}
+        )} */}
 
-        {hasDiscount && (
+        {hasDiscount && !isPeru && (
           <span className="text-[13.33px]" style={strikethroughStyle}>
             {formatPrice(highestOriginalPrice)}
           </span>

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -7,10 +7,12 @@ interface ExpandedDropdownMobileProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
+  isPeru?: boolean;
 }
 
 function ExpandedDropdownMobile({
   serviceItem,
+  isPeru,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -36,18 +38,20 @@ function ExpandedDropdownMobile({
             del 85% del monto de tu compra.
           </span>
         </div>
-        <div className="flex gap-[6px]">
-          <span style={{ marginTop: "2px" }}>•</span>
-          <span>
-            <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-            puede ser cambiado de manera online{" "}
-            <span className="bold-text">
-              hasta {serviceItem?.change_ticket_hours || 6} horas antes
-            </span>{" "}
-            de la salida del bus. El monto será reembolsado a tu billetera
-            kupospay.
-          </span>
-        </div>
+        {isPeru ? null : (
+          <div className="flex gap-[6px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -155,22 +155,22 @@ function SeatSectionMobile({
 
     return (
       <>
-        <div className="w-[100%] flex flex-row justify-between items-center">
-          <span
-            className="min-[420]:text-[13px] text-[12px]"
-            style={{ color: "#bbb" }}
-          >
-            Antes
-          </span>
-          <span
-            className="min-[420]:text-[13px] text-[12px] line-through"
-            style={{ color: "#bbb" }}
-          >
-            {originalPrice !== discountedPrice
-              ? commonService.currency(originalPrice, currencySign)
-              : commonService.currency(getHighestFare(), currencySign)}
-          </span>
-        </div>
+        {originalPrice !== discountedPrice && (
+          <div className="w-[100%] flex flex-row justify-between items-center">
+            <span
+              className="min-[420]:text-[13px] text-[12px]"
+              style={{ color: "#bbb" }}
+            >
+              Antes
+            </span>
+            <span
+              className="min-[420]:text-[13px] text-[12px] line-through"
+              style={{ color: "#bbb" }}
+            >
+              {commonService.currency(originalPrice, currencySign)}
+            </span>
+          </div>
+        )}
         <div className="w-[100%] flex flex-row justify-between items-center">
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"