kupos-ui-components-lib 1.0.6 → 1.0.8

package/dist/components/PaymentSideBar/PaymentItem.d.ts

@@ -1,9 +1,8 @@
 import React, { ReactNode } from "react";
 interface PaymentItemProps {
     label: ReactNode;
-    amount: number;
+    amount: string;
     currency?: string;
-    formatter?: (amount: number) => string;
     className?: string;
     isNegative?: boolean;
     customStyle?: React.CSSProperties;

package/dist/components/PaymentSideBar/PaymentItem.js

@@ -1,11 +1,11 @@
 import React from "react";
-const PaymentItem = ({ label, amount, currency = "CLP", formatter = (amount) => amount.toString(), className = "", isNegative = false, customStyle = {}, }) => {
+const PaymentItem = ({ label, amount, currency = "CLP", className = "", isNegative = false, customStyle = {}, }) => {
     return (React.createElement("div", { className: `flex justify-between items-center w-full ${className} text-[13.33px] `, style: { margin: "6px 0" } },
         React.createElement("div", { className: "" }, label),
         React.createElement("div", { className: "bold-text", style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end" }, customStyle) },
             currency,
             " ",
             isNegative ? "- " : "",
-            formatter(amount))));
+            amount)));
 };
 export default PaymentItem;

package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js

@@ -1,12 +1,7 @@
 import React from "react";
 import DateService from "../../utils/DateService";
 import PaymentItem from "./PaymentItem";
-const currency = (amount) => {
-    const formattedAmount = amount
-        .toString()
-        .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return "$" + formattedAmount;
-};
+import CommonService from "../../utils/CommonService";
 const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingStage, boardingTime, droppingStage, droppingTime, duration, trainType, isTrain, icons, }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "mt-3 border-b border-[#ccc] pb-3 text-[13.33px]" },
@@ -46,7 +41,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
                         duration,
                         " horas")))))));
 };
-const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, }) => {
+const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, }) => {
     console.log("🚀 ~ PaymentSideBarDesktop ~ netFare:", netFare);
     return (React.createElement("div", null,
         React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto w-[325px] relative" },
@@ -119,8 +114,9 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                                 ,
                                     ":"),
                                 React.createElement("div", { className: "bold-text" },
-                                    "CLP ",
-                                    currency(val.fare * selectedOnward[1][key]))));
+                                    "CLP",
+                                    " ",
+                                    CommonService.currency(val.fare * selectedOnward[1][key], currencySign))));
                         })
                         : null,
                     selectSeatReturn && selectedReturn && selectedReturn[0]
@@ -138,13 +134,14 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                                 ,
                                     ":"),
                                 React.createElement("div", { className: "bold-text" },
-                                    "CLP ",
-                                    currency(val.fare * selectedReturn[1][key]))));
+                                    "CLP",
+                                    " ",
+                                    CommonService.currency(val.fare * selectedReturn[1][key], currencySign))));
                         })
                         : null),
-                conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: dateReturn
+                conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
                         ? returnConexionFare * conexionPassengers
-                        : conexionFare, formatter: currency, className: "subtotal-row font10" })) : null,
+                        : conexionFare, currencySign), className: "subtotal-row font10" })) : null,
                 metaData &&
                     metaData.whatsapp_delivery_charges &&
                     !loginData &&
@@ -157,18 +154,18 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                                     width: "15px",
                                 } }),
                             React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
-                                React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, formatter: currency, className: "font10", customStyle: { color: "var(--secondary-color)" } })) : null,
-                removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: netFare, formatter: currency, isNegative: true })),
+                                React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "font10", customStyle: { color: "var(--secondary-color)" } })) : null,
+                removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true })),
                 renderDiscount(discountAmount),
-                React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, formatter: currency, className: "text-[13.33px]" }),
+                React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, currencySign), className: "text-[13.33px]" }),
                 (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10" },
                     React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
                     React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
                         React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
-                isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: agencyFee ? agencyFee : 0, formatter: currency })),
-                walletMoney ? (React.createElement(PaymentItem, { label: "KuposPay", amount: walletMoney, formatter: currency })) : null,
-                virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text bold-text" }, `kuposcréditos(${virtualLimit}%)`), amount: virtualMoney, formatter: currency, customStyle: { color: "var(--secondary-color)" } })) : null,
-                showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "primary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), amount: isAgency ? netFareInUsd + agencyFee : netFareInUsd, currency: "USD", formatter: (amount) => currency(amount).split(",")[0], customStyle: { color: "var(--primary-color)" } })) : null),
+                isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: CommonService.currency(agencyFee ? agencyFee : 0, currencySign) })),
+                walletMoney ? (React.createElement(PaymentItem, { label: "KuposPay", amount: CommonService.currency(walletMoney, currencySign) })) : null,
+                virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text bold-text" }, `kuposcréditos(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" } })) : null,
+                showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "primary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), amount: CommonService.currency(isAgency ? netFareInUsd + agencyFee : netFareInUsd, currencySign), currency: "USD", customStyle: { color: "var(--primary-color)" } })) : null),
             React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[8%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
                 React.createElement("div", { className: "flex justify-between items-center w-full" },
                     React.createElement("div", { className: "" }, "Total"),
@@ -179,10 +176,10 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                         } },
                         "CLP",
                         " ",
-                        currency(removeDiscountAtomValue
+                        CommonService.currency(removeDiscountAtomValue
                             ? 0
                             : isAgency
                                 ? netFare + agencyFee
-                                : netFare)))))));
+                                : netFare, currencySign)))))));
 };
 export default PaymentSideBarDesktop;

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

@@ -71,4 +71,5 @@ export interface PaymentSideBarProps {
     promoCode?: any;
     onPromoRemove?: () => void;
     renderDiscount?: (discountAmount: number) => React.ReactNode;
+    currencySign?: string;
 }

package/dist/components/ServiceFilterBar/ResponsiveFilterBar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ServiceFilterBarProps } from "./types";
+declare class ResponsiveServiceFilterBar extends React.Component<ServiceFilterBarProps> {
+    render(): React.JSX.Element;
+}
+export default ResponsiveServiceFilterBar;

package/dist/components/ServiceFilterBar/ResponsiveFilterBar.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ServiceFilterBarDesktop from "./ServiceFilterBarDesktop";
+import ServiceFilterBarMobile from "./ServiceFilterBarMobile";
+class ResponsiveServiceFilterBar extends React.Component {
+    render() {
+        const { variant = "desktop" } = this.props;
+        if (variant === "mobile") {
+            return React.createElement(ServiceFilterBarMobile, Object.assign({}, this.props));
+        }
+        return React.createElement(ServiceFilterBarDesktop, Object.assign({}, this.props));
+    }
+}
+export default ResponsiveServiceFilterBar;

package/dist/components/ServiceFilterBar/ServiceFilterBarDesktop.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { ServiceFilterBarProps } from "./types";
+interface ServiceFilterBarDesktopState {
+    showOperators: boolean;
+    showTimeOptions: boolean;
+    showSeatOptions: boolean;
+    showTypeOptions: boolean;
+    showSpecialDeparture: boolean;
+    showTrainType: boolean;
+    addMargin: boolean;
+    sortedFilters: any[];
+}
+declare class ServiceFilterBarDesktop extends React.Component<ServiceFilterBarProps, ServiceFilterBarDesktopState> {
+    constructor(props: ServiceFilterBarProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ServiceFilterBarProps): void;
+    handleScroll(): void;
+    sortFilters(filtersArray: any[]): any[];
+    clearFilter(): void;
+    showClearFilter(): boolean;
+    toggleFilter(type: string): void;
+    renderFilterItem(option: any, onClick: (i: number) => void, key: number): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ServiceFilterBarDesktop;

package/dist/components/ServiceFilterBar/ServiceFilterBarDesktop.js

@@ -0,0 +1,201 @@
+import React from "react";
+import commonService from "../../utils/CommonService";
+let SEAT_ORDER = [
+    "Ejecutivo",
+    "Semi Cama",
+    "Semi Cama Low",
+    "Salón Cama",
+    "Salón Cama (I)",
+    "Salón Cama Low",
+    "Premium",
+    "Premium (I)",
+];
+class ServiceFilterBarDesktop extends React.Component {
+    constructor(props) {
+        var _a, _b, _c, _d, _e, _f;
+        super(props);
+        this.state = {
+            showOperators: ((_a = props.initialOpenFilters) === null || _a === void 0 ? void 0 : _a.includes("operator")) || false,
+            showTimeOptions: ((_b = props.initialOpenFilters) === null || _b === void 0 ? void 0 : _b.includes("time")) || false,
+            showSeatOptions: ((_c = props.initialOpenFilters) === null || _c === void 0 ? void 0 : _c.includes("seat_types")) || false,
+            showTypeOptions: ((_d = props.initialOpenFilters) === null || _d === void 0 ? void 0 : _d.includes("tipo")) || false,
+            showSpecialDeparture: ((_e = props.initialOpenFilters) === null || _e === void 0 ? void 0 : _e.includes("special_departure")) || false,
+            showTrainType: ((_f = props.initialOpenFilters) === null || _f === void 0 ? void 0 : _f.includes("train_type")) || false,
+            addMargin: false,
+            sortedFilters: this.sortFilters(props.filtersArray),
+        };
+        this.handleScroll = this.handleScroll.bind(this);
+        this.clearFilter = this.clearFilter.bind(this);
+    }
+    componentDidMount() {
+        window.addEventListener("scroll", this.handleScroll);
+        this.clearFilter();
+    }
+    componentWillUnmount() {
+        window.removeEventListener("scroll", this.handleScroll);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.showReturnTripModal !== this.props.showReturnTripModal) {
+            this.clearFilter();
+        }
+        if (prevProps.filtersArray !== this.props.filtersArray) {
+            this.setState({
+                sortedFilters: this.sortFilters(this.props.filtersArray),
+            });
+        }
+    }
+    handleScroll() {
+        this.setState({ addMargin: window.scrollY > 0 });
+    }
+    sortFilters(filtersArray) {
+        let newArr = [];
+        filtersArray.forEach((val) => {
+            if (val.type === "seat_types") {
+                let newSeatOrder = val.options.sort((a, b) => SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label));
+                newArr.push(Object.assign(Object.assign({}, val), { options: newSeatOrder }));
+            }
+            else {
+                newArr.push(val);
+            }
+        });
+        return newArr;
+    }
+    clearFilter() {
+        let filters = commonService.copyObject(this.props.filtersArray);
+        for (let f of filters) {
+            for (let o of f.options) {
+                o.active = false;
+            }
+        }
+        this.props.onFilterClear(filters);
+    }
+    showClearFilter() {
+        for (let f of this.props.filtersArray) {
+            for (let o of f.options) {
+                if (o.active) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    toggleFilter(type) {
+        this.setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { showOperators: type === "operator"
+                    ? !prevState.showOperators
+                    : prevState.showOperators, showTimeOptions: type === "time"
+                    ? !prevState.showTimeOptions
+                    : prevState.showTimeOptions, showSeatOptions: type === "seat_types"
+                    ? !prevState.showSeatOptions
+                    : prevState.showSeatOptions, showTypeOptions: type === "tipo"
+                    ? !prevState.showTypeOptions
+                    : prevState.showTypeOptions, showSpecialDeparture: type === "special_departure"
+                    ? !prevState.showSpecialDeparture
+                    : prevState.showSpecialDeparture, showTrainType: type === "train_type"
+                    ? !prevState.showTrainType
+                    : prevState.showTrainType });
+        });
+    }
+    renderFilterItem(option, onClick, key) {
+        const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, } = this.state;
+        const isOpen = (option.type === "operator" && showOperators) ||
+            (option.type === "time" && showTimeOptions) ||
+            (option.type === "seat_types" && showSeatOptions) ||
+            (option.type === "tipo" && showTypeOptions) ||
+            (option.type === "special_departure" && showSpecialDeparture) ||
+            (option.type === "train_type" && showTrainType);
+        // if (option?.type === "train_type" && !this.props.isTrain) {
+        //   return null;
+        // }
+        if (this.props.isTrain &&
+            ["operator", "seat_types", "special_departure"].includes(option === null || option === void 0 ? void 0 : option.type)) {
+            return null;
+        }
+        return (React.createElement("div", { key: key },
+            React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[16px]" },
+                this.props.t("RESULTS_PAGE." + option.title),
+                React.createElement("img", { src: this.props.icons.downArrow, alt: "downArrow", className: `${isOpen ? "rotate-180" : ""} w-[auto] h-[9px] transition-all duration-300` })),
+            isOpen &&
+                option.options.map((val, i) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    let iconKey = "";
+                    if (val.icon === "sunrise") {
+                        iconKey = val.active
+                            ? this.props.icons.iconSunriseOrange
+                            : this.props.icons.iconSunrise;
+                    }
+                    else if (val.icon === "morning") {
+                        iconKey = val.active
+                            ? this.props.icons.iconMorningOrange
+                            : this.props.icons.iconMorning;
+                    }
+                    else if (val.icon === "sunset") {
+                        iconKey = val.active
+                            ? this.props.icons.iconSunsetOrange
+                            : this.props.icons.iconSunset;
+                    }
+                    else if (val.icon === "night") {
+                        iconKey = val.active
+                            ? this.props.icons.iconNightOrange
+                            : this.props.icons.iconNight;
+                    }
+                    let label = "";
+                    if (val.icon === "night") {
+                        label = (_a = this.props.translation) === null || _a === void 0 ? void 0 : _a.night;
+                    }
+                    else if (val.icon === "morning") {
+                        label = (_b = this.props.translation) === null || _b === void 0 ? void 0 : _b.morning;
+                    }
+                    else if (val.icon === "sunset") {
+                        label = (_c = this.props.translation) === null || _c === void 0 ? void 0 : _c.sunset;
+                    }
+                    else if (val.icon === "sunrise") {
+                        label = (_d = this.props.translation) === null || _d === void 0 ? void 0 : _d.sunrise;
+                    }
+                    else if (val.label === "DIRECT_FILTER") {
+                        label = (_e = this.props.translation) === null || _e === void 0 ? void 0 : _e.directService;
+                    }
+                    else if (val.label === "tipo") {
+                        label = (_f = this.props.translation) === null || _f === void 0 ? void 0 : _f.tipo;
+                    }
+                    else {
+                        label = val.trText
+                            ? val.trText
+                            : val.spText
+                                ? val.spText
+                                : val.label;
+                    }
+                    return (React.createElement("div", { key: i, onClick: () => onClick(i), style: {
+                            margin: "3px 0",
+                            backgroundColor: val.active
+                                ? this.props.colors.selectedColor
+                                : "",
+                            padding: "2px 6px",
+                            paddingLeft: val.active ? "11px" : "",
+                            marginLeft: val.active ? "-10px" : "",
+                        }, className: `flex items-center h-[26px] rounded-[15px] cursor-pointer pt-[4px] capitalize ${val.active
+                            ? `text-[${this.props.colors.selectedTextColor}]`
+                            : ""} ${val.active ? "bold-text" : ""}` },
+                        val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px]" })),
+                        label));
+                })));
+    }
+    render() {
+        var _a, _b;
+        const { onFilterSelected } = this.props;
+        const { sortedFilters } = this.state;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "flex flex-col px-[20px] py-[16px] max-h-[66vh] z-[2] border-[1px] border-[#ddd] rounded-[20px] bg-[#fff] scrollbar-width-none shadow-none cursor-pointer relative overflow-scroll mb-[30px] flex justify-center mt-[20px]" },
+                React.createElement("span", { className: "text-[17.33px] bold-text flex justify-center mt-[20px]" }, (_a = this.props.translation) === null || _a === void 0 ? void 0 : _a.filterHeader),
+                React.createElement("div", { className: "text-[13.33px] pb-[10px]" }, sortedFilters === null || sortedFilters === void 0 ? void 0 : sortedFilters.map((val, key) => {
+                    var _a;
+                    return ((_a = val.options) === null || _a === void 0 ? void 0 : _a.length)
+                        ? this.renderFilterItem(val, (i) => onFilterSelected(val, key, i), key)
+                        : null;
+                }))),
+            this.showClearFilter() && (React.createElement("div", { onClick: this.clearFilter, className: "text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[1px] rounded-b-[10px]" },
+                React.createElement("img", { src: this.props.icons.removeFilterIcon, alt: "removeFilterIcon", className: "w-[16px] h-[16px] mr-[10px]" }), (_b = this.props.translation) === null || _b === void 0 ? void 0 :
+                _b.removeFilters))));
+    }
+}
+export default ServiceFilterBarDesktop;

package/dist/components/ServiceFilterBar/ServiceFilterBarMobile.d.ts

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

package/dist/components/ServiceFilterBar/ServiceFilterBarMobile.js

@@ -0,0 +1,7 @@
+import React from "react";
+const ServiceFilterBarMobile = ({ t, onFilterSelected, onFilterClear, showReturnTripModal, initialOpenFilters = [], filtersArray = [], }) => {
+    return (React.createElement("div", null,
+        React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded" }, t("filters"))));
+};
+// Track open filter categories
+export default ServiceFilterBarMobile;

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

@@ -0,0 +1,5 @@
+import ServiceFilterBarDesktop from "./ServiceFilterBarDesktop";
+import ServiceFilterBarMobile from "./ServiceFilterBarMobile";
+import ResponsiveFilterBar from "./ResponsiveFilterBar";
+export { ServiceFilterBarDesktop, ServiceFilterBarMobile, ResponsiveFilterBar };
+export type { ServiceFilterBarProps } from "./types";

package/dist/components/ServiceFilterBar/index.js

@@ -0,0 +1,4 @@
+import ServiceFilterBarDesktop from "./ServiceFilterBarDesktop";
+import ServiceFilterBarMobile from "./ServiceFilterBarMobile";
+import ResponsiveFilterBar from "./ResponsiveFilterBar";
+export { ServiceFilterBarDesktop, ServiceFilterBarMobile, ResponsiveFilterBar };

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

@@ -0,0 +1,30 @@
+export interface ServiceFilterBarProps {
+    variant?: "mobile" | "desktop";
+    key?: string;
+    t: (key: string) => string;
+    onFilterSelected: (filter: any, filterIndex: number, optionIndex: number) => void;
+    onFilterClear: (filters: any[]) => void;
+    showReturnTripModal: boolean;
+    initialOpenFilters: string[];
+    filtersArray: any[];
+    translation?: {
+        [key: string]: string;
+    };
+    icons?: {
+        iconSunrise: string;
+        iconSunriseOrange: string;
+        iconMorning: string;
+        iconMorningOrange: string;
+        iconSunset: string;
+        iconSunsetOrange: string;
+        iconNight: string;
+        iconNightOrange: string;
+        downArrow: string;
+        removeFilterIcon: string;
+    };
+    isTrain?: boolean;
+    colors: {
+        selectedColor?: string;
+        selectedTextColor?: string;
+    };
+}

package/dist/components/ServiceFilterBar/types.js

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

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

@@ -1,4 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t, }: ServiceItemProps): React.ReactElement;
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, t, }: ServiceItemProps & {
+    currencySign?: string;
+}): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -3,8 +3,9 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
+import CommonService from "../../utils/CommonService";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t = (key) => key, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, t = (key) => key, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const SvgAmenities = ({ moreAnemities, name, color, }) => {
         const amenityKey = name.toLowerCase().replace(/\s/g, "_");
@@ -99,12 +100,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 return rawAmenity;
         }
     };
-    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]
         : "";
@@ -199,9 +194,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     const getSeatPrice = () => {
         const sortedSeatTypes = getSortedSeatTypes();
         return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px]" }, typeof val.price === "string"
-            ? currency(val.price)
+            ? CommonService.currency(val.price, currencySign)
             : typeof val.price === "number"
-                ? currency(val.price)
+                ? CommonService.currency(val.price, currencySign)
                 : null)));
     };
     const getFilteredSeats = (item) => {
@@ -335,7 +330,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 // }`}
                                 style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, getSeatPrice()))),
                     React.createElement("div", null,
-                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[6px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
                                 backgroundColor: serviceDetailsLoading || isSoldOut
                                     ? "lightgray"
                                     : colors.kuposButtonColor,
@@ -421,15 +416,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                         ? serviceItem.operator_details[1].toFixed(1)
                                         : serviceItem.operator_details[1])),
                                 React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]" }, serviceItem.operator_details[2])))),
-                    React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
+                    serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
                         React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
                         React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
                             serviceItem.duration,
                             " ",
                             translation.hours,
-                            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-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors.tooltipColor } },
+                            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-normal z-10 mt-2.5 w-[188px] text-center break-normal 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 } }),
-                                "Duraci\u00F3n estimada del viaje"))),
+                                "Duraci\u00F3n estimada del viaje")))),
                     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 ` },
@@ -448,7 +443,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                     React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })),
                                 React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
                                     React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
-                            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-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[13.33px]", style: { backgroundColor: colors.tooltipColor } },
+                            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-normal z-10 mt-2.5 w-[230px] text-center break-normal 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 } }),
                                 "Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
                                 ") horas antes del viaje.")))),
@@ -498,21 +493,32 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                                     borderRightColor: colors.tooltipColor,
                                                 } }))))))))))))),
         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: isSoldOut ? "" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
+        (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
+                    : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
+                opacity: isSoldOut ? 0.5 : 1,
+            } },
             React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
             React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
         React.createElement("div", { className: "absolute -top-[17px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
-            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[20px] rounded-[38px] text-[13.33px]  z-20 ${isSoldOut ? "bg-[#ddd]" : ``}`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
+            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[14px] rounded-[38px] text-[13.33px]  z-20`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
                 React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
                     React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "20px", height: "20px" })),
                 React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
+                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                } },
                 React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "20px", height: "20px" }),
                 React.createElement("div", null, "Conexión"))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
+                    backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                } },
                 React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
                 React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] 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"))))));
 }

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

@@ -151,4 +151,5 @@ export interface ServiceItemProps {
         showTopLabel: string | boolean;
     } | null)) => void;
     amenitiesData?: any;
+    currencySign?: string;
 }

package/dist/styles.css

@@ -258,6 +258,9 @@
 .w-\[120px\] {
   width: 120px;
 }
+.w-\[188px\] {
+  width: 188px;
+}
 .w-\[230px\] {
   width: 230px;
 }
@@ -475,6 +478,9 @@
 .px-\[10px\] {
   padding-inline: 10px;
 }
+.px-\[14px\] {
+  padding-inline: 14px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }

package/dist/utils/CommonService.d.ts

@@ -0,0 +1,4 @@
+declare const commonService: {
+    currency(amount: number, currencySign?: string): string;
+};
+export default commonService;

package/dist/utils/CommonService.js

@@ -0,0 +1,10 @@
+const commonService = {
+    currency(amount, currencySign) {
+        const formattedAmount = amount
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        const sign = currencySign || "$";
+        return sign + formattedAmount;
+    },
+};
+export default commonService;

package/package.json

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

package/src/components/PaymentSideBar/PaymentItem.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode } from "react";
 
 interface PaymentItemProps {
   label: ReactNode;
-  amount: number;
+  amount: string;
   currency?: string;
-  formatter?: (amount: number) => string;
+
   className?: string;
   isNegative?: boolean;
   customStyle?: React.CSSProperties;
@@ -14,7 +14,7 @@ const PaymentItem: React.FC<PaymentItemProps> = ({
   label,
   amount,
   currency = "CLP",
-  formatter = (amount) => amount.toString(),
+
   className = "",
   isNegative = false,
   customStyle = {},
@@ -35,7 +35,7 @@ const PaymentItem: React.FC<PaymentItemProps> = ({
         }}
       >
         {currency} {isNegative ? "- " : ""}
-        {formatter(amount)}
+        {amount}
       </div>
     </div>
   );

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -2,13 +2,7 @@ import React from "react";
 import { PaymentSideBarProps } from "./types";
 import DateService from "../../utils/DateService";
 import PaymentItem from "./PaymentItem";
-
-const currency = (amount: number) => {
-  const formattedAmount = amount
-    .toString()
-    .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-  return "$" + formattedAmount;
-};
+import CommonService from "../../utils/CommonService";
 
 const renderSummaryDetailsCard = ({
   serviceName,
@@ -112,6 +106,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
   serviceNameOnward,
   serviceNameReturn,
   metaData,
+  currencySign,
   dateOnward,
   dateReturn,
   sourceOnward,
@@ -273,7 +268,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
                         :
                       </div>
                       <div className="bold-text">
-                        CLP {currency(val.fare * selectedOnward[1][key])}
+                        CLP{" "}
+                        {CommonService.currency(
+                          val.fare * selectedOnward[1][key],
+                          currencySign
+                        )}
                       </div>
                     </div>
                   );
@@ -298,7 +297,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
                         :
                       </div>
                       <div className="bold-text">
-                        CLP {currency(val.fare * selectedReturn[1][key])}
+                        CLP{" "}
+                        {CommonService.currency(
+                          val.fare * selectedReturn[1][key],
+                          currencySign
+                        )}
                       </div>
                     </div>
                   );
@@ -309,12 +312,12 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
           {conexionChecked && conexionFare && returnConexionFare ? (
             <PaymentItem
               label="Conexión Aeropuerto:"
-              amount={
+              amount={CommonService.currency(
                 dateReturn
                   ? returnConexionFare * conexionPassengers
-                  : conexionFare
-              }
-              formatter={currency}
+                  : conexionFare,
+                currencySign
+              )}
               className="subtotal-row font10"
             />
           ) : null}
@@ -349,7 +352,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
                 </div>
               }
               amount={metaData.whatsapp_delivery_charges}
-              formatter={currency}
               className="font10"
               customStyle={{ color: "var(--secondary-color)" }}
             />
@@ -358,8 +360,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
           {removeDiscountAtomValue && (
             <PaymentItem
               label="Cupón"
-              amount={netFare}
-              formatter={currency}
+              amount={CommonService.currency(netFare, currencySign)}
               isNegative={true}
             />
           )}
@@ -368,10 +369,10 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
 
           <PaymentItem
             label={`${translation?.promotionalCode}:`}
-            amount={
-              promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0
-            }
-            formatter={currency}
+            amount={CommonService.currency(
+              promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0,
+              currencySign
+            )}
             className="text-[13.33px]"
           />
           {promoCode?.promoCouponAmount ? (
@@ -390,16 +391,17 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
           {isAgency && (
             <PaymentItem
               label={translation?.agencyFee}
-              amount={agencyFee ? agencyFee : 0}
-              formatter={currency}
+              amount={CommonService.currency(
+                agencyFee ? agencyFee : 0,
+                currencySign
+              )}
             />
           )}
 
           {walletMoney ? (
             <PaymentItem
               label="KuposPay"
-              amount={walletMoney}
-              formatter={currency}
+              amount={CommonService.currency(walletMoney, currencySign)}
             />
           ) : null}
 
@@ -408,8 +410,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
               label={
                 <span className="secondary-text bold-text">{`kuposcréditos(${virtualLimit}%)`}</span>
               }
-              amount={virtualMoney}
-              formatter={currency}
+              amount={CommonService.currency(virtualMoney, currencySign)}
               customStyle={{ color: "var(--secondary-color)" }}
             />
           ) : null}
@@ -419,9 +420,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
               label={
                 <span className="primary-text">{translation?.showUsd}</span>
               }
-              amount={isAgency ? netFareInUsd + agencyFee : netFareInUsd}
+              amount={CommonService.currency(
+                isAgency ? netFareInUsd + agencyFee : netFareInUsd,
+                currencySign
+              )}
               currency="USD"
-              formatter={(amount) => currency(amount).split(",")[0]}
               customStyle={{ color: "var(--primary-color)" }}
             />
           ) : null}
@@ -441,12 +444,13 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
               }}
             >
               CLP{" "}
-              {currency(
+              {CommonService.currency(
                 removeDiscountAtomValue
                   ? 0
                   : isAgency
                   ? netFare + agencyFee
-                  : netFare
+                  : netFare,
+                currencySign
               )}
             </div>
           </div>

package/src/components/PaymentSideBar/types.ts

@@ -69,5 +69,6 @@ export interface PaymentSideBarProps {
   promoCode?: any;
   onPromoRemove?: () => void;
   renderDiscount?: (discountAmount: number) => React.ReactNode;
+  currencySign?: string;
 }
 

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -4,6 +4,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
+import CommonService from "../../utils/CommonService";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -20,8 +21,9 @@ function ServiceItemPB({
   translation,
   orignLabel,
   destinationLabel,
+  currencySign,
   t = (key: string) => key,
-}: ServiceItemProps): React.ReactElement {
+}: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const SvgAmenities = ({
     moreAnemities,
     name,
@@ -139,13 +141,6 @@ function ServiceItemPB({
     }
   };
 
-  const currency = (amount: number) => {
-    const formattedAmount = amount
-      .toString()
-      .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return "$" + formattedAmount;
-  };
-
   const labelId =
     typeof serviceItem.boarding_stages === "string"
       ? serviceItem.boarding_stages.split("|")[0]
@@ -300,9 +295,9 @@ function ServiceItemPB({
           className="flex items-center justify-between text-[13.33px]"
         >
           {typeof val.price === "string"
-            ? currency(val.price)
+            ? CommonService.currency(val.price, currencySign)
             : typeof val.price === "number"
-            ? currency(val.price)
+            ? CommonService.currency(val.price, currencySign)
             : null}
         </span>
       )
@@ -593,7 +588,7 @@ function ServiceItemPB({
                 onClick={() => (!isSoldOut ? checkMidnight() : null)}
                 disabled={serviceDetailsLoading}
                 className={`w-full  ${
-                  serviceDetailsLoading || isSoldOut ? "py-[6px]" : "py-[12px]"
+                  serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
                 } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
                 style={{
                   backgroundColor:
@@ -784,34 +779,36 @@ function ServiceItemPB({
 
             {/* <div className="flex justify-between items-center gap-[10px]"> */}
             {/* Duration */}
-            <div className="flex items-baseline relative text-[#464647]">
-              {/* {renderIcon("duration", "14px")} */}
-              <div
-                className={`w-[18px] h-auto mr-[4px] ${
-                  isSoldOut ? "grayscale" : ""
-                }`}
-              >
-                {renderIcon("hours", "14px")}
-              </div>
-              <div
-                className={`cursor-default group text-[13.33px] ${
-                  isSoldOut ? "text-[#c0c0c0]" : ""
-                }`}
-              >
-                {serviceItem.duration} {translation.hours}
+            {serviceItem.duration && (
+              <div className="flex items-baseline relative text-[#464647]">
+                {/* {renderIcon("duration", "14px")} */}
                 <div
-                  className=" hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service"
-                  style={{ backgroundColor: colors.tooltipColor }}
+                  className={`w-[18px] h-auto mr-[4px] ${
+                    isSoldOut ? "grayscale" : ""
+                  }`}
                 >
-                  {/* Tooltip arrow */}
+                  {renderIcon("hours", "14px")}
+                </div>
+                <div
+                  className={`cursor-default group text-[13.33px] ${
+                    isSoldOut ? "text-[#c0c0c0]" : ""
+                  }`}
+                >
+                  {serviceItem.duration} {translation.hours}
                   <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 }}
-                  ></div>
-                  Duración estimada del viaje
+                    className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
+                    style={{ backgroundColor: colors.tooltipColor }}
+                  >
+                    {/* Tooltip arrow */}
+                    <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 }}
+                    ></div>
+                    Duración estimada del viaje
+                  </div>
                 </div>
               </div>
-            </div>
+            )}
 
             {serviceItem.pet_seat_info &&
             Object.keys(serviceItem.pet_seat_info).length > 0 ? (
@@ -860,7 +857,7 @@ function ServiceItemPB({
                     </div>
                   </div>
                   <div
-                    className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[13.33px]"
+                    className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
                     style={{ backgroundColor: colors.tooltipColor }}
                   >
                     {/* Tooltip arrow */}
@@ -1029,7 +1026,12 @@ function ServiceItemPB({
       {serviceItem?.offer_text && (
         <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?.bottomStripColor }}
+          style={{
+            backgroundColor: isSoldOut
+              ? colors?.bottomStripColor
+              : colors?.bottomStripColor,
+            opacity: isSoldOut ? 0.5 : 1,
+          }}
         >
           <LottiePlayer
             animationData={serviceItem.icons.promoAnim}
@@ -1043,9 +1045,7 @@ function ServiceItemPB({
       <div className="absolute -top-[17px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
         {showTopLabel && (
           <div
-            className={`flex items-center gap-[10px] py-[8px] px-[20px] rounded-[38px] text-[13.33px]  z-20 ${
-              isSoldOut ? "bg-[#ddd]" : ``
-            }`}
+            className={`flex items-center gap-[10px] py-[8px] px-[14px] rounded-[38px] text-[13.33px]  z-20`}
             style={{ backgroundColor: !isSoldOut && colors.ratingBottomColor }}
           >
             <div className={isSoldOut ? "grayscale" : ""}>
@@ -1066,9 +1066,10 @@ function ServiceItemPB({
         )}
         {serviceItem?.is_transpordo && (
           <div
-            className={`flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${
-              isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`
-            }`}
+            className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`}
+            style={{
+              backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            }}
           >
             <LottiePlayer
               animationData={serviceItem.icons.connectingServiceIcon}
@@ -1080,9 +1081,10 @@ function ServiceItemPB({
         )}
         {serviceItem?.is_direct_trip && (
           <div
-            className={`flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${
-              isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`
-            }`}
+            className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
+            style={{
+              backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            }}
           >
             <LottiePlayer
               animationData={serviceItem.icons.directoAnim}
@@ -1094,9 +1096,10 @@ function ServiceItemPB({
         )}
         {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
           <div
-            className={`flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${
-              isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`
-            }`}
+            className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
+            style={{
+              backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+            }}
           >
             <LottiePlayer
               animationData={serviceItem.icons.directoAnim}

package/src/components/ServiceItem/types.ts

@@ -145,4 +145,5 @@ export interface ServiceItemProps {
     showTopLabel: string | boolean;
   } | null)) => void;
   amenitiesData?: any;
+  currencySign?: string;
 }

package/src/utils/CommonService.ts

@@ -0,0 +1,12 @@
+const commonService = {
+  currency(amount: number, currencySign?: string) {
+    const formattedAmount = amount
+      .toString()
+      .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+
+    const sign = currencySign || "$";
+    return sign + formattedAmount;
+  },
+};
+
+export default commonService;