kupos-ui-components-lib 9.3.1 → 9.3.2

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -31,54 +31,36 @@ function ExpandedDropdown({
       style={{
         backgroundColor: "#ffefef",
         borderRadius: "0 0 10px 10px",
-        // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
-        // border: `1px solid ${colors.priceColor}`,
-
-        // borderTop: "none",
       }}
     >
-      {/* <div className="flex flex-col gap-[12px] text-[13px] text-[#464647]">
-        {hasPetInfo && (
-          <div className="flex items-center gap-[10px]">
-            <LottiePlayer
-              animationData={getAnimationIcon("petFriendlyAnim")}
-              width="20px"
-              height="20px"
-            />
-            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
-              <span>{translation?.petFriendly}</span>
-            </div>
-          </div>
-        )}
-        { serviceItem.is_change_ticket && (
-          <div className="flex items-center gap-[10px]">
-            <LottiePlayer
-              animationData={getAnimationIcon("flexibleIcon")}
-              width="20px"
-              height="20px"
-            />
-            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
-              <span>{translation?.flexible}</span>
-            </div>
+      <div
+        className="flex flex-col gap-[6px] text-[13px] text-[#464647]"
+        style={{ lineHeight: 1.5 }}
+      >
+        {isPeru ? null : isChangeTicket ? (
+          <div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Pasaje flexible:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
           </div>
-        )}
-        {serviceItem?.is_tracking_enabled && (
-          <div className={`${grayscaleClass} flex items-center gap-[10px]`}>
-            <LottiePlayer
-              animationData={getAnimationIcon("locationAnim")}
-              width="20px"
-              height="20px"
-            />
-            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
-              <span>{"GPS Tracker"}</span>
-            </div>
+        ) : (
+          <div className="flex gap-[8px] text-[13.33px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span>
+                <span className="bold-text">Pasaje flexible:</span> Esta empresa
+                no permite cambios de pasajes.
+              </span>
+            </span>
           </div>
         )}
-      </div> */}
-      <div
-        className="flex flex-col gap-[10px] text-[13px] text-[#464647]"
-        style={{ lineHeight: 1.6 }}
-      >
         {hasPetInfo && (
           <div className="flex items-center gap-[10px]">
             <LottiePlayer
@@ -91,6 +73,7 @@ function ExpandedDropdown({
             </div>
           </div>
         )}
+
         <div className="flex gap-[8px] text-[13.33px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>
@@ -100,30 +83,6 @@ function ExpandedDropdown({
             salida del bus.
           </span>
         </div>
-        {isPeru ? null : isChangeTicket ? (
-          <div className="flex gap-[8px]">
-            <span style={{ marginTop: "2px" }}>•</span>
-            <span>
-              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-              puede ser cambiado de manera online{" "}
-              <span className="bold-text">
-                hasta {serviceItem?.change_ticket_hours || 6} horas antes
-              </span>{" "}
-              de la salida del bus. El monto será reembolsado a tu billetera
-              kupospay.
-            </span>
-          </div>
-        ) : (
-          <div className="flex gap-[8px] text-[13.33px]">
-            <span style={{ marginTop: "2px" }}>•</span>
-            <span>
-              <span>
-                <span className="bold-text">Política de cambios:</span> Esta
-                empresa no permite cambios de pasajes
-              </span>
-            </span>
-          </div>
-        )}
       </div>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -18,6 +18,7 @@ interface SeatSectionProps {
   removeDuplicateSeats?: boolean;
   isPeru?: boolean;
   serviceItem?: any;
+  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -96,6 +97,7 @@ function SeatSection({
   removeDuplicateSeats,
   isPeru,
   serviceItem,
+  renderIcon,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -132,16 +134,13 @@ function SeatSection({
     if (isPeru) {
       const allSeats = getAllSeatTypes(seatTypes);
       const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
-      const { originalPrice, discountedPrice } =
-        CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+      const { discountedPrice } = CommonService.calculateDiscountedPrice(
+        lowestFare,
+        serviceItem,
+      );
 
       return (
         <>
-          {originalPrice !== discountedPrice && (
-            <span className="text-[13.33px]" style={strikethroughStyle}>
-              {formatPrice(originalPrice)}
-            </span>
-          )}
           <span className="flex items-center text-[13.33px] bold-text">
             {formatPrice(discountedPrice)}
           </span>
@@ -178,30 +177,26 @@ function SeatSection({
     });
   };
 
-  const strikethroughStyle: React.CSSProperties = {
-    color: "#ccc",
-    display: "flex",
-    textAlign: "end",
-    textDecoration: "line-through",
-    ...(isPeru
-      ? { position: "relative", top: 0 }
-      : { position: "absolute", top: isCentered ? "-10px" : "-18px" }),
-  };
-
   const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
   const discountedSeats = seats.map((seat) => ({
     ...seat,
     ...CommonService.calculateDiscountedPrice(seat.price, serviceItem),
   }));
 
-  const highestOriginalPrice = Math.max(
-    ...discountedSeats.map((seat) => seat.originalPrice),
-  );
-
   const hasDiscount = discountedSeats.some(
     (seat) => seat.originalPrice !== seat.discountedPrice,
   );
 
+  const discountSeat = discountedSeats
+    .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 renderLabels = () => {
     if (isPeru) {
       return (
@@ -225,6 +220,55 @@ function SeatSection({
     return renderSeatNames();
   };
 
+  if (hasDiscount && discountSeat) {
+    return (
+      <div className="grid   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]">
+            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]">
+            Desde
+          </span>
+        </div>
+
+        <div
+          className="col-start-2 row-start-1 flex items-center justify-center absolute"
+          style={{ top: "-22px", right: "30px" }}
+        >
+          {discountValue != null && (
+            <span className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white">
+              {discountValue}% OFF
+            </span>
+          )}
+        </div>
+
+        <div
+          className="col-start-2 row-start-2 flex items-center justify-center "
+          style={{ textAlign: "center" }}
+        >
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] line-through">
+            {formatPrice(discountSeat.originalPrice)}
+          </span>
+        </div>
+
+        <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-start">
+          <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")}
+            {formatPrice(discountSeat.discountedPrice)}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
@@ -245,17 +289,6 @@ function SeatSection({
           gap: "10px",
         }}
       >
-        {/* {isPeru && (
-          <span className="text-[13.33px]" style={strikethroughStyle}>
-            {formatPrice(1000)}
-          </span>
-        )} */}
-
-        {hasDiscount && !isPeru && (
-          <span className="text-[13.33px]" style={strikethroughStyle}>
-            {formatPrice(highestOriginalPrice)}
-          </span>
-        )}
         {renderSeatPrices()}
       </div>
     </div>

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -36,6 +36,30 @@ function ExpandedDropdownMobile({
         className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
         style={{ lineHeight: 1.6 }}
       >
+        {isPeru ? null : isChangeTicket ? (
+          <div className="flex gap-[6px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Pasaje flexible:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
+          </div>
+        ) : (
+          <div className="flex gap-[8px] ">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span>
+                <span className="bold-text">Pasaje flexible:</span> Esta empresa
+                no permite cambios de pasajes
+              </span>
+            </span>
+          </div>
+        )}
         {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
           <div className="flex items-center">
             <div className={`relative group cursor-default `}>
@@ -72,30 +96,6 @@ function ExpandedDropdownMobile({
             salida del bus.
           </span>
         </div>
-        {isPeru ? null : isChangeTicket ? (
-          <div className="flex gap-[6px]">
-            <span style={{ marginTop: "2px" }}>•</span>
-            <span>
-              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-              puede ser cambiado de manera online{" "}
-              <span className="bold-text">
-                hasta {serviceItem?.change_ticket_hours || 6} horas antes
-              </span>{" "}
-              de la salida del bus. El monto será reembolsado a tu billetera
-              kupospay.
-            </span>
-          </div>
-        ) : (
-          <div className="flex gap-[8px] ">
-            <span style={{ marginTop: "2px" }}>•</span>
-            <span>
-              <span>
-                <span className="bold-text">Política de cambios:</span> Esta
-                empresa no permite cambios de pasajes
-              </span>
-            </span>
-          </div>
-        )}
       </div>
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -137,14 +137,6 @@ function SeatSectionMobile({
     );
   };
 
-  const getHighestFare = (): number => {
-    return (
-      seatTypesData
-        ?.filter((item) => !EXCEPTIONS.includes(item.label))
-        ?.reduce((max, item) => (item.fare > max ? item.fare : max), 0) || 0
-    );
-  };
-
   const renderPeruSeats = () => {
     const lowestFare = getLowestFare();
     if (lowestFare === null) return null;
@@ -242,42 +234,86 @@ function SeatSectionMobile({
     ...commonService.calculateDiscountedPrice(seat.fare, serviceItem),
   }));
 
-  const highestOriginalPrice = Math.max(
-    ...(discountedSeats?.map((s) => s.originalPrice) || [0]),
-  );
   const hasDiscount = discountedSeats?.some(
     (s) => s.originalPrice !== s.discountedPrice,
   );
+  const discountSeat = discountedSeats
+    ?.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;
 
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
-      {!isPeru && hasDiscount && (
-        <div className="absolute -top-[16px] right-[0] flex justify-end">
+      {hasDiscount && discountSeat ? (
+        <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px]">
+          {discountValue != null && (
+            <div className="absolute -top-[18px] right-[0px]">
+              <span
+                className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
+                style={{ backgroundColor: seatPriceColor }}
+              >
+                {discountValue}% 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] line-through text-right">
+            {commonService.currency(discountSeat.originalPrice, currencySign)}
+          </span>
+
+          <span
+            className="min-[420]:text-[13px] text-[12px] leading-[24px]"
+            style={{ color: isSoldOut ? "#bbb" : "#464647" }}
+          >
+            Desde
+          </span>
           <span
-            className="min-[420]:text-[13px] text-[12px] line-through"
-            style={{ color: "#bbb" }}
+            className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
+            style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
           >
-            {commonService.currency(highestOriginalPrice, currencySign)}
+            {serviceItem?.icons?.fireIcon ? (
+              <img
+                src={serviceItem.icons.fireIcon}
+                alt="discount"
+                className="h-[16px] w-[16px] object-contain"
+                style={{ filter: isSoldOut ? "grayscale" : "" }}
+              />
+            ) : null}
+            {commonService.currency(discountSeat.discountedPrice, currencySign)}
           </span>
-        </div>
-      )}
-      <div
-        className="flex flex-col justify-between h-[2.5rem] "
-        style={{
-          gap: isSoldOut ? "0px" : "5px",
-          justifyContent: hasMultipleTypes ? "space-between" : "center",
-        }}
-      >
-        {renderSeats()}
 
-        {isSoldOut ? (
-          <div className="flex justify-end">
-            <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
+          {isSoldOut ? (
+            <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
               Agotado
             </span>
-          </div>
-        ) : null}
-      </div>
+          ) : null}
+        </div>
+      ) : (
+        <div
+          className="flex flex-col justify-between h-[2.5rem] "
+          style={{
+            gap: isSoldOut ? "0px" : "5px",
+            justifyContent: hasMultipleTypes ? "space-between" : "center",
+          }}
+        >
+          {renderSeats()}
+
+          {isSoldOut ? (
+            <div className="flex justify-end">
+              <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
+                Agotado
+              </span>
+            </div>
+          ) : null}
+        </div>
+      )}
     </div>
   );
 }