kupos-ui-components-lib 9.8.7 → 9.8.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, showLoginModal, isLoggedIn, showLoginOption, 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, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFlores, operatorLabel, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -74,8 +74,12 @@ const ANIMATION_MAP = {
         kupos: femaleAnimation,
     },
 };
-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, showLoginModal, isLoggedIn, showLoginOption, 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, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFlores, operatorLabel, }) {
     var _a;
+    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];
@@ -213,6 +217,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 = [
@@ -275,9 +289,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 })),
+                        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 })),
                     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,

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, }: 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, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -17,7 +17,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, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -180,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))));
 }
 export default ServiceItemMobile;

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

@@ -187,4 +187,5 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    operatorLabel?: string;
 }

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

@@ -224,6 +224,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;
     isFlores?: boolean;
     operatorLabel?: string;
 }

package/dist/styles.css

@@ -863,6 +863,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,6 +18,10 @@ 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;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: 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,12 @@ function getSortedSeatTypes(seatTypes) {
     if (premiumIndex >= 3) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    if (isTrain) {
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
+    }
+    else {
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    }
     const seenPrices = new Set();
     seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
         if (seenPrices.has(seat.price))
@@ -54,10 +61,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, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
     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 +72,34 @@ 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)
+                        : val.label
+                    : null)));
+        });
     };
     const renderSeatPrices = () => {
         if (isPeru) {

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

@@ -16,6 +16,7 @@ interface ExpandedDropdownMobileProps {
     femaleAnim?: any;
     flexibleAnim?: any;
     renderIcon?: any;
+    operatorLabel?: string;
 }
-declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, operatorLabel, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, }) {
+function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, renderIcon, operatorLabel, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
@@ -17,7 +17,9 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera",
+                    operatorLabel || "kupospay",
+                    "."))) : (React.createElement("div", { className: "flex gap-[8px] " },
                 React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", null,

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -116,9 +116,25 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isTrain,
+  selectedSeatKey,
+  onSeatSelect,
+  onTrainButtonClick,
+  showSeatSelectionError,
+  onShowSeatSelectionError,
+  onClearSeatSelectionError,
   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;
@@ -315,6 +331,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -528,6 +555,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -543,6 +574,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 &&

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -45,6 +45,7 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
+  operatorLabel,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -459,6 +460,7 @@ function ServiceItemMobile({
             femaleAnim={serviceItem.icons.femaleAnim}
             flexibleAnim={serviceItem.icons.flexibleAnim}
             renderIcon={renderIcon}
+            operatorLabel={operatorLabel}
           />
         </div>
       </div>

package/src/components/ServiceItem/mobileTypes.ts

@@ -121,16 +121,16 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string
+      personIcon?: string;
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string
-      femaleAnim?:string
-        cancelTicketIcon?: string;
+      whiteFireIcon?: string;
+      femaleAnim?: string;
+      cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string
+      womenSeatIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -179,7 +179,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string
+    discountSeatPriceColor?: string;
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -192,11 +192,12 @@ 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
   };
+  operatorLabel?: string;
 }

package/src/components/ServiceItem/types.ts

@@ -226,6 +226,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;
   isFlores?: boolean;
   operatorLabel?: string;
 }

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;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -31,6 +42,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);
@@ -38,7 +51,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 }];
   }
@@ -52,7 +65,11 @@ function getSortedSeatTypes(seatTypes: SeatType[]) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  if (isTrain) {
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
+  } else {
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  }
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -97,14 +114,18 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
+  selectedSeatKey,
+  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
+  isTrain,
+  topLabelColor,
 }: 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;
 
@@ -116,22 +137,66 @@ 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)
+                : val.label
+              : null}
+          </span>
+        </div>
+      );
+    });
   };
 
   const renderSeatPrices = () => {

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -18,6 +18,7 @@ interface ExpandedDropdownMobileProps {
   femaleAnim?: any;
   flexibleAnim?: any;
   renderIcon?: any;
+  operatorLabel?: string;
 }
 
 function ExpandedDropdownMobile({
@@ -32,6 +33,7 @@ function ExpandedDropdownMobile({
   femaleAnim,
   flexibleAnim,
   renderIcon,
+  operatorLabel,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -59,7 +61,7 @@ function ExpandedDropdownMobile({
                 hasta {serviceItem?.change_ticket_hours || 6} horas antes
               </span>{" "}
               de la salida del bus. El monto será reembolsado a tu billetera
-              kupospay.
+              {operatorLabel || "kupospay"}.
             </span>
           </div>
         ) : (