kupos-ui-components-lib 1.0.0

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -0,0 +1,248 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import DateService from "../../utils/DateService";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+const exceptions = [
+    "gy",
+    ".gy",
+    "GY",
+    ".GY",
+    "Gy",
+    ".Gy",
+    "BLANCO",
+    "blanco",
+    "asiento_mascota",
+];
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, }) {
+    var _a, _b;
+    const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
+    let isSoldOut = serviceItem.available_seats <= 0;
+    const currency = (amount) => {
+        const formattedAmount = amount
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return "$" + formattedAmount;
+    };
+    const labelId = typeof serviceItem.boarding_stages === "string"
+        ? serviceItem.boarding_stages.split("|")[0]
+        : "";
+    const showTopLabel = busStage &&
+        busStage[labelId] &&
+        busStage[labelId].split("|")[1] === "true" &&
+        busStage[labelId].split("|")[0];
+    const getServiceStars = (serviceItem) => {
+        try {
+            return serviceItem.operator_details && serviceItem.operator_details[1]
+                ? serviceItem.operator_details[1].toFixed(1)
+                : "0.0";
+        }
+        catch (e) {
+            return "";
+        }
+    };
+    const seatTypes = () => {
+        var _a, _b, _c, _d;
+        let seatTypes = (_d = (_c = (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare) // Add this line to sort by fare
+        ) === null || _c === void 0 ? void 0 : _c.slice(0, 2)) === null || _d === void 0 ? void 0 : _d.map((type, i) => {
+            var _a;
+            return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
+                    ? "w-[100%] flex flex-row justify-between "
+                    : "w-[100%] flex flex-row justify-between items-center", key: i },
+                React.createElement("span", { className: "text-[13px] ", style: { marginLeft: "10px" } }, type.label),
+                React.createElement("span", { className: "text-[13px]  bold-text", style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, currency(type.fare))));
+        });
+        return seatTypes;
+    };
+    const getFilteredSeats = (item) => {
+        return item;
+    };
+    const getAmenitiesImage = (name) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        switch (name) {
+            case "air_condtion.png": {
+                return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
+            }
+            case "baggage.png": {
+                return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
+            }
+            case "charging_plug.png": {
+                return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
+            }
+            case "coffee.png": {
+                return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
+            }
+            case "food_new_icon.png": {
+                return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
+            }
+            case "gaming.png": {
+                return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
+            }
+            case "handicap.png": {
+                return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
+            }
+            case "mobile_ticket.png": {
+                return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
+            }
+            case "movie.png": {
+                return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
+            }
+            case "restrooms.png": {
+                return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
+            }
+            case "snacks_new.png": {
+                return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
+            }
+            case "wifi.png": {
+                return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
+            }
+            case "cortina_divisoria.png": {
+                return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
+            }
+            case "frazada.png": {
+                return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
+            }
+            default: {
+                return "";
+            }
+        }
+    };
+    const amenities = () => {
+        var _a;
+        const raw = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[3];
+        const list = Array.isArray(raw)
+            ? raw
+            : typeof raw === "string"
+                ? raw.split("|").filter(Boolean)
+                : [];
+        const nodes = list
+            .slice(0, 2)
+            .map((am, i) => {
+            var _a;
+            return (React.createElement("img", { key: i, className: "amenity", height: 15, src: getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase()), alt: "icon" }));
+        });
+        return nodes;
+    };
+    const renderIcon = (iconKey, size = "14px") => {
+        var _a;
+        const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
+        if (iconValue) {
+            if (typeof iconValue === "string") {
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]` }));
+            }
+        }
+        return null;
+    };
+    let isConexion = false;
+    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_direct_trip)
+            ? "mb-[60px]"
+            : "mb-[20px]"} ${(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
+            ? "mt-[30px]"
+            : "mt-[20px]"}	`, style: { backgroundColor: "#fff", zIndex: 1 } },
+        React.createElement("div", { className: "border border-[#E6E6E6] rounded-[20px]", style: { backgroundColor: "#fff", zIndex: 1 } },
+            React.createElement("div", { className: `p-[15px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+                    showTopLabel ||
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo)
+                    ? "mt-[10px]"
+                    : ""}` },
+                React.createElement("div", { className: "flex justify-between  mb-[8px]" },
+                    React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
+                        React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
+                        React.createElement("div", { className: "flex  text-[13px] bold-text" },
+                            React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[10px] h-[10px] mr-[4px] object-contain mt-[2px]  ${isSoldOut ? "grayscale" : ""}` }),
+                            getServiceStars(serviceItem))),
+                    React.createElement("div", { className: "flex justify-end  -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("span", { className: "text-[12px] text-[red] mt-1   flex\n   justify-end\n   \n   \n    pt-[5px] pb-[5px] pl-[15px] pr-[15px]\n    rounded-[8px] bg-[#DE051414]" }, "\u00A1 \u00DAltimos Asientos!")))),
+                React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
+                    React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%]" },
+                        React.createElement("div", { className: `flex items-center text-[13px] justify-between  ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
+                                    React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.travel_date))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900] relative black-text" }, DateService.formatTime(serviceItem.dep_time))),
+                        React.createElement("div", { className: `flex items-center text-[13px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[14px] h-auto mr-[5px]" },
+                                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.arrival_date))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900] black-text" }, DateService.formatTime(serviceItem.arr_time)))),
+                    React.createElement("div", { className: "content-center w-[47%]" },
+                        React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] gap-[5px]" },
+                            seatTypes(),
+                            isSoldOut ? (React.createElement("div", null,
+                                React.createElement("span", { className: "text-[13px]" }, "Agotado"))) : null))),
+                React.createElement("div", { className: "bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]" }),
+                React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center "}` },
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "flex items-center " },
+                            React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#c0c0c0" : "" } },
+                                React.createElement("span", { className: "ml-[3px] text-[#464647] text-[13px] bold-text" }, serviceItem.operator_details[2])))),
+                    React.createElement("div", { className: "flex  relative text-[#464647]" },
+                        React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "12px")),
+                        React.createElement("div", { className: `cursor-default group text-[13px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            serviceItem.duration,
+                            "hrs")),
+                    React.createElement("div", null, amenities()),
+                    (serviceItem.is_change_ticket || isPetSeat) && (React.createElement("div", { onClick: () => {
+                            setShowDropdown(!showDropdown);
+                            setAmenetiesAtomValue({
+                                service: serviceItem,
+                                showTopLabel: showTopLabel,
+                            });
+                        }, className: "flex items-center" },
+                        serviceItem.pet_seat_info &&
+                            Object.keys(serviceItem.pet_seat_info).length > 0 ? (React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: `relative group cursor-default ` },
+                                React.createElement("div", { className: "flex items-center" },
+                                    React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.petFriendlyAnim, width: "20px", height: "20px" })))))) : null,
+                        serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center" },
+                            React.createElement("div", { className: "relative group cursor-default" },
+                                React.createElement("div", { className: "flex items-center" },
+                                    React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })))))),
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
+                            React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.locationAnim, width: "20px", height: "20px" })))),
+                        (serviceItem.is_change_ticket || isPetSeat) && (React.createElement("img", { src: serviceItem.icons.plus, alt: "icon", width: 11 })))))),
+            (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: isSoldOut ? "" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                    zIndex: -1,
+                    color: "#fff",
+                } },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
+                React.createElement("span", { className: "ml-[10px] text-[#fff] text-[13px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
+            React.createElement("div", { className: "absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
+                showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] text-[12px]  z-20 ${isSoldOut ? "bg-[#ddd]" : ``}`, style: {
+                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                    } },
+                    React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                        React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
+                    React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+                isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
+                        backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                    } },
+                    renderIcon("airportIcon", "14px"),
+                    React.createElement("div", null, "Conexi\u00F3n"))),
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] z-20 `, style: {
+                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                    } },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                    React.createElement("div", null, "Directo"))),
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] z-20 `, style: {
+                        backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                    } },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                    React.createElement("div", null, "Tren Express")))))));
+}
+export default ServiceItemMobile;

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

@@ -0,0 +1,5 @@
+import ServiceItemDesktop from "./ServiceItemDesktop";
+import ServiceItemMobile from "./ServiceItemMobile";
+import ResponsiveServiceItem from "./ResponsiveServiceItem";
+export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem };
+export type { ServiceItemProps } from "./types";

package/dist/components/ServiceItem/index.js

@@ -0,0 +1,4 @@
+import ServiceItemDesktop from "./ServiceItemDesktop";
+import ServiceItemMobile from "./ServiceItemMobile";
+import ResponsiveServiceItem from "./ResponsiveServiceItem";
+export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem };

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

@@ -0,0 +1,141 @@
+export interface MobileServiceItemProps {
+    busStage?: Record<string, string>;
+    amenitiesData?: any;
+    serviceItem: {
+        id: string;
+        is_transpordo?: boolean;
+        operator_details: [
+            string,
+            string | number,
+            string,
+            string | string[],
+            string[],
+            number?,
+            Record<string, number>?,
+            boolean?,
+            number?,
+            boolean?
+        ];
+        travel_date: string;
+        arrival_date: string;
+        dep_time: string;
+        arr_time: string;
+        available_seats: number;
+        busstages?: Record<string, string>;
+        seat_types: Array<{
+            label: string;
+            fare: number;
+        }>;
+        boarding_stages?: Array<{
+            label: string;
+            time: string;
+        }> | {
+            label: string;
+            time: string;
+        } | string;
+        dropoff_stages?: Array<{
+            label: string;
+            time: string;
+        }> | {
+            label: string;
+            time: string;
+        };
+        pet_seat_info?: Record<string, any>;
+        is_change_ticket?: boolean;
+        change_ticket_hours?: number;
+        duration?: number;
+        train_type_label?: string;
+        offer_text?: string;
+        is_direct_trip?: boolean;
+        is_train_type?: boolean;
+        operator_service_name?: string;
+        dep_validation_text?: string;
+        metaData?: {};
+        is_tracking_enabled?: boolean;
+        show_top_label?: boolean;
+        lottie?: {
+            location?: string;
+            flexible?: string;
+        };
+        amenities?: Array<{
+            icon: string;
+            label: string;
+        }>;
+        rating_details?: {
+            bus_quality: number;
+            punctuality: number;
+            service_quality: number;
+            service_recommendation: number;
+            total_reviews: number;
+        };
+        icons?: {
+            origin?: string;
+            destination?: string;
+            rating?: string;
+            duration?: string;
+            hours?: string;
+            flexibleAnim?: string;
+            locationAnim?: string;
+            announcement?: string;
+            directo?: string;
+            directoAnim?: string;
+            petFriendlyAnim?: string;
+            priorityStageAnim?: string;
+            promoAnim?: string;
+            priority?: string;
+            changeTicket?: string;
+            plus?: string;
+            petSeat?: string;
+            warningIcon?: string;
+            soldOutIcon?: string;
+            airConditionIcon?: string;
+            baggageIcon?: string;
+            chargingIcon?: string;
+            coffeeIcon?: string;
+            foodIcon?: string;
+            gamingIcon?: string;
+            handicapIcon?: string;
+            mobileTicketIcon?: string;
+            movieIcon?: string;
+            restroomsIcon?: string;
+            snackIcon?: string;
+            wifiIcon?: string;
+            cortinaIcon?: string;
+            frazaIcon?: string;
+            airportIcon?: string;
+            [key: string]: string | Record<string, string | undefined> | undefined;
+        };
+        useLottieFor?: string[];
+    };
+    onBookButtonPress?: () => void;
+    terminals?: any[];
+    showDropdown?: boolean;
+    setShowDropdown?: (value: boolean) => void;
+    setAmenetiesAtomValue?: (value: {
+        service: MobileServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null | ((curr: {
+        service: MobileServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null) => {
+        service: MobileServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null)) => void;
+    hours?: number;
+    change_ticket_hours?: number;
+    colors: {
+        kuposButtonColor?: string;
+        topLabelColor?: string;
+        tooltipColor?: string;
+        ratingBorderColor?: string;
+        ratingBottomColor?: string;
+        priceColor?: string;
+        secondaryBgColor?: string;
+        secondaryTextColor?: string;
+        primaryButtonTextColor?: string;
+        bottomStripColor?: string;
+    };
+    orignLabel?: string;
+    destinationLabel?: string;
+    variant?: "desktop" | "mobile" | "auto";
+}

package/dist/components/ServiceItem/mobileTypes.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,164 @@
+import React from "react";
+export interface ServiceItemProps {
+    metaData?: any;
+    busStage?: Record<string, string>;
+    children?: React.ReactNode;
+    serviceItem: {
+        id: string;
+        operator_details: [
+            string,
+            string | number,
+            string,
+            string | string[],
+            string[],
+            number?,
+            Record<string, number>?,
+            boolean?,
+            number?,
+            boolean?
+        ];
+        travel_date: string;
+        arrival_date: string;
+        dep_time: string;
+        arr_time: string;
+        available_seats: number;
+        busstages?: Record<string, string>;
+        seat_types: Array<{
+            label: string;
+            fare: number;
+        }>;
+        boarding_stages?: Array<{
+            label: string;
+            time: string;
+        }> | {
+            label: string;
+            time: string;
+        } | string;
+        dropoff_stages?: Array<{
+            label: string;
+            time: string;
+        }> | {
+            label: string;
+            time: string;
+        };
+        pet_seat_info?: Record<string, any>;
+        is_change_ticket?: boolean;
+        change_ticket_hours?: number;
+        duration?: number;
+        train_type_label?: string;
+        offer_text?: string;
+        is_direct_trip?: boolean;
+        is_transpordo?: boolean;
+        is_train_type?: boolean;
+        operator_service_name?: string;
+        dep_validation_text?: string;
+        metaData?: {};
+        is_tracking_enabled?: boolean;
+        show_top_label?: boolean;
+        lottie?: {
+            location?: string;
+            flexible?: string;
+        };
+        amenities?: Array<{
+            icon: string;
+            label: string;
+        }>;
+        rating_details?: {
+            bus_quality: number;
+            punctuality: number;
+            service_quality: number;
+            service_recommendation: number;
+            total_reviews: number;
+        };
+        icons?: {
+            origin?: string;
+            destination?: string;
+            rating?: string;
+            duration?: string;
+            hours?: string;
+            flexibleAnim?: string;
+            locationAnim?: string;
+            announcement?: string;
+            directo?: string;
+            directoAnim?: string;
+            petFriendlyAnim?: string;
+            connectingServiceIcon?: string;
+            priorityStageAnim?: string;
+            promoAnim?: string;
+            priority?: string;
+            changeTicket?: string;
+            plus?: string;
+            petSeat?: string;
+            warningIcon?: string;
+            soldOutIcon?: string;
+            airConditionIcon?: string;
+            baggageIcon?: string;
+            chargingIcon?: string;
+            coffeeIcon?: string;
+            foodIcon?: string;
+            gamingIcon?: string;
+            handicapIcon?: string;
+            mobileTicketIcon?: string;
+            movieIcon?: string;
+            restroomsIcon?: string;
+            snackIcon?: string;
+            wifiIcon?: string;
+            cortinaIcon?: string;
+            frazaIcon?: string;
+            [key: string]: string | Record<string, string | undefined> | undefined;
+        };
+        useLottieFor?: string[];
+    };
+    onBookButtonPress?: () => void;
+    terminals?: any[];
+    t?: (key: string) => string;
+    serviceDetailsLoading?: boolean;
+    query?: {
+        city_origin?: string;
+        city_destination?: string;
+    };
+    hours?: number;
+    change_ticket_hours?: number;
+    colors: {
+        kuposButtonColor?: string;
+        topLabelColor?: string;
+        tooltipColor?: string;
+        ratingBorderColor?: string;
+        ratingBottomColor?: string;
+        priceColor?: string;
+        secondaryBgColor?: string;
+        secondaryTextColor?: string;
+        primaryButtonTextColor?: string;
+        bottomStripColor?: string;
+    };
+    cityOrigin?: {
+        value: number;
+        label: string;
+    };
+    cityDestination?: {
+        value: number;
+        label: string;
+    };
+    translation?: {
+        [key: string]: string;
+    };
+    orignLabel?: string;
+    destinationLabel?: string;
+    variant?: "desktop" | "mobile" | "auto";
+    mobileServiceItem?: ServiceItemProps["serviceItem"];
+    mobileColors?: ServiceItemProps["colors"];
+    mobileTranslation?: ServiceItemProps["translation"];
+    showDropdown?: boolean;
+    setShowDropdown?: (value: boolean) => void;
+    setAmenetiesAtomValue?: (value: {
+        service: ServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null | ((curr: {
+        service: ServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null) => {
+        service: ServiceItemProps["serviceItem"];
+        showTopLabel: string | boolean;
+    } | null)) => void;
+    amenitiesData?: any;
+}

package/dist/components/ServiceItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ServiceList/ResponsiveServiceList.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ServiceListProps } from "./types";
+export default function ResponsiveServiceList(props: ServiceListProps): React.JSX.Element;

package/dist/components/ServiceList/ResponsiveServiceList.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ServiceListDesktop from "./ServiceListDesktop";
+import ServiceListMobile from "./ServiceListMobile";
+export default function ResponsiveServiceList(props) {
+    const { variant } = props;
+    if (variant === "mobile") {
+        return React.createElement(ServiceListMobile, Object.assign({}, props));
+    }
+    return React.createElement(ServiceListDesktop, Object.assign({}, props));
+}

package/dist/components/ServiceList/ServiceListDesktop.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ServiceListProps } from "./types";
+declare const ServiceListDesktop: React.FC<ServiceListProps>;
+export default ServiceListDesktop;