kupos-ui-components-lib 9.3.1 → 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"];
 
@@ -50,57 +51,17 @@ function ServiceItemMobile({
   let isSoldOut = serviceItem.available_seats <= 0;
   const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
 
-  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;
+  const hasOfferText = Boolean(serviceItem?.offer_text);
+  const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+  const serviceCardStyle: React.CSSProperties = hasOfferText
+    ? {
+        borderColor: "transparent",
+        borderStyle: "solid",
+        borderWidth: "6px 6px 0 6px",
+        borderRadius: "18px",
+        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
       }
-      node.textContent = formatTime(remaining);
-    }, 1000);
-
-    node.dataset.countdownId = String(id);
-  };
+    : {};
 
   const labelId =
     typeof serviceItem.boarding_stages === "string"
@@ -174,9 +135,6 @@ function ServiceItemMobile({
 
   return (
     <div
-      // className={`relative  ${
-      //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
-      //   }
       className={`relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
         serviceItem?.is_direct_trip ||
         isConexion ||
@@ -187,39 +145,21 @@ function ServiceItemMobile({
       }	`}
       style={{ backgroundColor: "#fff", zIndex: 1 }}
     >
-      {/* <TopAmenitieMobile
-        showTopLabel={showTopLabel}
-        isSoldOut={isSoldOut}
-        seatPriceColor={colors.seatPriceColor}
-        bombAnim={serviceItem.icons.bombAnim}
-        priorityStageAnim={serviceItem.icons.priorityStageAnim}
-        countdownSeconds={countdownSeconds}
-        onCountdownEnd={() => {
-          const cardEl = document.getElementById(
-            `service-card-${serviceItem.id}`,
-          );
-          if (!cardEl) return;
-          cardEl.style.border = "1px solid #ccc";
-          if (!showTopLabel) {
-            cardEl.style.borderRadius = "10px";
-          }
-        }}
-        offerText={serviceItem?.offer_text}
-      /> */}
       <div
-        className={" rounded-[20px]"}
-        style={{
-          backgroundColor: "#fff",
-          zIndex: 1,
-          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-          borderRadius: "12px",
-          border: "1px solid #ccc",
-        }}
+        className={`bg-white z-1 ${
+          hasOfferText
+            ? "rounded-[18px]"
+            : "rounded-[10px] border border-[#ccc]"
+        }`}
+        style={serviceCardStyle}
       >
         <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]}
@@ -289,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}
@@ -317,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);
             }}
@@ -331,77 +265,14 @@ function ServiceItemMobile({
           />
         </div>
 
-        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] 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: isSoldOut ? "#ccc" : colors.ratingBottomColor,
-              }}
-            >
-              <div className={isSoldOut ? "grayscale" : ""}>
-                <LottiePlayer
-                  animationData={serviceItem.icons.priorityStageAnim}
-                  width="18px"
-                  height="18px"
-                />
-              </div>
-              <div
-                className={
-                  isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]`
-                }
-              >
-                {showTopLabel}
-              </div>
-            </div>
-          )}
-          {serviceItem?.is_direct_trip === true && (
-            <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: isSoldOut ? "#ddd" : colors.tooltipBgColor,
-                color: isSoldOut ? "#bbb" : colors.directoColor,
-              }}
-            >
-              <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 ${
-                isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
-              }`}
-              style={{
-                backgroundColor: !isSoldOut && colors.ratingBottomColor,
-              }}
-            >
-              {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: isSoldOut ? "#ddd" : colors.tooltipColor,
-              }}
-            >
-              <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) */}
@@ -409,7 +280,7 @@ function ServiceItemMobile({
         <div
           className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
           style={{
-            backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
+            background: isSoldOut ? "#ccc" : offerGradient,
             opacity: isSoldOut ? 0.5 : 1,
             borderRadius: "0 0 14px 14px",
             zIndex: -1,
@@ -419,15 +290,96 @@ function ServiceItemMobile({
             className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
             style={{ lineHeight: 1.6 }}
           >
-            <div className="flex flex-col gap-[4px]">
+            <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="14px"
+                    height="14px"
+                  />
+                </div>
+                <div
+                  className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                  style={{
+                    color: "#fff",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {/* <span className="min-[380px]:text-[12px] bold-text">
+                    {serviceItem?.offer_text || ""}
+                  </span>{" "} */}
+                  {/* <span className="min-[380px]:text-[12px]">|</span>{" "} */}
+                  <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                    Termina en&nbsp;
+                    <span
+                      className="bold-text"
+                      ref={(node) => commonService.startCountdown(node, 599)}
+                      style={{
+                        fontVariantNumeric: "tabular-nums",
+                        display: "inline-block",
+                      }}
+                    />
+                  </span>
+                </div>
+              </div>
+              <div
+                className="flex flex-col items-end"
+                style={{
+                  color: "#fff",
+                }}
+              >
+                <div className="flex items-center">
+                  <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={(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>
+                </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]">
               <div
                 className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
               >
                 <div className={isLongOfferText ? "mt-[2px]" : ""}>
                   <LottiePlayer
                     animationData={serviceItem.icons.bombAnim}
-                    width="18px"
-                    height="18px"
+                    width="12px"
+                    height="12px"
                   />
                 </div>
                 <div
@@ -445,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",
@@ -464,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>{" "}
@@ -474,7 +426,7 @@ function ServiceItemMobile({
                   </span>
                 </span>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       )}

package/src/components/ServiceItem/mobileTypes.ts

@@ -117,6 +117,9 @@ export interface MobileServiceItemProps {
       whiteBoardingIcon?: string;
       downArrow?: string;
       personIcon?: string
+      specialDeparture?: string;
+      fireIcon?: string;
+      directoIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

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/types.ts

@@ -112,6 +112,8 @@ export interface ServiceItemProps {
       wifiIcon?: string;
       cortinaIcon?: string;
       frazaIcon?: string;
+      specialDeparture?: string;
+      fireIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

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>
   );