kupos-ui-components-lib 9.6.3 → 9.6.5

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -30,6 +30,7 @@ interface SeatSectionMobileProps {
   serviceItem?: any;
   tooltipBgColor?: string;
   showLastSeats?: boolean;
+  discountSeatPriceColor?: string;
 }
 
 interface SeatRowProps {
@@ -116,8 +117,8 @@ function SeatSectionMobile({
   serviceItem,
   tooltipBgColor,
   showLastSeats,
+  discountSeatPriceColor,
 }: SeatSectionMobileProps): React.ReactElement {
-  console.log("🚀 ~ SeatSectionMobile ~ serviceItem:", serviceItem);
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
   const getFare = (fare: number) => {
@@ -244,21 +245,6 @@ function SeatSectionMobile({
             {commonService.currency(discountedPrice, currencySign)}
           </span>
         </div>
-        {/* {showLastSeats ? (
-          <div className="flex justify-end">
-            {serviceItem?.available_seats < 10 &&
-              serviceItem?.available_seats > 0 && (
-                <div
-                  className="text-[10px]  text-center mt-[3px]"
-                  style={{
-                    color: tooltipBgColor,
-                  }}
-                >
-                  ¡Últimos Asientos!
-                </div>
-              )}
-          </div>
-        ) : null} */}
         {isSoldOut ? (
           <div className="flex justify-end">
             <span
@@ -344,21 +330,40 @@ function SeatSectionMobile({
           ?.filter((seat) => !EXCEPTIONS.includes(seat.label))
           ?.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
 
-  const discountValue =
-    serviceItem?.discount_type === "percentage" &&
-    typeof serviceItem?.discount_value === "number"
-      ? Math.round(serviceItem.discount_value)
-      : null;
+  const discountValue = (() => {
+    if (
+      serviceItem?.discount_type === "percentage" &&
+      typeof serviceItem?.discount_value === "number"
+    ) {
+      return Math.round(serviceItem.discount_value);
+    }
+    if (serviceItem?.discount_type === "fixed" && discountSeat) {
+      const { originalPrice, discountedPrice } = discountSeat;
+      if (originalPrice > 0 && originalPrice !== discountedPrice) {
+        return Math.round(
+          ((originalPrice - discountedPrice) / originalPrice) * 100,
+        );
+      }
+    }
+    return 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 getMinValue = (data: any): number | undefined => {
+    const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(
+      Number,
+    );
+    if (!vals.length) return undefined;
+    const min = Math.min(...vals);
+    return isFinite(min) ? min : undefined;
+  };
+  const originalDpPrice = getMinValue(serviceItem?.original_dp_price);
+  const dpDiscountPercent = getMinValue(serviceItem?.dp_discount_percents);
+  const firstSeatFare = seatTypesData
+    ?.filter(
+      (item) =>
+        getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label),
+    )
+    ?.sort((a, b) => a.fare - b.fare)[0]?.fare;
 
   const hasDpDiscount =
     serviceItem?.dp_discounted_seats &&
@@ -433,7 +438,9 @@ function SeatSectionMobile({
           </span>
           <span
             className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
-            style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
+            style={{
+              color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
+            }}
           >
             {serviceItem?.icons?.fireIcon ? (
               <img
@@ -511,7 +518,9 @@ function SeatSectionMobile({
             </span>
             <span
               className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
-              style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
+              style={{
+                color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
+              }}
             >
               {serviceItem?.icons?.fireIcon ? (
                 <img