kupos-ui-components-lib 10.4.39 → 10.4.41

package/dist/components/DiscountBanners/DiscountBannerMobile.js

@@ -120,6 +120,9 @@ class DiscountBannersMobile extends React.Component {
                 React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt
                         ? undefined
                         : { backgroundColor: "rgba(255,255,255,0.55)" } }, label),
+                showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
+                    card.amount,
+                    React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
                 React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
                     React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.discountLabel),
                     React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.subtitle))));

package/dist/ui/DiscountBanners/defaultBackgrounds.js

@@ -1,12 +1,13 @@
-import greenArt from "../../assets/images/discount/instant.png";
+import greenArt from "../../assets/images/discount/green_new.png";
 import yellowArt from "../../assets/images/discount/yellow.png";
 import blueArt from "../../assets/images/discount/blue.png";
-import lastMinuteArt from "../../assets/images/discount/last.png";
-import firstTimeArt from "../../assets/images/discount/first.png";
+import lastMinuteArt from "../../assets/images/discount/last_minute.png";
+import firstTimeArt from "../../assets/images/discount/purple.png";
 import cashbackArt from "../../assets/images/discount/cash.png";
-import roundTripArt from "../../assets/images/discount/round.png";
-import promoCodeArt from "../../assets/images/discount/promo.png";
+import roundTripArt from "../../assets/images/discount/green_rt.png";
+import promoCodeArt from "../../assets/images/discount/yellow.png";
 import seatLevelArt from "../../assets/images/discount/seat.png";
+import instantArt from "../../assets/images/discount/yellow_instant.png";
 export function toImageUrl(art) {
     if (typeof art === "string")
         return art;
@@ -27,11 +28,11 @@ export const DEFAULT_BACKGROUND_IMAGES = [
     blueArt,
 ].map(toImageUrl);
 export const CAMPAIGN_ART = {
-    last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
-    first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
+    last_minute: { image: toImageUrl(lastMinuteArt), accent: "#1633DB" },
+    first_time: { image: toImageUrl(firstTimeArt), accent: "#FB488E" },
     cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
-    round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
-    instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
+    round_trip: { image: toImageUrl(roundTripArt), accent: "#107E23" },
+    instant_discount: { image: toImageUrl(instantArt), accent: "#FDA105" },
     seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
-    promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
+    promo_code: { image: toImageUrl(promoCodeArt), accent: "#FFC000" },
 };

package/dist/ui/SeatSection/PeruSeatSection.js

@@ -117,9 +117,15 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
         // Single seat type → original behaviour (one lowest-fare price)
         const allSeats = getAllSeatTypes(seatTypes);
         const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
-        const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
+        const { originalPrice, discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+        const price = (React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(showOriginalFare ? originalPrice : discountedPrice)));
+        // Inclination fares sit under "Desde", same as the stacked rows above.
+        if (hasInclination) {
+            return (React.createElement("div", { className: "relative" },
+                React.createElement("span", { className: "text-[12px] font-normal text-[#6a6a6a] absolute", style: { top: "-15px" } }, "Desde"),
+                price));
+        }
+        return price;
     };
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
     const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
@@ -134,6 +140,7 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
     // Tier B (ui_type 1) announces the offer elsewhere, so the fare itself must
     // render exactly as it would with no discount.
     const showOriginalFare = hasDiscount && uiType === 1;
+    const hasStrikeOff = hasDiscount && !showOriginalFare;
     const discountType = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type;
     const discountValueRaw = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value;
     const maxDiscount = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount;
@@ -189,35 +196,20 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
                 : filteredSeats[0].label
             : null;
         return (React.createElement(React.Fragment, null,
-            hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
+            hasStrikeOff && (React.createElement("span", { className: "text-[13.33px]", style: {
                     color: "#999",
                 } }, "Antes")),
-            React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center", style: {
+            React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasStrikeOff ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center", style: {
                     opacity: isSoldOut ? 0.5 : 1,
                 } },
-                isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
+                isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
                         width: "20px",
                         height: "20px",
                         marginRight: "5px",
                     } })),
                 CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
     };
-    if (hasDiscount && discountSeat && !(uiType === 1 && showSeatTypeRows)) {
-        // Tier B (ui_type 1): offer text is announced elsewhere, but the fare
-        // itself must render exactly as it would with no discount — no
-        // strike-off, no badge, no fire icon.
-        if (uiType === 1) {
-            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-3 flex h-[20px] items-end" },
-                    React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, discountSeat.label)),
-                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] bold-text leading-[30px]", style: {
-                            color: isSoldOut ? "#c0c0c0" : "#464647",
-                            fontSize: "13.33px",
-                        } }, availableSeats <= 0
-                        ? CommonService.currency(0, currencySign)
-                        : CommonService.discountedCurrency(discountSeat.originalPrice, currencySign)))));
-        }
+    if (hasDiscount && discountSeat && uiType !== 1) {
         return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
             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")),

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -94,18 +94,20 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 })));
         }
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
+        const hasStrikeOff = originalPrice !== discountedPrice && !showOriginalFare;
         const seatLabel = uniqueSeats.length > 0
             ? commonService.truncateSeatLabel(uniqueSeats[0].label)
             : null;
         return (React.createElement(React.Fragment, null,
-            originalPrice !== discountedPrice && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
+            hasStrikeOff && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
-            React.createElement("div", { className: "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" } }, originalPrice !== discountedPrice
+            React.createElement("div", { className: "relative w-[100%] flex flex-row justify-between items-center" },
+                hasInclination && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, hasStrikeOff
                     ? "Desde"
                     : commonService.capitalize(seatLabel) || "Desde"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {
         var _a;
@@ -254,55 +256,55 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             } },
             ((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.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 &&
-        !(isPeru && showSeatTypeRows && isOfferTextOnlyTier) ? (React.createElement("div", null,
-        React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
-                        animation: "pulse-zoom 2s ease-in-out infinite",
-                        opacity: isSoldOut ? 0.5 : 1,
-                    } },
-                    React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
-                            backgroundColor: tooltipBgColor,
-                        } }, discountBadgeText)),
-                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-right ", style: {
-                        position: "relative",
-                        display: "inline-block",
-                        overflow: "hidden",
-                        color: discountSeatPriceColor,
+        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
+        // colours and "Desde" as a service with no discount, original fare.
+        hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (React.createElement("div", null,
+            React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
+                            animation: "pulse-zoom 2s ease-in-out infinite",
+                            opacity: isSoldOut ? 0.5 : 1,
+                        } },
+                        React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
+                                backgroundColor: tooltipBgColor,
+                            } }, discountBadgeText)),
+                    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-right ", style: {
+                            position: "relative",
+                            display: "inline-block",
+                            overflow: "hidden",
+                            color: discountSeatPriceColor,
+                        } },
+                        commonService.currency(discountSeat.originalPrice, currencySign),
+                        React.createElement("span", { style: {
+                                position: "absolute",
+                                top: "35%",
+                                left: "50%",
+                                width: "80%",
+                                height: "1px",
+                                background: discountSeatCrossPriceColor,
+                                transform: "rotate(-12deg)",
+                                transformOrigin: "center",
+                            } })))),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
+                    ? commonService.capitalize(commonService.truncateSeatLabel(discountSeat.label))
+                    : "Desde"),
+                React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
+                        color: isSoldOut
+                            ? "#bbb"
+                            : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
+                                ? "#464647"
+                                : discountSeatPriceColor || "#ff5964",
                     } },
-                    commonService.currency(discountSeat.originalPrice, currencySign),
-                    React.createElement("span", { style: {
-                            position: "absolute",
-                            top: "35%",
-                            left: "50%",
-                            width: "80%",
-                            height: "1px",
-                            background: discountSeatCrossPriceColor,
-                            transform: "rotate(-12deg)",
-                            transformOrigin: "center",
-                        } })))),
-            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
-                ? commonService.capitalize(commonService.truncateSeatLabel(discountSeat.label))
-                : "Desde"),
-            React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
-                    color: isSoldOut
-                        ? "#bbb"
-                        : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
-                            ? "#464647"
-                            : discountSeatPriceColor || "#ff5964",
-                } },
-                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.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((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
-                    ? discountSeat.originalPrice
-                    : discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
-            gap: isSoldOut ? "0px" : "5px",
-            justifyContent: hasMultipleTypes ? "space-between" : "center",
-        } },
-        renderSeats(),
-        isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
-            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.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((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
+                        ? discountSeat.originalPrice
+                        : discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
+                gap: isSoldOut ? "0px" : "5px",
+                justifyContent: hasMultipleTypes ? "space-between" : "center",
+            } },
+            renderSeats(),
+            isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
 }
 export default SeatSectionMobile;

package/package.json

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

package/src/components/DiscountBanners/DiscountBannerMobile.tsx

@@ -190,7 +190,7 @@ class DiscountBannersMobile extends React.Component<
               >
                 {label}
               </span>
-              {/* {showFlamePercent && (
+              {showFlamePercent && (
                 <span
                   className={`bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`}
                   style={{
@@ -209,7 +209,7 @@ class DiscountBannersMobile extends React.Component<
                     %
                   </span>
                 </span>
-              )} */}
+              )}
               <span className={`flex flex-col ${sizeClasses.column}`}>
                 <span
                   className={`bold-text text-[#464647] ${sizeClasses.discount}`}

package/src/ui/DiscountBanners/defaultBackgrounds.ts

@@ -1,13 +1,13 @@
-import greenArt from "../../assets/images/discount/instant.png";
+import greenArt from "../../assets/images/discount/green_new.png";
 import yellowArt from "../../assets/images/discount/yellow.png";
 import blueArt from "../../assets/images/discount/blue.png";
-import lastMinuteArt from "../../assets/images/discount/last.png";
-import firstTimeArt from "../../assets/images/discount/first.png";
+import lastMinuteArt from "../../assets/images/discount/last_minute.png";
+import firstTimeArt from "../../assets/images/discount/purple.png";
 import cashbackArt from "../../assets/images/discount/cash.png";
-import roundTripArt from "../../assets/images/discount/round.png";
-import promoCodeArt from "../../assets/images/discount/promo.png";
+import roundTripArt from "../../assets/images/discount/green_rt.png";
+import promoCodeArt from "../../assets/images/discount/yellow.png";
 import seatLevelArt from "../../assets/images/discount/seat.png";
-import instantArt from "../../assets/images/discount/instant.png";
+import instantArt from "../../assets/images/discount/yellow_instant.png";
 
 export type ImageRef =
   | string
@@ -32,11 +32,11 @@ export const DEFAULT_BACKGROUND_IMAGES: string[] = [
 ].map(toImageUrl);
 
 export const CAMPAIGN_ART: Record<string, { image: string; accent: string }> = {
-  last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
-  first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
+  last_minute: { image: toImageUrl(lastMinuteArt), accent: "#1633DB" },
+  first_time: { image: toImageUrl(firstTimeArt), accent: "#FB488E" },
   cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
-  round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
-  instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
+  round_trip: { image: toImageUrl(roundTripArt), accent: "#107E23" },
+  instant_discount: { image: toImageUrl(instantArt), accent: "#FDA105" },
   seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
-  promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
+  promo_code: { image: toImageUrl(promoCodeArt), accent: "#FFC000" },
 };

package/src/ui/SeatSection/PeruSeatSection.tsx

@@ -211,18 +211,30 @@ function PeruSeatSection({
     // Single seat type → original behaviour (one lowest-fare price)
     const allSeats = getAllSeatTypes(seatTypes);
     const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
-    const { discountedPrice } = CommonService.calculateDiscountedPrice(
-      lowestFare,
-      serviceItem,
+    const { originalPrice, discountedPrice } =
+      CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+    const price = (
+      <span className="flex items-center text-[13.33px] bold-text">
+        {formatPrice(showOriginalFare ? originalPrice : discountedPrice)}
+      </span>
     );
 
-    return (
-      <>
-        <span className="flex items-center text-[13.33px] bold-text">
-          {formatPrice(discountedPrice)}
-        </span>
-      </>
-    );
+    // Inclination fares sit under "Desde", same as the stacked rows above.
+    if (hasInclination) {
+      return (
+        <div className="relative">
+          <span
+            className="text-[12px] font-normal text-[#6a6a6a] absolute"
+            style={{ top: "-15px" }}
+          >
+            Desde
+          </span>
+          {price}
+        </div>
+      );
+    }
+
+    return price;
   };
 
   const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
@@ -246,6 +258,7 @@ function PeruSeatSection({
   // Tier B (ui_type 1) announces the offer elsewhere, so the fare itself must
   // render exactly as it would with no discount.
   const showOriginalFare = hasDiscount && uiType === 1;
+  const hasStrikeOff = hasDiscount && !showOriginalFare;
   const discountType = serviceItem?.discount_type;
   const discountValueRaw = serviceItem?.discount_value;
   const maxDiscount = serviceItem?.max_discount;
@@ -331,7 +344,7 @@ function PeruSeatSection({
 
     return (
       <>
-        {hasDiscount && (
+        {hasStrikeOff && (
           <span
             className="text-[13.33px]"
             style={{
@@ -343,14 +356,14 @@ function PeruSeatSection({
         )}
 
         <span className="text-[13.33px] flex flex-col">
-          {!hasDiscount ? (
+          {!hasStrikeOff ? (
             <span
               className="text-[13.33px] whitespace-nowrap flex items-center"
               style={{
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
-              {isSeatIcon && !hasDiscount && (
+              {isSeatIcon && (
                 <img
                   src={
                     getSeatTypeIcon(
@@ -376,42 +389,8 @@ function PeruSeatSection({
     );
   };
 
-  if (hasDiscount && discountSeat && !(uiType === 1 && showSeatTypeRows)) {
-    // Tier B (ui_type 1): offer text is announced elsewhere, but the fare
-    // itself must render exactly as it would with no discount — no
-    // strike-off, no badge, no fire icon.
-    if (uiType === 1) {
-      return (
-        <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-3 flex h-[20px] items-end">
-            <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
-              {discountSeat.label}
-            </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] bold-text leading-[30px]"
-              style={{
-                color: isSoldOut ? "#c0c0c0" : "#464647",
-                fontSize: "13.33px",
-              }}
-            >
-              {availableSeats <= 0
-                ? CommonService.currency(0, currencySign)
-                : CommonService.discountedCurrency(
-                    discountSeat.originalPrice,
-                    currencySign,
-                  )}
-            </span>
-          </div>
-        </div>
-      );
-    }
 
+  if (hasDiscount && discountSeat && uiType !== 1) {
     return (
       <div
         className="grid grid-cols-2 items-center text-[13.33px] relative"

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -230,6 +230,7 @@ function SeatSectionMobile({
 
     const { originalPrice, discountedPrice } =
       commonService.calculateDiscountedPrice(lowestFare, serviceItem);
+    const hasStrikeOff = originalPrice !== discountedPrice && !showOriginalFare;
 
     const seatLabel =
       uniqueSeats.length > 0
@@ -238,7 +239,7 @@ function SeatSectionMobile({
 
     return (
       <>
-        {originalPrice !== discountedPrice && (
+        {hasStrikeOff && (
           <div className="w-[100%] flex flex-row justify-between items-center">
             <span
               className="min-[420]:text-[13px] text-[12px]"
@@ -254,12 +255,21 @@ function SeatSectionMobile({
             </span>
           </div>
         )}
-        <div className="w-[100%] flex flex-row justify-between items-center">
+        <div className="relative w-[100%] flex flex-row justify-between items-center">
+          {/* Inclination fares sit under "Desde", same as the stacked rows above. */}
+          {hasInclination && !hasStrikeOff && (
+            <span
+              className="min-[420]:text-[13px] text-[12px] absolute"
+              style={{ color: "#6a6a6a", top: -20, right: 0 }}
+            >
+              Desde
+            </span>
+          )}
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"
             style={{ color: isSoldOut ? "#bbb" : "#464647" }}
           >
-            {originalPrice !== discountedPrice
+            {hasStrikeOff
               ? "Desde"
               : commonService.capitalize(seatLabel) || "Desde"}
           </span>
@@ -267,7 +277,10 @@ function SeatSectionMobile({
             className="min-[420]:text-[13px] text-[12px] bold-text"
             style={{ color: priceColor }}
           >
-            {commonService.currency(discountedPrice, currencySign)}
+            {commonService.currency(
+              showOriginalFare ? originalPrice : discountedPrice,
+              currencySign,
+            )}
           </span>
         </div>
       </>
@@ -594,9 +607,9 @@ function SeatSectionMobile({
             </span>
           ) : null}
         </div>
-      ) : hasDiscount &&
-        discountSeat &&
-        !(isPeru && showSeatTypeRows && isOfferTextOnlyTier) ? (
+      ) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
+      // colours and "Desde" as a service with no discount, original fare.
+      hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (
         <div>
           <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
             {serviceItem?.ui_type !== 1 && discountBadgeText && (