kupos-ui-components-lib 9.3.9 → 9.4.0

package/src/ui/SeatSection/SeatSection.tsx

@@ -14,6 +14,7 @@ interface SeatSectionProps {
   availableSeats: number;
   isSoldOut: boolean;
   priceColor?: string;
+  dpSeatColor?: string;
   currencySign?: string;
   removeDuplicateSeats?: boolean;
   isPeru?: boolean;
@@ -98,6 +99,7 @@ function SeatSection({
   isPeru,
   serviceItem,
   renderIcon,
+  dpSeatColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -220,30 +222,102 @@ function SeatSection({
     return renderSeatNames();
   };
 
+  if (serviceItem?.is_dp_enabled) {
+    const dpSeats = (
+      removeDuplicateSeats ? uniqueSeats : sortedSeatTypes
+    ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
+    const lowestFare =
+      dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
+
+    return (
+      <div className="flex items-center justify-between text-[13.33px] ">
+        <div>
+          <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
+            Desde
+          </span>
+        </div>
+        <div>
+          <span
+            className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
+            style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
+          >
+            <div className="absolute bottom-[85%]">
+              <span
+                className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
+                style={{
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  whiteSpace: "nowrap",
+                  color: dpSeatColor,
+                }}
+              >
+                Mejor precio
+              </span>
+            </div>
+            <div className="absolute -left-[20px]">
+              {renderIcon("fireIcon", "16px")}
+            </div>
+            {availableSeats <= 0
+              ? CommonService.currency(0, currencySign)
+              : CommonService.discountedCurrency(lowestFare, currencySign)}
+          </span>
+        </div>
+      </div>
+      // <div className="flex items-center justify-between text-[13.33px]">
+      //   <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
+      //     Desde
+      //   </span>
+      //   <div className="flex flex-col items-center gap-[2px]">
+      //     <span
+      //       className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
+      //       style={{
+      //         animation: "pulse-zoom 2s ease-in-out infinite",
+      //         whiteSpace: "nowrap",
+      //         color: dpSeatColor,
+      //       }}
+      //     >
+      //       Mejor precio
+      //     </span>
+      //     <span
+      //       className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
+      //       style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
+      //     >
+      //       <div className="absolute -left-[20px]">
+      //         {renderIcon("fireIcon", "16px")}
+      //       </div>
+      //       {availableSeats <= 0
+      //         ? CommonService.currency(0, currencySign)
+      //         : CommonService.discountedCurrency(lowestFare, currencySign)}
+      //     </span>
+      //   </div>
+      // </div>
+    );
+  }
+
   if (hasDiscount && discountSeat) {
     return (
-      <div className="grid   items-center text-[13.33px] relative">
+      <div className="grid grid-cols-2 items-center text-[13.33px] relative">
         <div className="col-start-1 row-start-2 flex items-center">
-          <span className="text-[13.33px] font-normal leading-[22px] text-[#c2c2c2]">
+          <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
             Antes
           </span>
         </div>
 
-        <div className="col-start-1 row-start-3 flex h-[30px] items-end">
-          <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
+        <div className="col-start-1 row-start-3 flex h-[20px] items-end">
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
             Desde
           </span>
         </div>
 
         <div
           className="col-start-2 row-start-1 flex items-center justify-center absolute"
-          style={{ top: "-22px", right: "25%" }}
+          style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
         >
           {discountValue != null && (
             <span
               className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white"
               style={{
                 animation: "pulse-zoom 2s ease-in-out infinite",
+                whiteSpace: "nowrap",
               }}
             >
               {discountValue}% OFF
@@ -277,13 +351,15 @@ function SeatSection({
           </span>
         </div>
 
-        <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center">
+        <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" }}
           >
             {/* <span className="text-[18px] leading-[24px]">🔥</span> */}
-            {renderIcon("fireIcon", "16px")}
+            <div className="absolute -left-[8px]">
+              {renderIcon("fireIcon", "16px")}
+            </div>
             {availableSeats <= 0
               ? CommonService.currency(0, currencySign)
               : CommonService.discountedCurrency(

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -24,7 +24,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
   serviceItem,
 }) => {
   return (
-    <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
+    <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
       {showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -23,6 +23,7 @@ interface DateTimeSectionMobileProps {
   removeDuplicateSeats?: boolean;
   serviceItem?: any;
   tooltipBgColor?: string;
+  showLastSeats?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -121,6 +122,7 @@ function DateTimeSectionMobile({
   removeDuplicateSeats,
   serviceItem,
   tooltipBgColor,
+  showLastSeats,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -190,6 +192,7 @@ function DateTimeSectionMobile({
         removeDuplicateSeats={removeDuplicateSeats}
         serviceItem={serviceItem}
         tooltipBgColor={tooltipBgColor}
+        showLastSeats={showLastSeats}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -29,6 +29,7 @@ interface SeatSectionMobileProps {
   removeDuplicateSeats?: boolean;
   serviceItem?: any;
   tooltipBgColor?: string;
+  showLastSeats?: boolean;
 }
 
 interface SeatRowProps {
@@ -114,6 +115,7 @@ function SeatSectionMobile({
   removeDuplicateSeats,
   serviceItem,
   tooltipBgColor,
+  showLastSeats,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -183,6 +185,81 @@ function SeatSectionMobile({
     );
   };
 
+  const renderDpSeats = () => {
+    const lowestFare = getLowestFare();
+    if (lowestFare === null) return null;
+
+    const { discountedPrice } = commonService.calculateDiscountedPrice(
+      lowestFare,
+      serviceItem,
+    );
+    const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
+
+    return (
+      <div className="relative flex flex-col justify-center h-full">
+        <div
+          className="absolute right-[0px]"
+          style={{
+            animation: "pulse-zoom 2s ease-in-out infinite",
+            top:
+              serviceItem?.available_seats < 10 &&
+              serviceItem?.available_seats > 0
+                ? "-20px"
+                : "-10px",
+          }}
+        >
+          <span
+            className="rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
+            style={{
+              backgroundColor: tooltipBgColor,
+            }}
+          >
+            Mejor precio
+          </span>
+        </div>
+        <div className="w-[100%] flex flex-row justify-between items-center">
+          <span
+            className="min-[420]:text-[13px] text-[12px]"
+            style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+          >
+            Desde
+          </span>
+          <span
+            className="flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text"
+            style={{ color: priceColor }}
+          >
+            {serviceItem?.icons?.fireIcon ? (
+              <img
+                src={serviceItem.icons.fireIcon}
+                alt="dp"
+                className="h-[14px] w-[14px] object-contain"
+                style={{ filter: isSoldOut ? "grayscale(1)" : "" }}
+              />
+            ) : null}
+            {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-[#464647] text-center mt-[3px]">
+                  ¡Últimos Asientos!
+                </div>
+              )}
+          </div>
+        ) : null}
+        {isSoldOut ? (
+          <div className="flex justify-end">
+            <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
+              Agotado
+            </span>
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
   const renderSeats = () => {
     if (isPeru) {
       return renderPeruSeats();
@@ -262,7 +339,14 @@ function SeatSectionMobile({
 
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
-      {hasDiscount && discountSeat ? (
+      {serviceItem?.is_dp_enabled ? (
+        <div
+          className="flex flex-col justify-between h-[2.5rem]"
+          style={{ gap: isSoldOut ? "0px" : "5px" }}
+        >
+          {renderDpSeats()}
+        </div>
+      ) : hasDiscount && discountSeat ? (
         <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
           {discountValue != null && (
             <div
@@ -348,6 +432,16 @@ function SeatSectionMobile({
           }}
         >
           {renderSeats()}
+          {showLastSeats ? (
+            <div className="flex justify-end  ">
+              {serviceItem?.available_seats < 10 &&
+                serviceItem?.available_seats > 0 && (
+                  <div className="text-[10px] text-[#464647] text-center">
+                    ¡ Últimos Asientos!
+                  </div>
+                )}
+            </div>
+          ) : null}
 
           {isSoldOut ? (
             <div className="flex justify-end">

package/src/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -24,7 +24,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
   isConexion,
 }) => {
   return (
-    <div className="absolute -top-[9px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
+    <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
       {showTopLabel && (
         <div
           className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}