kupos-ui-components-lib 9.7.0 → 9.7.2

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -23,206 +23,68 @@ const HARDCODED_OPERATORS = [
   },
 ];
 
-const HARDCODED_COUNTDOWN = "09:55";
-
-const HOW_IT_WORKS_STEPS = [
-  {
-    icon: "flexible",
-    name: "1. Salida flexible",
-    text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
-  },
-  {
-    icon: "bus",
-    name: "2. Empresa asignada",
-    text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
-  },
-  {
-    icon: "price",
-    name: "3. Precio garantizado",
-    text: "Al seleccionar este servicio aseguras el precio reducido.",
-  },
-  {
-    icon: "ticket",
-    name: "4. ¡Listo!",
-    text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
-  },
-];
-
-const FeatureStepIcon = ({ icon }) => {
-  const iconClassName = "h-[30px] w-[30px] text-[#171717]";
-
-  switch (icon) {
-    case "flexible":
-      return (
-        <svg
-          className={iconClassName}
-          viewBox="0 0 40 40"
-          fill="none"
-          aria-hidden="true"
-        >
-          <path
-            d="M31.5 13.4A13 13 0 0 0 8 12.3"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-          />
-          <path
-            d="m7.4 7.7.2 5.2 5.1-1.2M8.5 26.6A13 13 0 0 0 32 27.7"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="m32.6 32.3-.2-5.2-5.1 1.2"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    case "bus":
-      return (
-        <svg
-          className={iconClassName}
-          viewBox="0 0 40 40"
-          fill="none"
-          aria-hidden="true"
-        >
-          <rect
-            x="8"
-            y="4.5"
-            width="24"
-            height="27"
-            rx="2.5"
-            stroke="currentColor"
-            strokeWidth="2.2"
-          />
-          <path
-            d="M8 18.5h24M12 9h16M12 26h4m8 0h4M11 31.5v3h5v-3m8 0v3h5v-3M5.5 10v7m29-7v7"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-          />
-        </svg>
-      );
-    case "price":
-      return (
-        <svg
-          className={iconClassName}
-          viewBox="0 0 40 40"
-          fill="none"
-          aria-hidden="true"
-        >
-          <circle
-            cx="20"
-            cy="20"
-            r="14"
-            stroke="currentColor"
-            strokeWidth="2.2"
-          />
-          <path
-            d="M23.7 15.4c-1-.7-2.2-1-3.6-1-2.2 0-3.8 1.1-3.8 2.8 0 4.2 7.4 1.8 7.4 5.8 0 1.8-1.6 2.8-4 2.8-1.5 0-2.9-.4-4-1.2M20 11.7v2.5m0 11.8v2.4"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-          />
-        </svg>
-      );
-    default:
-      return (
-        <svg
-          className={iconClassName}
-          viewBox="0 0 40 40"
-          fill="none"
-          aria-hidden="true"
-        >
-          <path
-            d="M7 11h26v6a3.5 3.5 0 0 0 0 7v6H7v-6a3.5 3.5 0 0 0 0-7v-6Z"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M22 12.5v3m0 3v3m0 3v4"
-            stroke="currentColor"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-          />
-        </svg>
-      );
-  }
-};
-
-const AssuranceIcon = ({ type }) => {
-  const iconClassName = "h-[18px] w-[18px] shrink-0 text-white";
-
-  if (type === "pending") {
-    return (
-      <svg
-        className={iconClassName}
-        viewBox="0 0 20 20"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M4.2 8.2a6.2 6.2 0 1 1 .5 5.1"
-          stroke="currentColor"
-          strokeWidth="1.8"
-          strokeLinecap="round"
-        />
-        <path
-          d="M4.2 4.8v3.4h3.4"
-          stroke="currentColor"
-          strokeWidth="1.8"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      className={iconClassName}
-      viewBox="0 0 20 20"
-      fill="none"
-      aria-hidden="true"
-    >
-      <path
-        d="M10 2.2 16.3 4v5c0 4-2.4 6.8-6.3 8.7C6.1 15.8 3.7 13 3.7 9V4L10 2.2Z"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinejoin="round"
-      />
-      <path
-        d="m6.9 9.7 2.1 2.1 4.3-4.4"
-        stroke="currentColor"
-        strokeWidth="1.7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-
 const FeatureServiceUi = ({
   serviceItem,
   showTopLabel,
-  colors,
   isSoldOut,
   getAnimationIcon,
   cityOrigin,
   cityDestination,
   renderIcon,
   viewersConfig,
+  isFeatureDropDownExpand,
+  onToggleExpand,
+  ticketQuantity = 1,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onBookButtonPress,
 }) => {
   const operators =
     serviceItem?.operators?.length > 0
       ? serviceItem.operators
       : HARDCODED_OPERATORS;
 
+  const isItemExpanded =
+    serviceItem.id === isFeatureDropDownExpand ||
+    isFeatureDropDownExpand === true;
+  const canDecreaseTicketQuantity = ticketQuantity > 1;
+
+  const HOW_IT_WORKS_STEPS = [
+    {
+      icon: "flexible",
+      name: "1. Salida flexible",
+      text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
+    },
+    {
+      icon: "bus",
+      name: "2. Empresa asignada",
+      text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
+    },
+    {
+      icon: "price",
+      name: "3. Precio garantizado",
+      text: "Al seleccionar este servicio aseguras el precio reducido.",
+    },
+    {
+      icon: "ticket",
+      name: "4. ¡Listo!",
+      text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
+    },
+  ];
+
+  const FeatureStepIcon = ({ icon }) => {
+    switch (icon) {
+      case "flexible":
+        return renderIcon("flexibleIcon", "24px");
+      case "bus":
+        return renderIcon("empressaIcon", "24px");
+      case "price":
+        return renderIcon("precioIcon", "24px");
+      default:
+        return renderIcon("listoIcon", "24px");
+    }
+  };
+
   return (
     <div
       // ${
@@ -255,6 +117,8 @@ const FeatureServiceUi = ({
                 padding: "1px 8px",
                 borderRadius: "4px",
                 color: "#fff",
+                animation: "pulse-zoom 2s ease-in-out infinite",
+                whiteSpace: "nowrap",
               }}
             >
               <span>AHORRAS 60%</span>
@@ -271,6 +135,7 @@ const FeatureServiceUi = ({
                   fontVariantNumeric: "tabular-nums",
                   display: "inline-block",
                   color: "#FF5C60",
+                  minWidth: "40px",
                 }}
               />
             </span>
@@ -280,9 +145,9 @@ const FeatureServiceUi = ({
           id={`service-card-${serviceItem.id}`}
           className="bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]"
         >
-          <div className="grid grid-cols-[1.3fr_2fr_1.2fr] gap-[16px] items-stretch">
+          <div className="grid grid-cols-[23%_50%_27%] items-stretch">
             {/* LEFT: origin, destination, flexible, time, confirmed seat */}
-            <div className="flex flex-col justify-between gap-[20px] py-[2px]  ">
+            <div className="flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]">
               <div className="flex flex-col gap-[8px]">
                 <div className="flex items-center gap-[8px]">
                   <img
@@ -300,7 +165,7 @@ const FeatureServiceUi = ({
                   <img
                     src={serviceItem.icons?.whiteDestination}
                     alt="destination"
-                    className={`w-[16px] h-[16px] shrink-0 ${
+                    className={`w-[14px] h-[14px] shrink-0 ${
                       isSoldOut ? "grayscale" : ""
                     }`}
                     style={{ opacity: isSoldOut ? 0.5 : 1 }}
@@ -312,23 +177,6 @@ const FeatureServiceUi = ({
               </div>
 
               <div className="flex flex-col gap-[8px]">
-                {/* Salida flexible badge — uses flexibleIcon */}
-                {/* <div
-                  className="flex items-center gap-[6px] rounded-[8px] px-[8px] py-[4px] w-fit mb-[6px]"
-                  style={{
-                    border: "1px solid #363c48",
-                    backgroundColor: "#1a202e",
-                  }}
-                >
-                  <img
-                    src={serviceItem.icons?.busIcon}
-                    alt="bus"
-                    style={{ width: "20px", height: "20px" }}
-                  />
-                  <span className="text-[12px] whitespace-nowrap">
-                    Salida flexible
-                  </span>
-                </div> */}
                 <div className="text-[12px] bold-text whitespace-nowrap">
                   Entre 07:00 AM y 10:00 AM
                 </div>
@@ -336,8 +184,8 @@ const FeatureServiceUi = ({
               </div>
 
               <div className="flex flex-col items-start gap-[10px] text-[12px] ">
-                <div className="flex items-center gap-[8px]">
-                  <AssuranceIcon type="pending" />
+                <div className="flex items-justify gap-[8px]">
+                  {renderIcon("sheildIcon", "16px")}
 
                   <span
                     className="text-[10px]"
@@ -348,8 +196,8 @@ const FeatureServiceUi = ({
                     Empresa y hora a confirmar luego del pago.
                   </span>
                 </div>
-                <div className="flex items-center gap-[8px]">
-                  <AssuranceIcon type="secured" />
+                <div className="flex items-justify gap-[8px]">
+                  {renderIcon("confirmarIcon", "16px")}
 
                   <span
                     className="text-[10px]"
@@ -364,7 +212,7 @@ const FeatureServiceUi = ({
             </div>
 
             {/* MIDDLE: competing operators + viewers */}
-            <div className="px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
+            <div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
               <div className="text-center">
                 <div className="bold-text text-[14px]">
                   3 operadores compitiendo por tu compra
@@ -374,30 +222,29 @@ const FeatureServiceUi = ({
                 </div> */}
               </div>
 
-              <div className="flex items-stretch justify-center gap-[8px] w-full mb-[16px]">
+              <div className="grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]">
                 {operators.map((op, idx) => (
                   <div
                     key={idx}
-                    className="flex flex-col items-center justify-center gap-[8px] rounded-[8px]"
+                    className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
                     style={{
-                      width: "140px",
                       // height: "80px",
                       border: "1px solid #363c48",
                       backgroundColor: "#1a202e",
-                      padding: "14px",
+                      padding: "14px 10px",
                     }}
                   >
                     <img
                       src={serviceItem.operator_details[0]}
                       alt={op.name}
-                      className={`h-[24px] w-auto object-contain ${
+                      className={`h-[24px] max-w-full object-contain ${
                         isSoldOut ? "grayscale" : ""
                       }`}
                     />
                     <span className="text-[11px] truncate max-w-full text-center">
                       {serviceItem.operator_details[2]}
                     </span>
-                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[16px] py-[4px] rounded-[4px] bold-text">
+                    <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
                       <span>{op?.time}</span>
                     </div>
                     <span className="text-[10px] mt-[6px]">
@@ -408,19 +255,19 @@ const FeatureServiceUi = ({
               </div>
 
               <div
-                className="flex items-center justify-center gap-[6px] text-[12px]"
+                className="flex w-full items-center justify-center gap-[6px] text-[12px]"
                 style={{
                   border: "1px solid #363c48",
                   backgroundColor: "#1a202e",
                   padding: "8px 14px",
                   borderRadius: "24px",
-                  width: "430px",
                 }}
               >
-                <img
-                  src={serviceItem.icons?.userIcon}
-                  alt="eye"
-                  style={{ width: "16px", height: "16px" }}
+                <LottiePlayer
+                  // animationData={serviceItem.icons.flexibleAnim}
+                  animationData={getAnimationIcon("usersAnimation")}
+                  width="18px"
+                  height="18px"
                 />
                 <span>
                   <span className="bold-text text-white">
@@ -435,15 +282,8 @@ const FeatureServiceUi = ({
                         color: "#FF5C60",
                       }}
                     />{" "}
-                    <span
-                      style={{
-                        color: "#FF5C60",
-                      }}
-                    >
-                      personas
-                    </span>
                   </span>{" "}
-                  viendo este viaje |{" "}
+                  viendo |{" "}
                   <span
                     className="bold-text"
                     ref={(node) =>
@@ -457,28 +297,98 @@ const FeatureServiceUi = ({
             </div>
 
             {/* RIGHT: price + button */}
-            <div className="flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]">
+            <div className="flex flex-col justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]">
               <div
                 className="flex flex-col gap-[6px] "
                 style={{
                   alignItems: "center",
                 }}
               >
-                <span className="text-[#FF8F45] bold-text text-[26px] leading-tight">
+                <span
+                  className="text-[#FF8F45] bold-text text-[26px] leading-tight"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                  }}
+                >
                   60% OFF
                 </span>
-                <span className="text-[#666] text-[14px] line-through">
+                {/* <span className="text-[#666] text-[14px] line-through">
+                  $10.000
+                </span> */}
+                <span
+                  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
+                  style={{ position: "relative" }}
+                >
                   $10.000
+                  <span
+                    style={{
+                      position: "absolute",
+                      left: "-2px",
+                      top: "50%",
+                      width: "calc(100% + 4px)",
+                      height: "1px",
+
+                      backgroundColor: "#FF5C60",
+
+                      transform: "rotate(-10deg)",
+                      transformOrigin: "center",
+                    }}
+                  />
                 </span>
                 <span className="text-white bold-text text-[28px] leading-none">
-                  $4.000
+                  {`$${(4000 * ticketQuantity).toLocaleString()}`}
                 </span>
               </div>
 
+              <div className="mt-[4px] flex flex-col items-center gap-[8px]">
+                <span className="text-[12px] text-white">
+                  ¿Cuántos pasajes quieres?
+                </span>
+                <div
+                  className="flex w-full items-center justify-between"
+                  style={{
+                    border: "1px solid #363c48",
+                    backgroundColor: "#1a202e",
+                    padding: "6px 14px",
+                    borderRadius: "14px",
+                  }}
+                >
+                  <button
+                    type="button"
+                    aria-label="Disminuir pasajes"
+                    disabled={!canDecreaseTicketQuantity}
+                    onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
+                    className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-white ${
+                      canDecreaseTicketQuantity
+                        ? "cursor-pointer bg-[#2d374d]"
+                        : "cursor-not-allowed bg-[#222b3d] opacity-50"
+                    }`}
+                  >
+                    -
+                  </button>
+                  <span className="bold-text text-[20px] text-white">
+                    {ticketQuantity}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label="Aumentar pasajes"
+                    onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
+                    className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-white"
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
+
               <button
-                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[12px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
+                type="button"
+                onClick={onBookButtonPress}
+                className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer"
                 style={{
                   backgroundColor: "#FF5C60",
+                  animation: "pulse-zoom 2s ease-in-out infinite",
+                  whiteSpace: "nowrap",
                 }}
               >
                 <LottiePlayer
@@ -491,7 +401,10 @@ const FeatureServiceUi = ({
               </button>
             </div>
 
-            <div className="absolute bottom-[11px] right-[18px]">
+            <div
+              className={`absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
+              onClick={onToggleExpand}
+            >
               <img
                 src={serviceItem.icons?.downArrow}
                 alt="down arrow"
@@ -504,24 +417,39 @@ const FeatureServiceUi = ({
             </div>
           </div>
         </div>
-        <div className="px-[16px] pt-[14px] pb-[6px] text-[13.33px]">
-          <span className="bold-text">¿Cómo funciona?</span>
+        <div
+          className="grid"
+          style={{
+            gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+            opacity: isItemExpanded ? 1 : 0,
+            transition:
+              "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
+          }}
+        >
+          <div
+            className={`min-h-0 overflow-hidden px-[16px] text-[13.33px] ${
+              isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"
+            }`}
+            style={{ transition: "padding 300ms ease-in-out" }}
+          >
+            <span className="bold-text">¿Cómo funciona?</span>
 
-          <div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
-            {HOW_IT_WORKS_STEPS.map((step) => (
-              <div
-                key={step.name}
-                className="flex flex-col items-center text-center text-[#272727]"
-              >
-                <FeatureStepIcon icon={step.icon} />
-                <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
-                  {step.name}
-                </span>
-                <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
-                  {step.text}
-                </span>
-              </div>
-            ))}
+            <div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
+              {HOW_IT_WORKS_STEPS.map((step) => (
+                <div
+                  key={step.name}
+                  className="flex flex-col items-center text-center text-[#272727]"
+                >
+                  <FeatureStepIcon icon={step.icon} />
+                  <span className="bold-text mt-[10px] text-[12px] leading-[14px]">
+                    {step.name}
+                  </span>
+                  <span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
+                    {step.text}
+                  </span>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </div>

package/src/ui/SeatSection/SeatSection.tsx

@@ -477,7 +477,7 @@ function SeatSection({
               className="absolute"
               style={{
                 left: isPeru ? "-1px" : "-18px",
-                bottom:"1px"
+                bottom: "1px",
               }}
             >
               {renderIcon("fireIcon", "16px")}

package/src/utils/CommonService.ts

@@ -329,10 +329,15 @@ const commonService = {
   ) => {
     if (!node || !viewersConfig) return;
 
+    const { min, max, interval = 5000 } = viewersConfig;
+    const configKey = `${min}-${max}-${interval}`;
+    if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
+      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;
 
@@ -347,6 +352,7 @@ const commonService = {
     }, interval);
 
     node.dataset.viewerId = String(id);
+    node.dataset.viewerConfig = configKey;
   },
 
   startCountdown: (
@@ -388,6 +394,11 @@ const commonService = {
   ) => {
     if (!node) return;
 
+    const configKey = `${min}-${max}`;
+    if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
+      return;
+    }
+
     const prevId = node.dataset.comprandoId;
     if (prevId) clearInterval(Number(prevId));
 
@@ -408,6 +419,7 @@ const commonService = {
     }, 5000); // Update every 5 seconds
 
     node.dataset.comprandoId = String(id);
+    node.dataset.comprandoConfig = configKey;
   },
 };