kupos-ui-components-lib 9.5.8 → 9.6.0

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -349,15 +349,111 @@ function SeatSectionMobile({
       ? Math.round(serviceItem.discount_value)
       : null;
 
+  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 firstSeatFare = seatTypesData?.filter(
+    (item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label),
+  )?.[0]?.fare;
+
+  const hasDpDiscount =
+    serviceItem?.dp_discounted_seats &&
+    serviceItem?.dp_discount_percents &&
+    originalDpPrice != null &&
+    dpDiscountPercent != null &&
+    firstSeatFare != null;
+
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
-      {serviceItem?.is_dp_enabled ? (
+      {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" }}
         >
           {renderDpSeats()}
         </div>
+      ) : hasDpDiscount ? (
+        <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
+          {!isNaN(Number(dpDiscountPercent)) &&
+            Number(dpDiscountPercent) > 0 && (
+              <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]"
+                  style={{
+                    backgroundColor: tooltipBgColor,
+                  }}
+                >
+                  {Math.round(Number(dpDiscountPercent))}% 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(Number(originalDpPrice), currencySign)}
+            <span
+              style={{
+                position: "absolute",
+                top: "35%",
+                left: "50%",
+                width: "80%",
+                height: "1px",
+                background: "#9f9f9f",
+                transform: "rotate(-12deg)",
+                transformOrigin: "center",
+              }}
+            />
+          </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" : "" }}
+              />
+            ) : null}
+            {commonService.discountedCurrency(
+              Number(firstSeatFare),
+              currencySign,
+            )}
+          </span>
+
+          {isSoldOut ? (
+            <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
+              Agotado
+            </span>
+          ) : null}
+        </div>
       ) : hasDiscount && discountSeat ? (
         <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
           {discountValue != null && (