kupos-ui-components-lib 9.3.2 → 9.3.3

package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+declare const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps>;
+export default ServiceBadgesMobile;

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -0,0 +1,35 @@
+import React from "react";
+const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
+    return (React.createElement("div", { className: "absolute -top-[9px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10" },
+        showTopLabel && (React.createElement("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,
+            } },
+            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            React.createElement("div", { style: {
+                    color: colors.topLabelColor,
+                } }, showTopLabel))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("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"),
+            React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
+        isConexion && (React.createElement("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"),
+            React.createElement("div", null, "Conexi\u00F3n"))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("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"),
+            React.createElement("div", null, "Tren Express")))));
+};
+export default ServiceBadgesMobile;

package/dist/utils/CommonService.d.ts

@@ -17,5 +17,12 @@ declare const commonService: {
         originalPrice: number;
         discountedPrice: number;
     };
+    startViewerCount: (node: HTMLSpanElement | null, viewersConfig?: {
+        min: number;
+        max: number;
+        interval?: number;
+    }) => void;
+    startCountdown: (node: HTMLSpanElement | null, countdownSeconds?: number) => void;
+    startComprandoCount: (node: HTMLSpanElement | null, min?: number, max?: number) => void;
 };
 export default commonService;

package/dist/utils/CommonService.js

@@ -284,5 +284,66 @@ const commonService = {
         const discountedPrice = Math.max(0, price - finalDiscount);
         return { originalPrice: price, discountedPrice };
     },
+    startViewerCount: (node, viewersConfig) => {
+        if (!node || !viewersConfig)
+            return;
+        const prevId = node.dataset.viewerId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        const { min, max, interval = 5000 } = viewersConfig;
+        const clamp = (v) => 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, countdownSeconds = 599) => {
+        if (!node)
+            return;
+        const prevId = node.dataset.countdownId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        let remaining = countdownSeconds * 1000; // Convert to milliseconds
+        const formatTime = (totalMs) => {
+            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, min = 4, max = 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.3.2",
+  "version": "9.3.3",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -28,15 +28,14 @@ import dotAnimation from "../../assets/images/anims/service_list/dot_animation.j
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
-import DirectoBlock from "../../ui/DirectoBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
 import KuposButton from "../../ui/KuposButton/KuposButton";
-import TopAmenities from "../../ui/TopAmenities/TopAmenities";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -107,28 +106,6 @@ function ServiceItemPB({
   coachKey,
   viewersConfig,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const startViewerCount = (node: HTMLSpanElement | null) => {
-    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);
-  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -187,18 +164,16 @@ function ServiceItemPB({
 
   let isSoldOut = serviceItem.available_seats <= 0;
 
-  const showPromo = Math.random() > 0.5;
-
   const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
   const grayscaleClass = isSoldOut ? "grayscale" : "";
   const hasOfferText = Boolean(serviceItem?.offer_text);
-  const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const serviceCardStyle: React.CSSProperties = hasOfferText
     ? {
         borderColor: "transparent",
         borderStyle: "solid",
         borderWidth: "6px 6px 0 6px",
-        borderRadius: isItemExpanded ? "18px 18px 0 0" : "18px",
+        borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
         background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
       }
     : {};
@@ -303,34 +278,6 @@ function ServiceItemPB({
 
     onBookButtonPress();
   };
-  const countdownSeconds = 599;
-
-  const startCountdown = (node: HTMLSpanElement | null) => {
-    if (!node) return;
-
-    const prevId = node.dataset.countdownId;
-    if (prevId) clearInterval(Number(prevId));
-
-    let remaining = countdownSeconds;
-
-    const formatTime = (totalSecs: number) => {
-      const m = Math.floor(totalSecs / 60);
-      const s = totalSecs % 60;
-      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-    };
-
-    node.textContent = formatTime(remaining);
-
-    const id = setInterval(() => {
-      remaining -= 1;
-      if (remaining <= 0) {
-        remaining = countdownSeconds;
-      }
-      node.textContent = formatTime(remaining);
-    }, 1000);
-
-    node.dataset.countdownId = String(id);
-  };
 
   const items = [
     {
@@ -456,14 +403,15 @@ function ServiceItemPB({
                 padding: coachKey
                   ? "15px 15px 20px 15px"
                   : "20px 15px 11px 15px",
+                marginTop: hasOfferText ? "14px" : "0",
               }}
             >
               <div
                 className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
-                style={{
-                  marginTop:
-                    showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
-                }}
+                // style={{
+                //   marginTop:
+                //     showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
+                // }}
               >
                 {/* OPERATOR LOGO */}
                 <div className="flex flex-col gap-[5px]">
@@ -530,7 +478,7 @@ function ServiceItemPB({
                 {/* BUTTON */}
 
                 <div className="relative">
-                  {showLastSeats ? (
+                  {/* {showLastSeats ? (
                     <div
                       className="flex justify-end mr-[11px] w-[100%] right-[0px] absolute"
                       style={{
@@ -544,7 +492,7 @@ function ServiceItemPB({
                           </div>
                         )}
                     </div>
-                  ) : null}
+                  ) : null} */}
                   <KuposButton
                     isSoldOut={isSoldOut}
                     isLoading={serviceDetailsLoading}
@@ -556,7 +504,7 @@ function ServiceItemPB({
                   />
                   {showLastSeats ? (
                     <div
-                      className="flex justify-end mr-[11px] w-[100%] right-[0px]"
+                      className="flex justify-center mr-[11px] w-[100%] right-[0px]"
                       style={{
                         top: serviceDetailsLoading ? "-17px" : "-20px",
                       }}
@@ -654,7 +602,7 @@ function ServiceItemPB({
                       | Termina en&nbsp;
                       <span
                         className="bold-text text-end"
-                        ref={startCountdown}
+                        ref={(node) => CommonService.startCountdown(node, 599)}
                         style={{
                           fontVariantNumeric: "tabular-nums",
                           display: "inline-block",
@@ -675,84 +623,40 @@ function ServiceItemPB({
                   <span className="ml-[6px]">
                     <span
                       className="bold-text"
-                      ref={startViewerCount}
+                      ref={(node) =>
+                        CommonService.startViewerCount(node, viewersConfig)
+                      }
                       style={{ fontVariantNumeric: "tabular-nums" }}
                     />{" "}
                     <span className="bold-text">personas</span>{" "}
                     <span>
                       {" "}
-                      {viewersConfig?.label || " están viendo este viaje"}
+                      {viewersConfig?.label || " viendo"} |{" "}
+                      <span className="">
+                        ⚡ Quedan pocos{" "}
+                        <span
+                          className="bold-text"
+                          ref={(node) =>
+                            CommonService.startComprandoCount(node, 4, 16)
+                          }
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        />{" "}
+                        comprando
+                      </span>
                     </span>
                   </span>
                 </div>
               </div>
             </div>
           )}
-          <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>
+          <ServiceBadges
+            showTopLabel={showTopLabel}
+            isSoldOut={isSoldOut}
+            colors={colors}
+            renderIcon={renderIcon}
+            translation={translation}
+            serviceItem={serviceItem}
+          />
         </div>
       )}
     </>