kupos-ui-components-lib 9.5.10 → 9.6.1

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -111,9 +111,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         : serviceItem.seat_types || [];
     const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
+    const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
+    const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
+    const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
     const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
     const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
-    const serviceCardStyle = hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+    const serviceCardStyle = hasOfferText || hasDpEnabled
         ? {
             borderColor: "transparent",
             borderStyle: "solid",
@@ -236,22 +239,24 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!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 })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    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 })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}	` },
-        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })),
-        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })),
+        React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
             React.createElement("div", { className: " pt-[20px]", style: {
-                    padding: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
+                    padding: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
                         ? "20px 15px 10px 15px"
                         : coachKey
                             ? "20px 15px 20px 15px"
                             : "20px 15px 10px 15px",
-                    marginTop: hasDiscount || hasOfferText ? "14px" : "",
+                    marginTop: hasDiscount || hasOfferText || dpDiscountPercent
+                        ? "14px"
+                        : "",
                 } },
                 React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
                     React.createElement("div", { className: "flex flex-col gap-[5px]" },
@@ -280,11 +285,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
-                zIndex: hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? 0 : -1,
+                zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
             } },
-            React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
-                        ? ""
-                        : "-10px" }, (hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+            React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
                     ? {
                         borderLeft: `3px solid ${isSoldOut ? "rgba(255, 89, 100, 0.5)" : "#ff5964"}`,
                         borderRight: `3px solid ${isSoldOut ? "rgba(255, 136, 66, 0.5)" : "#ff8842"}`,

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -33,9 +33,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
     const serviceCardStyle = hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
         ? {
-            borderColor: "transparent",
+            borderColor: isSoldOut ? "#ccc" : "transparent",
             borderStyle: "solid",
-            borderWidth: "3px 3px 0 3px",
+            borderWidth: isSoldOut ? "1px" : "3px 3px 0 3px",
             borderRadius: "18px",
             background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient}  border-box`,
         }
@@ -93,7 +93,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             showTopLabel
             ? "mt-[20px]"
             : "mt-[10px]"}	`, style: { zIndex: 1 } },
-        React.createElement("div", { className: `z-1 ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
+        React.createElement("div", { className: `z-1 ${(hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut
                 ? "rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
             React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
@@ -111,12 +111,18 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                 React.createElement("div", { className: "flex items-center cursor-pointer ", style: { 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: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.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 }),
+                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: {
+                        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: (_e = serviceItem.duration) === null || _e === void 0 ? void 0 : _e.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: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
                     }, isPeru: isPeru })),
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
-        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
+        ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
+            !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
                 background: isSoldOut ? offerGradientWithOpacity : offerGradient,
                 // opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",

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

@@ -39,6 +39,12 @@ export interface ServiceItemProps {
         offer_text?: string;
         is_direct_trip?: boolean;
         is_dp_enabled?: boolean;
+        dp_discount_percents?: Record<string, number | string> | Array<number | string>;
+        dp_discounted_seats?: Array<string | number>;
+        original_dp_price?: Record<string, number | string> | Array<number | string>;
+        discount_type?: string;
+        discount_value?: number;
+        max_discount?: number;
         is_transpordo?: boolean;
         is_train_type?: boolean;
         operator_service_name?: string;

package/dist/ui/SeatSection/SeatSection.js

@@ -55,7 +55,7 @@ function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
 function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, }) {
-    var _a, _b;
+    var _a, _b, _c;
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
@@ -117,13 +117,50 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         }
         return renderSeatNames();
     };
-    const _dpSeatsFirstVal = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats)
-        ? serviceItem.dp_discounted_seats[0]
-        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) || {})[0];
-    const _dpPercentsFirstVal = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)
-        ? serviceItem.dp_discount_percents[0]
-        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
-    if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !_dpSeatsFirstVal && !_dpPercentsFirstVal) {
+    // const dpDiscountEntry = Object.entries(
+    //   serviceItem?.dp_discount_percents || {},
+    // ).find(([, percent]) => Number(percent));
+    const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
+    const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
+    const getFirstDpValue = (source) => {
+        if (!source)
+            return undefined;
+        return Array.isArray(source) ? source[0] : Object.values(source)[0];
+    };
+    const renderDpDiscountUi = (originalDpPrice, seatTypeFare) => {
+        return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
+            React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
+            React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, !isNaN(Number(dpDiscountPercent)) &&
+                Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                } },
+                Math.round(Number(dpDiscountPercent)),
+                "% OFF"))),
+            React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center", style: { textAlign: "center" } },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
+                    formatPrice(Number(originalDpPrice)),
+                    React.createElement("span", { style: {
+                            position: "absolute",
+                            left: "-2px",
+                            top: "50%",
+                            width: "calc(100% + 4px)",
+                            height: "1px",
+                            backgroundColor: "#9f9f9f",
+                            transform: "rotate(-10deg)",
+                            transformOrigin: "center",
+                        } }))),
+            React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
+                React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
+                    React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-8px" } }, renderIcon("fireIcon", "16px")),
+                    availableSeats <= 0
+                        ? CommonService.currency(0, currencySign)
+                        : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
+    };
+    if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !dpDiscountEntry) {
         const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
         const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
         return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] ", style: {
@@ -148,50 +185,15 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                         ? CommonService.currency(0, currencySign)
                         : CommonService.discountedCurrency(lowestFare, currencySign))))));
     }
-    if (_dpSeatsFirstVal && _dpPercentsFirstVal) {
-        const originalDpPrice = Array.isArray(serviceItem.original_dp_price)
-            ? serviceItem.original_dp_price[0]
-            : Object.values(serviceItem.original_dp_price || {})[0];
-        const dpDiscountPercent = Array.isArray(serviceItem.dp_discount_percents)
-            ? serviceItem.dp_discount_percents[0]
-            : Object.values(serviceItem.dp_discount_percents || {})[0];
-        const seatTypeFare = (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.fare;
+    if (dpDiscountEntry) {
+        const originalDpPrice = getFirstDpValue(serviceItem.original_dp_price);
+        const seatTypeFare = (_c = (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.fare) !== null && _c !== void 0 ? _c : originalDpPrice;
         if (originalDpPrice && seatTypeFare) {
-            return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
-                React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
-                    React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
-                React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
-                    React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
-                React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, !isNaN(Number(dpDiscountPercent)) &&
-                    Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
-                        animation: "pulse-zoom 2s ease-in-out infinite",
-                        whiteSpace: "nowrap",
-                    } },
-                    Math.round(Number(dpDiscountPercent)),
-                    "% OFF"))),
-                React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center", style: { textAlign: "center" } },
-                    React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
-                        formatPrice(Number(originalDpPrice)),
-                        React.createElement("span", { style: {
-                                position: "absolute",
-                                left: "-2px",
-                                top: "50%",
-                                width: "calc(100% + 4px)",
-                                height: "1px",
-                                backgroundColor: "#9f9f9f",
-                                transform: "rotate(-10deg)",
-                                transformOrigin: "center",
-                            } }))),
-                React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
-                    React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
-                        React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-8px" } }, renderIcon("fireIcon", "16px")),
-                        availableSeats <= 0
-                            ? CommonService.currency(0, currencySign)
-                            : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
+            return renderDpDiscountUi(originalDpPrice, seatTypeFare);
         }
     }
     if (hasDiscount && discountSeat) {
-        return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
+        return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
             React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -43,7 +43,7 @@ const getUniqueSeats = (data, limit) => {
         .slice(0, limit);
 };
 function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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) {
@@ -145,7 +145,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         originalDpPrice != null &&
         dpDiscountPercent != null &&
         firstSeatFare != null;
-    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !originalDpPrice && !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
+        !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         !isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
                 animation: "pulse-zoom 2s ease-in-out infinite",
@@ -174,47 +176,44 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 } })),
         React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
-            ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
-        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
-        discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
-                animation: "pulse-zoom 2s ease-in-out infinite",
-            } },
-            React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
-                    backgroundColor: tooltipBgColor,
+        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
+        React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+            discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    opacity: isSoldOut ? 0.5 : 1,
                 } },
-                discountValue,
-                "% OFF"))),
-        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
-        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
-                position: "relative",
-                display: "inline-block",
-                overflow: "hidden",
-            } },
-            commonService.currency(discountSeat.originalPrice, currencySign),
-            React.createElement("span", { style: {
-                    position: "absolute",
-                    top: "35%",
-                    left: "50%",
-                    width: "80%",
-                    height: "1px",
-                    background: "#9f9f9f",
-                    transform: "rotate(-12deg)",
-                    transformOrigin: "center",
-                } })),
-        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
-        React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
-            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
-            commonService.discountedCurrency(discountSeat.discountedPrice, currencySign)),
-        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
+                React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
+                        backgroundColor: tooltipBgColor,
+                    } },
+                    discountValue,
+                    "% OFF"))),
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
+                    position: "relative",
+                    display: "inline-block",
+                    overflow: "hidden",
+                } },
+                commonService.currency(discountSeat.originalPrice, currencySign),
+                React.createElement("span", { style: {
+                        position: "absolute",
+                        top: "35%",
+                        left: "50%",
+                        width: "80%",
+                        height: "1px",
+                        background: "#9f9f9f",
+                        transform: "rotate(-12deg)",
+                        transformOrigin: "center",
+                    } })),
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
+            React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
+                ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },
         renderSeats(),
-        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: {
-                color: tooltipBgColor,
-            } }, "\u00A1 \u00DAltimos Asientos!")))) : null,
         isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
             React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
 }

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -190,10 +190,16 @@ function ServiceItemPB({
     (seat) => seat.originalPrice !== seat.discountedPrice,
   );
 
+  const dpDiscountEntry = Object.entries(
+    serviceItem?.dp_discount_percents || {},
+  )[0];
+  const dpDiscountPercent = dpDiscountEntry?.[1];
+  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
-    hasOfferText || serviceItem?.is_dp_enabled
+    hasOfferText || hasDpEnabled
       ? {
           borderColor: "transparent",
           borderStyle: "solid",
@@ -406,7 +412,7 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          className={`relative hover:z-[150] ${hasOfferText || serviceItem?.is_dp_enabled ? "mb-[55px]" : "mb-[10px]"} ${
+          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -414,7 +420,7 @@ function ServiceItemPB({
               : "mt-[20px]"
           }	`}
         >
-          {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
+          {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
             <OfferBanner
               offerGradient={offerGradient}
               isSoldOut={isSoldOut}
@@ -429,7 +435,7 @@ function ServiceItemPB({
           <div
             id={`service-card-${serviceItem.id}`}
             className={`bg-white mx-auto relative ${
-              hasOfferText || serviceItem?.is_dp_enabled
+              (hasOfferText || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"
             }`}
@@ -439,13 +445,16 @@ function ServiceItemPB({
               className=" pt-[20px]"
               style={{
                 padding:
-                  serviceItem?.is_dp_enabled || serviceItem?.offer_text
+                  hasDpEnabled || serviceItem?.offer_text
                     ? "20px 15px 10px 15px"
                     : coachKey
                       ? "20px 15px 20px 15px"
                       : "20px 15px 10px 15px",
 
-                marginTop: hasDiscount || hasOfferText ? "14px" : "",
+                marginTop:
+                  hasDiscount || hasOfferText || dpDiscountPercent
+                    ? "14px"
+                    : "",
               }}
             >
               <div className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center">
@@ -569,7 +578,7 @@ function ServiceItemPB({
                 transition:
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
-                zIndex: hasOfferText || serviceItem?.is_dp_enabled ? 0 : -1,
+                zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
               }}
             >
               <div
@@ -577,10 +586,8 @@ function ServiceItemPB({
                   overflow: "hidden",
                   minHeight: 0,
                   marginTop:
-                    serviceItem?.is_dp_enabled || serviceItem?.offer_text
-                      ? ""
-                      : "-10px",
-                  ...(hasOfferText || serviceItem?.is_dp_enabled
+                    hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
+                  ...(hasOfferText || hasDpEnabled
                     ? {
                         borderLeft: `3px solid ${isSoldOut ? "rgba(255, 89, 100, 0.5)" : "#ff5964"}`,
                         borderRight: `3px solid ${isSoldOut ? "rgba(255, 136, 66, 0.5)" : "#ff8842"}`,

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -74,9 +74,9 @@ function ServiceItemMobile({
   const serviceCardStyle: React.CSSProperties =
     hasOfferText || serviceItem?.is_dp_enabled
       ? {
-          borderColor: "transparent",
+          borderColor: isSoldOut ? "#ccc" : "transparent",
           borderStyle: "solid",
-          borderWidth: "3px 3px 0 3px",
+          borderWidth: isSoldOut ? "1px" : "3px 3px 0 3px",
           borderRadius: "18px",
           background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient}  border-box`,
         }
@@ -166,7 +166,7 @@ function ServiceItemMobile({
     >
       <div
         className={`z-1 ${
-          hasOfferText || serviceItem?.is_dp_enabled
+          (hasOfferText || serviceItem?.is_dp_enabled) && !isSoldOut
             ? "rounded-[18px]"
             : "rounded-[10px] border border-[#ccc]"
         }`}
@@ -249,6 +249,32 @@ function ServiceItemMobile({
             showLastSeats={showLastSeats}
           />
 
+          {hasDiscount && (
+            <div className="flex justify-end">
+              {isSoldOut ? (
+                <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
+                  Agotado
+                </span>
+              ) : null}
+            </div>
+          )}
+
+          {showLastSeats ? (
+            <div className="flex justify-end  ">
+              {serviceItem?.available_seats < 10 &&
+                serviceItem?.available_seats > 0 && (
+                  <div
+                    className="text-[10px] text-center"
+                    style={{
+                      color: colors.tooltipBgColor,
+                    }}
+                  >
+                    ¡ Últimos Asientos!
+                  </div>
+                )}
+            </div>
+          ) : null}
+
           {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
           <div className="bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]"></div>
 
@@ -290,102 +316,105 @@ function ServiceItemMobile({
       </div>
 
       {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
-      {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
-        <div
-          className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
-          style={{
-            background: isSoldOut ? offerGradientWithOpacity : offerGradient,
-            // opacity: isSoldOut ? 0.5 : 1,
-            borderRadius: "0 0 14px 14px",
-            zIndex: -1,
-          }}
-        >
+      {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) &&
+        !isSoldOut && (
           <div
-            className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
-            style={{ lineHeight: 1.6 }}
+            className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
+            style={{
+              background: isSoldOut ? offerGradientWithOpacity : offerGradient,
+              // opacity: isSoldOut ? 0.5 : 1,
+              borderRadius: "0 0 14px 14px",
+              zIndex: -1,
+            }}
           >
-            <div className="flex justify-between items-center">
-              {serviceItem?.is_dp_enabled ? (
-                <div className="flex items-center gap-[6px]">
-                  {/* {renderIcon("whiteFireIcon", "14px")} */}
-                  <LottiePlayer
-                    animationData={serviceItem.icons.starAnimation}
-                    width="14px"
-                    height="14px"
-                  />
-
-                  <span className="text-[#fff]">Más elegido</span>
-                </div>
-              ) : (
-                <div
-                  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
-                >
-                  <div className={isLongOfferText ? "mt-[2px]" : ""}>
+            <div
+              className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
+              style={{ lineHeight: 1.6 }}
+            >
+              <div className="flex justify-between items-center">
+                {serviceItem?.is_dp_enabled ? (
+                  <div className="flex items-center gap-[6px]">
+                    {/* {renderIcon("whiteFireIcon", "14px")} */}
                     <LottiePlayer
-                      animationData={serviceItem.icons.bombAnim}
+                      animationData={serviceItem.icons.starAnimation}
                       width="14px"
                       height="14px"
                     />
+
+                    <span className="text-[#fff]">Más elegido</span>
                   </div>
+                ) : (
                   <div
-                    className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                    style={{
-                      color: "#fff",
-                      lineHeight: 1.4,
-                    }}
+                    className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
                   >
-                    <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                      Termina en&nbsp;
-                      <span
-                        className="bold-text"
-                        ref={(node) => commonService.startCountdown(node, 599)}
-                        style={{
-                          fontVariantNumeric: "tabular-nums",
-                          display: "inline-block",
-                        }}
+                    <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                      <LottiePlayer
+                        animationData={serviceItem.icons.bombAnim}
+                        width="14px"
+                        height="14px"
                       />
-                    </span>
-                  </div>
-                </div>
-              )}
-              <div
-                className="flex flex-col items-end"
-                style={{
-                  color: "#fff",
-                }}
-              >
-                <div className="flex items-center">
-                  <div className="mr-[4px]">
-                    {" "}
-                    <LottiePlayer
-                      animationData={serviceItem.icons.dotAnimation}
-                      width="12px"
-                      height="12px"
-                    />
+                    </div>
+                    <div
+                      className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                      style={{
+                        color: "#fff",
+                        lineHeight: 1.4,
+                      }}
+                    >
+                      <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                        Termina en&nbsp;
+                        <span
+                          className="bold-text"
+                          ref={(node) =>
+                            commonService.startCountdown(node, 599)
+                          }
+                          style={{
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                          }}
+                        />
+                      </span>
+                    </div>
                   </div>
-                  <span className="flex-1" style={{ lineHeight: 1.4 }}>
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startViewerCount(node, viewersConfig)
-                      }
-                      style={{ fontVariantNumeric: "tabular-nums" }}
-                    />{" "}
-                    <span> viendo</span> |{" "}
-                    <span className="whitespace-nowrap">
-                      {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
+                )}
+                <div
+                  className="flex flex-col items-end"
+                  style={{
+                    color: "#fff",
+                  }}
+                >
+                  <div className="flex items-center">
+                    <div className="mr-[4px]">
+                      {" "}
+                      <LottiePlayer
+                        animationData={serviceItem.icons.dotAnimation}
+                        width="12px"
+                        height="12px"
+                      />
+                    </div>
+                    <span className="flex-1" style={{ lineHeight: 1.4 }}>
                       <span
                         className="bold-text"
                         ref={(node) =>
-                          commonService.startComprandoCount(node, 4, 16)
+                          commonService.startViewerCount(node, viewersConfig)
                         }
                         style={{ fontVariantNumeric: "tabular-nums" }}
                       />{" "}
-                      comprando
+                      <span> viendo</span> |{" "}
+                      <span className="whitespace-nowrap">
+                        {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
+                        <span
+                          className="bold-text"
+                          ref={(node) =>
+                            commonService.startComprandoCount(node, 4, 16)
+                          }
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        />{" "}
+                        comprando
+                      </span>
                     </span>
-                  </span>
-                </div>
-                {/* <div className="flex items-center">
+                  </div>
+                  {/* <div className="flex items-center">
                   <span className="whitespace-nowrap">
                     {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
                     <span
@@ -398,9 +427,9 @@ function ServiceItemMobile({
                     comprando
                   </span>
                 </div> */}
+                </div>
               </div>
-            </div>
-            {/* <div className="flex flex-col gap-[4px]">
+              {/* <div className="flex flex-col gap-[4px]">
               <div
                 className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
               >
@@ -456,9 +485,9 @@ function ServiceItemMobile({
                 </span>
               </div>
             </div> */}
+            </div>
           </div>
-        </div>
-      )}
+        )}
       <div
         style={{
           display: "grid",

package/src/components/ServiceItem/types.ts

@@ -41,6 +41,12 @@ export interface ServiceItemProps {
     offer_text?: string;
     is_direct_trip?: boolean;
     is_dp_enabled?: boolean;
+    dp_discount_percents?: Record<string, number | string> | Array<number | string>;
+    dp_discounted_seats?: Array<string | number>;
+    original_dp_price?: Record<string, number | string> | Array<number | string>;
+    discount_type?: string;
+    discount_value?: number;
+    max_discount?: number;
     is_transpordo?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;

package/src/ui/SeatSection/SeatSection.tsx

@@ -222,14 +222,102 @@ function SeatSection({
     return renderSeatNames();
   };
 
-  const _dpSeatsFirstVal = Array.isArray(serviceItem?.dp_discounted_seats)
-    ? serviceItem.dp_discounted_seats[0]
-    : Object.values(serviceItem?.dp_discounted_seats || {})[0];
-  const _dpPercentsFirstVal = Array.isArray(serviceItem?.dp_discount_percents)
-    ? serviceItem.dp_discount_percents[0]
-    : Object.values(serviceItem?.dp_discount_percents || {})[0];
-
-  if (serviceItem?.is_dp_enabled && !_dpSeatsFirstVal && !_dpPercentsFirstVal) {
+  // const dpDiscountEntry = Object.entries(
+  //   serviceItem?.dp_discount_percents || {},
+  // ).find(([, percent]) => Number(percent));
+  const dpDiscountEntry = Object.entries(
+    serviceItem?.dp_discount_percents || {},
+  )[0];
+  const dpDiscountPercent = dpDiscountEntry?.[1];
+  const getFirstDpValue = (source: any) => {
+    if (!source) return undefined;
+    return Array.isArray(source) ? source[0] : Object.values(source)[0];
+  };
+
+  const renderDpDiscountUi = (
+    originalDpPrice: number | string,
+    seatTypeFare: number | string,
+  ) => {
+    return (
+      <div className="grid grid-cols-2 items-center text-[13.33px] relative">
+        <div className="col-start-1 row-start-2 flex items-center">
+          <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
+            Antes
+          </span>
+        </div>
+
+        <div className="col-start-1 row-start-3 flex h-[20px] items-end">
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
+            Desde
+          </span>
+        </div>
+
+        <div
+          className="col-start-2 row-start-1 flex items-center justify-center absolute"
+          style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
+        >
+          {!isNaN(Number(dpDiscountPercent)) &&
+            Number(dpDiscountPercent) > 0 && (
+              <span
+                className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
+                style={{
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {Math.round(Number(dpDiscountPercent))}% OFF
+              </span>
+            )}
+        </div>
+
+        <div
+          className="col-start-2 row-start-2 flex items-center justify-center"
+          style={{ textAlign: "center" }}
+        >
+          <span
+            className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
+            style={{ position: "relative" }}
+          >
+            {formatPrice(Number(originalDpPrice))}
+            <span
+              style={{
+                position: "absolute",
+                left: "-2px",
+                top: "50%",
+                width: "calc(100% + 4px)",
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                transform: "rotate(-10deg)",
+                transformOrigin: "center",
+              }}
+            />
+          </span>
+        </div>
+
+        <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
+          <span
+            className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
+            style={{ color: isSoldOut ? "#c0c0c0" : "#ff5964" }}
+          >
+            <div
+              className="absolute"
+              style={{ left: isPeru ? "-1px" : "-8px" }}
+            >
+              {renderIcon("fireIcon", "16px")}
+            </div>
+            {availableSeats <= 0
+              ? CommonService.currency(0, currencySign)
+              : CommonService.discountedCurrency(
+                  Number(seatTypeFare),
+                  currencySign,
+                )}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  if (serviceItem?.is_dp_enabled && !dpDiscountEntry) {
     const dpSeats = (
       removeDuplicateSeats ? uniqueSeats : sortedSeatTypes
     ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
@@ -286,99 +374,21 @@ function SeatSection({
     );
   }
 
-  if (_dpSeatsFirstVal && _dpPercentsFirstVal) {
-    const originalDpPrice = Array.isArray(serviceItem.original_dp_price)
-      ? serviceItem.original_dp_price[0]
-      : Object.values(serviceItem.original_dp_price || {})[0];
-    const dpDiscountPercent = Array.isArray(serviceItem.dp_discount_percents)
-      ? serviceItem.dp_discount_percents[0]
-      : Object.values(serviceItem.dp_discount_percents || {})[0];
-    const seatTypeFare = serviceItem.seat_types?.[0]?.fare;
+  if (dpDiscountEntry) {
+    const originalDpPrice = getFirstDpValue(serviceItem.original_dp_price);
+    const seatTypeFare = serviceItem.seat_types?.[0]?.fare ?? originalDpPrice;
 
     if (originalDpPrice && seatTypeFare) {
-      return (
-        <div className="grid grid-cols-2 items-center text-[13.33px] relative">
-          <div className="col-start-1 row-start-2 flex items-center">
-            <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
-              Antes
-            </span>
-          </div>
-
-          <div className="col-start-1 row-start-3 flex h-[20px] items-end">
-            <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
-              Desde
-            </span>
-          </div>
-
-          <div
-            className="col-start-2 row-start-1 flex items-center justify-center absolute"
-            style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
-          >
-            {!isNaN(Number(dpDiscountPercent)) &&
-              Number(dpDiscountPercent) > 0 && (
-                <span
-                  className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
-                  style={{
-                    animation: "pulse-zoom 2s ease-in-out infinite",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {Math.round(Number(dpDiscountPercent))}% OFF
-                </span>
-              )}
-          </div>
-
-          <div
-            className="col-start-2 row-start-2 flex items-center justify-center"
-            style={{ textAlign: "center" }}
-          >
-            <span
-              className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
-              style={{ position: "relative" }}
-            >
-              {formatPrice(Number(originalDpPrice))}
-              <span
-                style={{
-                  position: "absolute",
-                  left: "-2px",
-                  top: "50%",
-                  width: "calc(100% + 4px)",
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  transform: "rotate(-10deg)",
-                  transformOrigin: "center",
-                }}
-              />
-            </span>
-          </div>
-
-          <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
-            <span
-              className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
-              style={{ color: isSoldOut ? "#c0c0c0" : "#ff5964" }}
-            >
-              <div
-                className="absolute"
-                style={{ left: isPeru ? "-1px" : "-8px" }}
-              >
-                {renderIcon("fireIcon", "16px")}
-              </div>
-              {availableSeats <= 0
-                ? CommonService.currency(0, currencySign)
-                : CommonService.discountedCurrency(
-                    Number(seatTypeFare),
-                    currencySign,
-                  )}
-            </span>
-          </div>
-        </div>
-      );
+      return renderDpDiscountUi(originalDpPrice, seatTypeFare);
     }
   }
 
   if (hasDiscount && discountSeat) {
     return (
-      <div className="grid grid-cols-2 items-center text-[13.33px] relative">
+      <div
+        className="grid grid-cols-2 items-center text-[13.33px] relative"
+        style={{ opacity: isSoldOut ? 0.5 : 1 }}
+      >
         <div className="col-start-1 row-start-2 flex items-center">
           <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
             Antes

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -368,7 +368,9 @@ function SeatSectionMobile({
 
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
-      {serviceItem?.is_dp_enabled && !originalDpPrice && !dpDiscountPercent ? (
+      {serviceItem?.is_dp_enabled &&
+      !serviceItem?.dp_discounted_seats?.length &&
+      !dpDiscountPercent ? (
         <div
           className="flex flex-col justify-between h-[2.5rem]"
           style={{ gap: isSoldOut ? "0px" : "5px" }}
@@ -453,81 +455,78 @@ function SeatSectionMobile({
           ) : null}
         </div>
       ) : hasDiscount && discountSeat ? (
-        <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
-          {discountValue != null && (
-            <div
-              className="absolute -top-[18px] right-[0px]"
-              style={{
-                animation: "pulse-zoom 2s ease-in-out infinite",
-              }}
-            >
-              <span
-                className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
+        <div>
+          <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
+            {discountValue != null && (
+              <div
+                className="absolute -top-[18px] right-[0px]"
                 style={{
-                  backgroundColor: tooltipBgColor,
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  opacity: isSoldOut ? 0.5 : 1,
                 }}
               >
-                {discountValue}% OFF
-              </span>
-            </div>
-          )}
+                <span
+                  className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
+                  style={{
+                    backgroundColor: tooltipBgColor,
+                  }}
+                >
+                  {discountValue}% OFF
+                </span>
+              </div>
+            )}
 
-          <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
-            Antes
-          </span>
-          <span
-            className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
-            style={{
-              position: "relative",
-              display: "inline-block",
-              overflow: "hidden",
-            }}
-          >
-            {commonService.currency(discountSeat.originalPrice, currencySign)}
+            <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
+              Antes
+            </span>
             <span
+              className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
               style={{
-                position: "absolute",
-                top: "35%",
-                left: "50%",
-                width: "80%",
-                height: "1px",
-                background: "#9f9f9f",
-                transform: "rotate(-12deg)",
-                transformOrigin: "center",
+                position: "relative",
+                display: "inline-block",
+                overflow: "hidden",
               }}
-            />
-          </span>
-
-          <span
-            className="min-[420]:text-[13px] text-[12px] leading-[24px]"
-            style={{ color: isSoldOut ? "#bbb" : "#464647" }}
-          >
-            Desde
-          </span>
-          <span
-            className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
-            style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
-          >
-            {serviceItem?.icons?.fireIcon ? (
-              <img
-                src={serviceItem.icons.fireIcon}
-                alt="discount"
-                className="h-[16px] w-[16px] object-contain"
-                style={{ filter: isSoldOut ? "grayscale" : "" }}
+            >
+              {commonService.currency(discountSeat.originalPrice, currencySign)}
+              <span
+                style={{
+                  position: "absolute",
+                  top: "35%",
+                  left: "50%",
+                  width: "80%",
+                  height: "1px",
+                  background: "#9f9f9f",
+                  transform: "rotate(-12deg)",
+                  transformOrigin: "center",
+                }}
               />
-            ) : null}
-            {/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
-            {commonService.discountedCurrency(
-              discountSeat.discountedPrice,
-              currencySign,
-            )}
-          </span>
+            </span>
 
-          {isSoldOut ? (
-            <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
-              Agotado
+            <span
+              className="min-[420]:text-[13px] text-[12px] leading-[24px]"
+              style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+            >
+              Desde
             </span>
-          ) : null}
+            <span
+              className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
+              style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
+            >
+              {serviceItem?.icons?.fireIcon ? (
+                <img
+                  src={serviceItem.icons.fireIcon}
+                  alt="discount"
+                  className="h-[16px] w-[16px] object-contain"
+                  style={{ opacity: isSoldOut ? 0.5 : 1 }}
+                />
+              ) : null}
+              {/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
+              {commonService.discountedCurrency(
+                discountSeat.discountedPrice,
+                currencySign,
+              )}
+            </span>
+          </div>
         </div>
       ) : (
         <div
@@ -538,21 +537,6 @@ function SeatSectionMobile({
           }}
         >
           {renderSeats()}
-          {showLastSeats ? (
-            <div className="flex justify-end  ">
-              {serviceItem?.available_seats < 10 &&
-                serviceItem?.available_seats > 0 && (
-                  <div
-                    className="text-[10px] text-center"
-                    style={{
-                      color: tooltipBgColor,
-                    }}
-                  >
-                    ¡ Últimos Asientos!
-                  </div>
-                )}
-            </div>
-          ) : null}
 
           {isSoldOut ? (
             <div className="flex justify-end">