kupos-ui-components-lib 9.7.1 → 9.7.2

package/dist/assets/images/anims/service_list/users_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":512,"w":512,"meta":{"g":"@lottiefiles/creator@1.90.1"},"layers":[{"ty":2,"nm":"111","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[54.49996512276783,38.99999128069197]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[436.62,436.62],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[300,300],"t":58},{"s":[436.62,436.62],"t":112}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[255.99996512276783,255.99999128069197]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":58},{"s":[100],"t":112}]}},"refId":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","ind":1}],"v":"5.7.0","fr":30,"op":114,"ip":0,"assets":[{"id":"111_b9bb56d2-8f3c-4772-b1ac-9caf81e5c707","e":1,"w":109,"h":78,"p":"data:image/png;base64,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","u":""}]}

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -23,6 +23,7 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
+import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -78,6 +79,9 @@ const ANIMATION_MAP = {
     femaaleAnimation: {
         kupos: femaleAnimation,
     },
+    usersAnimation: {
+        kupos: usersAnimation,
+    },
 };
 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, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }) {
     var _a;
@@ -248,7 +252,7 @@ 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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
+    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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
                 ? null

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, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }: 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, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -5,6 +5,7 @@ import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
+import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -17,7 +18,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -87,7 +88,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
-    return (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onBookButtonPress, onToggleExpand: () => setIsFeatureDropDownExpand &&
+            setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
+                isFeatureDropDownExpand === true
+                ? null
+                : serviceItem.id) })) : (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -108,7 +113,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                 React.createElement("div", { className: "flex items-center" },
                                     React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
                                     React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
-                                React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                                React.createElement("div", { className: "flex items-center cursor-pointer ", style: {
+                                        color: isSoldOut ? "#bbb" : "text-[#464647]",
+                                    } },
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
                 React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
                 hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
@@ -123,7 +130,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
             !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
-                background: isSoldOut ? offerGradientWithOpacity : offerGradient,
+                background: isSoldOut
+                    ? offerGradientWithOpacity
+                    : offerGradient,
                 // opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,
@@ -131,8 +140,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             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 justify-between items-center" },
                     (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {}).length ===
-                            0 &&
+                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
+                            .length === 0 &&
                         ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _g !== void 0 ? _g : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
                         React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
                         React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
@@ -180,6 +189,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, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))))));
 }
 export default ServiceItemMobile;

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

@@ -125,6 +125,19 @@ export interface MobileServiceItemProps {
             whiteFireIcon?: string;
             femaleAnim?: string;
             cancelTicketIcon?: string;
+            thunderAnim?: string;
+            personsAnim?: string;
+            whiteOrigin?: string;
+            whiteDestination?: string;
+            userIcon?: string;
+            sheildIcon?: string;
+            busIcon?: string;
+            whiteDownArrow?: string;
+            empressaIcon?: string;
+            flexibleIcon?: string;
+            listoIcon?: string;
+            precioIcon?: string;
+            confirmarIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
@@ -184,4 +197,18 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    cityOrigin?: {
+        value: number;
+        label: string;
+    };
+    cityDestination?: {
+        value: number;
+        label: string;
+    };
+    isNewUi?: boolean;
 }

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

@@ -135,6 +135,11 @@ export interface ServiceItemProps {
             sheildIcon?: string;
             busIcon?: string;
             whiteDownArrow?: string;
+            empressaIcon?: string;
+            flexibleIcon?: string;
+            listoIcon?: string;
+            precioIcon?: string;
+            confirmarIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

package/dist/styles.css

@@ -174,6 +174,9 @@
 .m-\[auto\] {
   margin: auto;
 }
+.mx-\[10px\] {
+  margin-inline: 10px;
+}
 .mx-auto {
   margin-inline: auto;
 }
@@ -207,6 +210,9 @@
 .mt-\[10px\] {
   margin-top: 10px;
 }
+.mt-\[12px\] {
+  margin-top: 12px;
+}
 .mt-\[13px\] {
   margin-top: 13px;
 }
@@ -396,9 +402,6 @@
 .w-\[20px\] {
   width: 20px;
 }
-.w-\[30px\] {
-  width: 30px;
-}
 .w-\[34px\] {
   width: 34px;
 }
@@ -584,6 +587,9 @@
 .gap-\[2px\] {
   gap: 2px;
 }
+.gap-\[3px\] {
+  gap: 3px;
+}
 .gap-\[3rem\] {
   gap: 3rem;
 }
@@ -987,6 +993,12 @@
 .text-\[14px\] {
   font-size: 14px;
 }
+.text-\[15px\] {
+  font-size: 15px;
+}
+.text-\[16px\] {
+  font-size: 16px;
+}
 .text-\[17\.33px\] {
   font-size: 17.33px;
 }
@@ -1076,9 +1088,6 @@
 .text-\[\#666\] {
   color: #666;
 }
-.text-\[\#171717\] {
-  color: #171717;
-}
 .text-\[\#272727\] {
   color: #272727;
 }
@@ -1106,6 +1115,9 @@
 .text-\[red\] {
   color: red;
 }
+.text-\[white\] {
+  color: white;
+}
 .capitalize {
   text-transform: capitalize;
 }

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
+    serviceItem: any;
+    showTopLabel: any;
+    colors: any;
+    isSoldOut: any;
+    cityOrigin: any;
+    cityDestination: any;
+    renderIcon: any;
+    viewersConfig: any;
+    isFeatureDropDownExpand: any;
+    onToggleExpand: any;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity: any;
+    onDecreaseTicketQuantity: any;
+    onBookButtonPress: any;
+}) => React.JSX.Element;
+export default FeatureServiceUiMobile;

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -0,0 +1,233 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import commonService from "../../utils/CommonService";
+const HARDCODED_OPERATORS = [
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+        name: "Turbus",
+        time: "7:00 am",
+        seatsAvailable: "3 disponibles",
+    },
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
+        name: "Pullmanbus",
+        time: "8:00 am",
+        seatsAvailable: "5 disponibles",
+    },
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+        name: "Expreso Santa C...",
+        time: "9:00 am",
+        seatsAvailable: "3 disponibles",
+    },
+];
+const HARDCODED_COUNTDOWN = "09:55";
+const HOW_IT_WORKS_STEPS = [
+    {
+        icon: "flexible",
+        name: "1. Salida flexible",
+        text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+    },
+    {
+        icon: "bus",
+        name: "2. Empresa asignada",
+        text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+    },
+    {
+        icon: "price",
+        name: "3. Precio garantizado",
+        text: "Al seleccionar este servicio aseguras el precio reducido.",
+    },
+    {
+        icon: "ticket",
+        name: "4. ¡Listo!",
+        text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+    },
+];
+const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
+    var _a, _b, _c, _d;
+    const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
+        ? serviceItem.operators
+        : HARDCODED_OPERATORS;
+    const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
+        isFeatureDropDownExpand === true;
+    const canDecreaseTicketQuantity = ticketQuantity > 1;
+    const HOW_IT_WORKS_STEPS = [
+        {
+            icon: "flexible",
+            name: "1. Salida flexible",
+            text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+        },
+        {
+            icon: "bus",
+            name: "2. Empresa asignada",
+            text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+        },
+        {
+            icon: "price",
+            name: "3. Precio garantizado",
+            text: "Al seleccionar este servicio aseguras el precio reducido.",
+        },
+        {
+            icon: "ticket",
+            name: "4. ¡Listo!",
+            text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+        },
+    ];
+    const FeatureStepIcon = ({ icon }) => {
+        switch (icon) {
+            case "flexible":
+                return renderIcon("flexibleIcon", "20px");
+            case "bus":
+                return renderIcon("empressaIcon", "20px");
+            case "price":
+                return renderIcon("precioIcon", "20px");
+            default:
+                return renderIcon("listoIcon", "20px");
+        }
+    };
+    return (React.createElement("div", { 
+        // ${
+        //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+        // }
+        className: `relative  mb-[10px]
+       ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+            showTopLabel
+            ? "mt-[24px]"
+            : "mt-[20px]"}` },
+        React.createElement("div", { className: "", style: {
+                border: "1px solid #c0c0c0",
+                padding: "12px",
+                borderRadius: "14px",
+            } },
+            React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]" },
+                React.createElement("div", { className: "flex flex-col gap-[10px]" },
+                    React.createElement("div", { className: "flex justify-between items-center text-[white]" },
+                        React.createElement("div", { className: "flex flex-col gap-[8px]" },
+                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                                React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
+                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
+                        React.createElement("div", { className: "flex flex-col justify-end gap-[12px] relative mb-[16px]" },
+                            React.createElement("div", { className: "flex flex-col gap-[3px] items-end" },
+                                React.createElement("span", { className: "text-[#FF8F45] bold-text text-[16px] leading-tight", style: {
+                                        animation: "pulse-zoom 2s ease-in-out infinite",
+                                        whiteSpace: "nowrap",
+                                    } }, "60% OFF"),
+                                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
+                                    "$10.000",
+                                    React.createElement("span", { style: {
+                                            position: "absolute",
+                                            left: "-2px",
+                                            top: "50%",
+                                            width: "calc(100% + 4px)",
+                                            height: "1px",
+                                            backgroundColor: "#FF5C60",
+                                            transform: "rotate(-10deg)",
+                                            transformOrigin: "center",
+                                        } })),
+                                React.createElement("span", { className: "text-white bold-text text-[22px] leading-none" }, `$${(4000 * ticketQuantity).toLocaleString()}`)))),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "flex items-center text-[white]" },
+                            React.createElement("span", null, "Vie, 04/11"),
+                            React.createElement("span", { className: "h-[20px] flex items-center justify-center mx-[10px]" }, "\u2022"),
+                            React.createElement("span", null, "07:00 AM - 10:00 AM")),
+                        React.createElement("div", { style: {
+                                // height: "80px",
+                                border: "1px solid #363c48",
+                                backgroundColor: "#1a202e",
+                                padding: "14px 10px",
+                                borderRadius: "14px",
+                                marginTop: "14px",
+                            } },
+                            React.createElement("div", { className: "flex flex-col justify-center items-center text-[white]" },
+                                React.createElement("span", { className: "text-[15px] bold-text" }, "3 operadores compitiendo por tu compra"),
+                                React.createElement("span", { className: "mt-[8px]" }, "Empresa a confirmar despu\u00E9s de tu pago")),
+                            React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px] mt-[12px] text-[white]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
+                                    // height: "80px",
+                                    border: "1px solid #363c48",
+                                    backgroundColor: "#1a202e",
+                                    padding: "14px 10px",
+                                } },
+                                React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
+                                React.createElement("div", { className: "bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
+                                    React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
+                                React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                            React.createElement("div", { className: "flex items-center gap-[4px]" },
+                                renderIcon("sheildIcon", "14px"),
+                                React.createElement("span", { className: "text-[white]" }, "Tu asiento confirmado al instante.")))),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
+                            React.createElement("span", { className: "text-[12px] text-[white]" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
+                            React.createElement("div", { className: "flex w-full items-center justify-between", style: {
+                                    border: "1px solid #363c48",
+                                    backgroundColor: "#1a202e",
+                                    padding: "6px 14px",
+                                    borderRadius: "14px",
+                                } },
+                                React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
+                                        ? "cursor-pointer bg-[#2d374d]"
+                                        : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
+                                React.createElement("span", { className: "bold-text text-[20px] text-[white]" }, ticketQuantity),
+                                React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]" }, "+")),
+                            React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer", style: {
+                                    backgroundColor: "#FF5C60",
+                                    animation: "pulse-zoom 2s ease-in-out infinite",
+                                    whiteSpace: "nowrap",
+                                    width: "100%",
+                                } },
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
+                                React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")))),
+                    React.createElement("div", { className: "flex justify-between items-center" },
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" }),
+                            React.createElement("span", { className: "ml-[5px]" },
+                                React.createElement("span", { className: "bold-text text-[white]" },
+                                    " ",
+                                    React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
+                                            fontVariantNumeric: "tabular-nums",
+                                        } }),
+                                    " "),
+                                " ",
+                                React.createElement("span", { className: "text-[white]" }, "viendo |"),
+                                " ",
+                                React.createElement("span", { className: "bold-text text-[white]", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
+                                " ",
+                                React.createElement("span", { className: "text-[white]" }, "han comprado"))),
+                        React.createElement("div", { className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
+                            React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
+                                    width: "14px",
+                                    height: "8px",
+                                    filter: "brightness(0) invert(1)",
+                                } }))))),
+            isItemExpanded && (React.createElement("div", { className: "flex flex-col gap-[10px]", style: {
+                    opacity: isItemExpanded ? 1 : 0,
+                    transition: "opacity 250ms ease-in-out",
+                } },
+                React.createElement("div", { className: ` text-[12px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"}`, style: { transition: "padding 300ms ease-in-out" } },
+                    React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
+                    React.createElement("div", { className: "flex flex-col" }, HOW_IT_WORKS_STEPS.map((step) => (React.createElement("div", { className: "flex items-start gap-[8px] mt-[10px]" },
+                        React.createElement("div", null,
+                            React.createElement(FeatureStepIcon, { icon: step.icon })),
+                        React.createElement("div", { className: "flex flex-col" },
+                            React.createElement("span", { className: "bold-text" }, step.name),
+                            React.createElement("span", null, step.text)))
+                    // <div
+                    //   key={step.name}
+                    //   className="flex flex-col items-center text-center text-[#272727]"
+                    // >
+                    //   <FeatureStepIcon icon={step.icon} />
+                    //   <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
+                    //     {step.name}
+                    //   </span>
+                    //   <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
+                    //     {step.text}
+                    //   </span>
+                    // </div>
+                    )))))))));
+};
+export default FeatureServiceUiMobile;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
     serviceItem: any;
     showTopLabel: any;
-    colors: any;
     isSoldOut: any;
     getAnimationIcon: any;
     cityOrigin: any;