kupos-ui-components-lib 9.0.6 → 9.0.8

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -1,5 +1,4 @@
 import React from "react";
-import DateService from "../../utils/DateService";
 import CommonService from "../../utils/CommonService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
@@ -23,14 +22,15 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
+import DirectoBlock from "../../ui/DirectoBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
-import StageTooltip from "../../ui/StagesTooltip";
 import KuposButton from "../../ui/KuposButton/KuposButton";
 import TopAmenities from "../../ui/TopAmenities/TopAmenities";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
+import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
     promoAnim: {
@@ -63,22 +63,7 @@ const ANIMATION_MAP = {
         kupos: bombAnimation,
     },
 };
-const convertTo24Hour = (depTime) => {
-    const hasAM = depTime.includes("AM");
-    const hasPM = depTime.includes("PM");
-    const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
-    const [hour, minute] = timePart.split(":").map(Number);
-    const pad = (n) => (n < 10 ? "0" + n : String(n));
-    if (hasAM) {
-        return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
-    }
-    if (hasPM) {
-        return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
-    }
-    return timePart;
-};
 function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, }) {
-    var _a, _b;
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -198,10 +183,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         }
         onBookButtonPress();
     };
-    const depTime = serviceItem.dep_time || "";
-    const hasAM = depTime.includes("AM");
-    const hasPM = depTime.includes("PM");
-    const cleanedDepTime = convertTo24Hour(depTime);
+    const countdownSeconds = 7830;
     const items = [
         {
             key: "amenities",
@@ -218,10 +200,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         {
             key: "directo",
             width: "12%",
-            condition: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip,
-            render: (React.createElement("div", { className: "flex items-center gap-[10px] text-[12.5px] z-10 mt-[6px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
-                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
+            condition: !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip),
+            render: (React.createElement(DirectoBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
         },
         {
             key: "pet",
@@ -239,16 +219,24 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
     return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} mt-[14px]` },
-        React.createElement(TopAmenities, { showPromo: showPromo, showTopLabel: showTopLabel, isSoldOut: isSoldOut, priceColor: colors.priceColor, buttonColor: colors.kuposButtonColor, boardingIcon: renderIcon("whiteBoardingIcon", "14px"), getAnimationIcon: getAnimationIcon }),
-        React.createElement("div", { className: "bg-white mx-auto relative", style: {
-                border: `1px solid ${colors.priceColor}`,
-                // showPromo
-                //   ? `1px solid ${colors.priceColor}`
-                //   : "1px solid #ccc",
-                borderRadius: 
-                // showPromo || showTopLabel ?
-                "10px 0 10px 10px",
-                //  : "10px",
+        React.createElement(TopAmenities, { showPromo: showPromo, showTopLabel: showTopLabel, isSoldOut: isSoldOut, priceColor: colors.priceColor, buttonColor: colors.kuposButtonColor, boardingIcon: renderIcon("whiteBoardingIcon", "14px"), getAnimationIcon: getAnimationIcon, 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", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative ", style: {
+                border: countdownSeconds > 0
+                    ? `1px solid ${colors.priceColor}`
+                    : "1px solid #ccc",
+                borderRadius: showTopLabel
+                    ? "10px 0 10px 10px"
+                    : countdownSeconds > 0
+                        ? "10px 0 10px 10px"
+                        : "10px",
             } },
             React.createElement("div", { 
                 //  className="p-[15px] pt-[20px]"
@@ -271,39 +259,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             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("div", { className: `min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
-                            gridTemplateRows: "1fr",
-                        } },
-                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
-                            orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
-                            !isCiva &&
-                                (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
-                                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
-                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
-                            React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
-                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
-                            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
-                                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
-                        React.createElement("div", { className: "flex flex-col gap-[6px] items-center" },
-                            React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
-                                React.createElement("div", null, "\u2022")),
-                            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
-                        React.createElement("div", { className: "flex flex-col gap-[6px]" },
-                            React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
-                                React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
-                                    cleanedDepTime,
-                                    " ",
-                                    React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : ""),
-                                    !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("AM")) &&
-                                        !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM")) &&
-                                        DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
-                            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
-                                React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
-                                    ? null
-                                    : serviceItem.arr_time
-                                        ? DateService.formatTime(serviceItem.arr_time)
-                                        : null))))),
+                    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",
                             height: "2.5rem",
@@ -322,7 +278,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
                 React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
                         setIsExpand(isItemExpanded ? null : serviceItem.id) }))),
-        isItemExpanded && (React.createElement(ExpandedDropdown, { serviceItem: serviceItem, showPromo: showPromo, colors: colors, grayscaleClass: grayscaleClass, translation: translation, getAnimationIcon: getAnimationIcon })),
+        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",
+            } },
+            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 }))),
         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/styles.css

@@ -135,12 +135,12 @@
 .mt-\[2px\] {
   margin-top: 2px;
 }
+.mt-\[3px\] {
+  margin-top: 3px;
+}
 .mt-\[5px\] {
   margin-top: 5px;
 }
-.mt-\[6px\] {
-  margin-top: 6px;
-}
 .mt-\[10px\] {
   margin-top: 10px;
 }
@@ -294,6 +294,9 @@
 .max-h-\[66vh\] {
   max-height: 66vh;
 }
+.min-h-\[2\.2rem\] {
+  min-height: 2.2rem;
+}
 .min-h-\[2\.5rem\] {
   min-height: 2.5rem;
 }
@@ -366,6 +369,10 @@
 .w-auto {
   width: auto;
 }
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .w-full {
   width: 100%;
 }
@@ -465,6 +472,9 @@
 .gap-\[6px\] {
   gap: 6px;
 }
+.gap-\[8px\] {
+  gap: 8px;
+}
 .gap-\[10px\] {
   gap: 10px;
 }

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -10,13 +10,14 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
             Object.keys(serviceItem.pet_seat_info).length > 0);
     return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
         React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
-                gridTemplateColumns: "18% 18% 23% 23%",
+                // gridTemplateColumns: " 28% 21% 23% 23%",
+                gridTemplateColumns: "28% 17% 23% 23%",
             } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
         React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
             serviceItem.is_change_ticket && (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]", onClick: onToggleExpand }, downArrowIcon)) : null)));
+            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)));
 }
 export default BottomAmenities;

package/dist/ui/DateTimeSection/DateTimeSection.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+interface DateTimeSectionProps {
+    serviceItem: {
+        icons?: {
+            origin?: string;
+            destination?: string;
+            [key: string]: any;
+        };
+        boarding_stages?: string;
+        dropoff_stages?: string;
+        travel_date: string;
+        arrival_date: string;
+        dep_time: string;
+        arr_time: string;
+        [key: string]: any;
+    };
+    isSoldOut: boolean;
+    isCiva?: boolean;
+    isLinatal?: boolean;
+    removeArrivalTime?: boolean;
+    orignLabel?: string;
+    destinationLabel?: string;
+    busStage?: Record<string, string>;
+    metaData?: any;
+    colors: Record<string, any>;
+}
+declare function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArrivalTime, orignLabel, destinationLabel, busStage, metaData, colors, }: DateTimeSectionProps): React.ReactElement;
+export default DateTimeSection;

package/dist/ui/DateTimeSection/DateTimeSection.js

@@ -0,0 +1,58 @@
+import React from "react";
+import DateService from "../../utils/DateService";
+import StageTooltip from "../StagesTooltip";
+function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArrivalTime, orignLabel, destinationLabel, busStage, metaData, colors, }) {
+    var _a, _b;
+    const depTime = serviceItem.dep_time || "";
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const convertTo24Hour = (depTime) => {
+        const hasAM = depTime.includes("AM");
+        const hasPM = depTime.includes("PM");
+        const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+        const [hour, minute] = timePart.split(":").map(Number);
+        const pad = (n) => (n < 10 ? "0" + n : String(n));
+        if (hasAM) {
+            return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
+        }
+        if (hasPM) {
+            return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
+        }
+        return timePart;
+    };
+    const cleanedDepTime = convertTo24Hour(depTime);
+    return (React.createElement("div", { className: `min-h-[2.2rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
+            gridTemplateRows: "1fr",
+        } },
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+            !isCiva &&
+                (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
+            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
+        React.createElement("div", { className: "flex flex-col gap-[6px] items-center" },
+            React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
+                React.createElement("div", null, "\u2022")),
+            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
+                    cleanedDepTime,
+                    " ",
+                    React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : ""),
+                    !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("AM")) &&
+                        !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM")) &&
+                        DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
+            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
+                    ? null
+                    : serviceItem.arr_time
+                        ? DateService.formatTime(serviceItem.arr_time)
+                        : null))))));
+}
+export default DateTimeSection;

package/dist/ui/DirectoBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const DirectoBlock: ({ translation, isSoldOut, colors, getAnimationIcon }: {
+    translation: any;
+    isSoldOut: any;
+    colors: any;
+    getAnimationIcon: any;
+}) => React.JSX.Element;
+export default DirectoBlock;

package/dist/ui/DirectoBlock.js

@@ -0,0 +1,11 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (React.createElement("div", { className: "flex items-center relative whitespace-nowrap mt-[3px]" },
+    React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}` },
+        React.createElement(LottiePlayer, { animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" })),
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" }, translation === null || translation === void 0 ? void 0 :
+        translation.directService,
+        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-nowrap w-fit z-10 mt-2.5 text-center shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
+            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: colors.tooltipColor } }), translation === null || translation === void 0 ? void 0 :
+            translation.directServiceText))));
+export default DirectoBlock;

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

@@ -1,6 +1,7 @@
 import React from "react";
 interface ExpandedDropdownProps {
     serviceItem: {
+        change_ticket_hours?: number;
         pet_seat_info?: Record<string, any>;
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,27 +1,37 @@
 import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
 function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }) {
+    var _a, _b;
     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-[20px] relative -z-9", style: {
-            backgroundColor: "#f5f5f5",
+    return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
+            backgroundColor: "#ffefef",
             borderRadius: "0 0 10px 10px",
             // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
-            border: `1px solid ${colors.priceColor}`,
-            borderTop: "none",
+            // border: `1px solid ${colors.priceColor}`,
+            // borderTop: "none",
         } },
-        React.createElement("div", { className: "flex flex-col gap-[12px] text-[13px] text-[#464647]" },
-            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)))),
-            serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center gap-[10px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), 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.flexible)))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: `${grayscaleClass} flex items-center gap-[10px]` },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }),
-                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
-                    React.createElement("span", null, "GPS Tracker")))))));
+        React.createElement("div", { className: "flex flex-col gap-[10px] text-[13px] text-[#464647]", style: { lineHeight: 1.6 } },
+            React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
+                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-[8px]" },
+                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 ExpandedDropdown;

package/dist/ui/SeatSection/SeatSection.js

@@ -75,7 +75,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
         ? { position: "relative", top: 0 }
         : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
-    return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem]", style: isCentered ? { alignItems: "center" } : {} },
+    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: {
                 color: isSoldOut ? "#c0c0c0" : priceColor,

package/dist/ui/TopAmenities/PromoCountdown.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface PromoCountdownProps {
+    countdownSeconds: number;
+}
+interface PromoCountdownState {
+    remaining: number;
+}
+declare class PromoCountdown extends React.Component<PromoCountdownProps, PromoCountdownState> {
+    private timer;
+    constructor(props: PromoCountdownProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PromoCountdownProps): void;
+    componentWillUnmount(): void;
+    private clearTimer;
+    private startTimer;
+    render(): React.JSX.Element;
+}
+export default PromoCountdown;

package/dist/ui/TopAmenities/PromoCountdown.js

@@ -0,0 +1,55 @@
+import React from "react";
+class PromoCountdown extends React.Component {
+    constructor(props) {
+        super(props);
+        this.timer = null;
+        this.state = { remaining: props.countdownSeconds };
+    }
+    componentDidMount() {
+        this.startTimer();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.countdownSeconds !== this.props.countdownSeconds) {
+            this.setState({ remaining: this.props.countdownSeconds }, () => {
+                this.startTimer();
+            });
+        }
+    }
+    componentWillUnmount() {
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    startTimer() {
+        this.clearTimer();
+        if (this.state.remaining <= 0)
+            return;
+        this.timer = setInterval(() => {
+            this.setState((prev) => {
+                if (prev.remaining <= 1) {
+                    this.clearTimer();
+                    return { remaining: 0 };
+                }
+                return { remaining: prev.remaining - 1 };
+            });
+        }, 1000);
+    }
+    render() {
+        const { remaining } = this.state;
+        const hrs = Math.floor(remaining / 3600);
+        const mins = Math.floor((remaining % 3600) / 60);
+        const secs = remaining % 60;
+        const pad = (n) => String(n).padStart(2, "0");
+        return (React.createElement("span", { className: "bold-text" },
+            pad(hrs),
+            ":",
+            pad(mins),
+            ":",
+            pad(secs)));
+    }
+}
+export default PromoCountdown;

package/dist/ui/TopAmenities/TopAmenities.d.ts

@@ -7,6 +7,9 @@ interface TopAmenitiesProps {
     buttonColor?: string;
     boardingIcon?: React.ReactNode;
     getAnimationIcon: (icon: string) => any;
+    countdownSeconds?: number;
+    promoText?: string;
+    onCountdownEnd?: () => void;
 }
-declare function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, }: TopAmenitiesProps): React.ReactElement;
+declare function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds, onCountdownEnd, }: TopAmenitiesProps): React.ReactElement;
 export default TopAmenities;

package/dist/ui/TopAmenities/TopAmenities.js

@@ -1,13 +1,40 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, }) {
+function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, countdownSeconds = 0, onCountdownEnd, }) {
+    const pad = (n) => String(n).padStart(2, "0");
+    const startCountdown = (el) => {
+        if (!el || el.dataset.timerStarted)
+            return;
+        el.dataset.timerStarted = "true";
+        let remaining = countdownSeconds;
+        const update = () => {
+            const hrs = Math.floor(remaining / 3600);
+            const mins = Math.floor((remaining % 3600) / 60);
+            const secs = remaining % 60;
+            el.textContent = `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+        };
+        update();
+        const timer = setInterval(() => {
+            if (remaining <= 0) {
+                clearInterval(timer);
+                const promoBar = el.closest("[data-promo-bar]");
+                if (promoBar)
+                    promoBar.style.display = "none";
+                if (onCountdownEnd)
+                    onCountdownEnd();
+                return;
+            }
+            remaining--;
+            update();
+        }, 1000);
+    };
     return (React.createElement("div", { style: {
             display: "flex",
             justifyContent: "flex-end",
             position: "relative",
             zIndex: "-1",
         } },
-        React.createElement("div", { style: {
+        React.createElement("div", { "data-promo-bar": true, style: {
                 backgroundColor: priceColor,
                 position: "relative",
                 right: showTopLabel ? "-21px" : "",
@@ -16,11 +43,11 @@ function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonCo
                 borderTopLeftRadius: "10px",
             } },
             React.createElement("div", { style: { display: "flex", alignItems: "center" } },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "14px", height: "14px" }),
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "16px", height: "16px" }),
                 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" }, "02:10:30")))),
+                    React.createElement("span", { className: "bold-text", ref: startCountdown })))),
         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/utils/CommonService.d.ts

@@ -1,7 +1,7 @@
 declare const commonService: {
     currency(amount: number, currencySign?: string): string;
     copyObject: (ob: any) => any;
-    getServiceTypeLabelForFilters: (service_type: any) => "" | "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS";
+    getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
     truncateSeatLabel: (label: string | number) => string;
     getAmenitiesImage: (name: string, serviceItem: any) => string;
     getAmenityName: (rawAmenity: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.0.6",
+  "version": "9.0.8",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"
@@ -30,6 +30,7 @@
   "author": "Zahid Dar",
   "license": "MIT",
   "dependencies": {
+    "kupos-ui-components-lib": "^9.0.7",
     "lottie-react": "^2.4.1",
     "lottie-web": "^5.13.0",
     "moment": "^2.30.1",