kupos-ui-components-lib 9.1.8 → 9.1.9

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -303,7 +303,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
                     React.createElement("div", null,
                         showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
                                 position: "absolute",

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -114,7 +114,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
         // className={`relative  ${
         //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
         //   }
-        className: `relative  ${serviceItem.offer_text ? "mb-[20px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+        className: `relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -141,7 +141,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : 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-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
-                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, destinationIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats }),
+                React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, destinationIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]" }),
                 React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_c = serviceItem.duration) === null || _c === void 0 ? void 0 : _c.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={() => {

package/dist/styles.css

@@ -201,6 +201,9 @@
 .mb-\[10px\] {
   margin-bottom: 10px;
 }
+.mb-\[12px\] {
+  margin-bottom: 12px;
+}
 .mb-\[14px\] {
   margin-bottom: 14px;
 }

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

@@ -12,6 +12,7 @@ interface SeatSectionProps {
     currencySign?: string;
     removeDuplicateSeats?: boolean;
     isPeru?: boolean;
+    serviceItem?: any;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -54,7 +54,7 @@ function getUniqueSeats(seatTypes) {
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, }) {
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
@@ -74,14 +74,26 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         if (isPeru) {
             const allSeats = getAllSeatTypes(seatTypes);
             const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
-            return (React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(lowestFare)));
+            const { originalPrice, discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+            return (React.createElement(React.Fragment, null,
+                originalPrice !== discountedPrice && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(originalPrice))),
+                React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
         }
         if (removeDuplicateSeats) {
-            return uniqueSeats.map((val, key) => (React.createElement("span", { key: key }, formatPrice(val.price))));
+            return uniqueSeats.map((val, key) => {
+                const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
+                return React.createElement("span", { key: key }, formatPrice(discountedPrice));
+            });
         }
-        return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof val.price === "string" || typeof val.price === "number"
-            ? formatPrice(val.price)
-            : null)));
+        return sortedSeatTypes.map((val, key) => {
+            if (SEAT_EXCEPTIONS.includes(val.label))
+                return null;
+            const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
+            return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof discountedPrice === "string" ||
+                typeof discountedPrice === "number"
+                ? formatPrice(discountedPrice)
+                : null));
+        });
     };
     const renderLabels = () => {
         if (isPeru) {
@@ -98,6 +110,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
         ? { position: "relative", top: 0 }
         : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
+    const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+    const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
+    const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
+    const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
     return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
         React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
         React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
@@ -109,7 +125,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 justifyContent: isCentered ? "center" : "",
                 gap: "10px",
             } },
-            React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, "$1.000"),
+            isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(1000))),
+            hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
             renderSeatPrices())));
 }
 export default SeatSection;

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

@@ -18,6 +18,7 @@ interface DateTimeSectionMobileProps {
     currencySign: string;
     availableSeats: number;
     removeDuplicateSeats?: boolean;
+    serviceItem?: any;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, }: 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, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -31,7 +31,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.
             React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
             React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
             React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -52,6 +52,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 backgroundColor: "#ccc",
                 margin: "auto",
             } })),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem })));
 }
 export default DateTimeSectionMobile;

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

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

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -42,14 +42,15 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, }) {
-    var _a;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }) {
+    var _a, _b, _c;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
             return commonService.currency(0, currencySign);
         }
-        return commonService.currency(fare, currencySign);
+        const { discountedPrice } = commonService.calculateDiscountedPrice(fare, serviceItem);
+        return commonService.currency(discountedPrice, currencySign);
     };
     const getLowestFare = () => {
         var _a;
@@ -67,13 +68,16 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         if (lowestFare === null)
             return null;
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
+        const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
         return (React.createElement(React.Fragment, null,
             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(getHighestFare(), currencySign))),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, originalPrice !== discountedPrice
+                    ? commonService.currency(originalPrice, currencySign)
+                    : commonService.currency(getHighestFare(), currencySign))),
             React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(lowestFare, currencySign)))));
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
     };
     const renderSeats = () => {
         var _a, _b, _c;
@@ -84,11 +88,17 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             const uniqueSeats = getUniqueSeats(seatTypesData, 3);
             return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
         }
-        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: commonService.currency(type.fare, currencySign), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
+        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
     };
+    const seats = removeDuplicateSeats
+        ? getUniqueSeats(seatTypesData, 3)
+        : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
+    const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
+    const highestOriginalPrice = Math.max(...((discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.map((s) => s.originalPrice)) || [0]));
+    const hasDiscount = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } },
-        !isPeru && (React.createElement("div", { className: "absolute -top-[16px] right-[0] flex justify-end" },
-            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, "$7.000"))),
+        !isPeru && hasDiscount && (React.createElement("div", { className: "absolute -top-[16px] right-[0] flex justify-end" },
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(highestOriginalPrice, currencySign)))),
         React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
                 gap: isSoldOut ? "0px" : "5px",
                 justifyContent: hasMultipleTypes ? "space-between" : "center",

package/dist/utils/CommonService.d.ts

@@ -9,5 +9,13 @@ declare const commonService: {
     capitalize: (str: any) => any;
     formatTimeLabel: (label: string) => string;
     formatDefaultLabel: (label: string) => string;
+    calculateDiscountedPrice: (originalPrice: number | string, serviceItem?: {
+        discount_type?: string;
+        discount_value?: number;
+        max_discount?: number;
+    }) => {
+        originalPrice: number;
+        discountedPrice: number;
+    };
 };
 export default commonService;

package/dist/utils/CommonService.js

@@ -267,5 +267,22 @@ const commonService = {
             return "";
         return label.toLowerCase();
     },
+    calculateDiscountedPrice: (originalPrice, serviceItem) => {
+        const price = typeof originalPrice === "string"
+            ? parseFloat(originalPrice)
+            : originalPrice;
+        if (!serviceItem || !price) {
+            return { originalPrice: price, discountedPrice: price };
+        }
+        const { discount_type, discount_value, max_discount } = serviceItem;
+        const percentageDiscount = discount_type === "percentage" && discount_value != null
+            ? (price * discount_value) / 100
+            : 0;
+        const finalDiscount = max_discount != null && max_discount > 0
+            ? Math.min(percentageDiscount, max_discount)
+            : percentageDiscount;
+        const discountedPrice = Math.max(0, price - finalDiscount);
+        return { originalPrice: price, discountedPrice };
+    },
 };
 export default commonService;

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -558,6 +558,7 @@ function ServiceItemPB({
                 <div className="content-center">
                   <SeatSection
                     seatTypes={serviceItem.seat_types}
+                    serviceItem={serviceItem}
                     availableSeats={serviceItem.available_seats}
                     isSoldOut={isSoldOut}
                     priceColor={colors.priceColor}

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -176,7 +176,7 @@ function ServiceItemMobile({
       // className={`relative  ${
       //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
       //   }
-      className={`relative  ${serviceItem.offer_text ? "mb-[20px]" : "mb-[20px]"} ${
+      className={`relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
         serviceItem?.is_direct_trip ||
         isConexion ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -291,6 +291,7 @@ function ServiceItemMobile({
             currencySign={currencySign}
             availableSeats={serviceItem.available_seats}
             removeDuplicateSeats={removeDuplicateSeats}
+            serviceItem={serviceItem}
           />
           {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
           <div className="bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]"></div>

package/src/ui/SeatSection/SeatSection.tsx

@@ -17,6 +17,7 @@ interface SeatSectionProps {
   currencySign?: string;
   removeDuplicateSeats?: boolean;
   isPeru?: boolean;
+  serviceItem?: any;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -94,6 +95,7 @@ function SeatSection({
   currencySign,
   removeDuplicateSeats,
   isPeru,
+  serviceItem,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -130,28 +132,50 @@ function SeatSection({
     if (isPeru) {
       const allSeats = getAllSeatTypes(seatTypes);
       const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
+      const { originalPrice, discountedPrice } =
+        CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+
       return (
-        <span className="flex items-center text-[13.33px] bold-text">
-          {formatPrice(lowestFare)}
-        </span>
+        <>
+          {originalPrice !== discountedPrice && (
+            <span className="text-[13.33px]" style={strikethroughStyle}>
+              {formatPrice(originalPrice)}
+            </span>
+          )}
+          <span className="flex items-center text-[13.33px] bold-text">
+            {formatPrice(discountedPrice)}
+          </span>
+        </>
       );
     }
 
     if (removeDuplicateSeats) {
-      return uniqueSeats.map((val, key) => (
-        <span key={key}>{formatPrice(val.price)}</span>
-      ));
+      return uniqueSeats.map((val, key) => {
+        const { discountedPrice } = CommonService.calculateDiscountedPrice(
+          val.price,
+          serviceItem,
+        );
+        return <span key={key}>{formatPrice(discountedPrice)}</span>;
+      });
     }
 
-    return sortedSeatTypes.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
+    return sortedSeatTypes.map((val, key: number) => {
+      if (SEAT_EXCEPTIONS.includes(val.label)) return null;
+
+      const { discountedPrice } = CommonService.calculateDiscountedPrice(
+        val.price,
+        serviceItem,
+      );
+
+      return (
         <span key={key} className="flex items-center text-[13.33px] bold-text">
-          {typeof val.price === "string" || typeof val.price === "number"
-            ? formatPrice(val.price)
+          {typeof discountedPrice === "string" ||
+          typeof discountedPrice === "number"
+            ? formatPrice(discountedPrice)
             : null}
         </span>
-      ),
-    );
+      );
+    });
   };
 
   const renderLabels = () => {
@@ -185,6 +209,20 @@ function SeatSection({
       : { position: "absolute", top: isCentered ? "-10px" : "-18px" }),
   };
 
+  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+  const discountedSeats = seats.map((seat) => ({
+    ...seat,
+    ...CommonService.calculateDiscountedPrice(seat.price, serviceItem),
+  }));
+
+  const highestOriginalPrice = Math.max(
+    ...discountedSeats.map((seat) => seat.originalPrice),
+  );
+
+  const hasDiscount = discountedSeats.some(
+    (seat) => seat.originalPrice !== seat.discountedPrice,
+  );
+
   return (
     <div
       className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
@@ -205,9 +243,17 @@ function SeatSection({
           gap: "10px",
         }}
       >
-        <span className="text-[13.33px]" style={strikethroughStyle}>
-          $1.000
-        </span>
+        {isPeru && (
+          <span className="text-[13.33px]" style={strikethroughStyle}>
+            {formatPrice(1000)}
+          </span>
+        )}
+
+        {hasDiscount && (
+          <span className="text-[13.33px]" style={strikethroughStyle}>
+            {formatPrice(highestOriginalPrice)}
+          </span>
+        )}
         {renderSeatPrices()}
       </div>
     </div>

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -21,6 +21,7 @@ interface DateTimeSectionMobileProps {
   currencySign: string;
   availableSeats: number;
   removeDuplicateSeats?: boolean;
+  serviceItem?: any;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -117,6 +118,7 @@ function DateTimeSectionMobile({
   currencySign,
   availableSeats,
   removeDuplicateSeats,
+  serviceItem,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -184,6 +186,7 @@ function DateTimeSectionMobile({
         currencySign={currencySign}
         availableSeats={availableSeats}
         removeDuplicateSeats={removeDuplicateSeats}
+        serviceItem={serviceItem}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -27,6 +27,7 @@ interface SeatSectionMobileProps {
   currencySign: string;
   availableSeats: number;
   removeDuplicateSeats?: boolean;
+  serviceItem?: any;
 }
 
 interface SeatRowProps {
@@ -110,6 +111,7 @@ function SeatSectionMobile({
   currencySign,
   availableSeats,
   removeDuplicateSeats,
+  serviceItem,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -117,7 +119,11 @@ function SeatSectionMobile({
     if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
       return commonService.currency(0, currencySign);
     }
-    return commonService.currency(fare, currencySign);
+    const { discountedPrice } = commonService.calculateDiscountedPrice(
+      fare,
+      serviceItem,
+    );
+    return commonService.currency(discountedPrice, currencySign);
   };
 
   const getLowestFare = (): number | null => {
@@ -144,6 +150,8 @@ function SeatSectionMobile({
     if (lowestFare === null) return null;
 
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
+    const { originalPrice, discountedPrice } =
+      commonService.calculateDiscountedPrice(lowestFare, serviceItem);
 
     return (
       <>
@@ -158,7 +166,9 @@ function SeatSectionMobile({
             className="min-[420]:text-[13px] text-[12px] line-through"
             style={{ color: "#bbb" }}
           >
-            {commonService.currency(getHighestFare(), currencySign)}
+            {originalPrice !== discountedPrice
+              ? commonService.currency(originalPrice, currencySign)
+              : commonService.currency(getHighestFare(), currencySign)}
           </span>
         </div>
         <div className="w-[100%] flex flex-row justify-between items-center">
@@ -172,7 +182,7 @@ function SeatSectionMobile({
             className="min-[420]:text-[13px] text-[12px] bold-text"
             style={{ color: priceColor }}
           >
-            {commonService.currency(lowestFare, currencySign)}
+            {commonService.currency(discountedPrice, currencySign)}
           </span>
         </div>
       </>
@@ -211,7 +221,7 @@ function SeatSectionMobile({
           type={type}
           index={i}
           displayLabel={type.label}
-          fare={commonService.currency(type.fare, currencySign)}
+          fare={getFare(type.fare)}
           isSoldOut={isSoldOut}
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
@@ -220,15 +230,34 @@ function SeatSectionMobile({
       ));
   };
 
+  const seats = removeDuplicateSeats
+    ? getUniqueSeats(seatTypesData, 3)
+    : seatTypesData
+        ?.filter((item) => getFilteredSeats(item.label))
+        ?.sort((a, b) => a.fare - b.fare)
+        ?.slice(0, 2);
+
+  const discountedSeats = seats?.map((seat) => ({
+    ...seat,
+    ...commonService.calculateDiscountedPrice(seat.fare, serviceItem),
+  }));
+
+  const highestOriginalPrice = Math.max(
+    ...(discountedSeats?.map((s) => s.originalPrice) || [0]),
+  );
+  const hasDiscount = discountedSeats?.some(
+    (s) => s.originalPrice !== s.discountedPrice,
+  );
+
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
-      {!isPeru && (
+      {!isPeru && hasDiscount && (
         <div className="absolute -top-[16px] right-[0] flex justify-end">
           <span
             className="min-[420]:text-[13px] text-[12px] line-through"
             style={{ color: "#bbb" }}
           >
-            $7.000
+            {commonService.currency(highestOriginalPrice, currencySign)}
           </span>
         </div>
       )}

package/src/utils/CommonService.ts

@@ -274,6 +274,40 @@ const commonService = {
     if (!label) return "";
     return label.toLowerCase();
   },
+
+  calculateDiscountedPrice: (
+    originalPrice: number | string,
+    serviceItem?: {
+      discount_type?: string;
+      discount_value?: number;
+      max_discount?: number;
+    },
+  ): { originalPrice: number; discountedPrice: number } => {
+    const price =
+      typeof originalPrice === "string"
+        ? parseFloat(originalPrice)
+        : originalPrice;
+
+    if (!serviceItem || !price) {
+      return { originalPrice: price, discountedPrice: price };
+    }
+
+    const { discount_type, discount_value, max_discount } = serviceItem;
+
+    const percentageDiscount =
+      discount_type === "percentage" && discount_value != null
+        ? (price * discount_value) / 100
+        : 0;
+
+    const finalDiscount =
+      max_discount != null && max_discount > 0
+        ? Math.min(percentageDiscount, max_discount)
+        : percentageDiscount;
+
+    const discountedPrice = Math.max(0, price - finalDiscount);
+
+    return { originalPrice: price, discountedPrice };
+  },
 };
 
 export default commonService;