kupos-ui-components-lib 9.3.1 → 9.3.3

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,77 @@ 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"
+              style={{
+                animation: "pulse-zoom 2s ease-in-out infinite",
+              }}
+            >
+              {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] relative"
+            style={{
+              position: "relative",
+            }}
+          >
+            {formatPrice(discountSeat.originalPrice)}
+            <span
+              style={{
+                position: "absolute",
+                left: "-2px",
+                top: "50%",
+                width: "calc(100% + 4px)",
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                transform: "rotate(-10deg)",
+                transformOrigin: "center",
+              }}
+            />
+          </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 +311,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/ServiceBadges/ServiceBadges.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+interface ServiceBadgesProps {
+  showTopLabel?: string;
+  isSoldOut: boolean;
+  colors: any;
+  renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+  translation?: {
+    directService?: string;
+  };
+  serviceItem: {
+    is_transpordo?: boolean;
+    is_direct_trip?: boolean;
+    train_type_label?: string;
+  };
+}
+
+const ServiceBadges: React.FC<ServiceBadgesProps> = ({
+  showTopLabel,
+  isSoldOut,
+  colors,
+  renderIcon,
+  translation,
+  serviceItem,
+}) => {
+  return (
+    <div className="absolute -top-[11px] 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`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          <div className={isSoldOut ? "grayscale" : ""}>
+            {renderIcon("specialDeparture", "12px")}
+          </div>
+          <div
+            className={
+              isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
+            }
+          >
+            {showTopLabel}
+          </div>
+        </div>
+      )}
+      {serviceItem?.is_transpordo && (
+        <div
+          className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("connectingServiceIcon", "12px")}
+          <div>{"Conexión"}</div>
+        </div>
+      )}
+      {serviceItem?.is_direct_trip && (
+        <div
+          className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("directo", "12px")}
+          <div>{translation?.directService}</div>
+        </div>
+      )}
+      {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
+        <div
+          className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("directo", "12px")}
+          <div>{"Tren Express"}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServiceBadges;

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -22,6 +22,7 @@ interface DateTimeSectionMobileProps {
   availableSeats: number;
   removeDuplicateSeats?: boolean;
   serviceItem?: any;
+  tooltipBgColor?: string;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -119,6 +120,7 @@ function DateTimeSectionMobile({
   availableSeats,
   removeDuplicateSeats,
   serviceItem,
+  tooltipBgColor,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -187,6 +189,7 @@ function DateTimeSectionMobile({
         availableSeats={availableSeats}
         removeDuplicateSeats={removeDuplicateSeats}
         serviceItem={serviceItem}
+        tooltipBgColor={tooltipBgColor}
       />
     </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

@@ -28,6 +28,7 @@ interface SeatSectionMobileProps {
   availableSeats: number;
   removeDuplicateSeats?: boolean;
   serviceItem?: any;
+  tooltipBgColor?: string;
 }
 
 interface SeatRowProps {
@@ -112,6 +113,7 @@ function SeatSectionMobile({
   availableSeats,
   removeDuplicateSeats,
   serviceItem,
+  tooltipBgColor,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -137,14 +139,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 +236,93 @@ 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]"
+              style={{
+                animation: "pulse-zoom 2s ease-in-out infinite",
+              }}
+            >
+              <span
+                className="rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
+                style={{
+                  backgroundColor: tooltipBgColor,
+                }}
+              >
+                {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] line-through"
-            style={{ color: "#bbb" }}
+            className="min-[420]:text-[13px] text-[12px] leading-[24px]"
+            style={{ color: isSoldOut ? "#bbb" : "#464647" }}
           >
-            {commonService.currency(highestOriginalPrice, currencySign)}
+            Desde
+          </span>
+          <span
+            className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
+            style={{ color: isSoldOut ? "#bbb" : "#ff5964" }}
+          >
+            {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>
   );
 }

package/src/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+interface ServiceBadgesMobileProps {
+  showTopLabel?: string;
+  isSoldOut: boolean;
+  colors: any;
+  renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+  translation?: {
+    directService?: string;
+  };
+  serviceItem: {
+    is_direct_trip?: boolean;
+    train_type_label?: string;
+  };
+  isConexion?: boolean;
+}
+
+const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
+  showTopLabel,
+  isSoldOut,
+  colors,
+  renderIcon,
+  serviceItem,
+  isConexion,
+}) => {
+  return (
+    <div className="absolute -top-[9px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10">
+      {showTopLabel && (
+        <div
+          className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          <div className={isSoldOut ? "grayscale" : ""}>
+            {renderIcon("specialDeparture", "12px")}
+          </div>
+          <div
+            style={{
+              color: colors.topLabelColor,
+            }}
+          >
+            {showTopLabel}
+          </div>
+        </div>
+      )}
+      {serviceItem?.is_direct_trip && (
+        <div
+          className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("directo", "12px")}
+          <div className="ml-[5px]">Directo</div>
+        </div>
+      )}
+      {isConexion && (
+        <div
+          className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("airportIcon", "14px")}
+          <div>Conexión</div>
+        </div>
+      )}
+      {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
+        <div
+          className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
+          style={{
+            backgroundColor: "#fff",
+            border: `1px solid ${colors.topLabelColor}`,
+            color: colors.topLabelColor,
+          }}
+        >
+          {renderIcon("directo", "12px")}
+          <div>{"Tren Express"}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServiceBadgesMobile;

package/src/utils/CommonService.ts

@@ -308,6 +308,92 @@ const commonService = {
 
     return { originalPrice: price, discountedPrice };
   },
+
+  startViewerCount: (
+    node: HTMLSpanElement | null,
+    viewersConfig?: { min: number; max: number; interval?: number },
+  ) => {
+    if (!node || !viewersConfig) return;
+
+    const prevId = node.dataset.viewerId;
+    if (prevId) clearInterval(Number(prevId));
+
+    const { min, max, interval = 5000 } = viewersConfig;
+    const clamp = (v: number) => Math.min(max, Math.max(min, v));
+    const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+
+    node.textContent = String(initialValue);
+
+    const id = setInterval(() => {
+      const current = Number(node.textContent) || initialValue;
+      const delta = Math.ceil(current * 0.2);
+      const next =
+        current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
+      node.textContent = String(clamp(Math.round(next)));
+    }, interval);
+
+    node.dataset.viewerId = String(id);
+  },
+
+  startCountdown: (
+    node: HTMLSpanElement | null,
+    countdownSeconds: number = 599,
+  ) => {
+    if (!node) return;
+
+    const prevId = node.dataset.countdownId;
+    if (prevId) clearInterval(Number(prevId));
+
+    let remaining = countdownSeconds * 1000; // Convert to milliseconds
+
+    const formatTime = (totalMs: number) => {
+      const m = Math.floor(totalMs / 60000);
+      const s = Math.floor((totalMs % 60000) / 1000);
+      const ms = Math.floor((totalMs % 1000) / 10); // Show 2 digits for milliseconds
+      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(ms).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    const id = setInterval(() => {
+      remaining -= 100; // Decrease by 100ms
+      if (remaining <= 0) {
+        remaining = countdownSeconds * 1000;
+      }
+      node.textContent = formatTime(remaining);
+    }, 100); // Update every 100ms
+
+    node.dataset.countdownId = String(id);
+  },
+
+  startComprandoCount: (
+    node: HTMLSpanElement | null,
+    min: number = 4,
+    max: number = 16,
+  ) => {
+    if (!node) return;
+
+    const prevId = node.dataset.comprandoId;
+    if (prevId) clearInterval(Number(prevId));
+
+    const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+    node.textContent = String(initialValue);
+
+    const id = setInterval(() => {
+      const current = Number(node.textContent) || initialValue;
+      const changePercent = 0.05; // 5% change
+      const change = Math.ceil(current * changePercent);
+      const direction = Math.random() > 0.5 ? 1 : -1;
+      let next = current + (change * direction);
+
+      // Clamp within min and max
+      next = Math.min(max, Math.max(min, next));
+
+      node.textContent = String(next);
+    }, 5000); // Update every 5 seconds
+
+    node.dataset.comprandoId = String(id);
+  },
 };
 
 export default commonService;