kupos-ui-components-lib 9.3.1 → 9.3.3

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -24,18 +24,18 @@ import opsitesLocationAnimation from "../../assets/images/anims/service_list/ops
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
 
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 
 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"];
 
@@ -69,6 +69,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  dotAnimation: {
+    kupos: dotAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -103,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;
@@ -183,10 +164,19 @@ 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, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
+  const serviceCardStyle: React.CSSProperties = hasOfferText
+    ? {
+        borderColor: "transparent",
+        borderStyle: "solid",
+        borderWidth: "6px 6px 0 6px",
+        borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
+        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+      }
+    : {};
 
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
@@ -288,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 = [
     {
@@ -350,20 +312,6 @@ function ServiceItemPB({
       ),
     },
 
-    // {
-    //   key: "directo",
-    //   width: "12%",
-    //   condition: serviceItem?.is_direct_trip === true,
-    //   render: (
-    //     <DirectoBlock
-    //       translation={translation}
-    //       getAnimationIcon={getAnimationIcon}
-    //       colors={colors}
-    //       isSoldOut={isSoldOut}
-    //     />
-    //   ),
-    // },
-
     {
       key: "pet",
       width: "20%",
@@ -432,13 +380,7 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          // className={`relative ${
-          //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          // } mt-[14px]`}
-
-          className={`relative ${
-            serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          } ${
+          className={`relative ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -446,41 +388,14 @@ function ServiceItemPB({
               : "mt-[20px]"
           }	`}
         >
-          {/* <TopAmenities
-            showPromo={showPromo}
-            showTopLabel={showTopLabel}
-            isSoldOut={isSoldOut}
-            priceColor={colors.priceColor}
-            buttonColor={colors.kuposButtonColor}
-            boardingIcon={renderIcon("whiteBoardingIcon", "14px")}
-            getAnimationIcon={getAnimationIcon}
-            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
             id={`service-card-${serviceItem.id}`}
-            className="bg-white mx-auto relative rounded-[10px] border border-[#ccc]"
-            // style={{
-            //   border:
-            //     countdownSeconds > 0 && serviceItem?.offer_text
-            //       ? `1px solid ${colors.priceColor}`
-            //       : "1px solid #ccc",
-            //   borderRadius: showTopLabel
-            //     ? "10px 0 10px 10px"
-            //     : countdownSeconds > 0 && serviceItem?.offer_text
-            //       ? "10px 0 10px 10px"
-            //       : "10px",
-            // }}
+            className={`bg-white mx-auto relative ${
+              hasOfferText
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"
+            }`}
+            style={serviceCardStyle}
           >
             <div
               className=" pt-[20px]"
@@ -488,28 +403,19 @@ function ServiceItemPB({
                 padding: coachKey
                   ? "15px 15px 20px 15px"
                   : "20px 15px 11px 15px",
+                marginTop: hasOfferText ? "14px" : "0",
               }}
             >
               <div
-                // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
                 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
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "5px",
-                  }}
-                >
-                  <div
-                    // className="flex items-center justify-center m-[auto]"
-                    className=""
-                  >
+                <div className="flex flex-col gap-[5px]">
+                  <div>
                     <img
                       src={serviceItem.operator_details[0]}
                       alt="service logo"
@@ -565,13 +471,14 @@ function ServiceItemPB({
                     currencySign={currencySign}
                     removeDuplicateSeats={removeDuplicateSeats}
                     isPeru={isPeru}
+                    renderIcon={renderIcon}
                   />
                 </div>
 
                 {/* BUTTON */}
 
                 <div className="relative">
-                  {showLastSeats ? (
+                  {/* {showLastSeats ? (
                     <div
                       className="flex justify-end mr-[11px] w-[100%] right-[0px] absolute"
                       style={{
@@ -585,7 +492,7 @@ function ServiceItemPB({
                           </div>
                         )}
                     </div>
-                  ) : null}
+                  ) : null} */}
                   <KuposButton
                     isSoldOut={isSoldOut}
                     isLoading={serviceDetailsLoading}
@@ -595,6 +502,21 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
+                  {showLastSeats ? (
+                    <div
+                      className="flex justify-center mr-[11px] w-[100%] right-[0px]"
+                      style={{
+                        top: serviceDetailsLoading ? "-17px" : "-20px",
+                      }}
+                    >
+                      {serviceItem?.available_seats < 10 &&
+                        serviceItem?.available_seats > 0 && (
+                          <div className="text-[12px] text-[#464647] mt-1 text-center">
+                            ¡Últimos Asientos!
+                          </div>
+                        )}
+                    </div>
+                  ) : null}
                 </div>
               </div>
               <BottomAmenities
@@ -630,7 +552,19 @@ function ServiceItemPB({
               }}
             >
               <div
-                style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
+                style={{
+                  overflow: "hidden",
+                  minHeight: 0,
+                  marginTop: "-10px",
+                  ...(hasOfferText
+                    ? {
+                        borderLeft: "6px solid #ff5964",
+                        borderRight: "6px solid #ff8842",
+                        borderRadius: "0 0 18px 18px",
+                        boxSizing: "border-box",
+                      }
+                    : {}),
+                }}
               >
                 <ExpandedDropdown
                   serviceItem={serviceItem}
@@ -649,35 +583,10 @@ function ServiceItemPB({
             <div
               className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]"
               style={{
-                backgroundColor: colors?.bottomStripColor,
+                background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
-              {/* <div className="flex justify-between items-center w-full">
-                <div className="flex items-center">
-                  <LottiePlayer
-                    animationData={getAnimationIcon("bombAnimation")}
-                    width="18px"
-                    height="18px"
-                  />
-                  <span className="bold-text ml-[8px]">
-                    {" "}
-                    {serviceItem?.offer_text || ""}
-                  </span>
-                </div>
-                <div>
-                  Termina en&nbsp;
-                  <span
-                    className="bold-text text-end"
-                    ref={startCountdown}
-                    style={{
-                      fontVariantNumeric: "tabular-nums",
-                      display: "inline-block",
-                      // minWidth: "70px",
-                    }}
-                  />
-                </div>
-              </div> */}
               <div className="flex  justify-between items-center w-full">
                 <div className="flex items-center ">
                   <div className="flex items-center">
@@ -693,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",
@@ -704,101 +613,50 @@ function ServiceItemPB({
                   </div>
                 </div>
                 <div className="flex items-center">
-                  {renderIcon("personIcon", "16px")}
-                  &nbsp;
+                  {/* {renderIcon("personIcon", "16px")} */}
+                  <LottiePlayer
+                    animationData={getAnimationIcon("dotAnimation")}
+                    width="12px"
+                    height="12px"
+                  />
+
                   <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-[15px] z-10 ">
-            {showTopLabel && (
-              <div
-                className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`}
-                style={{
-                  backgroundColor: isSoldOut
-                    ? "#ddd"
-                    : colors.ratingBottomColor,
-                }}
-              >
-                <div className={isSoldOut ? "grayscale" : ""}>
-                  <LottiePlayer
-                    // animationData={serviceItem.icons.priorityStageAnim}
-                    animationData={getAnimationIcon("priorityStageAnim")}
-                    width="14px"
-                    height="14px"
-                  />
-                </div>
-                <div
-                  className={
-                    isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
-                  }
-                >
-                  {showTopLabel}
-                </div>
-              </div>
-            )}
-            {serviceItem?.is_transpordo && (
-              <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`}
-                style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                }}
-              >
-                {renderIcon("connectingServiceIcon", "12px")}
-                {/* <LottiePlayer
-                  animationData={serviceItem.icons.connectingServiceIcon}
-                  // animationData={getAnimationIcon(connectingServiceIcon)}
-                  width="14px"
-                  height="14px"
-                /> */}
-                <div>{"Conexión"}</div>
-              </div>
-            )}
-            {serviceItem?.is_direct_trip && (
-              <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
-                style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                }}
-              >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.directoAnim}
-                  animationData={getAnimationIcon("directoAnim")}
-                  width="14px"
-                  height="14px"
-                />
-                <div>{translation?.directService}</div>
-              </div>
-            )}
-            {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
-              <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
-                style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
-                }}
-              >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.directoAnim}
-                  animationData={getAnimationIcon("directoAnim")}
-                  width="14px"
-                  height="14px"
-                />
-                <div>{"Tren Express"}</div>
-              </div>
-            )}
-          </div>
+          <ServiceBadges
+            showTopLabel={showTopLabel}
+            isSoldOut={isSoldOut}
+            colors={colors}
+            renderIcon={renderIcon}
+            translation={translation}
+            serviceItem={serviceItem}
+          />
         </div>
       )}
     </>