kupos-ui-components-lib 9.3.2 → 9.3.3

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -8,6 +8,7 @@ import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
+import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -62,58 +63,6 @@ function ServiceItemMobile({
       }
     : {};
 
-  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 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 labelId =
     typeof serviceItem.boarding_stages === "string"
       ? serviceItem.boarding_stages.split("|")[0]
@@ -207,7 +156,10 @@ function ServiceItemMobile({
         <div style={{ padding: "12px 12px 8px 12px" }}>
           {/* Header with operator info and favorite */}
           <div className="flex justify-between  items-center mb-[10px]">
-            <div className="flex items-center  justify-between">
+            <div
+              className="flex items-center  justify-between"
+              style={{ marginBottom: serviceItem?.offer_text ? "10px" : "" }}
+            >
               <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -277,6 +229,7 @@ function ServiceItemMobile({
             arrTime={serviceItem.arr_time}
             seatTypes={serviceItem.seat_types}
             seatPriceColor={colors.seatPriceColor}
+            tooltipBgColor={colors.tooltipBgColor}
             currencySign={currencySign}
             availableSeats={serviceItem.available_seats}
             removeDuplicateSeats={removeDuplicateSeats}
@@ -305,13 +258,6 @@ function ServiceItemMobile({
             setShowDropdown={() =>
               setIsExpanded(isItemExpanded ? null : serviceItem.id)
             }
-            // onDropdownToggle={() => {
-            //   setShowDropdown(!showDropdown);
-            //   setAmenetiesAtomValue({
-            //     service: serviceItem,
-            //     showTopLabel: showTopLabel,
-            //   });
-            // }}
             onDropdownToggle={() => {
               setIsExpanded(isItemExpanded ? null : serviceItem.id);
             }}
@@ -319,85 +265,14 @@ function ServiceItemMobile({
           />
         </div>
 
-        <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")}
-                {/* <LottiePlayer
-                  animationData={serviceItem.icons.priorityStageAnim}
-                  width="18px"
-                  height="18px"
-                /> */}
-              </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")}
-              {/* <LottiePlayer
-                animationData={serviceItem.icons.directoAnim}
-                width="16px"
-                height="16px"
-              /> */}
-              <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")}
-              {/* <LottiePlayer
-                animationData={serviceItem.icons.directoAnim}
-                width="20px"
-                height="20px"
-              /> */}
-              <div>{"Tren Express"}</div>
-            </div>
-          )}
-        </div>
+        <ServiceBadgesMobile
+          showTopLabel={showTopLabel}
+          isSoldOut={isSoldOut}
+          colors={colors}
+          renderIcon={renderIcon}
+          serviceItem={serviceItem}
+          isConexion={isConexion}
+        />
       </div>
 
       {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
@@ -415,15 +290,15 @@ function ServiceItemMobile({
             className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
             style={{ lineHeight: 1.6 }}
           >
-            <div className="flex justify-between items-center">
+            <div className="flex justify-between items-start">
               <div
                 className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
               >
                 <div className={isLongOfferText ? "mt-[2px]" : ""}>
                   <LottiePlayer
                     animationData={serviceItem.icons.bombAnim}
-                    width="12px"
-                    height="12px"
+                    width="14px"
+                    height="14px"
                   />
                 </div>
                 <div
@@ -441,7 +316,7 @@ function ServiceItemMobile({
                     Termina en&nbsp;
                     <span
                       className="bold-text"
-                      ref={startCountdown}
+                      ref={(node) => commonService.startCountdown(node, 599)}
                       style={{
                         fontVariantNumeric: "tabular-nums",
                         display: "inline-block",
@@ -451,32 +326,49 @@ function ServiceItemMobile({
                 </div>
               </div>
               <div
-                className="flex items-center"
+                className="flex flex-col items-end"
                 style={{
                   color: "#fff",
                 }}
               >
-                <div className="mr-[4px]">
-                  {" "}
-                  <LottiePlayer
-                    animationData={serviceItem.icons.dotAnimation}
-                    width="12px"
-                    height="12px"
-                  />
-                </div>
-                <span className="flex-1" style={{ lineHeight: 1.4 }}>
-                  <span
-                    className="bold-text"
-                    ref={startViewerCount}
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="bold-text">personas</span>{" "}
-                  <span>
+                <div className="flex items-center">
+                  <div className="mr-[4px]">
                     {" "}
-                    {/* {viewersConfig.label || " están viendo este viaje"} */}
-                    viendo
+                    <LottiePlayer
+                      animationData={serviceItem.icons.dotAnimation}
+                      width="12px"
+                      height="12px"
+                    />
+                  </div>
+                  <span className="flex-1" style={{ lineHeight: 1.4 }}>
+                    <span
+                      className="bold-text"
+                      ref={(node) =>
+                        commonService.startViewerCount(node, viewersConfig)
+                      }
+                      style={{ fontVariantNumeric: "tabular-nums" }}
+                    />{" "}
+                    <span className="bold-text">personas</span>{" "}
+                    <span>
+                      {" "}
+                      {/* {viewersConfig.label || " están viendo este viaje"} */}
+                      viendo
+                    </span>
                   </span>
-                </span>
+                </div>
+                <div className="flex items-center">
+                  <span className="whitespace-nowrap">
+                    ⚡ Quedan pocos{" "}
+                    <span
+                      className="bold-text"
+                      ref={(node) =>
+                        commonService.startComprandoCount(node, 4, 16)
+                      }
+                      style={{ fontVariantNumeric: "tabular-nums" }}
+                    />{" "}
+                    comprando
+                  </span>
+                </div>
               </div>
             </div>
             {/* <div className="flex flex-col gap-[4px]">
@@ -505,7 +397,7 @@ function ServiceItemMobile({
                     Termina en&nbsp;
                     <span
                       className="bold-text"
-                      ref={startCountdown}
+                      ref={(node) => commonService.startCountdown(node, 599)}
                       style={{
                         fontVariantNumeric: "tabular-nums",
                         display: "inline-block",
@@ -524,7 +416,7 @@ function ServiceItemMobile({
                 <span className="flex-1" style={{ lineHeight: 1.4 }}>
                   <span
                     className="bold-text"
-                    ref={startViewerCount}
+                    ref={(node) => commonService.startViewerCount(node, viewersConfig)}
                     style={{ fontVariantNumeric: "tabular-nums" }}
                   />{" "}
                   <span className="bold-text">personas</span>{" "}

package/src/components/ServiceItem/types.ts

@@ -149,6 +149,8 @@ export interface ServiceItemProps {
     bottomStripColor?: string;
     directoColor?: string;
     seatPriceColor?: string;
+    rightGradiantColor?: string;
+    leftGradiantColor?: string;
   };
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };

package/src/styles.css

@@ -79,6 +79,16 @@
   }
 }
 
+@keyframes pulse-zoom {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }

package/src/ui/SeatSection/SeatSection.tsx

@@ -240,7 +240,12 @@ function SeatSection({
           style={{ top: "-22px", right: "30px" }}
         >
           {discountValue != null && (
-            <span className="rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white">
+            <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>
           )}
@@ -250,8 +255,25 @@ function SeatSection({
           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">
+          <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>
 

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/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;
 
@@ -249,12 +251,19 @@ function SeatSectionMobile({
   return (
     <div className="content-center relative" style={{ width: "40%" }}>
       {hasDiscount && discountSeat ? (
-        <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px]">
+        <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
           {discountValue != null && (
-            <div className="absolute -top-[18px] right-[0px]">
+            <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: seatPriceColor }}
+                style={{
+                  backgroundColor: tooltipBgColor,
+                }}
               >
                 {discountValue}% OFF
               </span>

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;