kupos-ui-components-lib 9.10.7 → 9.10.9

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

@@ -1,6 +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, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,8 +87,12 @@ const ANIMATION_MAP = {
         kupos: flameAnimation,
     },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
     var _a, _b, _c;
+    const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
+        onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
+        onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
+    };
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -227,6 +231,16 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             });
             return;
         }
+        if (isTrain) {
+            if (!selectedSeatKey) {
+                onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
+                return;
+            }
+            if (onTrainButtonClick) {
+                onTrainButtonClick();
+                return;
+            }
+        }
         onBookButtonPress();
     };
     const items = [
@@ -293,9 +307,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, tooltipColor: colors.tooltipColor })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
                     React.createElement("div", { className: "relative" },
                         React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
+                        showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
+                            React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
+                                    color: colors.seatPriceColor,
+                                } }, "Selecciona el tipo de servicio"))),
                         showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px]  mt-1 text-center", style: {
                                 color: colors.seatPriceColor,
@@ -312,8 +330,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             } },
             React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
                     ? {
-                        borderLeft: isSoldOut ? "" : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
-                        borderRight: isSoldOut ? "" : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
+                        borderLeft: isSoldOut
+                            ? ""
+                            : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
+                        borderRight: isSoldOut
+                            ? ""
+                            : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
                         borderRadius: "0 0 18px 18px",
                         boxSizing: "border-box",
                     }

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -18,7 +18,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;

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

@@ -215,6 +215,7 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isTrain?: boolean;
     isFeatureDropDownExpand?: any;
     setIsFeatureDropDownExpand?: (value: any) => void;
     ticketQuantity?: number;

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

@@ -245,6 +245,13 @@ export interface ServiceItemProps {
     showLoginModal?: any;
     isLoggedIn?: any;
     showLoginOption?: boolean;
+    isTrain?: boolean;
+    selectedSeatKey?: any;
+    onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
+    onTrainButtonClick?: any;
+    showSeatSelectionError?: string | null;
+    onShowSeatSelectionError?: (serviceId: string) => void;
+    onClearSeatSelectionError?: () => void;
     selectedTimeSlot?: string;
     onTimeSlotChange?: (slot: string) => void;
     isTimeDropdownOpen?: string | number | null;

package/dist/styles.css

@@ -1023,6 +1023,9 @@
 .text-right {
   text-align: right;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-\[10px\] {
   font-size: 10px;
 }

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

@@ -3,6 +3,8 @@ interface SeatType {
     label: string;
     fare: number;
     key: any;
+    apiSeatType?: string;
+    api_seat_type?: string;
 }
 interface SeatSectionProps {
     seatTypes: SeatType[];
@@ -16,7 +18,11 @@ interface SeatSectionProps {
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
+    selectedSeatKey?: any;
+    onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
+    topLabelColor?: string;
     tooltipColor?: string;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -8,11 +8,13 @@ function getAllSeatTypes(seatTypes) {
     let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
         label: val === null || val === void 0 ? void 0 : val.label,
         price: val === null || val === void 0 ? void 0 : val.fare,
+        key: val === null || val === void 0 ? void 0 : val.key,
+        apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
     }));
     seatTypesWithPrices.sort((a, b) => a.price - b.price);
     return seatTypesWithPrices;
 }
-function getSortedSeatTypes(seatTypes) {
+function getSortedSeatTypes(seatTypes, isTrain) {
     if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
         return [{ label: "Salon cama", price: 0 }];
     }
@@ -21,7 +23,9 @@ function getSortedSeatTypes(seatTypes) {
     if (premiumIndex >= 3) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    if (!isTrain) {
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    }
     const seenPrices = new Set();
     seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
         if (seenPrices.has(seat.price))
@@ -54,10 +58,10 @@ function getUniqueSeats(seatTypes) {
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, tooltipColor, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
-    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
     const numberOfSeats = getNumberOfSeats(seatTypes);
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
@@ -65,11 +69,36 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         : CommonService.currency(price, currencySign);
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-        return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : val.label
-            : null)));
+        return seats.map((val, key) => {
+            return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
+                    ? () => val.label === selectedSeatKey
+                        ? onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(null, 0, "", "")
+                        : onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price, val.key, val.apiSeatType)
+                    : undefined },
+                isTrain && (React.createElement("div", { style: {
+                        border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                        borderRadius: "50%",
+                        width: "14px",
+                        height: "14px",
+                        minWidth: "14px",
+                        marginRight: "10px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
+                        backgroundColor: topLabelColor,
+                        borderRadius: "50%",
+                        width: "7px",
+                        height: "7px",
+                    } })))),
+                React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+                    ? removeDuplicateSeats && isPeru
+                        ? CommonService.truncateSeatLabel(val.label)
+                        : isTrain
+                            ? CommonService.truncateSeatLabel(CommonService.capitalize(String(val.label)), 8)
+                            : val.label
+                    : null)));
+        });
     };
     const renderSeatPrices = () => {
         if (isPeru) {
@@ -147,9 +176,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             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]" }, "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%)" } }, !isNaN(Number(dpDiscountPercent)) &&
-                Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
+                Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     whiteSpace: "nowrap",
+                    backgroundColor: discountSeatPriceColor || "#ff5964",
                 } },
                 Math.round(Number(dpDiscountPercent)),
                 "% OFF"))),
@@ -167,7 +197,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                             transformOrigin: "center",
                         } }))),
             React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
-                React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
+                React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
                     React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
                     availableSeats <= 0
                         ? CommonService.currency(0, currencySign)

package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts

@@ -22,6 +22,7 @@ interface DateTimeSectionMobileProps {
     tooltipBgColor?: string;
     showLastSeats?: boolean;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
+declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -23,8 +23,10 @@ const getCleanedDepTime = (raw) => {
 };
 const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
     const formattedDate = DateService.getServiceItemDate(date);
-    const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
-    return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+    const dotPositionClass = formattedDate.includes("dom")
+        ? "max-[399px]:left-[53%]"
+        : "";
+    return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
         React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
             React.createElement("div", null,
                 " ",
@@ -33,9 +35,9 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
             React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
                 React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
                 React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
-                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
+                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
 };
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -47,7 +49,11 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
             ? null
             : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
     return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
-        React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
+        React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
+                justifyContent: isCiva && "center",
+                minHeight: isTrain ? undefined : "2.5rem",
+                alignSelf: isTrain ? "stretch" : undefined,
+            } },
             React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
             isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
         React.createElement("div", { style: {
@@ -56,6 +62,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 backgroundColor: "#ccc",
                 margin: "auto",
             } }),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain })));
 }
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.d.ts

@@ -16,6 +16,7 @@ interface SeatSectionMobileProps {
     tooltipBgColor?: string;
     showLastSeats?: boolean;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -11,7 +11,7 @@ const EXCEPTIONS = [
     "blanco",
     "asiento_mascota",
 ];
-const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
+const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
     if (EXCEPTIONS.includes(type.label))
         return null;
     const rowClass = hasMultipleTypes
@@ -20,7 +20,9 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
     const labelColor = isSoldOut ? "#bbb" : "#464647";
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
     return (React.createElement("div", { className: rowClass, key: index },
-        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
+        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
+            ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
+            : displayLabel),
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize}  bold-text`, style: { color: priceColor } }, fare)));
 };
 const getFilteredSeats = (item) => {
@@ -42,8 +44,8 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -101,19 +103,24 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
     };
     const renderSeats = () => {
-        var _a, _b, _c;
+        var _a, _b;
         if (isPeru) {
             return renderPeruSeats();
         }
         if (removeDuplicateSeats) {
             const uniqueSeats = getUniqueSeats(seatTypesData, 3);
-            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
+            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
         }
-        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
+        const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
+        return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
     };
     const seats = removeDuplicateSeats
         ? getUniqueSeats(seatTypesData, 3)
-        : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
+        : (() => {
+            var _a;
+            const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
+            return isTrain ? filtered : filtered === null || filtered === void 0 ? void 0 : filtered.slice(0, 2);
+        })();
     const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const peruLowestFare = isPeru ? getLowestFare() : null;
     const peruDiscountCalc = isPeru && peruLowestFare != null
@@ -124,7 +131,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
         : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     const discountSeat = isPeru && peruDiscountCalc
-        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_b = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
     const discountValue = (() => {
         if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
             typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
@@ -147,14 +154,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
     };
     const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
     const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
-    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
+    const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
         dpDiscountPercent != null &&
         firstSeatFare != null;
     return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
+        !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
         !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         !isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
@@ -186,7 +193,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                 color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
             } },
-            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
@@ -220,8 +227,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                     color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
                 } },
-                ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
-                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
+                ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },

package/dist/utils/CommonService.d.ts

@@ -3,7 +3,7 @@ declare const commonService: {
     discountedCurrency(amount: number, currencySign?: string): string;
     copyObject: (ob: any) => any;
     getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
-    truncateSeatLabel: (label: string | number) => string;
+    truncateSeatLabel: (label: string | number, maxLength?: number) => string;
     getAmenitiesImage: (name: string, serviceItem: any) => string;
     getAmenityName: (rawAmenity: string) => string;
     getSeatNameForFilters: (rawSeat: any) => any;

package/dist/utils/CommonService.js

@@ -34,11 +34,15 @@ const commonService = {
                 return "";
         }
     },
-    truncateSeatLabel: (label) => {
+    truncateSeatLabel: (label, maxLength) => {
         if (typeof label !== "string")
             return String(label);
         if (label.includes("("))
             return label;
+        // If maxLength provided, hard-truncate regardless of word count
+        if (maxLength != null && label.length > maxLength) {
+            return label.slice(0, maxLength) + "...";
+        }
         const words = label.trim().split(/\s+/);
         const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
         if (words.length === 1)

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -131,6 +131,13 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isTrain,
+  selectedSeatKey,
+  onSeatSelect,
+  onTrainButtonClick,
+  showSeatSelectionError,
+  onShowSeatSelectionError,
+  onClearSeatSelectionError,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -145,6 +152,15 @@ function ServiceItemPB({
   isFlores,
   operatorLabel,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  const handleSeatSelect = (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => {
+    onClearSeatSelectionError?.();
+    onSeatSelect?.(key, price, seatKey, apiSeatType);
+  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -345,6 +361,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -598,6 +625,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                     tooltipColor={colors.tooltipColor}
                   />
                 </div>
@@ -614,6 +645,18 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
+                  {showSeatSelectionError === serviceItem.id && isTrain && (
+                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
+                      <div
+                        className="text-[9px] text-center whitespace-nowrap"
+                        style={{
+                          color: colors.seatPriceColor,
+                        }}
+                      >
+                        Selecciona el tipo de servicio
+                      </div>
+                    </div>
+                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&
@@ -671,8 +714,12 @@ function ServiceItemPB({
                     hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
                   ...(hasOfferText || hasDpEnabled
                     ? {
-                        borderLeft: isSoldOut ? "" : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
-                        borderRight: isSoldOut ? "" : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
+                        borderLeft: isSoldOut
+                          ? ""
+                          : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
+                        borderRight: isSoldOut
+                          ? ""
+                          : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
                         borderRadius: "0 0 18px 18px",
                         boxSizing: "border-box",
                       }

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -46,6 +46,8 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
+  operatorLabel,
+  isTrain,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -61,7 +63,6 @@ function ServiceItemMobile({
   onTimeDropdownToggle,
   wowDealData,
   isFlores,
-  operatorLabel
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;

package/src/components/ServiceItem/mobileTypes.ts

@@ -135,36 +135,36 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string
+      personIcon?: string;
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string
-      femaleAnim?:string
-       thunderAnim?: string
-       personsAnim?: string
-        whiteOrigin?: string,
-      whiteDestination?: string,
-      userIcon?: string,
-      
-      sheildIcon?: string,
-      busIcon?: string,
-      whiteDownArrow?: string,
-      empressaIcon?: string,
-      flexibleIcon?: string,
-      listoIcon?: string,
-      precioIcon?: string,
-      confirmarIcon?: string
+      whiteFireIcon?: string;
+      femaleAnim?: string;
+      thunderAnim?: string;
+      personsAnim?: string;
+      whiteOrigin?: string;
+      whiteDestination?: string;
+      userIcon?: string;
+
+      sheildIcon?: string;
+      busIcon?: string;
+      whiteDownArrow?: string;
+      empressaIcon?: string;
+      flexibleIcon?: string;
+      listoIcon?: string;
+      precioIcon?: string;
+      confirmarIcon?: string;
       cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string
+      womenSeatIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
-  onRemateUiButtonClick?: ()=> void;
+  onRemateUiButtonClick?: () => void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -208,7 +208,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string
+    discountSeatPriceColor?: string;
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -221,23 +221,28 @@ export interface MobileServiceItemProps {
   showLastSeats?: boolean;
   removeDuplicateSeats?: boolean;
   isLinatal?: boolean;
-    viewersConfig?: {
+  viewersConfig?: {
     min: number;
     max: number;
     interval?: number; // ms, default 5000
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
-   isFeatureDropDownExpand?: any;
+  isTrain?: boolean;
+  isFeatureDropDownExpand?: any;
   setIsFeatureDropDownExpand?: (value: any) => void;
   ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
-  onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  onIncreaseTicketQuantity?: (
+    serviceItem: MobileServiceItemProps["serviceItem"],
+  ) => void;
+  onDecreaseTicketQuantity?: (
+    serviceItem: MobileServiceItemProps["serviceItem"],
+  ) => void;
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
-    isNewUi?: boolean
+  isNewUi?: boolean;
 
-    selectedTimeSlot?: string;
+  selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;
   onTimeDropdownToggle?: (id?: string | number | null) => void;

package/src/components/ServiceItem/types.ts

@@ -252,6 +252,18 @@ export interface ServiceItemProps {
   showLoginModal?: any;
   isLoggedIn?: any;
   showLoginOption?: boolean;
+  isTrain?: boolean;
+  selectedSeatKey?: any;
+  onSeatSelect?: (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => void;
+  onTrainButtonClick?: any;
+  showSeatSelectionError?: string | null;
+  onShowSeatSelectionError?: (serviceId: string) => void;
+  onClearSeatSelectionError?: () => void;
   selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;

package/src/ui/SeatSection/SeatSection.tsx

@@ -7,6 +7,8 @@ interface SeatType {
   label: string;
   fare: number;
   key: any;
+  apiSeatType?: string;
+  api_seat_type?: string;
 }
 
 interface SeatSectionProps {
@@ -21,6 +23,15 @@ interface SeatSectionProps {
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
+  selectedSeatKey?: any;
+  onSeatSelect?: (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => void;
+  topLabelColor?: string;
   tooltipColor?: string;
 }
 
@@ -32,6 +43,8 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
     label: val?.label,
     price: val?.fare,
+    key: val?.key,
+    apiSeatType: val?.apiSeatType || val?.api_seat_type,
   }));
 
   seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -39,7 +52,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   return seatTypesWithPrices;
 }
 
-function getSortedSeatTypes(seatTypes: SeatType[]) {
+function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
   if (!seatTypes?.length) {
     return [{ label: "Salon cama", price: 0 }];
   }
@@ -53,7 +66,9 @@ function getSortedSeatTypes(seatTypes: SeatType[]) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  if (!isTrain) {
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  }
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -98,15 +113,19 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
+  selectedSeatKey,
+  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
+  isTrain,
+  topLabelColor,
   tooltipColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -118,22 +137,71 @@ function SeatSection({
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
-    return seats.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span
-          key={key}
-          className={`flex items-center justify-between text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
+    return seats.map((val, key: number) => {
+      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
+        <div
+          className="flex items-center"
+          style={isTrain ? { cursor: "pointer" } : undefined}
+          onClick={
+            isTrain && !isSoldOut
+              ? () =>
+                  val.label === selectedSeatKey
+                    ? onSeatSelect?.(null, 0, "", "")
+                    : onSeatSelect?.(
+                        val.label,
+                        val.price,
+                        val.key,
+                        (val as any).apiSeatType,
+                      )
+              : undefined
+          }
         >
-          {typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-              ? CommonService.truncateSeatLabel(val.label)
-              : val.label
-            : null}
-        </span>
-      ),
-    );
+          {isTrain && (
+            <div
+              style={{
+                border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                borderRadius: "50%",
+                width: "14px",
+                height: "14px",
+                minWidth: "14px",
+                marginRight: "10px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {val.label === selectedSeatKey && (
+                <div
+                  style={{
+                    backgroundColor: topLabelColor,
+                    borderRadius: "50%",
+                    width: "7px",
+                    height: "7px",
+                  }}
+                />
+              )}
+            </div>
+          )}
+          <span
+            key={key}
+            className={`flex items-center justify-between text-[13.33px] ${
+              isSoldOut ? "text-[#c0c0c0]" : ""
+            }`}
+          >
+            {typeof val.label === "string" || typeof val.label === "number"
+              ? removeDuplicateSeats && isPeru
+                ? CommonService.truncateSeatLabel(val.label)
+                : isTrain
+                  ? CommonService.truncateSeatLabel(
+                      CommonService.capitalize(String(val.label)),
+                      8,
+                    )
+                  : val.label
+              : null}
+          </span>
+        </div>
+      );
+    });
   };
 
   const renderSeatPrices = () => {
@@ -279,10 +347,11 @@ function SeatSection({
           {!isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (
               <span
-                className={`rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
+                className={`rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
                 style={{
                   animation: "pulse-zoom 2s ease-in-out infinite",
                   whiteSpace: "nowrap",
+                  backgroundColor: discountSeatPriceColor || "#ff5964",
                 }}
               >
                 {Math.round(Number(dpDiscountPercent))}% OFF
@@ -317,7 +386,7 @@ function SeatSection({
         <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
           <span
             className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
-            style={{ color: isSoldOut ? "#c0c0c0" : "#ff5964" }}
+            style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" }}
           >
             <div
               className="absolute"

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -25,6 +25,7 @@ interface DateTimeSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -67,41 +68,43 @@ const TimeRow: React.FC<TimeRowProps> = ({
   isSoldOut,
 }) => {
   const formattedDate = DateService.getServiceItemDate(date);
-  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
-  return <div
-    className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
-      isSoldOut ? "text-[#c0c0c0]" : ""
-    }`}
-  >
-    <div className="flex items-center" style={{ flex: 1 }}>
-      <div>
-        {" "}
-        {label ? (
-          <div className="w-[60px]">{label}</div>
-        ) : (
-          <div className="w-[12px] h-auto mr-[5px]">
-            <img
-              src={icon}
-              alt={alt}
-              className={`w-[12px] h-auto mr-[5px] ${
-                isSoldOut ? "grayscale" : ""
-              }`}
-            />
-          </div>
-        )}
-      </div>
-      <div
-        className="flex items-center relative capitalize justify-between"
-        style={{ flex: 1 }}
-      >
-        <span className="cursor-pointer black-text">
-          {formattedDate}
-        </span>
-        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
-        <div className="font-[900] relative black-text">{timeContent}</div>
+  const dotPositionClass = formattedDate.includes("dom")
+    ? "max-[399px]:left-[53%]"
+    : "";
+  return (
+    <div
+      className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
+        isSoldOut ? "text-[#c0c0c0]" : ""
+      }`}
+    >
+      <div className="flex items-center" style={{ flex: 1 }}>
+        <div>
+          {" "}
+          {label ? (
+            <div className="w-[60px]">{label}</div>
+          ) : (
+            <div className="w-[12px] h-auto mr-[5px]">
+              <img
+                src={icon}
+                alt={alt}
+                className={`w-[12px] h-auto mr-[5px] ${
+                  isSoldOut ? "grayscale" : ""
+                }`}
+              />
+            </div>
+          )}
+        </div>
+        <div
+          className="flex items-center relative capitalize justify-between"
+          style={{ flex: 1 }}
+        >
+          <span className="cursor-pointer black-text">{formattedDate}</span>
+          <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
+          <div className="font-[900] relative black-text">{timeContent}</div>
+        </div>
       </div>
     </div>
-  </div>;
+  );
 };
 
 function DateTimeSectionMobile({
@@ -127,6 +130,7 @@ function DateTimeSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
+  isTrain,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -153,8 +157,12 @@ function DateTimeSectionMobile({
     >
       {/* DATE AND TIME */}
       <div
-        className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
-        style={{ justifyContent: isCiva && "center" }}
+        className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
+        style={{
+          justifyContent: isCiva && "center",
+          minHeight: isTrain ? undefined : "2.5rem",
+          alignSelf: isTrain ? "stretch" : undefined,
+        }}
       >
         <TimeRow
           label={orignLabel}
@@ -198,6 +206,7 @@ function DateTimeSectionMobile({
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
         discountSeatPriceColor={discountSeatPriceColor}
+        isTrain={isTrain}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -31,6 +31,7 @@ interface SeatSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
 }
 
 interface SeatRowProps {
@@ -42,6 +43,7 @@ interface SeatRowProps {
   seatPriceColor: string;
   hasMultipleTypes: boolean;
   textSize: string;
+  isTrain?: boolean;
 }
 
 const SeatRow: React.FC<SeatRowProps> = ({
@@ -53,6 +55,7 @@ const SeatRow: React.FC<SeatRowProps> = ({
   seatPriceColor,
   hasMultipleTypes,
   textSize,
+  isTrain,
 }) => {
   if (EXCEPTIONS.includes(type.label)) return null;
 
@@ -69,7 +72,12 @@ const SeatRow: React.FC<SeatRowProps> = ({
         className={`min-[420]:text-[13px] ${textSize} `}
         style={{ color: labelColor }}
       >
-        {displayLabel}
+        {isTrain
+          ? commonService.truncateSeatLabel(
+              commonService.capitalize(displayLabel),
+              8,
+            )
+          : displayLabel}
       </span>
       <span
         className={`min-[420]:text-[13px] ${textSize}  bold-text`}
@@ -118,6 +126,7 @@ function SeatSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
+  isTrain,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -278,15 +287,17 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[11px]"
+          isTrain={isTrain}
         />
       ));
     }
 
-    return seatTypesData
+    const filteredSeats = seatTypesData
       ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare)
-      ?.slice(0, 2)
-      ?.map((type, i) => (
+      ?.sort((a, b) => a.fare - b.fare);
+
+    return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))?.map(
+      (type, i) => (
         <SeatRow
           key={i}
           type={type}
@@ -297,16 +308,20 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[12px]"
+          isTrain={isTrain}
         />
-      ));
+      ),
+    );
   };
 
   const seats = removeDuplicateSeats
     ? getUniqueSeats(seatTypesData, 3)
-    : seatTypesData
-        ?.filter((item) => getFilteredSeats(item.label))
-        ?.sort((a, b) => a.fare - b.fare)
-        ?.slice(0, 2);
+    : (() => {
+        const filtered = seatTypesData
+          ?.filter((item) => getFilteredSeats(item.label))
+          ?.sort((a, b) => a.fare - b.fare);
+        return isTrain ? filtered : filtered?.slice(0, 2);
+      })();
 
   const discountedSeats = seats?.map((seat) => ({
     ...seat,
@@ -541,7 +556,7 @@ function SeatSectionMobile({
         </div>
       ) : (
         <div
-          className="flex flex-col justify-between h-[2.5rem] "
+          className={`flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `}
           style={{
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",

package/src/utils/CommonService.ts

@@ -39,9 +39,15 @@ const commonService = {
     }
   },
 
-  truncateSeatLabel: (label: string | number): string => {
+  truncateSeatLabel: (label: string | number, maxLength?: number): string => {
     if (typeof label !== "string") return String(label);
     if (label.includes("(")) return label;
+
+    // If maxLength provided, hard-truncate regardless of word count
+    if (maxLength != null && label.length > maxLength) {
+      return label.slice(0, maxLength) + "...";
+    }
+
     const words = label.trim().split(/\s+/);
 
     const truncateWord = (word: string) =>