kupos-ui-components-lib 10.4.42 → 10.4.45

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -297,6 +297,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 Object.keys(serviceItem.pet_seat_info).length > 0,
             render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
         },
+        {
+            key: "servicetype",
+            width: "20%",
+            condition: serviceItem.service_type,
+            render: (React.createElement("div", { className: "mt-[4px]" },
+                renderIcon("serviceTypeIcon", "12px"),
+                React.createElement("span", { className: "group text-[13.33px] cursor-pointer ml-[3px] " }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type))),
+        },
         {
             key: "flexible",
             width: "20%",
@@ -304,7 +312,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
     ];
-    const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
+    const otherItems = items.filter((i) => i.key !== "pet" &&
+        i.key !== "flexible" &&
+        i.key !== "servicetype" &&
+        !!i.condition);
     return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption, priority_stage_ids: priority_stage_ids })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
@@ -365,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 }))),
+                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: serviceItem.service_type, renderIcon: renderIcon }))),
         isPeru ? null : (React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -161,9 +161,9 @@ 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, 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: 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 })),
+                    }, 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 })),
         hasOfferText &&
             isNewUiEnabled &&

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

@@ -3,6 +3,7 @@ export interface MobileServiceItemProps {
     amenitiesData?: any;
     serviceItem: {
         id: string;
+        service_type?: string;
         is_transpordo?: boolean;
         operator_details: [
             string,
@@ -102,6 +103,7 @@ export interface MobileServiceItemProps {
             airConditionIcon?: string;
             baggageIcon?: string;
             chargingIcon?: string;
+            serviceTypeIcon?: string;
             coffeeIcon?: string;
             foodIcon?: string;
             gamingIcon?: string;

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

@@ -5,6 +5,7 @@ export interface ServiceItemProps {
     children?: React.ReactNode;
     serviceItem: {
         id: string;
+        service_type?: string;
         operator_details: [
             string,
             string | number,

package/dist/styles.css

@@ -507,9 +507,6 @@
 .w-\[50\%\] {
   width: 50%;
 }
-.w-\[55\%\] {
-  width: 55%;
-}
 .w-\[60\%\] {
   width: 60%;
 }
@@ -744,6 +741,9 @@
 .gap-\[2px\] {
   gap: 2px;
 }
+.gap-\[3px\] {
+  gap: 3px;
+}
 .gap-\[3rem\] {
   gap: 3rem;
 }

package/dist/ui/BottomAmenities/BottomAmenities.d.ts

@@ -26,6 +26,8 @@ interface BottomAmenitiesProps {
     isPeru?: boolean;
     isTrain?: boolean;
     isDpEnabled?: boolean;
+    serviceType?: string;
+    renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
-declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }: BottomAmenitiesProps): React.ReactElement;
+declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }: BottomAmenitiesProps): React.ReactElement;
 export default BottomAmenities;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -3,7 +3,8 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
 import FemaleBlock from "../FemaleBlock";
-function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }) {
+import CommonService from "../../utils/CommonService";
+function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -11,11 +12,14 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
             Object.keys(serviceItem.pet_seat_info).length > 0);
     return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
         React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
-                // gridTemplateColumns: " 28% 21% 23% 23%",
                 gridTemplateColumns: isTrain
                     ? "25.6% 17% 23% 23%"
                     : "25.3% 17% 23% 23%",
-            } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
+            } },
+            otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render))),
+            serviceType && (React.createElement("div", { className: `flex items-center gap-[3px] text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : "text-[#464647]"}`, style: { gridColumn: 4 } }, renderIcon === null || renderIcon === void 0 ? void 0 :
+                renderIcon("serviceTypeIcon", "15px"),
+                React.createElement("span", { className: "bold-text" }, CommonService.capitalizeFirstLetter(serviceType))))),
         React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),

package/dist/ui/ServiceType.d.ts

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

package/dist/ui/ServiceType.js

@@ -0,0 +1,9 @@
+import React from "react";
+const ServiceType = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
+    React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
+        React.createElement("span", { style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type),
+        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
+            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
+            "Duraci\u00F3n estimada del viaje"))));
+export default ServiceType;

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

@@ -25,6 +25,9 @@ interface BottomAmenitiesMobileProps {
     isDpEnabled?: boolean;
     isTrain?: boolean;
     seatCategoryText?: string;
+    serviceType?: string;
+    serviceTypeIcon?: string;
+    renderIcon?: any;
 }
-declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }: BottomAmenitiesMobileProps): React.ReactElement;
+declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, serviceType, serviceTypeIcon, renderIcon, }: BottomAmenitiesMobileProps): React.ReactElement;
 export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,16 +1,21 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
-function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }) {
+import commonService from "../../utils/CommonService";
+function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, serviceType, serviceTypeIcon, renderIcon, }) {
     return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
-        React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
+        React.createElement("div", { className: " flex justify-between items-center", style: { width: isPeru && serviceType ? "100%" : "55%" } },
             React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
             React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
                 React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, hoursIcon),
                 "\u00A0",
                 React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
                     DateService.formatDuration(duration),
-                    "hrs"))),
+                    "hrs")),
+            serviceType && (React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("serviceTypeIcon", "12px")),
+                "\u00A0",
+                React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] bold-text ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } }, commonService.capitalizeFirstLetter(serviceType))))),
         seatCategoryText && (React.createElement("div", { className: "flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, seatCategoryText)),
         React.createElement("div", { className: "flex items-center" },
             React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -45,7 +45,7 @@ const getUniqueSeats = (data, limit) => {
     });
     return Array.from(seatMap.values())
         .sort((a, b) => a.fare - b.fare)
-        .slice(0, limit);
+        .slice(2, limit);
 };
 function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -462,6 +462,20 @@ function ServiceItemPB({
       ),
     },
 
+    {
+      key: "servicetype",
+      width: "20%",
+      condition: serviceItem.service_type,
+      render: (
+        <div className="mt-[4px]">
+          {renderIcon("serviceTypeIcon", "12px")}
+          <span className="group text-[13.33px] cursor-pointer ml-[3px] ">
+            {serviceItem?.service_type}
+          </span>
+        </div>
+      ),
+    },
+
     {
       key: "flexible",
       width: "20%",
@@ -479,7 +493,11 @@ function ServiceItemPB({
   ];
 
   const otherItems = items.filter(
-    (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
+    (i) =>
+      i.key !== "pet" &&
+      i.key !== "flexible" &&
+      i.key !== "servicetype" &&
+      !!i.condition,
   );
 
   return (
@@ -755,6 +773,8 @@ function ServiceItemPB({
                 isPeru={isPeru}
                 isTrain={isTrain}
                 isDpEnabled={serviceItem.is_dp_enabled}
+                serviceType={serviceItem.service_type}
+                renderIcon={renderIcon}
               />
             </div>
           </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -432,6 +432,7 @@ function ServiceItemMobile({
                 hoursIcon={renderIcon("hours", "14px")}
                 duration={serviceItem.duration?.toString()}
                 isDirectTrip={serviceItem?.is_direct_trip}
+                serviceType={serviceItem?.service_type}
                 directoColor={colors.directoColor}
                 directoAnim={serviceItem.icons.directoAnim}
                 isChangeTicket={serviceItem.is_change_ticket}
@@ -454,6 +455,7 @@ function ServiceItemMobile({
                 ladiesBookedSeats={serviceItem.ladies_booked_seats}
                 isDpEnabled={serviceItem.is_dp_enabled}
                 isTrain={isTrain}
+                renderIcon={renderIcon}
               />
             </div>
 

package/src/components/ServiceItem/mobileTypes.ts

@@ -6,6 +6,7 @@ export interface MobileServiceItemProps {
   amenitiesData?: any;
   serviceItem: {
     id: string;
+    service_type?: string;
     is_transpordo?: boolean;
     operator_details: [
       string,
@@ -105,6 +106,7 @@ export interface MobileServiceItemProps {
       airConditionIcon?: string;
       baggageIcon?: string;
       chargingIcon?: string;
+      serviceTypeIcon?: string;
       coffeeIcon?: string;
       foodIcon?: string;
       gamingIcon?: string;

package/src/components/ServiceItem/types.ts

@@ -7,6 +7,7 @@ export interface ServiceItemProps {
   children?: React.ReactNode;
   serviceItem: {
     id: string;
+    service_type?: string;
     operator_details: [
       string,
       string | number,

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -3,6 +3,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
 import FemaleBlock from "../FemaleBlock";
+import CommonService from "../../utils/CommonService";
 
 interface ItemEntry {
   key: string;
@@ -30,6 +31,8 @@ interface BottomAmenitiesProps {
   isPeru?: boolean;
   isTrain?: boolean;
   isDpEnabled?: boolean;
+  serviceType?: string;
+  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
 
 function BottomAmenities({
@@ -46,6 +49,8 @@ function BottomAmenities({
   isPeru,
   isTrain,
   isDpEnabled,
+  serviceType,
+  renderIcon,
 }: BottomAmenitiesProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -62,7 +67,6 @@ function BottomAmenities({
       <div
         className="grid items-center gap-[2%] flex-1 "
         style={{
-          // gridTemplateColumns: " 28% 21% 23% 23%",
           gridTemplateColumns: isTrain
             ? "25.6% 17% 23% 23%"
             : "25.3% 17% 23% 23%",
@@ -73,6 +77,19 @@ function BottomAmenities({
             {item.render}
           </div>
         ))}
+        {serviceType && (
+          <div
+            className={`flex items-center gap-[3px] text-[13.33px] whitespace-nowrap ${
+              isSoldOut ? "text-[#c0c0c0]" : "text-[#464647]"
+            }`}
+            style={{ gridColumn: 4 }}
+          >
+            {renderIcon?.("serviceTypeIcon", "15px")}
+            <span className="bold-text">
+              {CommonService.capitalizeFirstLetter(serviceType)}
+            </span>
+          </div>
+        )}
       </div>
 
       {/* PET + FLEXIBLE (always visible) */}

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
+import commonService from "../../utils/CommonService";
 
 interface BottomAmenitiesMobileProps {
   isSoldOut: boolean;
@@ -28,6 +29,9 @@ interface BottomAmenitiesMobileProps {
   isDpEnabled?: boolean;
   isTrain?: boolean;
   seatCategoryText?: string;
+  serviceType?: string;
+  serviceTypeIcon?: string;
+  renderIcon?: any;
 }
 
 function BottomAmenitiesMobile({
@@ -56,10 +60,16 @@ function BottomAmenitiesMobile({
   isDpEnabled,
   isTrain,
   seatCategoryText,
+  serviceType,
+  serviceTypeIcon,
+  renderIcon,
 }: BottomAmenitiesMobileProps): React.ReactElement {
   return (
     <div className={`${"flex justify-between items-center items-center "}`}>
-      <div className="w-[55%] flex justify-between items-center">
+      <div
+        className=" flex justify-between items-center"
+        style={{ width: isPeru && serviceType ? "100%" : "55%" }}
+      >
         <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenitiesNodes}</div>
 
         <div
@@ -84,6 +94,30 @@ function BottomAmenitiesMobile({
           </div>
         </div>
 
+        {serviceType && (
+          <div
+            className="flex  relative "
+            style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
+          >
+            <div
+              className={`w-[12px] h-auto mr-[2px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            >
+              {renderIcon("serviceTypeIcon", "12px")}
+            </div>
+            &nbsp;
+            <div
+              className={`cursor-default group min-[420]:text-[13px] text-[12px] bold-text ${
+                isSoldOut ? "text-[#c0c0c0]" : ""
+              }`}
+              style={{ lineHeight: "normal" }}
+            >
+              {commonService.capitalizeFirstLetter(serviceType)}
+            </div>
+          </div>
+        )}
+
         {/* {isDirectTrip && (
           <div
             className={`flex items-center gap-[2px] text-white min-[420]:text-[12px] text-[10px] z-20  `}

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -119,7 +119,7 @@ const getUniqueSeats = (data: SeatType[], limit: number): SeatType[] => {
 
   return Array.from(seatMap.values())
     .sort((a, b) => a.fare - b.fare)
-    .slice(0, limit);
+    .slice(2, limit);
 };
 
 function SeatSectionMobile({
@@ -144,7 +144,10 @@ function SeatSectionMobile({
     serviceItem?.operator_service_name === "Movil Bus";
   const hasInclination = hasInclinationSeatTypes(seatTypesData ?? []);
   // Fetch ALL unique seats (no slice limit) for the multi-row seat-type case
-  const allUniqueSeats = getUniqueSeats(seatTypesData ?? [], Infinity as number);
+  const allUniqueSeats = getUniqueSeats(
+    seatTypesData ?? [],
+    Infinity as number,
+  );
   // A service that exposes more than one seat type (e.g. "Bus Cama" + "160°")
   // lists every type with its own fare, under a shared "Desde" heading.
   const showSeatTypeRows =