kupos-ui-components-lib 9.0.11 → 9.1.0

package/src/assets/images/anims/service_list/priority_stage.json

@@ -1 +1 @@
-{"nm":"Main Scene","ddd":0,"h":100,"w":100,"meta":{"g":"@lottiefiles/creator 1.86.1"},"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[71.60193719360672,49.48916172143199]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[90,90],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":31},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[90,90],"t":63},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":97},{"s":[90,90],"t":133}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[71.60193719360672,49.48916172143199]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":5,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[24.18,0],[0,-24.18],[-24.18,0],[0,24.18]],"o":[[0,-24.18],[-24.18,0],[0,24.18],[24.18,0],[0,0]],"v":[[93.78,50],[50,6.22],[6.22,50],[50,93.78],[93.78,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[11.23,0],[0,-11.23],[-11.23,0],[0,11.23]],"o":[[0,-11.23],[-11.23,0],[0,11.23],[11.23,0],[0,0]],"v":[[70.34,50],[50,29.66],[29.66,50],[50,70.34],[70.34,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[14.66,0],[0,14.66],[-14.66,0],[0,-14.66]],"o":[[0,14.66],[-14.66,0],[0,-14.66],[14.66,0],[0,0]],"v":[[76.55,50],[50,76.55],[23.45,50],[50,23.45],[76.55,50]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[27.61,0],[0,27.61],[-27.61,0],[0,-27.61]],"o":[[0,27.61],[-27.61,0],[0,-27.61],[27.61,0],[0,0]],"v":[[100,50],[50,100],[0,50],[50,0],[100,50]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[71.60193719360672,49.48916172143199]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[71.60193719360672,49.48916172143199]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":30,"op":150,"ip":0,"assets":[]}
+{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.25.0"},"layers":[{"ty":0,"nm":" Main Scene","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,250]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","ind":1}],"v":"5.7.0","fr":30,"op":90,"ip":0,"assets":[{"nm":"Main Scene","id":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","layers":[{"ty":4,"nm":"Shape Layer - SVG","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[32.5,32.5]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":4},{"s":[619.0851,619.0851],"t":14}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[249.94198808735723,248.20464459007883]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[100],"t":7}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[1.0100000000000051,0.14999999999999858],[0,0],[0,0],[1.0400000000000063,0],[0.46000000000000085,-0.9199999999999999],[0,0],[0,0],[0.3200000000000003,-0.9899999999999984],[-0.75,-0.740000000000002],[0,0],[0,0],[-0.8599999999999994,-0.6299999999999955],[-0.9000000000000004,0.480000000000004],[0,0],[0,0],[-0.4299999999999997,0],[-0.47000000000000597,0.3400000000000034],[0.14999999999999858,1.0300000000000011],[0,0],[0,0],[0.3299999999999983,0.990000000000002],[0,0]],"o":[[-0.3200000000000003,-0.9899999999999984],[0,0],[0,0],[-0.46999999999999886,-0.96],[-1.0400000000000063,0],[0,0],[0,0],[-1.0099999999999998,0.14999999999999858],[-0.32000000000000006,0.9899999999999984],[0,0],[0,0],[-0.17999999999999972,1.0300000000000011],[0.8300000000000001,0.6300000000000026],[0,0],[0,0],[0.3999999999999986,0.21999999999999886],[0.5399999999999991,0],[0.8299999999999983,-0.6300000000000026],[0,0],[0,0],[0.7199999999999989,-0.7399999999999984],[0,0],[0,0]],"v":[[62.9,25.51],[60.739999999999995,23.67],[42.89999999999999,21.020000000000003],[34.93999999999999,4.510000000000002],[32.52999999999999,3.0000000000000018],[30.119999999999987,4.510000000000002],[22.149999999999988,21.020000000000003],[4.309999999999988,23.67],[2.149999999999988,25.51],[2.829999999999988,28.310000000000002],[15.729999999999988,41.17],[12.669999999999987,59.34],[13.749999999999988,62.03],[16.559999999999988,62.25],[32.48999999999999,53.66],[48.41999999999999,62.25],[49.679999999999986,62.58],[51.26999999999999,62.059999999999995],[52.34999999999999,59.37],[49.289999999999985,41.199999999999996],[62.18999999999998,28.339999999999996],[62.86999999999998,25.539999999999996],[62.90999999999998,25.499999999999996]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":3.58},"c":{"a":0,"k":[0.9765,0.5373,0.2706]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}]}]}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -268,6 +268,35 @@ function ServiceItemPB({
 
   const countdownSeconds = 7830;
 
+  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 h = Math.floor(totalSecs / 3600);
+      const m = Math.floor((totalSecs % 3600) / 60);
+      const s = totalSecs % 60;
+      return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    const id = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        remaining = 0;
+        clearInterval(id);
+      }
+      node.textContent = formatTime(remaining);
+    }, 1000);
+
+    node.dataset.countdownId = String(id);
+  };
+
   const items = [
     {
       key: "amenities",
@@ -304,7 +333,7 @@ function ServiceItemPB({
     {
       key: "directo",
       width: "12%",
-      condition: serviceItem?.is_direct_trip,
+      condition: serviceItem?.is_direct_trip === true,
       render: (
         <DirectoBlock
           translation={translation}
@@ -334,7 +363,7 @@ function ServiceItemPB({
     {
       key: "flexible",
       width: "20%",
-      condition: serviceItem.is_change_ticket,
+      condition: serviceItem.is_change_ticket === true,
       render: (
         <FlexibleBlock
           translation={translation}
@@ -383,11 +412,21 @@ function ServiceItemPB({
         />
       ) : (
         <div
+          // className={`relative ${
+          //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+          // } mt-[14px]`}
+
           className={`relative ${
             serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          } mt-[14px]`}
+          } ${
+            serviceItem?.is_direct_trip ||
+            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+            showTopLabel
+              ? "mt-[24px]"
+              : "mt-[20px]"
+          }	`}
         >
-          <TopAmenities
+          {/* <TopAmenities
             showPromo={showPromo}
             showTopLabel={showTopLabel}
             isSoldOut={isSoldOut}
@@ -406,21 +445,22 @@ function ServiceItemPB({
                 cardEl.style.borderRadius = "10px";
               }
             }}
-          />
+            offerText={serviceItem?.offer_text}
+          /> */}
           <div
             id={`service-card-${serviceItem.id}`}
-            className="bg-white mx-auto relative "
-            style={{
-              border:
-                countdownSeconds > 0
-                  ? `1px solid ${colors.priceColor}`
-                  : "1px solid #ccc",
-              borderRadius: showTopLabel
-                ? "10px 0 10px 10px"
-                : countdownSeconds > 0
-                  ? "10px 0 10px 10px"
-                  : "10px",
-            }}
+            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",
+            // }}
           >
             <div
               //  className="p-[15px] pt-[20px]"
@@ -585,14 +625,127 @@ function ServiceItemPB({
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
-              <LottiePlayer
-                animationData={getAnimationIcon("promoAnim")}
+              <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>
+              {/* <LottiePlayer
+                animationData={getAnimationIcon("bombAnimation")}
                 width="18px"
                 height="18px"
               />
-              <span className="ml-[10px]">{serviceItem?.offer_text}</span>
+              <span className="bold-text ml-[8px]">
+                {serviceItem?.offer_text || ""}&nbsp;
+              </span>{" "}
+              | Termina en&nbsp;
+              <span
+                className="bold-text text-end"
+                ref={startCountdown}
+                style={{
+                  fontVariantNumeric: "tabular-nums",
+                  display: "inline-block",
+                  minWidth: "70px",
+                }}
+              /> */}
             </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,
+                }}
+              >
+                <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>
         </div>
       )}
     </>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -51,6 +51,35 @@ function ServiceItemMobile({
 
   const countdownSeconds = 7830;
 
+  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 h = Math.floor(totalSecs / 3600);
+      const m = Math.floor((totalSecs % 3600) / 60);
+      const s = totalSecs % 60;
+      return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    const id = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        remaining = 0;
+        clearInterval(id);
+      }
+      node.textContent = formatTime(remaining);
+    }, 1000);
+
+    node.dataset.countdownId = String(id);
+  };
+
   const labelId =
     typeof serviceItem.boarding_stages === "string"
       ? serviceItem.boarding_stages.split("|")[0]
@@ -130,12 +159,12 @@ function ServiceItemMobile({
         isConexion ||
         serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
         showTopLabel
-          ? "mt-[10px]"
+          ? "mt-[20px]"
           : "mt-[10px]"
       }	`}
       style={{ backgroundColor: "#fff", zIndex: 1 }}
     >
-      <TopAmenitieMobile
+      {/* <TopAmenitieMobile
         showTopLabel={showTopLabel}
         isSoldOut={isSoldOut}
         seatPriceColor={colors.seatPriceColor}
@@ -152,28 +181,19 @@ function ServiceItemMobile({
             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 0 12px 12px",
-          border: `1px solid ${colors.bottomStripColor}`,
+          borderRadius: "12px",
+          border: "1px solid #ccc",
         }}
       >
-        <div
-          // className={` ${
-          //   serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-          //   showTopLabel ||
-          //   serviceItem?.is_direct_trip ||
-          //   serviceItem?.is_transpordo
-          //     ? "mt-[10px]"
-          //     : ""
-          // }`}
-          style={{ padding: "12px 12px 8px 12px" }}
-        >
+        <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">
@@ -210,7 +230,7 @@ function ServiceItemMobile({
                       className="flex items-center cursor-pointer "
                       style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
                     >
-                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px]">
+                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis">
                         {serviceItem.operator_details[2]}
                       </span>
                     </div>
@@ -228,22 +248,6 @@ function ServiceItemMobile({
                   )}
               </div>
             ) : null}
-            {/* {showLastSeats ? (
-              <div className="flex justify-end  -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center ">
-                {serviceItem?.available_seats < 10 &&
-                  serviceItem?.available_seats > 0 && (
-                    <span
-                      className="text-[12px] text-[red] mt-1  flex justify-end pt-[5px] pb-[5px] pl-[15px] pr-[15px] rounded-[8px] "
-                      style={{
-                        backgroundColor: colors.lastSeatBg,
-                        color: colors.lastSeatText,
-                      }}
-                    >
-                      ¡ Últimos Asientos!
-                    </span>
-                  )}
-              </div>
-            ) : null} */}
           </div>
 
           <DateTimeSectionMobile
@@ -313,21 +317,57 @@ function ServiceItemMobile({
               opacity: isSoldOut ? 0.5 : 1,
             }}
           >
-            <LottiePlayer
+            <div className="flex justify-between items-center w-full">
+              <div className="flex items-center">
+                <LottiePlayer
+                  animationData={serviceItem.icons.bombAnim}
+                  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>
+            {/* <LottiePlayer
               animationData={serviceItem.icons.promoAnim}
               width="18px"
               height="18px"
             />
+          
             <span className="ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]">
-              {serviceItem?.offer_text}
-            </span>
+              {serviceItem?.offer_text || ""}&nbsp;
+            </span>{" "}
+            | Termina en&nbsp;
+            <span
+              className="bold-text"
+              ref={startCountdown}
+              style={{
+                fontVariantNumeric: "tabular-nums",
+                display: "inline-block",
+                minWidth: "70px",
+              }}
+            /> */}
           </div>
         )}
 
-        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
-          {/* {showTopLabel && (
+        <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-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `}
+              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,
               }}
@@ -348,7 +388,6 @@ function ServiceItemMobile({
               </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 ${
@@ -363,22 +402,7 @@ function ServiceItemMobile({
               <div>Conexión</div>
             </div>
           )}
-          {serviceItem?.is_direct_trip && (
-            <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>
-          )}
+
           {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 `}
@@ -393,7 +417,7 @@ function ServiceItemMobile({
               />
               <div>{"Tren Express"}</div>
             </div>
-          )} */}
+          )}
         </div>
       </div>
 

package/src/ui/AmenitiesBlock.tsx

@@ -81,7 +81,7 @@ const AmenitiesBlock = ({
   const grayscaleClass = isSoldOut ? "grayscale" : "";
 
   return (
-    <div className="flex items-center gap-[6px]">
+    <div className="relative flex items-center gap-[6px] group cursor-pointer">
       {/* AMENITIES */}
       {visibleAmenities.map((val, key) => {
         const raw = metaData.amenities[val];
@@ -89,49 +89,49 @@ const AmenitiesBlock = ({
         const baseName = getAmenityBaseName(raw);
 
         return (
-          <div key={key} className="relative group cursor-pointer">
+          <div key={key}>
             <div className={grayscaleClass}>
               <SvgAmenities
                 moreAnemities={false}
                 name={baseName.toLowerCase()}
               />
             </div>
-
-            {/* Tooltip – show ALL amenities */}
-            <div
-              className={TOOLTIP_CLASS}
-              style={{
-                backgroundColor: colors.tooltipColor,
-                zIndex: 21,
-                padding: "12px",
-              }}
-            >
-              <TooltipArrow color={colors.tooltipColor} />
-              <div className="flex flex-col gap-[10px]">
-                {amenities.map((id, i) => {
-                  const rawItem = metaData.amenities[id];
-                  if (isWater(rawItem)) return null;
-                  const name = getAmenityBaseName(rawItem);
-                  return (
-                    <div
-                      key={i}
-                      className="flex items-center gap-[5px] text-xs whitespace-nowrap"
-                    >
-                      <SvgAmenities
-                        moreAnemities={true}
-                        name={name.toUpperCase()}
-                        color="white"
-                      />
-                      {getAmenityName(name.split("_").join(" "))}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
           </div>
         );
       })}
 
+      {/* Tooltip – show ALL amenities on container hover */}
+      <div
+        className={TOOLTIP_CLASS}
+        style={{
+          backgroundColor: colors.bottomStripColor,
+          zIndex: 21,
+          padding: "12px",
+        }}
+      >
+        <TooltipArrow color={colors.tooltipColor} />
+        <div className="flex flex-col gap-[10px]">
+          {amenities.map((id, i) => {
+            const rawItem = metaData.amenities[id];
+            if (isWater(rawItem)) return null;
+            const name = getAmenityBaseName(rawItem);
+            return (
+              <div
+                key={i}
+                className="flex items-center gap-[5px] text-xs whitespace-nowrap"
+              >
+                <SvgAmenities
+                  moreAnemities={true}
+                  name={name.toUpperCase()}
+                  color="white"
+                />
+                {getAmenityName(name.split("_").join(" "))}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
       {/* PLUS ICON */}
       {/* {shouldShowPlus && (
         <div className="relative ml-1 cursor-pointer">

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -38,6 +38,7 @@ function BottomAmenities({
   downArrowIcon,
   onToggleExpand,
 }: BottomAmenitiesProps): React.ReactElement {
+  console.log("🚀 ~ BottomAmenities ~ isItemExpanded:", isItemExpanded);
   const hasPetInfo =
     serviceItem.pet_seat_info &&
     Object.keys(serviceItem.pet_seat_info).length > 0;
@@ -96,7 +97,7 @@ function BottomAmenities({
         {/* DOWN ARROW ICON */}
         {/* {showDownArrow ? ( */}
         <div
-          className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] `}
+          className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`}
           onClick={onToggleExpand}
         >
           {downArrowIcon}

package/src/ui/DateTimeSection/DateTimeSection.tsx

@@ -192,10 +192,10 @@ function DateTimeSection({
           >
             <div className="font-[900] bold-text">
               {removeArrivalTime
-                ? null
+                ? "\u00A0"
                 : serviceItem.arr_time
                   ? DateService.formatTime(serviceItem.arr_time)
-                  : null}
+                  : "\u00A0"}
             </div>
           </StageTooltip>
         )}

package/src/ui/DirectoBlock.tsx

@@ -15,12 +15,12 @@ const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (
       {translation?.directService}
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap w-fit z-10 mt-2.5 text-center shadow-service text-[12px]"
-        style={{ backgroundColor: colors.tooltipColor }}
+        style={{ backgroundColor: colors.bottomStripColor }}
       >
         {/* Tooltip arrow */}
         <div
           className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
-          style={{ borderBottomColor: colors.tooltipColor }}
+          style={{ borderBottomColor: colors.bottomStripColor }}
         ></div>
         {translation?.directServiceText}
       </div>

package/src/ui/DurationBlock.tsx

@@ -16,12 +16,12 @@ const DurationBlock = ({
       {serviceItem.duration} {translation.hours}
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
-        style={{ backgroundColor: colors.tooltipColor }}
+        style={{ backgroundColor: colors.bottomStripColor }}
       >
         {/* Tooltip arrow */}
         <div
           className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
-          style={{ borderBottomColor: colors.tooltipColor }}
+          style={{ borderBottomColor: colors.bottomStripColor }}
         ></div>
         Duración estimada del viaje
       </div>

package/src/ui/FlexibleBlock.tsx

@@ -26,14 +26,15 @@ const FlexibleBlock = ({
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
         style={{
-          backgroundColor: colors.tooltipColor,
+          backgroundColor: colors.bottomStripColor,
           lineHeight: "1.5",
+          zIndex: "1000",
         }}
       >
         {/* Tooltip arrow */}
         <div
           className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
-          style={{ borderBottomColor: colors.tooltipColor }}
+          style={{ borderBottomColor: colors.bottomStripColor }}
         ></div>
         Esta empresa permite cambios sin costo hasta (
         {serviceItem?.change_ticket_hours ?? 6}) horas antes del viaje.