kupos-ui-components-lib 10.4.65 → 10.4.66

package/dist/example.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Example component showing how to use KuposUIComponent with different typeOfComponent values
+ */
+export default function Example(): React.JSX.Element;

package/dist/example.js

@@ -0,0 +1,240 @@
+import React from "react";
+import { KuposUIComponent } from "./index";
+// Sample data for demonstration
+const sampleServiceItem = {
+    id: "12345",
+    operator_details: [
+        "https://example.com/logo.png",
+        "4.5",
+        "Operator Name", // operator name
+    ],
+    travel_date: "2025-08-01T09:00:00Z",
+    arrival_date: "2025-08-01T12:00:00Z",
+    dep_time: "09:00",
+    arr_time: "12:00",
+    available_seats: 5,
+    seat_types: [
+        { label: "Salon Cama", fare: 50 },
+        { label: "Premium", fare: 75 },
+        { label: "Economy", fare: 40 },
+    ],
+    offer_text: "Limited time offer: 20% off!",
+    is_direct_trip: true,
+    icons: {
+        origin: "https://example.com/origin.png",
+        destination: "https://example.com/destination.png",
+        rating: "https://example.com/star.png",
+        hours: "https://example.com/clock.png",
+    }
+};
+// Sample data for new ServiceItem component
+const sampleNewServiceItem = {
+    id: "service123",
+    name: "Premium Car Wash",
+    description: "Complete exterior and interior cleaning with premium wax and polish",
+    price: 49.99,
+    currency: "$",
+    imageUrl: "https://example.com/carwash.jpg",
+    rating: 4.8,
+    available: true,
+    featured: true,
+    duration: "45 min",
+    location: "Downtown",
+    provider: {
+        name: "Sparkle Clean",
+        imageUrl: "https://example.com/sparkle.jpg",
+        rating: 4.9
+    }
+};
+// Sample data for PaymentSideBar
+const samplePaymentData = {
+    orderSummary: {
+        subtotal: 49.99,
+        taxes: 5.00,
+        discount: 10.00,
+        total: 44.99
+    },
+    paymentMethods: [
+        { id: "card", name: "Credit Card", icon: "💳" },
+        { id: "paypal", name: "PayPal", icon: "🅿️" },
+        { id: "apple", name: "Apple Pay", icon: "🍎" }
+    ],
+    customerDetails: {
+        name: "John Doe",
+        email: "john@example.com",
+        phone: "+1 555-123-4567"
+    },
+    orderDetails: [
+        { name: "Premium Car Wash", price: 49.99, quantity: 1 }
+    ]
+};
+// Sample data for ServiceList
+const sampleServiceList = [
+    {
+        id: "service123",
+        name: "Premium Car Wash",
+        description: "Complete exterior and interior cleaning with premium wax and polish",
+        price: 49.99,
+        currency: "$",
+        imageUrl: "https://example.com/carwash.jpg",
+        rating: 4.8,
+        available: true,
+        featured: true
+    },
+    {
+        id: "service456",
+        name: "Basic Car Wash",
+        description: "Quick exterior wash and vacuum",
+        price: 19.99,
+        currency: "$",
+        imageUrl: "https://example.com/basicwash.jpg",
+        rating: 4.2,
+        available: true,
+        featured: false
+    },
+    {
+        id: "service789",
+        name: "Interior Detailing",
+        description: "Deep cleaning of all interior surfaces",
+        price: 89.99,
+        currency: "$",
+        imageUrl: "https://example.com/detailing.jpg",
+        rating: 4.9,
+        available: false,
+        featured: false
+    }
+];
+const sampleFilters = {
+    categories: ["Wash", "Detailing", "Maintenance"],
+    priceRange: { min: 0, max: 100 },
+    sortBy: "price",
+    sortOrder: "asc"
+};
+/**
+ * Example component showing how to use KuposUIComponent with different typeOfComponent values
+ */
+export default function Example() {
+    return (React.createElement("div", { className: "example-container", style: { padding: "20px", maxWidth: "1200px", margin: "0 auto" } },
+        React.createElement("h1", null, "KuposUI Component Examples"),
+        React.createElement("section", { style: { marginBottom: "40px" } },
+            React.createElement("h2", null, "Service Item Example"),
+            React.createElement(KuposUIComponent, { typeOfComponent: "serviceitem", variant: "desktop", serviceItem: sampleServiceItem, onBookButtonPress: () => console.log("Book button pressed!"), colors: {
+                    kuposButtonColor: "#FF5722",
+                    priceColor: "#4CAF50",
+                    tooltipColor: "#333333",
+                    ratingBorderColor: "#FFC107",
+                    ratingBottomColor: "#FFF8E1",
+                    secondaryBgColor: "#E0E0E0",
+                    secondaryTextColor: "#757575",
+                    primaryButtonTextColor: "#FFFFFF"
+                }, translation: {
+                    buyButton: "Buy",
+                    soldOutButton: "Sold Out",
+                    hours: "hrs",
+                    petFriendly: "Pet Friendly",
+                    flexible: "Flexible",
+                    title: "Important Information",
+                    continueButton: "Continue",
+                    okContinueButton: "OK, Continue",
+                    chooseAnotherTripButton: "Choose Another Trip"
+                } })),
+        React.createElement("section", { style: { marginBottom: "40px" } },
+            React.createElement("h2", null, "Payment Sidebar Example"),
+            React.createElement("div", { style: { display: "flex", gap: "20px" } },
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Desktop Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "paymentsidebar", variant: "desktop", orderSummary: samplePaymentData.orderSummary, paymentMethods: samplePaymentData.paymentMethods, customerDetails: samplePaymentData.customerDetails, orderDetails: samplePaymentData.orderDetails, onPaymentMethodSelect: (id) => console.log(`Selected payment method: ${id}`), onPayButtonClick: () => console.log("Pay button clicked"), colors: {
+                            primaryColor: "#4CAF50",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff"
+                        } })),
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Mobile Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "paymentsidebar", variant: "mobile", orderSummary: samplePaymentData.orderSummary, paymentMethods: samplePaymentData.paymentMethods, customerDetails: samplePaymentData.customerDetails, orderDetails: samplePaymentData.orderDetails, onPaymentMethodSelect: (id) => console.log(`Selected payment method: ${id}`), onPayButtonClick: () => console.log("Pay button clicked"), colors: {
+                            primaryColor: "#4CAF50",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff"
+                        } })))),
+        React.createElement("section", { style: { marginBottom: "40px" } },
+            React.createElement("h2", null, "Service List Example"),
+            React.createElement("div", { style: { display: "flex", gap: "20px" } },
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Desktop Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "servicelist", variant: "desktop", services: sampleServiceList, onServiceSelect: (id) => console.log(`Selected service: ${id}`), onServiceView: (id) => console.log(`Viewing service: ${id}`), showFilters: true, filters: sampleFilters, onFilterChange: (filters) => console.log('Filters changed:', filters), colors: {
+                            primaryColor: "#4CAF50",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff",
+                            highlightColor: "#FFC107"
+                        } })),
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Mobile Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "servicelist", variant: "mobile", services: sampleServiceList, onServiceSelect: (id) => console.log(`Selected service: ${id}`), onServiceView: (id) => console.log(`Viewing service: ${id}`), showFilters: true, filters: sampleFilters, onFilterChange: (filters) => console.log('Filters changed:', filters), colors: {
+                            primaryColor: "#4CAF50",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff",
+                            highlightColor: "#FFC107"
+                        } })))),
+        React.createElement("section", { style: { marginBottom: "40px" } },
+            React.createElement("h2", null, "New Service Item Example"),
+            React.createElement("div", { style: { display: "flex", gap: "20px" } },
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Desktop Variant"),
+                    React.createElement(KuposUIComponent, Object.assign({ typeOfComponent: "serviceitem", variant: "desktop" }, sampleNewServiceItem, { onBookButtonPress: () => console.log("Book button pressed!"), onViewDetails: () => console.log("View details clicked!"), colors: {
+                            primaryColor: "#FF5722",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff",
+                            highlightColor: "#FFC107"
+                        }, t: (key) => key }))),
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Mobile Variant"),
+                    React.createElement(KuposUIComponent, Object.assign({ typeOfComponent: "serviceitem", variant: "mobile" }, sampleNewServiceItem, { onBookButtonPress: () => console.log("Mobile book button pressed!"), onViewDetails: () => console.log("Mobile view details clicked!"), colors: {
+                            primaryColor: "#FF5722",
+                            secondaryColor: "#2196F3",
+                            backgroundColor: "#f5f5f5",
+                            textColor: "#333",
+                            cardBackgroundColor: "#fff",
+                            highlightColor: "#FFC107"
+                        }, t: (key) => key }))))),
+        React.createElement("section", { style: { marginBottom: "40px" } },
+            React.createElement("h2", null, "Original Service Item Example"),
+            React.createElement("div", { style: { display: "flex", gap: "20px" } },
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Desktop Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "serviceitem", variant: "desktop", serviceItem: sampleServiceItem, onBookButtonPress: () => console.log("Book button pressed!"), colors: {
+                            kuposButtonColor: "#FF5722",
+                            priceColor: "#4CAF50",
+                            tooltipColor: "#333333",
+                            ratingBorderColor: "#FFC107",
+                            ratingBottomColor: "#FFF8E1",
+                            secondaryBgColor: "#E0E0E0",
+                            secondaryTextColor: "#757575",
+                            primaryButtonTextColor: "#FFFFFF"
+                        }, translation: {
+                            buyButton: "Buy",
+                            soldOutButton: "Sold Out",
+                            hours: "hrs",
+                            petFriendly: "Pet Friendly",
+                            flexible: "Flexible"
+                        } })),
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement("h3", null, "Mobile Variant"),
+                    React.createElement(KuposUIComponent, { typeOfComponent: "serviceitem", variant: "mobile", serviceItem: sampleServiceItem, onBookButtonPress: () => console.log("Mobile book button pressed!"), colors: {
+                            kuposButtonColor: "#FF5722",
+                            priceColor: "#4CAF50",
+                            tooltipColor: "#333333"
+                        }, translation: {
+                            buyButton: "Buy",
+                            soldOutButton: "Sold Out",
+                            hours: "hrs"
+                        } }))))));
+}

package/dist/styles.css

@@ -183,6 +183,9 @@
 .col-start-2 {
   grid-column-start: 2;
 }
+.row-span-2 {
+  grid-row: span 2 / span 2;
+}
 .row-start-1 {
   grid-row-start: 1;
 }

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -16,6 +16,7 @@ interface SeatSectionProps {
     removeDuplicateSeats?: boolean;
     isPeru?: boolean;
     showDesdeLabel?: boolean;
+    showSeatsWithDiscount?: boolean;
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
@@ -28,5 +29,5 @@ interface SeatSectionProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatsWithDiscount, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -100,7 +100,7 @@ function addSeatDegree(label) {
         return label;
     return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatsWithDiscount = false, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -367,17 +367,28 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         const discountSeatIcon = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && isShowSeatIcon
             ? getSeatLabelIcon(discountSeat.label, serviceItem)
             : null;
+        // List the seat types in place of the "Antes / Desde" labels
+        const showDiscountSeatRows = showSeatsWithDiscount && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1;
+        const discountSeatRows = (showSeatTypeRows ? uniqueSeats : [discountSeat]).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
         return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
+            showDiscountSeatRows ? (React.createElement("div", { className: "col-start-1 row-start-2 row-span-2 flex flex-col justify-center", style: { gap: "8px" } }, discountSeatRows.map((val, key) => (React.createElement("span", { key: key, className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center" },
+                isShowSeatIcon && !isMovilBus && (React.createElement("img", { src: getSeatLabelIcon(val.label, serviceItem), alt: "seattype", style: {
+                        width: "20px",
+                        height: "20px",
+                        marginRight: "5px",
+                    } })),
+                isMovilBus
+                    ? CommonService.truncateSeatLabel(val.label)
+                    : CommonService.capitalize(addSeatDegree(val.label))))))) : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
-            React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
+            showDiscountSeatRows ? null : (React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center" },
                     discountSeatIcon && (React.createElement("img", { src: discountSeatIcon, alt: "seattype", style: {
                             width: "20px",
                             height: "20px",
                             marginRight: "5px",
                         } })),
-                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde"))),
             React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
                 (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
                     !isPeru &&

package/dist/ui/ServiceType.d.ts

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

package/dist/ui/ServiceType.js

@@ -0,0 +1,9 @@
+import React from "react";
+const ServiceType = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
+    React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
+        React.createElement("span", { style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type),
+        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.bottomStripColor } },
+            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.bottomStripColor } }),
+            "Duraci\u00F3n estimada del viaje"))));
+export default ServiceType;

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

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

package/dist/ui/TopAmenities/PromoCountdown.js

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

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -155,6 +155,7 @@ function ServiceItemPB({
   isShowSeatIcon = false,
   showDesdeLabel = false,
   showServiceTypeUnderLogo = false,
+  showSeatsWithDiscount = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -721,6 +722,7 @@ function ServiceItemPB({
                     }
                     isShowSeatIcon={isShowSeatIcon}
                     showDesdeLabel={showDesdeLabel}
+                    showSeatsWithDiscount={showSeatsWithDiscount}
                   />
                 </div>
 
@@ -735,6 +737,7 @@ function ServiceItemPB({
                     soldOutLabel={translation?.soldOutButton}
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
+                    buttonTextColor ={colors.primaryButtonTextColor}
                   />
                   {showSeatSelectionError === serviceItem.id && isTrain && (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">

package/src/components/ServiceItem/types.ts

@@ -290,5 +290,7 @@ export interface ServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  // keeps listing the seat types next to the discounted price
+  showSeatsWithDiscount?: boolean;
   showServiceTypeUnderLogo?: boolean;
 }

package/src/ui/SeatSection/SeatSection.tsx

@@ -21,6 +21,7 @@ interface SeatSectionProps {
   removeDuplicateSeats?: boolean;
   isPeru?: boolean;
   showDesdeLabel?: boolean;
+  showSeatsWithDiscount?: boolean;
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
@@ -172,6 +173,7 @@ function SeatSection({
   discountSeatCrossPriceColor,
   isShowSeatIcon,
   showDesdeLabel = false,
+  showSeatsWithDiscount = false,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -692,12 +694,46 @@ function SeatSection({
         ? getSeatLabelIcon(discountSeat.label, serviceItem)
         : null;
 
+    // List the seat types in place of the "Antes / Desde" labels
+    const showDiscountSeatRows =
+      showSeatsWithDiscount && serviceItem?.ui_type !== 1;
+    const discountSeatRows = (
+      showSeatTypeRows ? uniqueSeats : [discountSeat]
+    ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
+
     return (
       <div
         className="grid grid-cols-2 items-center text-[13.33px] relative"
         style={{ opacity: isSoldOut ? 0.5 : 1 }}
       >
-        {serviceItem?.ui_type === 1 ? null : (
+        {showDiscountSeatRows ? (
+          <div
+            className="col-start-1 row-start-2 row-span-2 flex flex-col justify-center"
+            style={{ gap: "8px" }}
+          >
+            {discountSeatRows.map((val, key) => (
+              <span
+                key={key}
+                className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center"
+              >
+                {isShowSeatIcon && !isMovilBus && (
+                  <img
+                    src={getSeatLabelIcon(val.label, serviceItem)}
+                    alt="seattype"
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      marginRight: "5px",
+                    }}
+                  />
+                )}
+                {isMovilBus
+                  ? CommonService.truncateSeatLabel(val.label)
+                  : CommonService.capitalize(addSeatDegree(val.label))}
+              </span>
+            ))}
+          </div>
+        ) : serviceItem?.ui_type === 1 ? null : (
           <div className="col-start-1 row-start-2 flex items-center">
             <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
               Antes
@@ -705,22 +741,24 @@ function SeatSection({
           </div>
         )}
 
-        <div className="col-start-1 row-start-3 flex h-[20px] items-end">
-          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center">
-            {discountSeatIcon && (
-              <img
-                src={discountSeatIcon}
-                alt="seattype"
-                style={{
-                  width: "20px",
-                  height: "20px",
-                  marginRight: "5px",
-                }}
-              />
-            )}
-            {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
-          </span>
-        </div>
+        {showDiscountSeatRows ? null : (
+          <div className="col-start-1 row-start-3 flex h-[20px] items-end">
+            <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center">
+              {discountSeatIcon && (
+                <img
+                  src={discountSeatIcon}
+                  alt="seattype"
+                  style={{
+                    width: "20px",
+                    height: "20px",
+                    marginRight: "5px",
+                  }}
+                />
+              )}
+              {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
+            </span>
+          </div>
+        )}
 
         <div
           className="col-start-2 row-start-1 flex items-center justify-center absolute"