kupos-ui-components-lib 10.4.62 → 10.4.63

package/dist/components/FilterBar/FilterBarDesktop.js

@@ -175,6 +175,16 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
                             return true;
                     });
                 }
+                if (fil.type == "service_type") {
+                    const activeOptions = fil.options.filter((it) => it.active);
+                    if (activeOptions.length) {
+                        filteredRoutes = filteredRoutes.filter((it) => activeOptions.some((f) => f.value ===
+                            String(it.service_type || "")
+                                .trim()
+                                .replace(/\s+/g, " ")
+                                .toLowerCase()));
+                    }
+                }
                 if (fil.type == "operator") {
                     let activeOptions = fil.options.filter((it) => it.active);
                     filteredRoutes = filteredRoutes.filter((it) => {

package/dist/components/FilterBar/ServiceFilter.d.ts

@@ -9,6 +9,7 @@ interface ServiceFilterBarDesktopState {
     showTrainType: boolean;
     addMargin: boolean;
     showAmenities: boolean;
+    showServiceType: boolean;
     sortedFilters: any[];
 }
 declare class ServiceFilter extends React.Component<ServiceFilterProps, ServiceFilterBarDesktopState> {

package/dist/components/FilterBar/ServiceFilter.js

@@ -23,6 +23,7 @@ class ServiceFilter extends React.Component {
             showTrainType: ((_f = props.initialOpenFilters) === null || _f === void 0 ? void 0 : _f.includes("train_type")) || true,
             addMargin: false,
             showAmenities: ((_g = props.initialOpenFilters) === null || _g === void 0 ? void 0 : _g.includes("amenities")) || true,
+            showServiceType: true,
             sortedFilters: this.sortFilters(props.filtersArray),
         };
         this.handleScroll = this.handleScroll.bind(this);
@@ -53,6 +54,7 @@ class ServiceFilter extends React.Component {
         const FILTER_ORDER = [
             "time",
             "operator",
+            "service_type",
             "special_departure",
             "tipo",
             "seat_types",
@@ -120,18 +122,21 @@ class ServiceFilter extends React.Component {
                     ? !prevState.showTrainType
                     : prevState.showTrainType, showAmenities: type === "amenities"
                     ? !prevState.showAmenities
-                    : prevState.showAmenities });
+                    : prevState.showAmenities, showServiceType: type === "service_type"
+                    ? !prevState.showServiceType
+                    : prevState.showServiceType });
         });
     }
     renderFilterItem(option, onClick, key) {
-        const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, showAmenities, } = this.state;
+        const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, showAmenities, showServiceType, } = this.state;
         const isOpen = (option.type === "operator" && showOperators) ||
             (option.type === "time" && showTimeOptions) ||
             (option.type === "seat_types" && showSeatOptions) ||
             (option.type === "tipo" && showTypeOptions) ||
             (option.type === "special_departure" && showSpecialDeparture) ||
             (option.type === "train_type" && showTrainType) ||
-            (option.type === "amenities" && showAmenities);
+            (option.type === "amenities" && showAmenities) ||
+            (option.type === "service_type" && showServiceType);
         if ((option === null || option === void 0 ? void 0 : option.type) === "train_type" && !this.props.isTrain) {
             return null;
         }
@@ -159,7 +164,8 @@ class ServiceFilter extends React.Component {
                     option.type !== "seat_types" &&
                     option.type !== "tipo" &&
                     option.type !== "special_departure" &&
-                    option.type !== "train_type")) &&
+                    option.type !== "train_type" &&
+                    option.type !== "service_type")) &&
                 option.options.map((val, i) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h;
                     let iconKey = "";

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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: 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, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,7 +87,7 @@ 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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
+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, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
     var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -356,7 +356,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
                             isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
-                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru, isTrain: isTrain })),
+                        React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru, isTrain: isTrain, showServiceTypeUnderLogo: showServiceTypeUnderLogo })),
                     React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
                     React.createElement("div", { style: {
                             width: "1px",
@@ -376,7 +376,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 color: colors.seatPriceColor,
                             } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
                 React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
-                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: serviceItem.service_type, renderIcon: renderIcon }))),
+                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem.service_type, renderIcon: renderIcon }))),
         isPeru ? null : (React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: 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, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -19,7 +19,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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
+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, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -145,7 +145,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                         } },
                         React.createElement("div", { className: `w-[115px]  ${isFlores ? "" : "overflow-y-hidden"} h-[30px]` },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain  ${isSoldOut ? "grayscale" : ""}` })),
-                        isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
+                        isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showServiceTypeUnderLogo && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type) ? (React.createElement("div", { className: "min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[150px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.capitalizeFirstLetter(serviceItem.service_type))) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
                             React.createElement("div", { className: "flex items-center" },
                                 React.createElement("div", { className: "flex items-center" },
                                     React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
@@ -161,7 +161,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                         color: colors.tooltipBgColor,
                     } }, "\u00A1\u00DAltimos Asientos!")))) : null,
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, serviceType: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, renderIcon: renderIcon })),
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),

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

@@ -254,4 +254,5 @@ export interface MobileServiceItemProps {
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showServiceTypeUnderLogo?: boolean;
 }

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

@@ -275,4 +275,5 @@ export interface ServiceItemProps {
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showServiceTypeUnderLogo?: boolean;
 }

package/dist/styles.css

@@ -596,6 +596,9 @@
 .max-w-\[120px\] {
   max-width: 120px;
 }
+.max-w-\[150px\] {
+  max-width: 150px;
+}
 .max-w-\[165px\] {
   max-width: 165px;
 }

package/dist/ui/RatingBlock.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, isTrain, }: any) => React.JSX.Element;
+declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, isTrain, showServiceTypeUnderLogo, }: any) => React.JSX.Element;
 export default RatingBlock;

package/dist/ui/RatingBlock.js

@@ -1,15 +1,19 @@
 import React from "react";
 import RatingHover from "../components/ServiceItem/RatingHover";
-const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, isTrain = false, }) => {
+import commonService from "../utils/CommonService";
+const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, isTrain = false, showServiceTypeUnderLogo = false, }) => {
+    const operatorLabel = showServiceTypeUnderLogo
+        ? commonService.capitalizeFirstLetter(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type)
+        : serviceItem.operator_details[2];
     return (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
         showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
         React.createElement("div", { className: "group relative ml-[10px] text-[12px]", style: {
                 marginLeft: showRating ? "6px" : "0",
                 color: isSoldOut ? "#c0c0c0" : "#464647",
             } },
-            React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, serviceItem.operator_details[2]),
+            React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, operatorLabel),
             React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
                 React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
-                serviceItem.operator_details[2]))));
+                operatorLabel))));
 };
 export default RatingBlock;

package/dist/ui/SeatSection/SeatSection.js

@@ -66,6 +66,10 @@ function getUniqueSeats(seatTypes, isTrain) {
         return true;
     });
 }
+// Matches "160°" as well as a bare "160" label
+function hasInclinationSeatTypes(seatTypes) {
+    return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return /\b(120|140|160|180)\b/.test(String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "")); });
+}
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
@@ -101,6 +105,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
     const numberOfSeats = getNumberOfSeats(seatTypes);
+    const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
+    // Peru: list every seat type with its own fare (MovilBus, or inclination
+    // seats like 160° / 180°) instead of only the cheapest one.
+    const showSeatTypeRows = (isMovilBus || hasInclinationSeatTypes(seatTypes)) &&
+        uniqueSeats.length > 1;
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
         ? CommonService.currency(0, currencySign)
@@ -146,10 +156,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     };
     const renderSeatPrices = () => {
         if (isPeru) {
-            const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
-            // Multiple unique seat types → show a price row for each (MovilBus only)
-            if (isMovilBus && uniqueSeats.length > 1) {
+            // Multiple unique seat types → show a price row for each
+            if (showSeatTypeRows) {
                 return uniqueSeats
                     .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
                     .map((val, key) => {
@@ -215,10 +223,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     })();
     const renderLabels = () => {
         if (isPeru) {
-            const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
-            // Multiple unique seat types → show a label row for each (MovilBus only)
-            if (isMovilBus && uniqueSeats.length > 1) {
+            // Multiple unique seat types → show a label row for each
+            if (showSeatTypeRows) {
                 return uniqueSeats
                     .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
                     .map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -227,7 +233,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                             height: "20px",
                             marginRight: "5px",
                         } })),
-                    CommonService.truncateSeatLabel(val.label))));
+                    !isMovilBus && isShowSeatIcon && (React.createElement("img", { src: getSeatLabelIcon(val.label, serviceItem), alt: "seattype", style: {
+                            width: "20px",
+                            height: "20px",
+                            marginRight: "5px",
+                        } })),
+                    isMovilBus
+                        ? CommonService.truncateSeatLabel(val.label)
+                        : CommonService.capitalize(addSeatDegree(val.label)))));
             }
             // Single seat type → original behaviour
             const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -45,7 +45,8 @@ function addSeatDegree(label) {
     return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 function hasInclinationSeatTypes(seatTypes) {
-    return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "").includes("°"); });
+    // Matches "160°" as well as a bare "160" label
+    return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return /\b(120|140|160|180)\b/.test(String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "")); });
 }
 const getUniqueSeats = (data, limit) => {
     var _a;
@@ -116,7 +117,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                                     marginRight: "4px",
                                     filter: isSoldOut ? "grayscale(1)" : "",
                                 } })),
-                            commonService.truncateSeatLabel(seat.label)),
+                            commonService.truncateSeatLabel(commonService.addSeatDegree(seat.label))),
                         React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
                 })));
         }

package/package.json

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -221,6 +221,22 @@ const FilterBarDesktop = ({
           });
         }
 
+        if (fil.type == "service_type") {
+          const activeOptions = fil.options.filter((it) => it.active);
+          if (activeOptions.length) {
+            filteredRoutes = filteredRoutes.filter((it) =>
+              activeOptions.some(
+                (f) =>
+                  f.value ===
+                  String(it.service_type || "")
+                    .trim()
+                    .replace(/\s+/g, " ")
+                    .toLowerCase(),
+              ),
+            );
+          }
+        }
+
         if (fil.type == "operator") {
           let activeOptions = fil.options.filter((it) => it.active);
           filteredRoutes = filteredRoutes.filter((it) => {

package/src/components/FilterBar/ServiceFilter.tsx

@@ -23,6 +23,7 @@ interface ServiceFilterBarDesktopState {
   showTrainType: boolean;
   addMargin: boolean;
   showAmenities: boolean;
+  showServiceType: boolean;
   sortedFilters: any[];
 }
 
@@ -43,6 +44,7 @@ class ServiceFilter extends React.Component<
       showTrainType: props.initialOpenFilters?.includes("train_type") || true,
       addMargin: false,
       showAmenities: props.initialOpenFilters?.includes("amenities") || true,
+      showServiceType: true,
       sortedFilters: this.sortFilters(props.filtersArray),
     };
 
@@ -80,6 +82,7 @@ class ServiceFilter extends React.Component<
     const FILTER_ORDER = [
       "time",
       "operator",
+      "service_type",
       "special_departure",
       "tipo",
       "seat_types",
@@ -173,6 +176,10 @@ class ServiceFilter extends React.Component<
           type === "amenities"
             ? !prevState.showAmenities
             : prevState.showAmenities,
+        showServiceType:
+          type === "service_type"
+            ? !prevState.showServiceType
+            : prevState.showServiceType,
       };
     });
   }
@@ -186,6 +193,7 @@ class ServiceFilter extends React.Component<
       showSpecialDeparture,
       showTrainType,
       showAmenities,
+      showServiceType,
     } = this.state;
 
     const isOpen =
@@ -195,7 +203,8 @@ class ServiceFilter extends React.Component<
       (option.type === "tipo" && showTypeOptions) ||
       (option.type === "special_departure" && showSpecialDeparture) ||
       (option.type === "train_type" && showTrainType) ||
-      (option.type === "amenities" && showAmenities);
+      (option.type === "amenities" && showAmenities) ||
+      (option.type === "service_type" && showServiceType);
 
     if (option?.type === "train_type" && !this.props.isTrain) {
       return null;
@@ -249,7 +258,8 @@ class ServiceFilter extends React.Component<
               option.type !== "seat_types" &&
               option.type !== "tipo" &&
               option.type !== "special_departure" &&
-              option.type !== "train_type")) &&
+              option.type !== "train_type" &&
+              option.type !== "service_type")) &&
             option.options.map((val: any, i: number) => {
               let iconKey = "";
               if (val.icon === "sunrise") {

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -154,6 +154,7 @@ function ServiceItemPB({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showServiceTypeUnderLogo = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -669,6 +670,7 @@ function ServiceItemPB({
                     translation={translation}
                     isPeru={isPeru}
                     isTrain={isTrain}
+                    showServiceTypeUnderLogo={showServiceTypeUnderLogo}
                   />
                 </div>
 
@@ -778,7 +780,9 @@ function ServiceItemPB({
                 isPeru={isPeru}
                 isTrain={isTrain}
                 isDpEnabled={serviceItem.is_dp_enabled}
-                serviceType={serviceItem.service_type}
+                serviceType={
+                  showServiceTypeUnderLogo ? undefined : serviceItem.service_type
+                }
                 renderIcon={renderIcon}
               />
             </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -69,6 +69,7 @@ function ServiceItemMobile({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showServiceTypeUnderLogo = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -340,6 +341,15 @@ function ServiceItemMobile({
                     <div className="black-text min-[420]:text-[12px] text-[12px]">
                       {serviceItem?.operator_details[2]}
                     </div>
+                  ) : showServiceTypeUnderLogo && serviceItem?.service_type ? (
+                    <div
+                      className="min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[150px]"
+                      style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+                    >
+                      {commonService.capitalizeFirstLetter(
+                        serviceItem.service_type,
+                      )}
+                    </div>
                   ) : showRating ? (
                     <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
                       <div className="flex items-center">
@@ -436,7 +446,9 @@ function ServiceItemMobile({
                 hoursIcon={renderIcon("hours", "14px")}
                 duration={serviceItem.duration?.toString()}
                 isDirectTrip={serviceItem?.is_direct_trip}
-                serviceType={serviceItem?.service_type}
+                serviceType={
+                  showServiceTypeUnderLogo ? undefined : serviceItem?.service_type
+                }
                 directoColor={colors.directoColor}
                 directoAnim={serviceItem.icons.directoAnim}
                 isChangeTicket={serviceItem.is_change_ticket}

package/src/components/ServiceItem/mobileTypes.ts

@@ -267,4 +267,5 @@ export interface MobileServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  showServiceTypeUnderLogo?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -288,4 +288,5 @@ export interface ServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  showServiceTypeUnderLogo?: boolean;
 }

package/src/ui/RatingBlock.tsx

@@ -11,7 +11,12 @@ const RatingBlock = ({
   translation,
   isPeru = false,
   isTrain = false,
+  showServiceTypeUnderLogo = false,
 }: any) => {
+  const operatorLabel = showServiceTypeUnderLogo
+    ? commonService.capitalizeFirstLetter(serviceItem?.service_type)
+    : serviceItem.operator_details[2];
+
   return (
     <div
       className="flex items-center whitespace-nowrap"
@@ -38,7 +43,7 @@ const RatingBlock = ({
         <span
           className={`block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}`}
         >
-          {serviceItem.operator_details[2]}
+          {operatorLabel}
         </span>
         <div
           className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
@@ -48,7 +53,7 @@ const RatingBlock = ({
             className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
             style={{ borderBottomColor: colors.bottomStripColor }}
           ></div>
-          {serviceItem.operator_details[2]}
+          {operatorLabel}
         </div>
       </div>
     </div>

package/src/ui/SeatSection/SeatSection.tsx

@@ -119,6 +119,13 @@ function getUniqueSeats(seatTypes: SeatType[], isTrain?: boolean) {
   });
 }
 
+// Matches "160°" as well as a bare "160" label
+function hasInclinationSeatTypes(seatTypes: SeatType[]) {
+  return (seatTypes ?? []).some((seat) =>
+    /\b(120|140|160|180)\b/.test(String(seat?.label ?? "")),
+  );
+}
+
 function getNumberOfSeats(seatTypes: SeatType[]) {
   return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
@@ -169,6 +176,14 @@ function SeatSection({
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
   const numberOfSeats = getNumberOfSeats(seatTypes);
+  const isMovilBus =
+    serviceItem?.operator_service_name === "MovilBus" ||
+    serviceItem?.operator_service_name === "Movil Bus";
+  // Peru: list every seat type with its own fare (MovilBus, or inclination
+  // seats like 160° / 180°) instead of only the cheapest one.
+  const showSeatTypeRows =
+    (isMovilBus || hasInclinationSeatTypes(seatTypes)) &&
+    uniqueSeats.length > 1;
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
   const formatPrice = (price: number) =>
@@ -256,12 +271,8 @@ function SeatSection({
 
   const renderSeatPrices = () => {
     if (isPeru) {
-      const isMovilBus =
-        serviceItem?.operator_service_name === "MovilBus" ||
-        serviceItem?.operator_service_name === "Movil Bus";
-
-      // Multiple unique seat types → show a price row for each (MovilBus only)
-      if (isMovilBus && uniqueSeats.length > 1) {
+      // Multiple unique seat types → show a price row for each
+      if (showSeatTypeRows) {
         return uniqueSeats
           .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
           .map((val, key) => {
@@ -378,12 +389,8 @@ function SeatSection({
 
   const renderLabels = () => {
     if (isPeru) {
-      const isMovilBus =
-        serviceItem?.operator_service_name === "MovilBus" ||
-        serviceItem?.operator_service_name === "Movil Bus";
-
-      // Multiple unique seat types → show a label row for each (MovilBus only)
-      if (isMovilBus && uniqueSeats.length > 1) {
+      // Multiple unique seat types → show a label row for each
+      if (showSeatTypeRows) {
         return uniqueSeats
           .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
           .map((val, key) => (
@@ -404,7 +411,20 @@ function SeatSection({
                   }}
                 />
               )}
-              {CommonService.truncateSeatLabel(val.label)}
+              {!isMovilBus && isShowSeatIcon && (
+                <img
+                  src={getSeatLabelIcon(val.label, serviceItem)}
+                  alt="seattype"
+                  style={{
+                    width: "20px",
+                    height: "20px",
+                    marginRight: "5px",
+                  }}
+                />
+              )}
+              {isMovilBus
+                ? CommonService.truncateSeatLabel(val.label)
+                : CommonService.capitalize(addSeatDegree(val.label))}
             </span>
           ));
       }

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -112,8 +112,9 @@ function addSeatDegree(label: string | null) {
 }
 
 function hasInclinationSeatTypes(seatTypes: SeatType[]): boolean {
+  // Matches "160°" as well as a bare "160" label
   return (seatTypes ?? []).some((seat) =>
-    String(seat?.label ?? "").includes("°"),
+    /\b(120|140|160|180)\b/.test(String(seat?.label ?? "")),
   );
 }
 
@@ -247,7 +248,9 @@ function SeatSectionMobile({
                       }}
                     />
                   )}
-                  {commonService.truncateSeatLabel(seat.label)}
+                  {commonService.truncateSeatLabel(
+                    commonService.addSeatDegree(seat.label),
+                  )}
                 </span>
                 <span
                   className="min-[420]:text-[13px] text-[12px] bold-text"