kupos-ui-components-lib 9.6.2 → 9.6.4

package/src/ui/SeatSection/SeatSection.tsx

@@ -20,6 +20,7 @@ interface SeatSectionProps {
   isPeru?: boolean;
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
+  discountSeatPriceColor?: string;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -100,6 +101,7 @@ function SeatSection({
   serviceItem,
   renderIcon,
   dpSeatColor,
+  discountSeatPriceColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -193,11 +195,23 @@ function SeatSection({
     .filter((seat) => !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 renderLabels = () => {
     if (isPeru) {
@@ -227,11 +241,15 @@ function SeatSection({
   // ).find(([, percent]) => Number(percent));
   const dpDiscountEntry = Object.entries(
     serviceItem?.dp_discount_percents || {},
-  )[0];
+  ).sort(([, a], [, b]) => Number(a) - Number(b))[0];
   const dpDiscountPercent = dpDiscountEntry?.[1];
-  const getFirstDpValue = (source: any) => {
+  const getLowestDpValue = (source: any): number | undefined => {
     if (!source) return undefined;
-    return Array.isArray(source) ? source[0] : Object.values(source)[0];
+    const values: any[] = Array.isArray(source)
+      ? source
+      : Object.values(source);
+    const nums = values.map(Number).filter((n) => !isNaN(n) && n > 0);
+    return nums.length > 0 ? Math.min(...nums) : undefined;
   };
 
   const renderDpDiscountUi = (
@@ -301,7 +319,7 @@ function SeatSection({
           >
             <div
               className="absolute"
-              style={{ left: isPeru ? "-1px" : "-8px" }}
+              style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
             >
               {renderIcon("fireIcon", "16px")}
             </div>
@@ -339,7 +357,7 @@ function SeatSection({
         </div>
         <div>
           <div className="relative">
-            <div className="absolute -left-[20px] top-1/2 transform -translate-y-1/2">
+            <div className="absolute -left-[20px] top-1/3 transform -translate-y-1/2">
               {renderIcon("fireIcon", "16px")}
             </div>
             <div
@@ -375,8 +393,12 @@ function SeatSection({
   }
 
   if (dpDiscountEntry) {
-    const originalDpPrice = getFirstDpValue(serviceItem.original_dp_price);
-    const seatTypeFare = serviceItem.seat_types?.[0]?.fare ?? originalDpPrice;
+    const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
+    const allFares = (serviceItem.seat_types ?? [])
+      .map((st: any) => st.fare)
+      .filter((f: any) => f != null && !isNaN(Number(f)));
+    const seatTypeFare =
+      allFares.length > 0 ? Math.min(...allFares) : originalDpPrice;
 
     if (originalDpPrice && seatTypeFare) {
       return renderDpDiscountUi(originalDpPrice, seatTypeFare);
@@ -411,6 +433,7 @@ function SeatSection({
               style={{
                 animation: "pulse-zoom 2s ease-in-out infinite",
                 whiteSpace: "nowrap",
+                backgroundColor: discountSeatPriceColor,
               }}
             >
               {discountValue}% OFF
@@ -447,13 +470,14 @@ function SeatSection({
         <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" }}
+            style={{ color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor }}
           >
             {/* <span className="text-[18px] leading-[24px]">🔥</span> */}
             <div
               className="absolute"
               style={{
-                left: isPeru ? "-1px" : "-8px",
+                left: isPeru ? "-1px" : "-18px",
+                bottom:"1px"
               }}
             >
               {renderIcon("fireIcon", "16px")}

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -22,6 +22,9 @@ interface BottomAmenitiesMobileProps {
   onDropdownToggle: () => void;
   isItemExpanded?: boolean;
   isPeru?: boolean;
+  femaleAnim?: any;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function BottomAmenitiesMobile({
@@ -45,6 +48,9 @@ function BottomAmenitiesMobile({
   onDropdownToggle,
   isItemExpanded,
   isPeru,
+  femaleAnim,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: BottomAmenitiesMobileProps): React.ReactElement {
   return (
     <div className={`${"flex justify-between items-center items-center "}`}>
@@ -132,6 +138,27 @@ function BottomAmenitiesMobile({
                 </div>
               )}
 
+              {/* Flexible ticket */}
+              {ladiesBookedSeats &&
+                String(ladiesBookedSeats).trim() !== "" &&
+                isDpEnabled === true && (
+                  <div className="flex items-center">
+                    <div className="relative group cursor-default">
+                      <div className="flex items-center">
+                        <div
+                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
+                        >
+                          <LottiePlayer
+                            animationData={femaleAnim}
+                            width="16px"
+                            height="16px"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
               {isTrackingEnabled && (
                 <div className="flex items-center mr-[10px]">
                   <div

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -24,6 +24,7 @@ interface DateTimeSectionMobileProps {
   serviceItem?: any;
   tooltipBgColor?: string;
   showLastSeats?: boolean;
+  discountSeatPriceColor?: string;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -123,6 +124,7 @@ function DateTimeSectionMobile({
   serviceItem,
   tooltipBgColor,
   showLastSeats,
+  discountSeatPriceColor,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -193,6 +195,7 @@ function DateTimeSectionMobile({
         serviceItem={serviceItem}
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
+        discountSeatPriceColor={discountSeatPriceColor}
       />
     </div>
   );

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -13,6 +13,8 @@ interface ExpandedDropdownMobileProps {
   petFriendlyAnim?: any;
   isSoldOut?: boolean;
   isChangeTicket?: boolean;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function ExpandedDropdownMobile({
@@ -22,6 +24,8 @@ function ExpandedDropdownMobile({
   petFriendlyAnim,
   isSoldOut,
   isChangeTicket = false,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -60,6 +64,17 @@ function ExpandedDropdownMobile({
             </span>
           </div>
         )}
+        {ladiesBookedSeats &&
+          String(ladiesBookedSeats).trim() !== "" &&
+          isDpEnabled === true && (
+            <div className="flex gap-[6px]">
+              <span style={{ marginTop: "2px" }}>•</span>
+              <span>
+                <span className="bold-text">Asientos para damas:</span> Esta
+                empresa cuenta con asientos recomendados para mujeres.
+              </span>
+            </div>
+          )}
         {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
           <div className="flex items-center">
             <div className={`relative group cursor-default `}>

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -30,6 +30,7 @@ interface SeatSectionMobileProps {
   serviceItem?: any;
   tooltipBgColor?: string;
   showLastSeats?: boolean;
+  discountSeatPriceColor?: string;
 }
 
 interface SeatRowProps {
@@ -116,6 +117,7 @@ function SeatSectionMobile({
   serviceItem,
   tooltipBgColor,
   showLastSeats,
+  discountSeatPriceColor,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -243,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
@@ -343,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 &&
@@ -432,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
@@ -510,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

package/src/utils/CommonService.ts

@@ -303,15 +303,20 @@ const commonService = {
 
     const { discount_type, discount_value, max_discount } = serviceItem;
 
+    const fixedDiscount =
+      discount_type === "fixed" && discount_value != null ? discount_value : 0;
+
     const percentageDiscount =
       discount_type === "percentage" && discount_value != null
         ? (price * discount_value) / 100
         : 0;
 
+    const rawDiscount = fixedDiscount || percentageDiscount;
+
     const finalDiscount =
       max_discount != null && max_discount > 0
-        ? Math.min(percentageDiscount, max_discount)
-        : percentageDiscount;
+        ? Math.min(rawDiscount, max_discount)
+        : rawDiscount;
 
     const discountedPrice = Math.max(0, price - finalDiscount);