kupos-ui-components-lib 9.1.1 → 9.1.2

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -3,6 +3,11 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
 import { MobileServiceItemProps } from "./mobileTypes";
 import commonService from "../../utils/CommonService";
+import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
+import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
+import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
+import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
+import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -28,6 +33,8 @@ function ServiceItemMobile({
   amenitiesData,
   setShowDropdown,
   showDropdown,
+  isExpanded,
+  setIsExpanded,
   setAmenetiesAtomValue,
   isCiva,
   currencySign,
@@ -37,8 +44,41 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
 }: MobileServiceItemProps): React.ReactElement {
+  const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   let isSoldOut = serviceItem.available_seats <= 0;
+  const showPromo = Math.random() > 0.5;
+
+  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"
@@ -61,194 +101,6 @@ function ServiceItemMobile({
     }
   };
 
-  const seatTypes = () => {
-    let seatTypes = serviceItem.seat_types
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare) // Add this line to sort by fare
-      ?.slice(0, 2)
-      ?.map((type, i) =>
-        exceptions.includes(type.label) ? null : (
-          <div
-            className={
-              serviceItem.seat_types?.length > 2
-                ? "w-[100%] flex flex-row justify-between "
-                : "w-[100%] flex flex-row justify-between items-center"
-            }
-            key={i}
-          >
-            <span
-              className="min-[420]:text-[13px] text-[12px] "
-              style={{
-                // marginLeft: "10px",
-                color: isSoldOut ? "#bbb" : "#464647",
-              }}
-            >
-              {type.label}
-            </span>
-            <span
-              className={"min-[420]:text-[13px] text-[12px]  bold-text"}
-              style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
-            >
-              {commonService.currency(type.fare, currencySign)}
-            </span>
-          </div>
-        ),
-      );
-    return seatTypes;
-  };
-
-  const seatTypesWithRemoveDuplicateSeats = () => {
-    const seatMap = new Map();
-
-    serviceItem.seat_types
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.forEach((item) => {
-        if (exceptions.includes(item.key as any)) return;
-        const existing = seatMap.get(item.label);
-        if (
-          !existing ||
-          parseFloat(item.fare as any) < parseFloat(existing.fare)
-        ) {
-          seatMap.set(item.label, item);
-        }
-      });
-
-    const uniqueSeats = Array.from(seatMap.values())
-      .sort((a, b) => a.fare - b.fare)
-      .slice(0, 3);
-    return uniqueSeats.map((type, i) => {
-      return exceptions.includes(type.label) ? null : (
-        <div
-          className={
-            serviceItem.seat_types?.length > 2
-              ? "w-[100%] flex flex-row justify-between "
-              : "w-[100%] flex flex-row justify-between items-center"
-          }
-          key={i}
-        >
-          <span
-            className="min-[420]:text-[13px] text-[11px] "
-            style={{
-              // marginLeft: "10px",
-              color: isSoldOut ? "#bbb" : "#464647",
-            }}
-          >
-            {commonService.truncateSeatLabel(type.label)}
-          </span>
-          <span
-            className={"min-[420]:text-[13px] text-[11px]  bold-text"}
-            style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
-          >
-            {/* {serviceItem?.operator_service_name === "Pullman San Andrés" &&
-              serviceItem?.available_seats <= 0
-                ? null
-                : commonService.currency(type.fare, currencySign)} */}
-
-            {serviceItem?.available_seats <= 0 && !isPeru
-              ? commonService.currency(0, currencySign)
-              : commonService.currency(type.fare, currencySign)}
-          </span>
-        </div>
-      );
-    });
-  };
-
-  const getFilteredSeats = (item) => {
-    return item;
-  };
-
-  const getAmenitiesImage = (name: string): string => {
-    switch (name) {
-      case "air_condtion.png": {
-        return serviceItem?.icons?.airConditionIcon;
-      }
-      case "baggage.png": {
-        return serviceItem?.icons?.baggageIcon;
-      }
-      case "charging_plug.png": {
-        return serviceItem?.icons?.chargingIcon;
-      }
-      case "coffee.png": {
-        return serviceItem?.icons?.coffeeIcon;
-      }
-      case "food_new_icon.png": {
-        return serviceItem?.icons?.foodIcon;
-      }
-      case "gaming.png": {
-        return serviceItem?.icons?.gamingIcon;
-      }
-      case "handicap.png": {
-        return serviceItem?.icons?.handicapIcon;
-      }
-      case "mobile_ticket.png": {
-        return serviceItem?.icons?.mobileTicketIcon;
-      }
-      case "movie.png": {
-        return serviceItem?.icons?.movieIcon;
-      }
-      case "restrooms.png": {
-        return serviceItem?.icons?.restroomsIcon;
-      }
-      case "snacks_new.png": {
-        return serviceItem?.icons?.snackIcon;
-      }
-      case "wifi.png": {
-        return serviceItem?.icons?.wifiIcon;
-      }
-      case "cortina_divisoria.png": {
-        return serviceItem?.icons?.cortinaIcon;
-      }
-      case "frazada.png": {
-        return serviceItem?.icons?.frazaIcon;
-      }
-      case "blanket.png": {
-        return serviceItem?.icons?.blankketIcon;
-      }
-      case "cctv.png": {
-        return serviceItem?.icons?.cctvIcon;
-      }
-      case "cup_holder.png": {
-        return serviceItem?.icons?.cupHolderIcon;
-      }
-      case "emergency_contact.png": {
-        return serviceItem?.icons?.emergencyContactIcon;
-      }
-      case "emergency_exit.png": {
-        return serviceItem?.icons?.emergencyExitIcon;
-      }
-      case "fire_extinguisher.png": {
-        return serviceItem?.icons?.fireExtinguisherIcon;
-      }
-      case "reading_light.png": {
-        return serviceItem?.icons?.readingLIghtIcon;
-      }
-      case "seat_belt.png": {
-        return serviceItem?.icons?.sercurityBeltIcon;
-      }
-      case "service_on_board.png": {
-        return serviceItem?.icons?.serviceOnBoardIcon;
-      }
-      case "personal_tv.png": {
-        return serviceItem?.icons?.personalTVIcon;
-      }
-      case "pet_admission.png": {
-        return serviceItem?.icons?.petAdmissionIcon;
-      }
-      case "music.png": {
-        return serviceItem?.icons?.musicIcon;
-      }
-      case "headset.png": {
-        return serviceItem?.icons?.headPhoneIcon;
-      }
-      case "allows_cancellation.png": {
-        return serviceItem?.icons?.allowCancellationIcon;
-      }
-      default: {
-        return "";
-      }
-    }
-  };
-
   const amenities = () => {
     const raw = serviceItem?.operator_details?.[3];
     const list = Array.isArray(raw)
@@ -261,8 +113,8 @@ function ServiceItemMobile({
       <img
         key={i}
         className="amenity"
-        height={14}
-        width={14}
+        height={12}
+        width={12}
         // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
         src={commonService.getAmenitiesImage(
           amenitiesData?.[am]?.toLowerCase(),
@@ -298,32 +150,6 @@ function ServiceItemMobile({
     isConexion = true;
   }
 
-  const depTime = serviceItem.dep_time || "";
-
-  // Extract hours and minutes and check for AM/PM
-  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);
-
-  // Convert to 24-hour format
-  let cleanedDepTime;
-  if (hasAM) {
-    cleanedDepTime =
-      hour === 12
-        ? `00:${minute < 10 ? "0" + minute : minute}`
-        : `${hour < 10 ? "0" + hour : hour}:${
-            minute < 10 ? "0" + minute : minute
-          }`;
-  } else if (hasPM) {
-    cleanedDepTime =
-      hour === 12
-        ? `${hour}:${minute < 10 ? "0" + minute : minute}`
-        : `${hour + 12}:${minute < 10 ? "0" + minute : minute}`;
-  } else {
-    cleanedDepTime = timePart;
-  }
-
   return (
     <div
       className={`relative  ${
@@ -338,23 +164,39 @@ function ServiceItemMobile({
       }	`}
       style={{ backgroundColor: "#fff", zIndex: 1 }}
     >
+      {/* <TopAmenitieMobile
+        showTopLabel={showTopLabel}
+        isSoldOut={isSoldOut}
+        seatPriceColor={colors.seatPriceColor}
+        bombAnim={serviceItem.icons.bombAnim}
+        priorityStageAnim={serviceItem.icons.priorityStageAnim}
+        countdownSeconds={countdownSeconds}
+        onCountdownEnd={() => {
+          const cardEl = document.getElementById(
+            `service-card-${serviceItem.id}`,
+          );
+          if (!cardEl) return;
+          cardEl.style.border = "1px solid #ccc";
+          if (!showTopLabel) {
+            cardEl.style.borderRadius = "10px";
+          }
+        }}
+        offerText={serviceItem?.offer_text}
+      /> */}
       <div
-        className={"border border-[#E6E6E6] rounded-[20px]"}
-        style={{ backgroundColor: "#fff", zIndex: 1 }}
+        className={" rounded-[20px]"}
+        style={{
+          backgroundColor: "#fff",
+          zIndex: 1,
+          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
+          borderRadius: "12px",
+          border: "1px solid #ccc",
+        }}
       >
-        <div
-          className={`p-[12px] ${
-            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-            showTopLabel ||
-            serviceItem?.is_direct_trip ||
-            serviceItem?.is_transpordo
-              ? "mt-[10px]"
-              : ""
-          }`}
-        >
+        <div style={{ padding: "12px 12px 8px 12px" }}>
           {/* Header with operator info and favorite */}
-          <div className="flex justify-between  mb-[8px]">
-            <div className="flex items-center w-[50%] justify-between">
+          <div className="flex justify-between  items-center mb-[10px]">
+            <div className="flex items-center  justify-between">
               <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -369,296 +211,99 @@ function ServiceItemMobile({
                   {serviceItem?.operator_details[2]}
                 </div>
               ) : showRating ? (
-                <div className="flex min-[420]:text-[13px] text-[12px] bold-text items-center">
-                  <img
-                    src={serviceItem.icons.rating}
-                    alt="origin"
-                    className={`w-[12px] h-[12px] mr-[4px] object-contain   ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  />
-                  <span style={{ lineHeight: "normal" }}>
-                    {getServiceStars(serviceItem)}
-                  </span>
+                <div className="flex min-[420]:text-[13px] text-[12px]  items-center">
+                  <div className="flex items-center">
+                    <div className="flex items-center">
+                      <img
+                        src={serviceItem.icons.rating}
+                        alt="origin"
+                        className={`w-[12px] h-[12px] mr-[4px] object-contain   ${
+                          isSoldOut ? "grayscale" : ""
+                        }`}
+                      />
+                      <span style={{ lineHeight: "normal" }}>
+                        {getServiceStars(serviceItem)}
+                      </span>
+                    </div>
+
+                    <div
+                      className="flex items-center cursor-pointer "
+                      style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
+                    >
+                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis">
+                        {serviceItem.operator_details[2]}
+                      </span>
+                    </div>
+                  </div>
                 </div>
               ) : null}
             </div>
             {showLastSeats ? (
-              <div className="flex justify-end  -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center ">
+              <div className="flex justify-end  ">
                 {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,
-                      }}
-                    >
+                    <div className="text-[10px] text-[#464647] text-center">
                       ¡ Últimos Asientos!
-                    </span>
+                    </div>
                   )}
               </div>
             ) : null}
           </div>
 
-          <div
-            className="flex justify-between gap-[5px] w-full"
-            onClick={onBookButtonPress}
-          >
-            {/* DATE AND TIME */}
-            <div
-              className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
-              style={{ justifyContent: isCiva && "center" }}
-            >
-              <div
-                className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between   ${
-                  isSoldOut ? "text-[#c0c0c0]" : ""
-                }`}
-              >
-                <div className="flex items-center" style={{ flex: 1 }}>
-                  <div>
-                    {" "}
-                    {orignLabel ? (
-                      <div className="w-[60px]">{orignLabel}</div>
-                    ) : (
-                      <div className="w-[14px] h-auto mr-[5px]">
-                        <img
-                          src={serviceItem.icons?.origin}
-                          alt="origin"
-                          className={`w-[14px] h-auto mr-[5px] ${
-                            isSoldOut ? "grayscale" : ""
-                          }`}
-                        />
-                      </div>
-                    )}
-                  </div>
-                  <div
-                    className="flex items-center relative capitalize  justify-between "
-                    style={{ flex: 1 }}
-                  >
-                    <span className="cursor-pointer black-text">
-                      {DateService.getServiceItemDate(serviceItem.travel_date)}
-                    </span>
-                    <div className="absolute left-[50%]">•</div>
-                    <div className="font-[900] relative black-text">
-                      {isLinatal ? (
-                        <div>
-                          <span>
-                            {" "}
-                            {cleanedDepTime}{" "}
-                            <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
-                          </span>
-                          <span>
-                            {serviceItem?.dep_time.includes("AM") ||
-                            serviceItem?.dep_time.includes("PM")
-                              ? null
-                              : DateService.ampmOnly(serviceItem.dep_time)}
-                          </span>
-                        </div>
-                      ) : (
-                        DateService.formatTime(serviceItem.dep_time)
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {isCiva ? null : (
-                <div
-                  className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between  ${
-                    isSoldOut ? "text-[#c0c0c0]" : ""
-                  }`}
-                >
-                  <div className="flex items-center" style={{ flex: 1 }}>
-                    <div>
-                      {" "}
-                      {destinationLabel ? (
-                        <div className="w-[60px]">{destinationLabel}</div>
-                      ) : (
-                        <div className="w-[14px] h-auto mr-[5px]">
-                          <img
-                            src={serviceItem.icons?.destination}
-                            alt="destination"
-                            className={`w-[14px] h-auto mr-[5px] ${
-                              isSoldOut ? "grayscale" : ""
-                            }`}
-                          />
-                        </div>
-                      )}
-                    </div>
-                    <div
-                      className="flex items-center relative capitalize  justify-between "
-                      style={{ flex: 1 }}
-                    >
-                      <span className="cursor-pointer black-text">
-                        {DateService.getServiceItemDate(
-                          serviceItem.arrival_date,
-                        )}
-                      </span>
-                      <div className="absolute left-[50%]">•</div>
-                      <div className="font-[900] relative black-text">
-                        {DateService.formatTime(serviceItem.arr_time)}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-            <div
-              style={{
-                width: "1px",
-                height: "2.5rem",
-                backgroundColor: "#ccc",
-                margin: "auto",
-              }}
-            ></div>
-            {/* SEATS */}
-            <div
-              className="content-center"
-              style={{
-                width: isPeru ? "40%" : "40%",
-              }}
-            >
-              <div
-                className="flex flex-col justify-between h-[2.5rem] "
-                style={{
-                  gap: isSoldOut ? "0px" : "5px",
-                  justifyContent:
-                    serviceItem.seat_types?.length > 2
-                      ? "space-between"
-                      : "center",
-                }}
-              >
-                {removeDuplicateSeats
-                  ? seatTypesWithRemoveDuplicateSeats()
-                  : seatTypes()}
-
-                {isSoldOut ? (
-                  <div className="flex justify-end">
-                    <span
-                      className={
-                        "min-[420]:text-[13px] text-[12px] text-[#ccc]"
-                      }
-                    >
-                      Agotado
-                    </span>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          </div>
-          <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div>
-          <div
-            className={`${"flex justify-between items-center items-center "}`}
-          >
-            {/* Rating */}
-            <div>
-              <div className="flex items-center ">
-                <div
-                  className="flex items-center cursor-pointer "
-                  style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-                >
-                  <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] bold-text">
-                    {serviceItem.operator_details[2]}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div
-              className="flex  relative "
-              style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-            >
-              <div
-                className={`w-[12px] h-auto mr-[2px] ${
-                  isSoldOut ? "grayscale" : ""
-                }`}
-              >
-                {renderIcon("hours", "14px")}
-              </div>
-              &nbsp;
-              <div
-                className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
-                  isSoldOut ? "text-[#c0c0c0]" : ""
-                }`}
-                style={{ lineHeight: "normal" }}
-              >
-                {serviceItem.duration}hrs
-              </div>
-            </div>
-
-            <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenities()}</div>
-
-            {(serviceItem.is_change_ticket || isPetSeat) && (
-              <div
-                onClick={() => {
-                  setShowDropdown(!showDropdown);
-                  setAmenetiesAtomValue({
-                    service: serviceItem,
-                    showTopLabel: showTopLabel,
-                  });
-                }}
-                className="flex items-center"
-              >
-                {serviceItem.pet_seat_info &&
-                Object.keys(serviceItem.pet_seat_info).length > 0 ? (
-                  <div className="flex items-center">
-                    <div className={`relative group cursor-default `}>
-                      <div className="flex items-center">
-                        <div
-                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                        >
-                          <LottiePlayer
-                            animationData={serviceItem.icons.petFriendlyAnim}
-                            width="20px"
-                            height="20px"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ) : null}
-
-                {/* Flexible ticket */}
-                {serviceItem.is_change_ticket && (
-                  <div className="flex items-center">
-                    <div className="relative group cursor-default">
-                      <div className="flex items-center">
-                        <div
-                          className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                        >
-                          <LottiePlayer
-                            animationData={serviceItem.icons.flexibleAnim}
-                            width="20px"
-                            height="20px"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {serviceItem?.is_tracking_enabled && (
-                  <div className="flex items-center mr-[10px]">
-                    <div
-                      className={`h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
-                    >
-                      <LottiePlayer
-                        animationData={serviceItem.icons.locationAnim}
-                        width="20px"
-                        height="20px"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(serviceItem.is_change_ticket || isPetSeat) && (
-                  <img src={serviceItem.icons.plus} alt="icon" width={11} />
-                )}
-              </div>
-            )}
-          </div>
+          <DateTimeSectionMobile
+            onBookButtonPress={onBookButtonPress}
+            isCiva={isCiva}
+            isSoldOut={isSoldOut}
+            isLinatal={isLinatal}
+            isPeru={isPeru}
+            orignLabel={orignLabel}
+            destinationLabel={destinationLabel}
+            originIcon={serviceItem.icons?.origin}
+            destinationIcon={serviceItem.icons?.destination}
+            travelDate={serviceItem.travel_date}
+            arrivalDate={serviceItem.arrival_date}
+            depTime={serviceItem.dep_time}
+            arrTime={serviceItem.arr_time}
+            seatTypes={serviceItem.seat_types}
+            seatPriceColor={colors.seatPriceColor}
+            currencySign={currencySign}
+            availableSeats={serviceItem.available_seats}
+            removeDuplicateSeats={removeDuplicateSeats}
+          />
+          {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
+          <div className="bg-[#E6E6E6]  mt-[10px] mb-[10px] h-[1px]"></div>
+
+          <BottomAmenitiesMobile
+            isSoldOut={isSoldOut}
+            amenitiesNodes={amenities()}
+            hoursIcon={renderIcon("hours", "14px")}
+            duration={serviceItem.duration?.toString()}
+            isDirectTrip={serviceItem?.is_direct_trip}
+            directoColor={colors.directoColor}
+            directoAnim={serviceItem.icons.directoAnim}
+            isChangeTicket={serviceItem.is_change_ticket}
+            isPetSeat={isPetSeat}
+            petSeatInfo={serviceItem.pet_seat_info}
+            petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
+            flexibleAnim={serviceItem.icons.flexibleAnim}
+            isTrackingEnabled={serviceItem?.is_tracking_enabled}
+            locationAnim={serviceItem.icons.locationAnim}
+            downArrowIcon={serviceItem.icons.downArrow}
+            showDropdown={isItemExpanded}
+            setShowDropdown={() =>
+              setIsExpanded(isItemExpanded ? null : serviceItem.id)
+            }
+            // onDropdownToggle={() => {
+            //   setShowDropdown(!showDropdown);
+            //   setAmenetiesAtomValue({
+            //     service: serviceItem,
+            //     showTopLabel: showTopLabel,
+            //   });
+            // }}
+            onDropdownToggle={() => {
+              setIsExpanded(isItemExpanded ? null : serviceItem.id);
+            }}
+          />
         </div>
 
         {serviceItem?.offer_text && (
@@ -672,21 +317,58 @@ function ServiceItemMobile({
               opacity: isSoldOut ? 0.5 : 1,
             }}
           >
+            {/* <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>
+            <div className=" flex items-center mt-[2px]">
+              <span className="ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]">
+                {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>
         )}
 
-        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
+        <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,
               }}
@@ -707,7 +389,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 ${
@@ -722,22 +403,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 `}
@@ -755,6 +421,23 @@ function ServiceItemMobile({
           )}
         </div>
       </div>
+
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
+      <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",
+          position: "relative",
+          zIndex: -1,
+        }}
+      >
+        <div style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}>
+          <ExpandedDropdownMobile serviceItem={serviceItem} />
+        </div>
+      </div>
     </div>
   );
 }