kupos-ui-components-lib 10.4.29 → 10.4.30

package/src/ui/SeatSection/PeruSeatSection.tsx

@@ -236,14 +236,19 @@ function PeruSeatSection({
     .filter((seat) => !SEAT_EXCEPTIONS.includes(seat.label))
     .sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
 
+  // discount_type/discount_value/max_discount live on the service item
+  // itself; only ui_type and the ready-made badge text come from discounts[0].
+  const peruDiscount = serviceItem?.discounts?.[0];
+  const uiType = peruDiscount?.ui_type;
+  const discountType = serviceItem?.discount_type;
+  const discountValueRaw = serviceItem?.discount_value;
+  const maxDiscount = serviceItem?.max_discount;
+
   const discountValue = (() => {
-    if (
-      serviceItem?.discount_type === "percentage" &&
-      typeof serviceItem?.discount_value === "number"
-    ) {
-      return Math.round(serviceItem.discount_value);
+    if (discountType === "percentage" && typeof discountValueRaw === "number") {
+      return Math.round(discountValueRaw);
     }
-    if (serviceItem?.discount_type === "fixed" && discountSeat) {
+    if (discountType === "fixed" && discountSeat) {
       const { originalPrice, discountedPrice } = discountSeat;
       if (originalPrice > 0 && originalPrice !== discountedPrice) {
         return Math.round(
@@ -255,21 +260,30 @@ function PeruSeatSection({
   })();
 
   const isMaxDiscountApplied = (() => {
-    const { discount_type, discount_value, max_discount } = serviceItem ?? {};
     if (
-      discount_type === "percentage" &&
-      typeof discount_value === "number" &&
-      max_discount != null &&
-      max_discount > 0 &&
+      discountType === "percentage" &&
+      typeof discountValueRaw === "number" &&
+      maxDiscount != null &&
+      maxDiscount > 0 &&
       discountSeat
     ) {
       const rawPercentageDiscount =
-        (discountSeat.originalPrice * discount_value) / 100;
-      return rawPercentageDiscount > max_discount;
+        (discountSeat.originalPrice * discountValueRaw) / 100;
+      return rawPercentageDiscount > maxDiscount;
     }
     return false;
   })();
 
+  // Backend-provided ready-made badge text (e.g. "30% OFF" / "$2.000 OFF")
+  // takes precedence over the value computed client-side.
+  const discountBadgeText =
+    peruDiscount?.discount_display_badge ||
+    (isMaxDiscountApplied
+      ? `${CommonService.currency(maxDiscount)} OFF`
+      : discountValue != null
+        ? `${discountValue}% OFF`
+        : null);
+
   const renderLabels = () => {
     const isMovilBus =
       serviceItem?.operator_service_name === "MovilBus" ||
@@ -363,6 +377,41 @@ function PeruSeatSection({
   };
 
   if (hasDiscount && discountSeat) {
+    // 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>
+      );
+    }
+
     return (
       <div
         className="grid grid-cols-2 items-center text-[13.33px] relative"
@@ -384,7 +433,7 @@ function PeruSeatSection({
           className="col-start-2 row-start-1 flex items-center justify-center absolute"
           style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
         >
-          {discountValue != null || isMaxDiscountApplied ? (
+          {discountBadgeText ? (
             <span
               className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
               style={{
@@ -393,9 +442,7 @@ function PeruSeatSection({
                 backgroundColor: discountSeatPriceColor,
               }}
             >
-              {isMaxDiscountApplied
-                ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
-                : `${discountValue}% OFF`}
+              {discountBadgeText}
             </span>
           ) : null}
         </div>

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -478,6 +478,16 @@ function SeatSectionMobile({
     return false;
   })();
 
+  // Backend-provided ready-made badge text (e.g. "30% OFF" / "$2.000 OFF")
+  // takes precedence over the value computed client-side.
+  const discountBadgeText =
+    serviceItem?.discounts?.[0]?.discount_display_badge ||
+    (isMaxDiscountApplied
+      ? `${commonService.currency(serviceItem?.max_discount)} OFF`
+      : discountValue != null
+        ? `${discountValue}% OFF`
+        : null);
+
   const getMinValue = (data: any): number | undefined => {
     const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(
       Number,
@@ -595,59 +605,56 @@ function SeatSectionMobile({
       ) : hasDiscount && discountSeat ? (
         <div>
           <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
-            {serviceItem?.ui_type !== 1 &&
-              (discountValue != null || isMaxDiscountApplied) && (
-                <>
-                  <div
-                    className="absolute -top-[18px] right-[0px]"
+            {serviceItem?.ui_type !== 1 && discountBadgeText && (
+              <>
+                <div
+                  className="absolute -top-[18px] right-[0px]"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    opacity: isSoldOut ? 0.5 : 1,
+                  }}
+                >
+                  <span
+                    className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
                     style={{
-                      animation: "pulse-zoom 2s ease-in-out infinite",
-                      opacity: isSoldOut ? 0.5 : 1,
+                      backgroundColor: tooltipBgColor,
                     }}
                   >
-                    <span
-                      className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
-                      style={{
-                        backgroundColor: tooltipBgColor,
-                      }}
-                    >
-                      {isMaxDiscountApplied
-                        ? `${commonService.currency(serviceItem?.max_discount)} OFF`
-                        : `${discountValue}% OFF`}
-                    </span>
-                  </div>
-
-                  <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
-                    Antes
+                    {discountBadgeText}
                   </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-right "
+                  style={{
+                    position: "relative",
+                    display: "inline-block",
+                    overflow: "hidden",
+                    color: discountSeatPriceColor,
+                  }}
+                >
+                  {commonService.currency(
+                    discountSeat.originalPrice,
+                    currencySign,
+                  )}
                   <span
-                    className="min-[420]:text-[13px] text-[12px] leading-[20px] text-right"
                     style={{
-                      position: "relative",
-                      display: "inline-block",
-                      overflow: "hidden",
-                      color: discountSeatPriceColor,
+                      position: "absolute",
+                      top: "35%",
+                      left: "50%",
+                      width: "80%",
+                      height: "1px",
+                      background: discountSeatCrossPriceColor,
+                      transform: "rotate(-12deg)",
+                      transformOrigin: "center",
                     }}
-                  >
-                    {commonService.currency(
-                      discountSeat.originalPrice,
-                      currencySign,
-                    )}
-                    <span
-                      style={{
-                        position: "absolute",
-                        top: "35%",
-                        left: "50%",
-                        width: "80%",
-                        height: "1px",
-                        background: discountSeatCrossPriceColor,
-                        transform: "rotate(-12deg)",
-                        transformOrigin: "center",
-                      }}
-                    />
-                  </span>
-                </>
-              )}
+                  />
+                </span>
+              </>
+            )}
 
             <span
               className="min-[420]:text-[13px] text-[12px] leading-[24px]"