kupos-ui-components-lib 1.0.1 → 1.0.2

package/dist/KuposUIComponent.js

@@ -15,29 +15,12 @@ import { ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ResponsiveServiceList } from "./components/ServiceList";
 // Using imported ResponsivePaymentSideBar component instead
 export default function KuposUIComponent(props) {
-    var _a, _b, _c, _d;
     const { typeOfComponent } = props, restProps = __rest(props, ["typeOfComponent"]);
     switch (typeOfComponent.toLowerCase()) {
         case "serviceitem":
             return (React.createElement(ResponsiveServiceItem, Object.assign({}, restProps)));
-        case "paymentsidebar": {
-            const { orderDetails } = restProps, otherProps = __rest(restProps, ["orderDetails"]);
-            // Create a properly formatted PaymentSideBarProps object
-            const paymentProps = Object.assign(Object.assign({}, otherProps), (orderDetails && {
-                orderDetails: {
-                    items: orderDetails.map((item) => ({
-                        name: item.name,
-                        quantity: item.quantity,
-                        price: item.price,
-                    })),
-                    subtotal: ((_a = restProps.orderSummary) === null || _a === void 0 ? void 0 : _a.subtotal) || 0,
-                    tax: ((_b = restProps.orderSummary) === null || _b === void 0 ? void 0 : _b.taxes) || 0,
-                    discount: ((_c = restProps.orderSummary) === null || _c === void 0 ? void 0 : _c.discount) || 0,
-                    total: ((_d = restProps.orderSummary) === null || _d === void 0 ? void 0 : _d.total) || 0,
-                },
-            }));
-            return React.createElement(ResponsivePaymentSideBar, Object.assign({}, paymentProps));
-        }
+        case "paymentsidebar":
+            return (React.createElement(ResponsivePaymentSideBar, Object.assign({}, restProps)));
         case "servicelist":
             return (React.createElement(ResponsiveServiceList, Object.assign({}, restProps)));
         default:

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+interface PaymentItemProps {
+    label: string | ReactNode;
+    amount: number | string;
+    currency?: string;
+    isBold?: boolean;
+    isNegative?: boolean;
+    customStyle?: React.CSSProperties;
+    className?: string;
+    formatter?: (amount: number) => string;
+}
+declare const PaymentItem: React.FC<PaymentItemProps>;
+export default PaymentItem;

package/dist/components/PaymentSideBar/PaymentItem.js

@@ -0,0 +1,24 @@
+import React from "react";
+const PaymentItem = ({ label, amount, currency = "CLP", isBold = false, isNegative = false, customStyle = {}, className = "", formatter, }) => {
+    const formatAmount = (amount) => {
+        if (formatter && typeof amount === "number") {
+            return formatter(amount);
+        }
+        if (typeof amount === "string") {
+            return amount;
+        }
+        // Default formatting
+        const formattedAmount = amount
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return formattedAmount;
+    };
+    return (React.createElement("div", { className: `flex items-center justify-between w-[100%] mt-[5px] text-[13.33px] ${className}` },
+        React.createElement("span", { className: isBold ? "bold-text" : "" }, label),
+        React.createElement("div", { className: `${isBold ? "bold-text" : ""} secondary-text`, style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end", alignItems: "center" }, customStyle) },
+            currency,
+            " ",
+            isNegative ? "- " : "",
+            formatAmount(amount))));
+};
+export default PaymentItem;

package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js

@@ -1,107 +1,179 @@
 import React from "react";
-const PaymentSideBarDesktop = (props) => {
-    const { amount = 0, currency = "$", paymentMethods = [], customerDetails, onPaymentComplete, onPaymentError, colors = {}, showSummary = true, orderDetails, } = props;
-    const handlePayment = () => {
-        try {
-            // Payment processing logic would go here
-            onPaymentComplete && onPaymentComplete("payment-123");
-        }
-        catch (error) {
-            onPaymentError && onPaymentError(error);
-        }
-    };
-    return (React.createElement("div", { className: "payment-sidebar-desktop", style: {
-            backgroundColor: colors.backgroundColor || "#ffffff",
-            color: colors.textColor || "#333333",
-            padding: "20px",
-            borderRadius: "8px",
-            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-            maxWidth: "400px",
-        } },
-        React.createElement("h2", { style: { marginBottom: "20px", color: colors.primaryColor || "#333" } }, "Payment Details"),
-        showSummary && orderDetails && (React.createElement("div", { className: "order-summary", style: { marginBottom: "20px" } },
-            React.createElement("h3", { style: { marginBottom: "10px" } }, "Order Summary"),
-            orderDetails.items.map((item, index) => (React.createElement("div", { key: index, style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: "8px",
-                } },
-                React.createElement("span", null,
-                    item.name,
-                    " x ",
-                    item.quantity),
-                React.createElement("span", null,
-                    currency,
-                    item.price.toFixed(2))))),
-            React.createElement("div", { style: {
-                    borderTop: "1px solid #eee",
-                    paddingTop: "10px",
-                    marginTop: "10px",
-                } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "5px",
-                    } },
-                    React.createElement("span", null, "Subtotal"),
-                    React.createElement("span", null,
-                        currency,
-                        orderDetails.subtotal.toFixed(2))),
-                orderDetails.tax !== undefined && (React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "5px",
-                    } },
-                    React.createElement("span", null, "Tax"),
-                    React.createElement("span", null,
-                        currency,
-                        orderDetails.tax.toFixed(2)))),
-                orderDetails.discount !== undefined && (React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "5px",
-                    } },
-                    React.createElement("span", null, "Discount"),
-                    React.createElement("span", null,
-                        "-",
-                        currency,
-                        orderDetails.discount.toFixed(2)))),
-                React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        fontWeight: "bold",
-                        marginTop: "10px",
-                    } },
-                    React.createElement("span", null, "Total"),
+import DateService from "../../utils/DateService";
+import PaymentItem from "./PaymentItem";
+const currency = (amount) => {
+    const formattedAmount = amount
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    return "$" + formattedAmount;
+};
+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]" },
+            React.createElement("div", { className: "summary-details-card" },
+                React.createElement("div", { className: "" }, serviceName),
+                isTrain && (React.createElement("div", { className: "", style: { marginTop: 8 } }, trainType)),
+                date && (React.createElement("div", { className: " mt-2 capitalize bold-text" }, DateService.getDayNameFromDate(date) +
+                    ", " +
+                    DateService.getDateFromDate(date) +
+                    " " +
+                    DateService.getMonthNameFromDate(date) +
+                    ", " +
+                    DateService.getYearFromDate(date))),
+                React.createElement("div", { className: "mt-3" },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: "w-5 h-5 rounded-full flex items-center justify-center mr-2" },
+                            React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.origin, className: "w-[16px] h-[16px] mr-[5px]" })),
+                        React.createElement("span", { className: "bold-text capitalize" }, source)),
+                    React.createElement("div", { className: "ml-7 text-xs mt-[5px]" },
+                        boardingStage,
+                        ". ",
+                        boardingTime ? (React.createElement("span", null, DateService.formatTime(boardingTime))) : null)),
+                React.createElement("div", { className: "mt-3" },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: "w-5 h-5 rounded-full flex items-center justify-center mr-2" },
+                            React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.destination, className: "w-[16px] h-[16px] mr-[5px]" })),
+                        React.createElement("span", { className: "bold-text capitalize" }, dest)),
+                    React.createElement("div", { className: "ml-7 text-xs mt-[5px]" },
+                        droppingStage,
+                        ". ",
+                        droppingTime ? (React.createElement("span", null, DateService.formatTime(droppingTime))) : null)),
+                duration && (React.createElement("div", { className: "mt-3 flex items-center text-xs text-gray-500" },
+                    React.createElement("div", { className: " flex items-center justify-center mr-2" },
+                        React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.hours, className: "w-[16px] h-[16px] mr-[5px]" })),
                     React.createElement("span", null,
-                        currency,
-                        orderDetails.total.toFixed(2)))))),
-        React.createElement("div", { className: "payment-methods", style: { marginBottom: "20px" } },
-            React.createElement("h3", { style: { marginBottom: "10px" } }, "Payment Methods"),
-            paymentMethods.length > 0 ? (paymentMethods.map((method) => (React.createElement("div", { key: method.id, style: {
-                    display: "flex",
-                    alignItems: "center",
-                    padding: "10px",
-                    marginBottom: "8px",
-                    border: `1px solid ${method.isSelected ? colors.primaryColor || "#007bff" : "#ddd"}`,
-                    borderRadius: "4px",
-                    cursor: "pointer",
-                    backgroundColor: method.isSelected ? "#f8f9fa" : "transparent",
-                } },
-                method.icon && (React.createElement("img", { src: method.icon, alt: method.name, style: { width: "24px", height: "24px", marginRight: "10px" } })),
-                React.createElement("span", null, method.name))))) : (React.createElement("p", null, "No payment methods available"))),
-        React.createElement("button", { onClick: handlePayment, style: {
-                backgroundColor: colors.buttonColor || "#007bff",
-                color: colors.buttonTextColor || "#ffffff",
-                padding: "12px 20px",
-                border: "none",
-                borderRadius: "4px",
-                fontSize: "16px",
-                cursor: "pointer",
-                width: "100%",
-            } },
-            "Pay ",
-            currency,
-            amount.toFixed(2))));
+                        "Duraci\u00F3n : ",
+                        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, }) => {
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto sticky w-[322px] relative" },
+            React.createElement("div", { className: "p-[15px]" },
+                React.createElement("div", { className: "text-[17.33px]" }, translation === null || translation === void 0 ? void 0 :
+                    translation.passengerSummaryDetails,
+                    " ",
+                    React.createElement("span", { className: "bold-text" }, translation === null || translation === void 0 ? void 0 : translation.passengerSummaryDetailsBold)),
+                React.createElement("div", null,
+                    React.createElement("div", { className: "mt-2 flex" },
+                        React.createElement("div", { className: `flex rounded-[10px] overflow-hidden text-xs bg-[lightgray] ${dateReturn ? "max-w-[165px]" : "w-auto"}` },
+                            React.createElement("span", { onClick: () => setJourneyTypeActive && setJourneyTypeActive(1), className: "px-4 py-[6px] cursor-pointer text-sm font-medium transition-colors text-[13.33px]", style: {
+                                    backgroundColor: journeyTypeActive === 1
+                                        ? (colors === null || colors === void 0 ? void 0 : colors.bottomStripColor) || "red"
+                                        : "transparent",
+                                    color: journeyTypeActive === 1 ? "white" : "#464647",
+                                    borderTopRightRadius: journeyTypeActive === 1 ? "10px" : "0",
+                                    borderBottomRightRadius: journeyTypeActive === 1 ? "10px" : "0",
+                                } }, (translation === null || translation === void 0 ? void 0 : translation.going) || "Ida"),
+                            dateReturn && (React.createElement("span", { onClick: () => setJourneyTypeActive && setJourneyTypeActive(2), className: "px-4 py-[6px] cursor-pointer text-sm font-medium transition-colors text-[13.33px]", style: {
+                                    backgroundColor: journeyTypeActive === 2
+                                        ? (colors === null || colors === void 0 ? void 0 : colors.bottomStripColor) || "red"
+                                        : "transparent",
+                                    color: journeyTypeActive === 2 ? "white" : "#464647",
+                                    borderTopLeftRadius: journeyTypeActive === 2 ? "10px" : "0",
+                                    borderBottomLeftRadius: journeyTypeActive === 2 ? "10px" : "0",
+                                } }, (translation === null || translation === void 0 ? void 0 : translation.return) || "Vuelta")))),
+                    journeyTypeActive == 1
+                        ? renderSummaryDetailsCard({
+                            serviceName: serviceNameOnward,
+                            date: dateOnward,
+                            source: sourceOnward,
+                            dest: destinationOnward,
+                            boardingStage: boardingStageOnward,
+                            boardingTime: boardingTimeOnward,
+                            droppingStage: droppingStageOnward,
+                            droppingTime: droppingTimeOnward,
+                            duration: durationOnward,
+                            trainType: trainTypeOnward,
+                            isTrain: trainType,
+                            icons: icons,
+                        })
+                        : renderSummaryDetailsCard({
+                            serviceName: serviceNameReturn,
+                            date: dateReturn,
+                            source: sourceReturn,
+                            dest: destinationReturn,
+                            boardingStage: boardingStageReturn,
+                            boardingTime: boardingTimeReturn,
+                            droppingStage: droppingStageReturn,
+                            droppingTime: droppingTimeReturn,
+                            duration: durationReturn,
+                            trainType: trainTypeReturn,
+                            isTrain: trainType,
+                            icons: icons,
+                        })),
+                React.createElement("div", { className: "mt-3 text-[13.33px]" },
+                    selectSeatOnward && selectedOnward && selectedOnward[0]
+                        ? selectedOnward[0].map((val, key) => {
+                            return (React.createElement("div", { key: key, className: "flex justify-between items-center w-[100%]" },
+                                React.createElement("div", null,
+                                    React.createElement("span", null,
+                                        selectedOnward[1][key],
+                                        " "),
+                                    " x ",
+                                    val.is_pet_seat ? "Asiento Mascota" : val.type
+                                //   CommonService.capitalize(
+                                //     CommonService.getSeatName(val.type),
+                                // )
+                                ,
+                                    ":"),
+                                React.createElement("div", { className: "bold-text" },
+                                    "CLP ",
+                                    currency(val.fare * selectedOnward[1][key]))));
+                        })
+                        : null,
+                    selectSeatReturn && selectedReturn && selectedReturn[0]
+                        ? selectedReturn[0].map((val, key) => {
+                            return (React.createElement("div", { key: key, className: "flex justify-between items-center w-[100%] mt-[5px]" },
+                                React.createElement("div", null,
+                                    React.createElement("span", null,
+                                        selectedReturn[1][key],
+                                        " "),
+                                    " x ",
+                                    val.is_pet_seat ? "Asiento Mascota" : val.type
+                                //  CommonService.capitalize(
+                                // CommonService.getSeatName(val.type)
+                                // )
+                                ,
+                                    ":"),
+                                React.createElement("div", { className: "bold-text" },
+                                    "CLP ",
+                                    currency(val.fare * selectedReturn[1][key]))));
+                        })
+                        : null),
+                conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: dateReturn
+                        ? returnConexionFare * conexionPassengers
+                        : conexionFare * conexionPassengers, formatter: currency, isBold: true, className: "subtotal-row font10" })) : null,
+                metaData &&
+                    metaData.whatsapp_delivery_charges &&
+                    !loginData &&
+                    !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
+                        React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.whatsappDeliveryCharges),
+                        React.createElement("div", { className: "relative group pointer" },
+                            React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
+                                    marginLeft: "5px",
+                                    marginBottom: "3px",
+                                    width: "15px",
+                                } }),
+                            React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-1 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: "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 } }),
+                                React.createElement("span", { className: "text-[13.33px]" }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, formatter: currency, isBold: true, className: "mt-[10px] font10" })) : null,
+                removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: netFare, formatter: currency, isBold: true, 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: (amount) => currency(amount).split(",")[0], isBold: true }),
+                (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, isBold: true })),
+                walletMoney ? (React.createElement(PaymentItem, { label: "KuposPay", amount: walletMoney, formatter: currency, isBold: true })) : null,
+                virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text bold-text" }, `kuposcréditos(${virtualLimit}%)`), amount: virtualMoney, formatter: currency, isBold: true })) : 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], isBold: true, customStyle: { color: "var(--primary-color)" } })) : null)),
+        React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute bottom-[52%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
+            React.createElement(PaymentItem, { label: "Total", amount: removeDiscountAtomValue
+                    ? 0
+                    : isAgency
+                        ? netFare + agencyFee
+                        : netFare, formatter: currency, isBold: true, className: "total-row font10", customStyle: { color: "white" } }))));
 };
 export default PaymentSideBarDesktop;

package/dist/components/PaymentSideBar/PaymentSideBarMobile.js

@@ -1,115 +1,20 @@
 import React from "react";
 const PaymentSideBarMobile = (props) => {
-    const { amount = 0, currency = "$", paymentMethods = [], customerDetails, onPaymentComplete, onPaymentError, colors = {}, showSummary = true, orderDetails, } = props;
-    const handlePayment = () => {
-        try {
-            // Payment processing logic would go here
-            onPaymentComplete && onPaymentComplete("payment-123");
-        }
-        catch (error) {
-            onPaymentError && onPaymentError(error);
-        }
-    };
-    return (React.createElement("div", { className: "payment-sidebar-mobile", style: {
-            backgroundColor: colors.backgroundColor || "#ffffff",
-            color: colors.textColor || "#333333",
-            padding: "15px",
-            borderRadius: "8px",
-            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-            width: "100%",
-            maxWidth: "100%",
-        } },
+    return (React.createElement("div", { className: "payment-sidebar-mobile" },
         React.createElement("h2", { style: {
                 marginBottom: "15px",
-                color: colors.primaryColor || "#333",
-                fontSize: "18px"
+                color: "#333",
+                fontSize: "18px",
             } }, "Payment Details"),
-        showSummary && orderDetails && (React.createElement("div", { className: "order-summary", style: { marginBottom: "15px" } },
-            React.createElement("h3", { style: { marginBottom: "8px", fontSize: "16px" } }, "Order Summary"),
-            React.createElement("div", { style: { maxHeight: "150px", overflowY: "auto" } }, orderDetails.items.map((item, index) => (React.createElement("div", { key: index, style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: "6px",
-                    fontSize: "14px"
-                } },
-                React.createElement("span", null,
-                    item.name,
-                    " x ",
-                    item.quantity),
-                React.createElement("span", null,
-                    currency,
-                    item.price.toFixed(2)))))),
-            React.createElement("div", { style: {
-                    borderTop: "1px solid #eee",
-                    paddingTop: "8px",
-                    marginTop: "8px",
-                    fontSize: "14px"
-                } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "4px",
-                    } },
-                    React.createElement("span", null, "Subtotal"),
-                    React.createElement("span", null,
-                        currency,
-                        orderDetails.subtotal.toFixed(2))),
-                orderDetails.tax !== undefined && (React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "4px",
-                    } },
-                    React.createElement("span", null, "Tax"),
-                    React.createElement("span", null,
-                        currency,
-                        orderDetails.tax.toFixed(2)))),
-                orderDetails.discount !== undefined && (React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        marginBottom: "4px",
-                    } },
-                    React.createElement("span", null, "Discount"),
-                    React.createElement("span", null,
-                        "-",
-                        currency,
-                        orderDetails.discount.toFixed(2)))),
-                React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        fontWeight: "bold",
-                        marginTop: "8px",
-                        fontSize: "16px"
-                    } },
-                    React.createElement("span", null, "Total"),
-                    React.createElement("span", null,
-                        currency,
-                        orderDetails.total.toFixed(2)))))),
-        React.createElement("div", { className: "payment-methods", style: { marginBottom: "15px" } },
-            React.createElement("h3", { style: { marginBottom: "8px", fontSize: "16px" } }, "Payment Methods"),
-            React.createElement("div", { style: { maxHeight: "150px", overflowY: "auto" } }, paymentMethods.length > 0 ? (paymentMethods.map((method) => (React.createElement("div", { key: method.id, style: {
-                    display: "flex",
-                    alignItems: "center",
-                    padding: "8px",
-                    marginBottom: "6px",
-                    border: `1px solid ${method.isSelected ? colors.primaryColor || "#007bff" : "#ddd"}`,
-                    borderRadius: "4px",
-                    cursor: "pointer",
-                    backgroundColor: method.isSelected ? "#f8f9fa" : "transparent",
-                } },
-                method.icon && (React.createElement("img", { src: method.icon, alt: method.name, style: { width: "20px", height: "20px", marginRight: "8px" } })),
-                React.createElement("span", { style: { fontSize: "14px" } }, method.name))))) : (React.createElement("p", { style: { fontSize: "14px" } }, "No payment methods available")))),
-        React.createElement("button", { onClick: handlePayment, style: {
-                backgroundColor: colors.buttonColor || "#007bff",
-                color: colors.buttonTextColor || "#ffffff",
+        React.createElement("button", { style: {
+                backgroundColor: "#007bff",
+                color: "#ffffff",
                 padding: "10px 16px",
                 border: "none",
                 borderRadius: "4px",
                 fontSize: "16px",
                 cursor: "pointer",
                 width: "100%",
-            } },
-            "Pay ",
-            currency,
-            amount.toFixed(2))));
+            } }, "Pay $2000")));
 };
 export default PaymentSideBarMobile;

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

@@ -1,38 +1,74 @@
+/// <reference types="react" />
 export interface PaymentSideBarProps {
     variant?: "mobile" | "desktop";
-    amount?: number;
-    currency?: string;
-    paymentMethods?: Array<{
-        id: string;
-        name: string;
-        icon?: string;
-        isSelected?: boolean;
-    }>;
-    customerDetails?: {
-        name?: string;
-        email?: string;
-        phone?: string;
+    serviceNameOnward: string;
+    serviceNameReturn: string;
+    metaData?: any;
+    dateOnward?: string;
+    dateReturn?: string;
+    sourceOnward?: string;
+    sourceReturn?: string;
+    destinationOnward?: string;
+    destinationReturn?: string;
+    boardingStageOnward?: string;
+    boardingStageReturn?: string;
+    droppingStageOnward?: string;
+    droppingStageReturn?: string;
+    boardingTimeOnward?: string;
+    boardingTimeReturn?: string;
+    droppingTimeOnward?: string;
+    droppingTimeReturn?: string;
+    durationOnward?: string;
+    durationReturn?: string;
+    selectSeatOnward: any;
+    selectSeatReturn: any;
+    journeyTypeActive?: number;
+    trainTypeOnward?: boolean;
+    trainTypeReturn?: boolean;
+    setJourneyTypeActive?: (value: number) => void;
+    translation?: {
+        [key: string]: string;
     };
-    onPaymentComplete?: (paymentId: string) => void;
-    onPaymentError?: (error: any) => void;
-    colors?: {
-        primaryColor?: string;
-        secondaryColor?: string;
-        backgroundColor?: string;
-        textColor?: string;
-        buttonColor?: string;
-        buttonTextColor?: string;
+    colors: {
+        kuposButtonColor?: string;
+        topLabelColor?: string;
+        tooltipColor?: string;
+        ratingBorderColor?: string;
+        ratingBottomColor?: string;
+        priceColor?: string;
+        secondaryBgColor?: string;
+        secondaryTextColor?: string;
+        primaryButtonTextColor?: string;
+        bottomStripColor?: string;
     };
-    showSummary?: boolean;
-    orderDetails?: {
-        items: Array<{
-            name: string;
-            quantity: number;
-            price: number;
-        }>;
-        subtotal: number;
-        tax?: number;
-        discount?: number;
-        total: number;
+    trainType?: boolean;
+    icons?: {
+        origin?: string;
+        destination?: string;
+        hours?: string;
+        whatsappInfoIcon?: string;
+        closeIcon?: string;
     };
+    selectedOnward?: any;
+    selectedReturn?: any;
+    conexionChecked?: boolean;
+    conexionPassengers?: number;
+    returnConexionFare?: number;
+    conexionFare?: number;
+    loginData?: any;
+    checkWhatsappEligibility?: boolean;
+    removeDiscountAtomValue?: boolean;
+    netFare?: number;
+    walletMoney?: number;
+    virtualMoney?: number;
+    virtualLimit?: number;
+    discountAmount?: number;
+    discountArray?: any;
+    agencyFee?: number;
+    isAgency?: boolean;
+    showUsd?: boolean;
+    netFareInUsd?: number;
+    promoCode?: any;
+    onPromoRemove?: () => void;
+    renderDiscount?: (discountAmount: number) => React.ReactNode;
 }