kupos-ui-components-lib 9.1.2 → 9.1.3

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -3,11 +3,6 @@ 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"];
 
@@ -33,8 +28,6 @@ function ServiceItemMobile({
   amenitiesData,
   setShowDropdown,
   showDropdown,
-  isExpanded,
-  setIsExpanded,
   setAmenetiesAtomValue,
   isCiva,
   currencySign,
@@ -44,41 +37,8 @@ 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"
@@ -101,6 +61,194 @@ 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)
@@ -113,8 +261,8 @@ function ServiceItemMobile({
       <img
         key={i}
         className="amenity"
-        height={12}
-        width={12}
+        height={14}
+        width={14}
         // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
         src={commonService.getAmenitiesImage(
           amenitiesData?.[am]?.toLowerCase(),
@@ -150,6 +298,32 @@ 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  ${
@@ -164,39 +338,23 @@ 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={" rounded-[20px]"}
-        style={{
-          backgroundColor: "#fff",
-          zIndex: 1,
-          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-          borderRadius: "12px",
-          border: "1px solid #ccc",
-        }}
+        className={"border border-[#E6E6E6] rounded-[20px]"}
+        style={{ backgroundColor: "#fff", zIndex: 1 }}
       >
-        <div style={{ padding: "12px 12px 8px 12px" }}>
+        <div
+          className={`p-[12px] ${
+            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+            showTopLabel ||
+            serviceItem?.is_direct_trip ||
+            serviceItem?.is_transpordo
+              ? "mt-[10px]"
+              : ""
+          }`}
+        >
           {/* Header with operator info and favorite */}
-          <div className="flex justify-between  items-center mb-[10px]">
-            <div className="flex items-center  justify-between">
+          <div className="flex justify-between  mb-[8px]">
+            <div className="flex items-center w-[50%] justify-between">
               <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
@@ -211,99 +369,296 @@ function ServiceItemMobile({
                   {serviceItem?.operator_details[2]}
                 </div>
               ) : showRating ? (
-                <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 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>
               ) : null}
             </div>
             {showLastSeats ? (
-              <div className="flex justify-end  ">
+              <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 && (
-                    <div className="text-[10px] text-[#464647] text-center">
+                    <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!
-                    </div>
+                    </span>
                   )}
               </div>
             ) : null}
           </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
+            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 === true && (
+                  <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 === true && (
+                  <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>
         </div>
 
         {serviceItem?.offer_text && (
@@ -317,58 +672,21 @@ 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"
             />
-            <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>
+            <span className="ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]">
+              {serviceItem?.offer_text}
+            </span>
           </div>
         )}
 
-        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 ">
+        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
           {showTopLabel && (
             <div
-              className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `}
+              className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `}
               style={{
                 backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
               }}
@@ -389,6 +707,7 @@ 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 ${
@@ -403,7 +722,22 @@ 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 `}
@@ -421,23 +755,6 @@ 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>
   );
 }