kupos-ui-components-lib 9.6.2 → 9.6.3

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -409,6 +409,12 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
+          viewersConfig={viewersConfig}
+          isLoggedIn={isLoggedIn}
+          showLoginModal={showLoginModal}
+          isExpand={isExpand}
+          setIsExpand={setIsExpand}
+          coachKey={coachKey}
         />
       ) : (
         <div
@@ -518,6 +524,7 @@ function ServiceItemPB({
                     removeDuplicateSeats={removeDuplicateSeats}
                     isPeru={isPeru}
                     renderIcon={renderIcon}
+                    discountSeatPriceColor={colors.discountSeatPriceColor}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -269,7 +269,7 @@ function ServiceItemMobile({
                       color: colors.tooltipBgColor,
                     }}
                   >
-                    ¡ Últimos Asientos!
+                    ¡Últimos Asientos!
                   </div>
                 )}
             </div>
@@ -480,7 +480,7 @@ function ServiceItemMobile({
                   <span className="bold-text">personas</span>{" "}
                   <span>
                     {" "}
-                    {viewersConfig.label || " están viendo este viaje"}
+                    {viewersConfig?.label || " están viendo este viaje"}
                   </span>
                 </span>
               </div>

package/src/components/ServiceItem/types.ts

@@ -129,6 +129,7 @@ export interface ServiceItemProps {
       downArrow?:string
       personIcon?: string
       whiteFireIcon?: string
+      fireIcon?: string
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -159,6 +160,7 @@ export interface ServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
+    discountSeatPriceColor?: string
   };
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };

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) {
@@ -411,6 +425,7 @@ function SeatSection({
               style={{
                 animation: "pulse-zoom 2s ease-in-out infinite",
                 whiteSpace: "nowrap",
+                backgroundColor: discountSeatPriceColor,
               }}
             >
               {discountValue}% OFF
@@ -447,7 +462,7 @@ 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

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -117,6 +117,7 @@ function SeatSectionMobile({
   tooltipBgColor,
   showLastSeats,
 }: SeatSectionMobileProps): React.ReactElement {
+  console.log("🚀 ~ SeatSectionMobile ~ serviceItem:", serviceItem);
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
   const getFare = (fare: number) => {
@@ -243,7 +244,7 @@ function SeatSectionMobile({
             {commonService.currency(discountedPrice, currencySign)}
           </span>
         </div>
-        {showLastSeats ? (
+        {/* {showLastSeats ? (
           <div className="flex justify-end">
             {serviceItem?.available_seats < 10 &&
               serviceItem?.available_seats > 0 && (
@@ -257,7 +258,7 @@ function SeatSectionMobile({
                 </div>
               )}
           </div>
-        ) : null}
+        ) : null} */}
         {isSoldOut ? (
           <div className="flex justify-end">
             <span

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);