kupos-ui-components-lib 10.4.56 → 10.4.58

package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js

@@ -470,11 +470,12 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                             justifyContent: "flex-end",
                         } },
                         currency ? currency : "",
+                        " ",
                         CommonService.currencyExact(isPeru
                             ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) /
                                 100
                             : removeDiscountAtomValue
                                 ? 0
-                                : netFare)))))));
+                                : netFare, currencySign)))))));
 };
 export default PaymentSideBarDesktop;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, t, }: ServiceItemProps & {
+declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, isShowSeatIcon, t, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default PeruServiceItemDesktop;

package/dist/components/ServiceItem/PeruServiceItemDesktop.js

@@ -66,7 +66,7 @@ const ANIMATION_MAP = {
         opsites: dotAnimation,
     },
 };
-function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, t = (key) => key, }) {
+function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, isShowSeatIcon = false, t = (key) => key, }) {
     var _a, _b, _c, _d, _e, _f;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -489,7 +489,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
                             margin: "auto",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(PeruSeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon })),
+                        React.createElement(PeruSeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isShowSeatIcon: isShowSeatIcon })),
                     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 }),
                         showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[36px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&

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, }: 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, }: 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, }) {
+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, }) {
     var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -316,7 +316,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         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 &&
+    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, isShowSeatIcon: isShowSeatIcon })) : 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
                 ? null
@@ -364,7 +364,7 @@ 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, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor })),
+                        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, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })),
                     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]" },

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, }: 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, }: 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, }) {
+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, }) {
     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;
@@ -154,7 +154,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                         color: isSoldOut ? "#bbb" : "text-[#464647]",
                                     } },
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
-                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor }),
+                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon }),
                 hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
                 showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (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-[10px] text-center", style: {

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

@@ -160,6 +160,10 @@ export interface MobileServiceItemProps {
             changeTicketIcon?: string;
             petFriendlyIcon?: string;
             womenSeatIcon?: string;
+            seat140?: string;
+            seat160?: string;
+            seat180?: string;
+            fallBackSeatIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
@@ -248,4 +252,5 @@ export interface MobileServiceItemProps {
     isAllinBus?: any;
     isPeruSite?: boolean;
     priority_stage_ids?: string[];
+    isShowSeatIcon?: boolean;
 }

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

@@ -148,6 +148,10 @@ export interface ServiceItemProps {
             listoIcon?: string;
             precioIcon?: string;
             confirmarIcon?: string;
+            seat140?: string;
+            seat160?: string;
+            seat180?: string;
+            fallBackSeatIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
@@ -269,4 +273,5 @@ export interface ServiceItemProps {
     isFlores?: boolean;
     operatorLabel?: string;
     priority_stage_ids?: string[];
+    isShowSeatIcon?: boolean;
 }

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

@@ -17,6 +17,7 @@ interface PeruSeatSectionProps {
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
     isSeatIcon?: boolean;
+    isShowSeatIcon?: boolean;
 }
-declare function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }: PeruSeatSectionProps): React.ReactElement;
+declare function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, isShowSeatIcon, }: PeruSeatSectionProps): React.ReactElement;
 export default PeruSeatSection;

package/dist/ui/SeatSection/PeruSeatSection.js

@@ -72,7 +72,23 @@ function getSeatTypeIcon(label, serviceItem) {
         return (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seat145Icon;
     return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.seatFallBackIcon;
 }
-function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }) {
+function getSeatLabelIcon(label, serviceItem) {
+    var _a, _b, _c, _d;
+    const seatLabel = String(label !== null && label !== void 0 ? label : "");
+    if (seatLabel.includes("180"))
+        return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
+    if (seatLabel.includes("160"))
+        return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
+    if (seatLabel.includes("140"))
+        return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
+    return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
+}
+function addSeatDegree(label) {
+    if (!label)
+        return label;
+    return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+}
+function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, isShowSeatIcon, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -197,6 +213,9 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
                 ? filteredSeats[0].label
                 : filteredSeats[0].label
             : null;
+        const seatLabelIcon = isShowSeatIcon
+            ? getSeatLabelIcon(seatLabel, serviceItem)
+            : null;
         return (React.createElement(React.Fragment, null,
             hasStrikeOff && (React.createElement("span", { className: "text-[13.33px]", style: {
                     color: "#999",
@@ -209,7 +228,12 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
                         height: "20px",
                         marginRight: "5px",
                     } })),
-                CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
+                seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
+                        width: "20px",
+                        height: "20px",
+                        marginRight: "5px",
+                    } })),
+                CommonService.capitalize(addSeatDegree(seatLabel)))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
     };
     if (hasDiscount && discountSeat && uiType !== 1) {
         return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },

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

@@ -25,6 +25,7 @@ interface SeatSectionProps {
     topLabelColor?: string;
     tooltipColor?: string;
     discountSeatCrossPriceColor?: string;
+    isShowSeatIcon?: boolean;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -80,7 +80,23 @@ function getSeatTypeIcon(label, serviceItem) {
         return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
     return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }) {
+function getSeatLabelIcon(label, serviceItem) {
+    var _a, _b, _c, _d;
+    const seatLabel = String(label !== null && label !== void 0 ? label : "");
+    if (seatLabel.includes("180"))
+        return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
+    if (seatLabel.includes("160"))
+        return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
+    if (seatLabel.includes("140"))
+        return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
+    return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
+}
+function addSeatDegree(label) {
+    if (!label)
+        return label;
+    return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+}
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -221,6 +237,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                     ? filteredSeats[0].label
                     : filteredSeats[0].label
                 : null;
+            const seatLabelIcon = isShowSeatIcon
+                ? getSeatLabelIcon(seatLabel, serviceItem)
+                : null;
             const operatorServiceName = (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";
             return (React.createElement(React.Fragment, null,
@@ -235,7 +254,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                             height: "20px",
                             marginRight: "5px",
                         } })),
-                    CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
+                    seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
+                            width: "20px",
+                            height: "20px",
+                            marginRight: "5px",
+                        } })),
+                    CommonService.capitalize(addSeatDegree(seatLabel)))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
         }
         return renderSeatNames();
     };

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

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

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -38,7 +38,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
                     React.createElement("div", null, "\u2022"),
                     React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
 };
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -66,6 +66,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 margin: "auto 6px",
                 flexShrink: 0,
             } }),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })));
 }
 export default DateTimeSectionMobile;

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

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

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -28,6 +28,22 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
 const getFilteredSeats = (item) => {
     return item;
 };
+function getSeatLabelIcon(label, serviceItem) {
+    var _a, _b, _c, _d;
+    const seatLabel = String(label !== null && label !== void 0 ? label : "");
+    if (seatLabel.includes("180"))
+        return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
+    if (seatLabel.includes("160"))
+        return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
+    if (seatLabel.includes("140"))
+        return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
+    return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
+}
+function addSeatDegree(label) {
+    if (!label)
+        return label;
+    return String(label).replace(/\b(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("°"); });
 }
@@ -47,7 +63,7 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -98,15 +114,26 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         const seatLabel = uniqueSeats.length > 0
             ? commonService.truncateSeatLabel(uniqueSeats[0].label)
             : null;
+        // Picked from the full label, since truncation can cut off the angle
+        const seatLabelIcon = isShowSeatIcon && !hasStrikeOff && uniqueSeats.length > 0
+            ? getSeatLabelIcon(uniqueSeats[0].label, serviceItem)
+            : null;
         return (React.createElement(React.Fragment, null,
             hasStrikeOff && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
             React.createElement("div", { className: "relative w-[100%] flex flex-row justify-between items-center" },
                 hasInclination && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, hasStrikeOff
-                    ? "Desde"
-                    : commonService.capitalize(seatLabel) || "Desde"),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
+                    seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
+                            width: "16px",
+                            height: "16px",
+                            marginRight: "4px",
+                            filter: isSoldOut ? "grayscale(1)" : "",
+                        } })),
+                    hasStrikeOff
+                        ? "Desde"
+                        : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {

package/dist/utils/CommonService.d.ts

@@ -1,6 +1,6 @@
 declare const commonService: {
     currency(amount: number, currencySign?: string): string;
-    currencyExact: (amount: any) => string;
+    currencyExact: (amount: number, currencySign?: string) => string;
     currencyFixed(amount: number, currencySign?: string, decimals?: number): string;
     currencyRounded(amount: number, currencySign?: string): string;
     discountedCurrency(amount: number, currencySign?: string): string;

package/dist/utils/CommonService.js

@@ -13,13 +13,14 @@ const commonService = {
         const sign = currencySign || "$";
         return sign + formattedAmount;
     },
-    currencyExact: (amount) => {
+    currencyExact: (amount, currencySign) => {
+        const sign = currencySign || "$";
         if (amount === null || amount === undefined || isNaN(amount))
-            return "S/0";
+            return sign + "0";
         const rounded = Math.round(+amount * 100) / 100;
         const parts = String(rounded).split(".");
         parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-        return "S/" + parts.join(".");
+        return sign + parts.join(".");
     },
     currencyFixed(amount, currencySign, decimals = 2) {
         const formattedAmount = fixFloatPrecision(amount, decimals)

package/package.json

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

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -914,8 +914,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
                 justifyContent: "flex-end",
               }}
             >
-              {currency ? currency : ""}
-
+              {currency ? currency : ""}{" "}
               {CommonService.currencyExact(
                 isPeru
                   ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) /
@@ -923,6 +922,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
                   : removeDiscountAtomValue
                     ? 0
                     : netFare,
+                currencySign,
               )}
             </div>
           </div>

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -111,6 +111,7 @@ function PeruServiceItemDesktop({
   isNewUiEnabled,
   showLoginOption,
   priority_stage_ids,
+  isShowSeatIcon = false,
   t = (key: string) => key,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
@@ -903,6 +904,7 @@ function PeruServiceItemDesktop({
                 renderIcon={renderIcon}
                 discountSeatPriceColor={colors.discountSeatPriceColor}
                 isSeatIcon={isSeatIcon}
+                isShowSeatIcon={isShowSeatIcon}
               />
             </div>
 

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -152,6 +152,7 @@ function ServiceItemPB({
   isFlores,
   operatorLabel,
   priority_stage_ids,
+  isShowSeatIcon = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -539,6 +540,7 @@ function ServiceItemPB({
           isNewUiEnabled={isNewUiEnabledPeru}
           showLoginOption={showLoginOption}
           priority_stage_ids={priority_stage_ids}
+          isShowSeatIcon={isShowSeatIcon}
         />
       ) : isNewUi && !isTrain ? (
         <FeatureServiceUi
@@ -712,6 +714,7 @@ function ServiceItemPB({
                     discountSeatCrossPriceColor={
                       colors.discountSeatCrossPriceColor
                     }
+                    isShowSeatIcon={isShowSeatIcon}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -67,6 +67,7 @@ function ServiceItemMobile({
   isAllinBus,
   isPeruSite,
   priority_stage_ids,
+  isShowSeatIcon = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -395,6 +396,7 @@ function ServiceItemMobile({
                 discountSeatPriceColor={colors.discountSeatPriceColor}
                 isTrain={isTrain}
                 discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
+                isShowSeatIcon={isShowSeatIcon}
               />
 
               {hasDiscount && (

package/src/components/ServiceItem/mobileTypes.ts

@@ -164,6 +164,10 @@ export interface MobileServiceItemProps {
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
       womenSeatIcon?: string;
+      seat140?: string;
+      seat160?: string;
+      seat180?: string;
+      fallBackSeatIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -260,4 +264,5 @@ export interface MobileServiceItemProps {
   isAllinBus?: any;
   isPeruSite?: boolean;
   priority_stage_ids?: string[];
+  isShowSeatIcon?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -152,6 +152,10 @@ export interface ServiceItemProps {
       listoIcon?: string;
       precioIcon?: string;
       confirmarIcon?: string;
+      seat140?: string;
+      seat160?: string;
+      seat180?: string;
+      fallBackSeatIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -281,4 +285,5 @@ export interface ServiceItemProps {
   isFlores?: boolean;
   operatorLabel?: string;
   priority_stage_ids?: string[];
+  isShowSeatIcon?: boolean;
 }

package/src/ui/SeatSection/PeruSeatSection.tsx

@@ -22,6 +22,7 @@ interface PeruSeatSectionProps {
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
   isSeatIcon?: boolean;
+  isShowSeatIcon?: boolean;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -109,6 +110,19 @@ function getSeatTypeIcon(label: string, serviceItem: any) {
   return serviceItem?.icons?.seatFallBackIcon;
 }
 
+function getSeatLabelIcon(label: string, serviceItem: any) {
+  const seatLabel = String(label ?? "");
+  if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
+  if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
+  if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
+  return serviceItem?.icons?.fallBackSeatIcon;
+}
+
+function addSeatDegree(label: string) {
+  if (!label) return label;
+  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+}
+
 function PeruSeatSection({
   seatTypes,
   availableSeats,
@@ -120,6 +134,7 @@ function PeruSeatSection({
   renderIcon,
   discountSeatPriceColor,
   isSeatIcon,
+  isShowSeatIcon,
 }: PeruSeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -343,6 +358,10 @@ function PeruSeatSection({
           : filteredSeats[0].label
         : null;
 
+    const seatLabelIcon = isShowSeatIcon
+      ? getSeatLabelIcon(seatLabel as string, serviceItem)
+      : null;
+
     return (
       <>
         {hasStrikeOff && (
@@ -380,7 +399,18 @@ function PeruSeatSection({
                   }}
                 />
               )}
-              {CommonService.capitalize(seatLabel)}
+              {seatLabelIcon && (
+                <img
+                  src={seatLabelIcon}
+                  alt="seattype"
+                  style={{
+                    width: "20px",
+                    height: "20px",
+                    marginRight: "5px",
+                  }}
+                />
+              )}
+              {CommonService.capitalize(addSeatDegree(seatLabel))}
             </span>
           ) : (
             <span className="text-[13.33px]">Desde</span>

package/src/ui/SeatSection/SeatSection.tsx

@@ -35,6 +35,7 @@ interface SeatSectionProps {
   topLabelColor?: string;
   tooltipColor?: string;
   discountSeatCrossPriceColor?: string;
+  isShowSeatIcon?: boolean;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[], isTrain?: boolean) {
@@ -129,6 +130,19 @@ function getSeatTypeIcon(label: string, serviceItem: any) {
   return serviceItem?.icons?.seatFallBackIcon;
 }
 
+function getSeatLabelIcon(label: string, serviceItem: any) {
+  const seatLabel = String(label ?? "");
+  if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
+  if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
+  if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
+  return serviceItem?.icons?.fallBackSeatIcon;
+}
+
+function addSeatDegree(label: string) {
+  if (!label) return label;
+  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+}
+
 function SeatSection({
   seatTypes,
   availableSeats,
@@ -148,6 +162,7 @@ function SeatSection({
   topLabelColor,
   tooltipColor,
   discountSeatCrossPriceColor,
+  isShowSeatIcon
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -404,6 +419,10 @@ function SeatSection({
             : filteredSeats[0].label
           : null;
 
+      const seatLabelIcon = isShowSeatIcon
+        ? getSeatLabelIcon(seatLabel as string, serviceItem)
+        : null;
+
       const operatorServiceName =
         serviceItem?.operator_service_name === "MovilBus" ||
         serviceItem?.operator_service_name === "Movil Bus";
@@ -445,7 +464,18 @@ function SeatSection({
                     }}
                   />
                 )}
-                {CommonService.capitalize(seatLabel)}
+                {seatLabelIcon && (
+                  <img
+                    src={seatLabelIcon}
+                    alt="seattype"
+                    style={{
+                      width: "20px",
+                      height: "20px",
+                      marginRight: "5px",
+                    }}
+                  />
+                )}
+                {CommonService.capitalize(addSeatDegree(seatLabel))}
               </span>
             ) : (
               <span className="text-[13.33px]">Desde</span>

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -27,6 +27,7 @@ interface DateTimeSectionMobileProps {
   discountSeatPriceColor?: string;
   isTrain?: boolean;
   discountSeatCrossPriceColor?: string;
+  isShowSeatIcon?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -147,6 +148,7 @@ function DateTimeSectionMobile({
   discountSeatPriceColor,
   isTrain,
   discountSeatCrossPriceColor,
+  isShowSeatIcon,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -228,6 +230,7 @@ function DateTimeSectionMobile({
         discountSeatPriceColor={discountSeatPriceColor}
         isTrain={isTrain}
         discountSeatCrossPriceColor={discountSeatCrossPriceColor}
+        isShowSeatIcon={isShowSeatIcon}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -34,6 +34,7 @@ interface SeatSectionMobileProps {
   discountSeatPriceColor?: string;
   isTrain?: boolean;
   discountSeatCrossPriceColor?: string;
+  isShowSeatIcon?: boolean;
 }
 
 interface SeatRowProps {
@@ -95,6 +96,19 @@ const getFilteredSeats = (item: string) => {
   return item;
 };
 
+function getSeatLabelIcon(label: string, serviceItem: any) {
+  const seatLabel = String(label ?? "");
+  if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
+  if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
+  if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
+  return serviceItem?.icons?.fallBackSeatIcon;
+}
+
+function addSeatDegree(label: string | null) {
+  if (!label) return label;
+  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+}
+
 function hasInclinationSeatTypes(seatTypes: SeatType[]): boolean {
   return (seatTypes ?? []).some((seat) =>
     String(seat?.label ?? "").includes("°"),
@@ -136,6 +150,7 @@ function SeatSectionMobile({
   discountSeatPriceColor,
   isTrain,
   discountSeatCrossPriceColor,
+  isShowSeatIcon,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -240,6 +255,12 @@ function SeatSectionMobile({
         ? commonService.truncateSeatLabel(uniqueSeats[0].label)
         : null;
 
+    // Picked from the full label, since truncation can cut off the angle
+    const seatLabelIcon =
+      isShowSeatIcon && !hasStrikeOff && uniqueSeats.length > 0
+        ? getSeatLabelIcon(uniqueSeats[0].label, serviceItem)
+        : null;
+
     return (
       <>
         {hasStrikeOff && (
@@ -269,12 +290,24 @@ function SeatSectionMobile({
             </span>
           )}
           <span
-            className="min-[420]:text-[13px] text-[12px] bold-text"
+            className="min-[420]:text-[13px] text-[12px] bold-text flex items-center"
             style={{ color: isSoldOut ? "#bbb" : "#464647" }}
           >
+            {seatLabelIcon && (
+              <img
+                src={seatLabelIcon}
+                alt="seattype"
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  marginRight: "4px",
+                  filter: isSoldOut ? "grayscale(1)" : "",
+                }}
+              />
+            )}
             {hasStrikeOff
               ? "Desde"
-              : commonService.capitalize(seatLabel) || "Desde"}
+              : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"}
           </span>
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"

package/src/utils/CommonService.ts

@@ -16,12 +16,13 @@ const commonService = {
     return sign + formattedAmount;
   },
 
-  currencyExact: (amount) => {
-    if (amount === null || amount === undefined || isNaN(amount)) return "S/0";
+  currencyExact: (amount: number, currencySign?: string) => {
+    const sign = currencySign || "$";
+    if (amount === null || amount === undefined || isNaN(amount)) return sign + "0";
     const rounded = Math.round(+amount * 100) / 100;
     const parts = String(rounded).split(".");
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return "S/" + parts.join(".");
+    return sign + parts.join(".");
   },
 
   currencyFixed(amount: number, currencySign?: string, decimals: number = 2) {