kupos-ui-components-lib 9.0.6 → 9.0.8

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-import DateService from "../../utils/DateService";
 import CommonService from "../../utils/CommonService";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
@@ -28,14 +27,15 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.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 StageTooltip from "../../ui/StagesTooltip";
 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";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -71,22 +71,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   },
 };
 
-const convertTo24Hour = (depTime: string): string => {
-  const hasAM = depTime.includes("AM");
-  const hasPM = depTime.includes("PM");
-  const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
-  const [hour, minute] = timePart.split(":").map(Number);
-  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
-
-  if (hasAM) {
-    return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
-  }
-  if (hasPM) {
-    return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
-  }
-  return timePart;
-};
-
 function ServiceItemPB({
   serviceItem,
   onBookButtonPress,
@@ -282,10 +266,7 @@ function ServiceItemPB({
     onBookButtonPress();
   };
 
-  const depTime = serviceItem.dep_time || "";
-  const hasAM = depTime.includes("AM");
-  const hasPM = depTime.includes("PM");
-  const cleanedDepTime = convertTo24Hour(depTime);
+  const countdownSeconds = 7830;
 
   const items = [
     {
@@ -323,16 +304,14 @@ function ServiceItemPB({
     {
       key: "directo",
       width: "12%",
-      condition: serviceItem?.is_direct_trip,
+      condition: !serviceItem?.is_direct_trip,
       render: (
-        <div className="flex items-center gap-[10px] text-[12.5px] z-10 mt-[6px]">
-          <LottiePlayer
-            animationData={getAnimationIcon("directoAnim")}
-            width="14px"
-            height="14px"
-          />
-          <div>{translation?.directService}</div>
-        </div>
+        <DirectoBlock
+          translation={translation}
+          getAnimationIcon={getAnimationIcon}
+          colors={colors}
+          isSoldOut={isSoldOut}
+        />
       ),
     },
 
@@ -416,18 +395,31 @@ function ServiceItemPB({
             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";
+              }
+            }}
           />
           <div
-            className="bg-white mx-auto relative"
+            id={`service-card-${serviceItem.id}`}
+            className="bg-white mx-auto relative "
             style={{
-              border: `1px solid ${colors.priceColor}`,
-              // showPromo
-              //   ? `1px solid ${colors.priceColor}`
-              //   : "1px solid #ccc",
-              borderRadius:
-                // showPromo || showTopLabel ?
-                "10px 0 10px 10px",
-              //  : "10px",
+              border:
+                countdownSeconds > 0
+                  ? `1px solid ${colors.priceColor}`
+                  : "1px solid #ccc",
+              borderRadius: showTopLabel
+                ? "10px 0 10px 10px"
+                : countdownSeconds > 0
+                  ? "10px 0 10px 10px"
+                  : "10px",
             }}
           >
             <div
@@ -480,153 +472,18 @@ function ServiceItemPB({
                 </div>
 
                 {/* DATE AND TIME - Grid Layout */}
-                <div
-                  className={`min-h-[2.5rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
-                    isSoldOut ? "text-[#c0c0c0]" : ""
-                  }`}
-                  style={{
-                    gridTemplateRows: "1fr",
-                  }}
-                >
-                  {/* ICONS COLUMN */}
-                  <div className="flex flex-col gap-[6px]">
-                    {/* Origin Icon */}
-                    {orignLabel ? (
-                      <div className="w-[60px] h-[20px] flex items-center">
-                        {orignLabel}
-                      </div>
-                    ) : (
-                      <div className="h-[20px] flex items-center">
-                        <img
-                          src={serviceItem.icons?.origin}
-                          alt="origin"
-                          className={`w-[16px] h-auto mr-[8px] ${
-                            isSoldOut ? "grayscale" : ""
-                          }`}
-                        />
-                      </div>
-                    )}
-
-                    {/* Destination Icon */}
-                    {!isCiva &&
-                      (destinationLabel ? (
-                        <div className="w-[60px] h-[20px] flex items-center">
-                          {destinationLabel}
-                        </div>
-                      ) : (
-                        <div className="h-[20px] flex items-center">
-                          <img
-                            src={serviceItem.icons?.destination}
-                            className={`w-[16px] h-auto mr-[8px] ${
-                              isSoldOut ? "grayscale" : ""
-                            }`}
-                            style={{ opacity: isSoldOut ? 0.5 : 1 }}
-                          />
-                        </div>
-                      ))}
-                  </div>
-
-                  {/* DATES COLUMN */}
-                  <div className="flex flex-col gap-[6px]">
-                    {/* Departure Date */}
-                    <StageTooltip
-                      stageData={serviceItem.boarding_stages}
-                      direction={1}
-                      terminals={busStage}
-                      serviceItem={serviceItem}
-                      metaData={metaData}
-                      colors={colors}
-                    >
-                      <span className="cursor-pointer bold-text capitalize">
-                        {DateService.getServiceItemDate(
-                          serviceItem.travel_date,
-                        )}
-                      </span>
-                    </StageTooltip>
-
-                    {/* Arrival Date */}
-                    {!isCiva && (
-                      <StageTooltip
-                        stageData={serviceItem.boarding_stages}
-                        direction={1}
-                        terminals={busStage}
-                        serviceItem={serviceItem}
-                        metaData={metaData}
-                        colors={colors}
-                      >
-                        <span className="cursor-pointer bold-text capitalize">
-                          {DateService.getServiceItemDate(
-                            serviceItem.arrival_date,
-                          )}
-                        </span>
-                      </StageTooltip>
-                    )}
-                  </div>
-
-                  {/* DOTS COLUMN */}
-                  <div className="flex flex-col gap-[6px] items-center">
-                    {/* Departure Dot */}
-                    <div className="h-[20px] flex items-center justify-center">
-                      <div>•</div>
-                    </div>
-
-                    {/* Arrival Dot */}
-                    {!isCiva && (
-                      <div className="h-[20px] flex items-center justify-center">
-                        {removeArrivalTime ? null : serviceItem.arr_time ? (
-                          <div>•</div>
-                        ) : null}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* TIMES COLUMN */}
-                  <div className="flex flex-col gap-[6px]">
-                    {/* Departure Time */}
-                    <StageTooltip
-                      stageData={serviceItem.dropoff_stages}
-                      direction={2}
-                      terminals={busStage}
-                      serviceItem={serviceItem}
-                      metaData={metaData}
-                      colors={colors}
-                    >
-                      <div className="font-[900] bold-text">
-                        {isLinatal ? (
-                          <>
-                            {cleanedDepTime}{" "}
-                            <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
-                            {!serviceItem?.dep_time.includes("AM") &&
-                              !serviceItem?.dep_time.includes("PM") &&
-                              DateService.ampmOnly(serviceItem.dep_time)}
-                          </>
-                        ) : (
-                          DateService.formatTime(serviceItem.dep_time)
-                        )}
-                      </div>
-                    </StageTooltip>
-
-                    {/* Arrival Time */}
-                    {!isCiva && (
-                      <StageTooltip
-                        stageData={serviceItem.dropoff_stages}
-                        direction={2}
-                        terminals={busStage}
-                        serviceItem={serviceItem}
-                        metaData={metaData}
-                        colors={colors}
-                      >
-                        <div className="font-[900] bold-text">
-                          {removeArrivalTime
-                            ? null
-                            : serviceItem.arr_time
-                              ? DateService.formatTime(serviceItem.arr_time)
-                              : null}
-                        </div>
-                      </StageTooltip>
-                    )}
-                  </div>
-                </div>
+                <DateTimeSection
+                  serviceItem={serviceItem}
+                  isSoldOut={isSoldOut}
+                  isCiva={isCiva}
+                  isLinatal={isLinatal}
+                  removeArrivalTime={removeArrivalTime}
+                  orignLabel={orignLabel}
+                  destinationLabel={destinationLabel}
+                  busStage={busStage}
+                  metaData={metaData}
+                  colors={colors}
+                />
                 <div
                   style={{
                     width: "1px",
@@ -699,16 +556,28 @@ function ServiceItemPB({
           </div>
 
           {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
-          {isItemExpanded && (
-            <ExpandedDropdown
-              serviceItem={serviceItem}
-              showPromo={showPromo}
-              colors={colors}
-              grayscaleClass={grayscaleClass}
-              translation={translation}
-              getAnimationIcon={getAnimationIcon}
-            />
-          )}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+              opacity: isItemExpanded ? 1 : 0,
+              transition:
+                "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+            }}
+          >
+            <div
+              style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
+            >
+              <ExpandedDropdown
+                serviceItem={serviceItem}
+                showPromo={showPromo}
+                colors={colors}
+                grayscaleClass={grayscaleClass}
+                translation={translation}
+                getAnimationIcon={getAnimationIcon}
+              />
+            </div>
+          </div>
 
           {children}
           {/* Bottom discount banner */}

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -53,7 +53,8 @@ function BottomAmenities({
       <div
         className="grid items-center gap-[2%] flex-1 "
         style={{
-          gridTemplateColumns: "18% 18% 23% 23%",
+          // gridTemplateColumns: " 28% 21% 23% 23%",
+          gridTemplateColumns: "28% 17% 23% 23%",
         }}
       >
         {otherItems.map((item) => (
@@ -95,7 +96,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

@@ -0,0 +1,207 @@
+import React from "react";
+import DateService from "../../utils/DateService";
+import StageTooltip from "../StagesTooltip";
+
+interface DateTimeSectionProps {
+  serviceItem: {
+    icons?: { origin?: string; destination?: string; [key: string]: any };
+    boarding_stages?: string;
+    dropoff_stages?: string;
+    travel_date: string;
+    arrival_date: string;
+    dep_time: string;
+    arr_time: string;
+    [key: string]: any;
+  };
+  isSoldOut: boolean;
+  isCiva?: boolean;
+  isLinatal?: boolean;
+  removeArrivalTime?: boolean;
+  orignLabel?: string;
+  destinationLabel?: string;
+  busStage?: Record<string, string>;
+  metaData?: any;
+  colors: Record<string, any>;
+}
+
+function DateTimeSection({
+  serviceItem,
+  isSoldOut,
+  isCiva,
+  isLinatal,
+  removeArrivalTime,
+  orignLabel,
+  destinationLabel,
+  busStage,
+  metaData,
+  colors,
+}: DateTimeSectionProps): React.ReactElement {
+  const depTime = serviceItem.dep_time || "";
+  const hasAM = depTime.includes("AM");
+  const hasPM = depTime.includes("PM");
+
+  const convertTo24Hour = (depTime: string): string => {
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+    const [hour, minute] = timePart.split(":").map(Number);
+    const pad = (n: number) => (n < 10 ? "0" + n : String(n));
+
+    if (hasAM) {
+      return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
+    }
+    if (hasPM) {
+      return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
+    }
+    return timePart;
+  };
+
+  const cleanedDepTime = convertTo24Hour(depTime);
+
+  return (
+    <div
+      className={`min-h-[2.2rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
+        isSoldOut ? "text-[#c0c0c0]" : ""
+      }`}
+      style={{
+        gridTemplateRows: "1fr",
+      }}
+    >
+      {/* ICONS COLUMN */}
+      <div className="flex flex-col gap-[6px]">
+        {/* Origin Icon */}
+        {orignLabel ? (
+          <div className="w-[60px] h-[20px] flex items-center">
+            {orignLabel}
+          </div>
+        ) : (
+          <div className="h-[20px] flex items-center">
+            <img
+              src={serviceItem.icons?.origin}
+              alt="origin"
+              className={`w-[16px] h-auto mr-[8px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            />
+          </div>
+        )}
+
+        {/* Destination Icon */}
+        {!isCiva &&
+          (destinationLabel ? (
+            <div className="w-[60px] h-[20px] flex items-center">
+              {destinationLabel}
+            </div>
+          ) : (
+            <div className="h-[20px] flex items-center">
+              <img
+                src={serviceItem.icons?.destination}
+                className={`w-[16px] h-auto mr-[8px] ${
+                  isSoldOut ? "grayscale" : ""
+                }`}
+                style={{ opacity: isSoldOut ? 0.5 : 1 }}
+              />
+            </div>
+          ))}
+      </div>
+
+      {/* DATES COLUMN */}
+      <div className="flex flex-col gap-[6px]">
+        {/* Departure Date */}
+        <StageTooltip
+          stageData={serviceItem.boarding_stages}
+          direction={1}
+          terminals={busStage}
+          serviceItem={serviceItem}
+          metaData={metaData}
+          colors={colors}
+        >
+          <span className="cursor-pointer bold-text capitalize">
+            {DateService.getServiceItemDate(serviceItem.travel_date)}
+          </span>
+        </StageTooltip>
+
+        {/* Arrival Date */}
+        {!isCiva && (
+          <StageTooltip
+            stageData={serviceItem.boarding_stages}
+            direction={1}
+            terminals={busStage}
+            serviceItem={serviceItem}
+            metaData={metaData}
+            colors={colors}
+          >
+            <span className="cursor-pointer bold-text capitalize">
+              {DateService.getServiceItemDate(serviceItem.arrival_date)}
+            </span>
+          </StageTooltip>
+        )}
+      </div>
+
+      {/* DOTS COLUMN */}
+      <div className="flex flex-col gap-[6px] items-center">
+        {/* Departure Dot */}
+        <div className="h-[20px] flex items-center justify-center">
+          <div>•</div>
+        </div>
+
+        {/* Arrival Dot */}
+        {!isCiva && (
+          <div className="h-[20px] flex items-center justify-center">
+            {removeArrivalTime ? null : serviceItem.arr_time ? (
+              <div>•</div>
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {/* TIMES COLUMN */}
+      <div className="flex flex-col gap-[6px]">
+        {/* Departure Time */}
+        <StageTooltip
+          stageData={serviceItem.dropoff_stages}
+          direction={2}
+          terminals={busStage}
+          serviceItem={serviceItem}
+          metaData={metaData}
+          colors={colors}
+        >
+          <div className="font-[900] bold-text">
+            {isLinatal ? (
+              <>
+                {cleanedDepTime} <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
+                {!serviceItem?.dep_time.includes("AM") &&
+                  !serviceItem?.dep_time.includes("PM") &&
+                  DateService.ampmOnly(serviceItem.dep_time)}
+              </>
+            ) : (
+              DateService.formatTime(serviceItem.dep_time)
+            )}
+          </div>
+        </StageTooltip>
+
+        {/* Arrival Time */}
+        {!isCiva && (
+          <StageTooltip
+            stageData={serviceItem.dropoff_stages}
+            direction={2}
+            terminals={busStage}
+            serviceItem={serviceItem}
+            metaData={metaData}
+            colors={colors}
+          >
+            <div className="font-[900] bold-text">
+              {removeArrivalTime
+                ? null
+                : serviceItem.arr_time
+                  ? DateService.formatTime(serviceItem.arr_time)
+                  : null}
+            </div>
+          </StageTooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DateTimeSection;

package/src/ui/DirectoBlock.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+
+const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (
+  <div className="flex items-center relative whitespace-nowrap mt-[3px]">
+    <div className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}>
+      <LottiePlayer
+        animationData={getAnimationIcon("directoAnim")}
+        width="14px"
+        height="14px"
+      />
+    </div>
+
+    <div className="group text-[13.33px] cursor-pointer">
+      {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 }}
+      >
+        {/* 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 }}
+        ></div>
+        {translation?.directServiceText}
+      </div>
+    </div>
+  </div>
+);
+
+export default DirectoBlock;

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -3,6 +3,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
 
 interface ExpandedDropdownProps {
   serviceItem: {
+    change_ticket_hours?: number;
     pet_seat_info?: Record<string, any>;
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
@@ -30,17 +31,17 @@ function ExpandedDropdown({
 
   return (
     <div
-      className="px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[20px] relative -z-9"
+      className="px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9"
       style={{
-        backgroundColor: "#f5f5f5",
+        backgroundColor: "#ffefef",
         borderRadius: "0 0 10px 10px",
         // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
-        border: `1px solid ${colors.priceColor}`,
+        // border: `1px solid ${colors.priceColor}`,
 
-        borderTop: "none",
+        // borderTop: "none",
       }}
     >
-      <div className="flex flex-col gap-[12px] text-[13px] text-[#464647]">
+      {/* <div className="flex flex-col gap-[12px] text-[13px] text-[#464647]">
         {hasPetInfo && (
           <div className="flex items-center gap-[10px]">
             <LottiePlayer
@@ -77,6 +78,35 @@ function ExpandedDropdown({
             </div>
           </div>
         )}
+      </div> */}
+      <div
+        className="flex flex-col gap-[10px] text-[13px] text-[#464647]"
+        style={{ lineHeight: 1.6 }}
+      >
+        <div className="flex gap-[8px] text-[13.33px]">
+          <span style={{ marginTop: "2px" }}>•</span>
+          <span>
+            <span className="bold-text">Políticas de anulación:</span> Tu pasaje
+            puede ser anulado de forma online{" "}
+            <span className="bold-text">
+              hasta {serviceItem?.change_ticket_hours ?? 6} horas antes
+            </span>{" "}
+            de la salida del bus. Al anular tu pasaje recibirás una devolución
+            del 85% del monto de tu compra.
+          </span>
+        </div>
+        <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>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -157,7 +157,7 @@ function SeatSection({
 
   return (
     <div
-      className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem]"
+      className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
       style={isCentered ? { alignItems: "center" } : {}}
     >
       <div className="flex flex-col justify-between" style={{ gap: "10px" }}>