kupos-ui-components-lib 9.1.1 → 9.1.2

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -1,12 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { ServiceItemProps } from "./types";
-import DateService from "../../utils/DateService";
 import CommonService from "../../utils/CommonService";
-import RatingHover from "./RatingHover";
 import ModalEventManager from "../../utils/ModalEventManager";
 import InternationalServicePopupBody from "../InternationalServicePopupBody";
 import LottiePlayer from "../../assets/LottiePlayer";
 import PeruServiceItemDesktop from "./PeruServiceItemDesktop";
+import ExpandedDropdown from "../../ui/ExpendedDropDown/ExpandedDropdown";
 import promoAnimation from "../../assets/images/anims/service_list/promocion.json";
 import flexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
 import locationAnimation from "../../assets/images/anims/service_list/location.json";
@@ -18,32 +17,60 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
 import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
 import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
 import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
-import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
-import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
 
 import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
 import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
 import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
-import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
-import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
 
-import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
-import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
-import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
-import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
-import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
-import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
+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"];
 
+const ANIMATION_MAP: Record<string, Record<string, any>> = {
+  promoAnim: {
+    kupos: promoAnimation,
+  },
+  locationAnim: {
+    kupos: locationAnimation,
+    pullman: pullmanLocationAnimation,
+    opsites: opsitesLocationAnimation,
+  },
+  directoAnim: {
+    kupos: directoAnimation,
+  },
+  petFriendlyAnim: {
+    kupos: petFriendlyAnimation,
+    pullman: pullmanPetFriendlyAnimation,
+    opsites: opsitesPetFriendlyAnimation,
+  },
+  priorityStageAnim: {
+    kupos: priorityStageAnimation,
+    pullman: pullmanPriorityStageAnimation,
+    opsites: opsitesPriorityStageAnimation,
+  },
+  flexibleIcon: {
+    kupos: flexibleAnimation,
+    pullman: pullmanFlexibleAnimation,
+    opsites: opsitesFlexibleAnimation,
+  },
+  bombAnimation: {
+    kupos: bombAnimation,
+  },
+};
+
 function ServiceItemPB({
   serviceItem,
   onBookButtonPress,
@@ -71,48 +98,12 @@ function ServiceItemPB({
   t = (key: string) => key,
   siteType,
   isAllinBus,
+  isExpand,
+  setIsExpand,
+  coachKey,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const animationMap: Record<string, Record<string, any>> = {
-    promoAnim: {
-      kupos: promoAnimation,
-      pullman: pullmanPromoAnimation,
-      opsites: opsitesPromoAnimation,
-      linatal: linatalPromoAnimation,
-    },
-    locationAnim: {
-      kupos: locationAnimation,
-      pullman: pullmanLocationAnimation,
-      opsites: opsitesLocationAnimation,
-      linatal: linatalLocationAnimation,
-    },
-    directoAnim: {
-      kupos: directoAnimation,
-      pullman: pullmanDirectoAnimation,
-      opsites: opsitesDirectoAnimation,
-      linatal: linatalDirectoAnimation,
-    },
-    petFriendlyAnim: {
-      kupos: petFriendlyAnimation,
-      pullman: pullmanPetFriendlyAnimation,
-      opsites: opsitesPetFriendlyAnimation,
-      linatal: linatalPetFriendlyAnimation,
-    },
-    priorityStageAnim: {
-      kupos: priorityStageAnimation,
-      pullman: pullmanPriorityStageAnimation,
-      opsites: opsitesPriorityStageAnimation,
-      linatal: linatalPriorityStageAnimation,
-    },
-    flexibleIcon: {
-      kupos: flexibleAnimation,
-      pullman: pullmanFlexibleAnimation,
-      opsites: opsitesFlexibleAnimation,
-      linatal: linatalFlexibleAnimation,
-    },
-  };
-
   const getAnimationIcon = (icon: string) => {
-    const animation = animationMap[icon];
+    const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
     return animation[siteType] ?? animation.kupos;
   };
@@ -151,9 +142,7 @@ function ServiceItemPB({
         style={{
           filter: color === "white" ? "brightness(0) invert(1)" : "",
         }}
-        className={`object-contain ${
-          moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
-        }`}
+        className="object-contain w-[16px] h-[16px]"
       />
     );
   };
@@ -171,6 +160,11 @@ function ServiceItemPB({
 
   let isSoldOut = serviceItem.available_seats <= 0;
 
+  const showPromo = Math.random() > 0.5;
+
+  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
+  const grayscaleClass = isSoldOut ? "grayscale" : "";
+
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
     if (iconValue) {
@@ -179,7 +173,7 @@ function ServiceItemPB({
           <img
             src={iconValue}
             alt={iconKey}
-            className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
+            className={`${`w-[${size}] h-[${size}]`} `}
           />
         );
       }
@@ -187,136 +181,8 @@ function ServiceItemPB({
     return null;
   };
 
-  const getAllSeatTypes = () => {
-    if (!serviceItem?.seat_types?.length) {
-      return [{ label: "Salon cama", price: 0 }];
-    }
-
-    let seatTypesWithPrices = serviceItem.seat_types
-      .filter((item) => getFilteredSeats(item))
-      .map((val) => ({
-        label: val?.label,
-        price: val?.fare,
-      }));
-
-    seatTypesWithPrices.sort((a, b) => a.price - b.price);
-
-    return seatTypesWithPrices;
-  };
-
-  const getSortedSeatTypes = () => {
-    if (!serviceItem?.seat_types?.length) {
-      return [{ label: "Salon cama", price: 0 }];
-    }
-
-    let seatTypesWithPrices = getAllSeatTypes();
-    const premiumIndex = seatTypesWithPrices.findIndex(
-      (item) => item.label === "Premium",
-    );
-
-    if (premiumIndex >= 3) {
-      seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
-    }
-
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-
-    return seatTypesWithPrices;
-  };
-
-  const getUniqueSeats = () => {
-    const allSeatTypes = getAllSeatTypes();
-    const seatMap = new Map();
-
-    allSeatTypes.forEach((seat) => {
-      if (SEAT_EXCEPTIONS.includes(seat.label)) return;
-
-      // Only check if the label already exists in the map, don't compare prices
-      if (!seatMap.has(seat.label)) {
-        seatMap.set(seat.label, seat);
-      }
-    });
-
-    return Array.from(seatMap.values());
-  };
-
-  const getNumberOfSeats = () => {
-    return serviceItem.seat_types.filter(
-      (val) => !SEAT_EXCEPTIONS.includes(val.label),
-    ).length;
-  };
-
-  const getSeatNames = () => {
-    const uniqueSeats = getUniqueSeats();
-    const sortedSeatTypes = getSortedSeatTypes();
-
-    if (removeDuplicateSeats) {
-      return uniqueSeats.map((val, key: number) =>
-        SEAT_EXCEPTIONS.includes(val.label) ? null : (
-          <span
-            key={key}
-            className={`flex items-center justify-between  text-[13.33px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
-          >
-            {typeof val.label === "string" || typeof val.label === "number"
-              ? isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : val.label
-              : null}
-          </span>
-        ),
-      );
-    }
-    return sortedSeatTypes.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span
-          key={key}
-          className={`flex items-center justify-between  text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
-        >
-          {typeof val.label === "string" || typeof val.label === "number"
-            ? val.label
-            : null}
-        </span>
-      ),
-    );
-  };
-
-  const getSeatPrice = () => {
-    const sortedSeatTypes = getSortedSeatTypes();
-    const uniqueSeats = getUniqueSeats();
-    if (removeDuplicateSeats) {
-      return uniqueSeats.map((val, key) => (
-        <span key={key}>
-          {serviceItem?.available_seats <= 0
-            ? CommonService.currency(0, currencySign)
-            : CommonService.currency(val.price, currencySign)}
-        </span>
-      ));
-    }
-    return sortedSeatTypes.map((val, key: number) => {
-      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span key={key} className="flex items-center text-[13.33px] bold-text">
-          {typeof val.price === "string"
-            ? serviceItem?.available_seats <= 0
-              ? CommonService.currency(0, currencySign)
-              : CommonService.currency(val.price, currencySign)
-            : typeof val.price === "number"
-              ? serviceItem?.available_seats <= 0
-                ? CommonService.currency(0, currencySign)
-                : CommonService.currency(val.price, currencySign)
-              : null}
-        </span>
-      );
-    });
-  };
-
-  const getFilteredSeats = (item) => {
-    return item;
-  };
-
   const checkMidnight = () => {
+    setIsExpand?.(null);
     if (
       cityOrigin?.label &&
       cityDestination?.label &&
@@ -395,57 +261,63 @@ function ServiceItemPB({
         ),
       });
       return;
-    } else {
-      onBookButtonPress();
     }
+
+    onBookButtonPress();
   };
 
-  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;
-  }
+  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: "rating",
-      width: "30%",
+      key: "amenities",
+      width: "20%",
+      condition: true,
       render: (
-        <RatingBlock
-          showRating={showRating}
+        <AmenitiesBlock
           serviceItem={serviceItem}
+          metaData={metaData}
           isSoldOut={isSoldOut}
           colors={colors}
-          t={t}
-          translation={translation}
           isPeru={isPeru}
+          getAnimationIcon={getAnimationIcon}
+          getAmenityName={CommonService.getAmenityName}
+          SvgAmenities={SvgAmenities}
         />
       ),
     },
-
     {
       key: "duration",
-      width: "20%",
+      width: "12%",
       condition: serviceItem.duration,
       render: (
         <DurationBlock
@@ -458,6 +330,20 @@ function ServiceItemPB({
       ),
     },
 
+    {
+      key: "directo",
+      width: "12%",
+      condition: serviceItem?.is_direct_trip === true,
+      render: (
+        <DirectoBlock
+          translation={translation}
+          getAnimationIcon={getAnimationIcon}
+          colors={colors}
+          isSoldOut={isSoldOut}
+        />
+      ),
+    },
+
     {
       key: "pet",
       width: "20%",
@@ -488,28 +374,10 @@ function ServiceItemPB({
         />
       ),
     },
-
-    {
-      key: "amenities",
-      width: "20%",
-      render: (
-        <AmenitiesBlock
-          serviceItem={serviceItem}
-          metaData={metaData}
-          isSoldOut={isSoldOut}
-          colors={colors}
-          isPeru={isPeru}
-          getAnimationIcon={getAnimationIcon}
-          getAmenityName={CommonService.getAmenityName}
-          SvgAmenities={SvgAmenities}
-        />
-      ),
-    },
   ];
 
-  const amenitiesItem = items.find((i) => i.key === "amenities");
   const otherItems = items.filter(
-    (i) => i.key !== "amenities" && i.condition !== false,
+    (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
   );
 
   return (
@@ -544,6 +412,10 @@ function ServiceItemPB({
         />
       ) : (
         <div
+          // className={`relative ${
+          //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+          // } mt-[14px]`}
+
           className={`relative ${
             serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
           } ${
@@ -554,182 +426,105 @@ function ServiceItemPB({
               : "mt-[20px]"
           }	`}
         >
+          {/* <TopAmenities
+            showPromo={showPromo}
+            showTopLabel={showTopLabel}
+            isSoldOut={isSoldOut}
+            priceColor={colors.priceColor}
+            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";
+              }
+            }}
+            offerText={serviceItem?.offer_text}
+          /> */}
           <div
-            className={
-              "bg-white rounded-[20px] shadow-service mx-auto relative"
-            }
+            id={`service-card-${serviceItem.id}`}
+            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]">
+            <div
+              //  className="p-[15px] pt-[20px]"
+              className=" pt-[20px]"
+              style={{
+                padding: coachKey
+                  ? "15px 15px 20px 15px"
+                  : "20px 15px 11px 15px",
+              }}
+            >
               <div
-                className="grid text-[#464647] w-full [grid-template-columns:14%_30%_2.5%_30%_15.5%] gap-x-[2%] items-center"
-                style={{ marginTop: showTopLabel ? "8px" : "" }}
+                // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
+                className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
+                // style={{ marginTop: showTopLabel ? "8px" : "" }}
               >
                 {/* OPERATOR LOGO */}
-                <div className="flex items-center justify-center m-[auto]">
-                  <div className=" ">
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "5px",
+                  }}
+                >
+                  <div
+                    // className="flex items-center justify-center m-[auto]"
+                    className=""
+                  >
                     <img
                       src={serviceItem.operator_details[0]}
                       alt="service logo"
-                      className={` h-auto object-contain ${
+                      className={`h-auto w-[150px] object-contain ${
                         isSoldOut ? "grayscale" : ""
                       }`}
                     />
+                    {isCiva ? (
+                      <div className="text-[13.33px] black-text ml-2">
+                        {serviceItem.operator_details[2]}
+                      </div>
+                    ) : null}
                   </div>
-                  {isCiva ? (
-                    <div className="text-[13.33px] black-text ml-2">
-                      {serviceItem.operator_details[2]}
-                    </div>
-                  ) : null}
+                  <RatingBlock
+                    showRating={showRating}
+                    serviceItem={serviceItem}
+                    isSoldOut={isSoldOut}
+                    colors={colors}
+                    t={t}
+                    translation={translation}
+                    isPeru={isPeru}
+                  />
                 </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-[18px] 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-[18px] 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",
@@ -739,139 +534,84 @@ function ServiceItemPB({
                 ></div>
                 {/* SEATS */}
                 <div className="content-center">
-                  <div
-                    className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
-                      getNumberOfSeats() < 3 ? "" : ""
-                    }`}
-                    style={
-                      getNumberOfSeats() < 2 || removeDuplicateSeats
-                        ? { alignItems: "center" }
-                        : {}
-                    }
-                  >
-                    <div
-                      className="flex flex-col justify-between"
-                      style={{ gap: "10px" }}
-                    >
-                      {getSeatNames()}
-                    </div>
-                    <div
-                      className="flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full"
-                      style={{
-                        color: isSoldOut ? "#c0c0c0" : colors.priceColor,
-                        top: 0,
-                        bottom: 0,
-                        left: "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
-                        //  left: "68%",
-                        right: 0,
-                        justifyContent:
-                          getNumberOfSeats() < 2 || removeDuplicateSeats
-                            ? "center"
-                            : "",
-                        gap: "10px",
-                      }}
-                    >
-                      {getSeatPrice()}
-                    </div>
-                  </div>
+                  <SeatSection
+                    seatTypes={serviceItem.seat_types}
+                    availableSeats={serviceItem.available_seats}
+                    isSoldOut={isSoldOut}
+                    priceColor={colors.priceColor}
+                    currencySign={currencySign}
+                    removeDuplicateSeats={removeDuplicateSeats}
+                    isPeru={isPeru}
+                  />
                 </div>
 
                 {/* BUTTON */}
-                <div>
-                  <button
-                    onClick={() => (!isSoldOut ? checkMidnight() : null)}
-                    disabled={serviceDetailsLoading}
-                    className={`w-full  ${
-                      serviceDetailsLoading || isSoldOut
-                        ? "py-[12px]"
-                        : "py-[12px]"
-                    } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
-                    style={{
-                      backgroundColor:
-                        serviceDetailsLoading || isSoldOut
-                          ? "lightgray"
-                          : colors.kuposButtonColor,
-                      cursor:
-                        serviceDetailsLoading || isSoldOut
-                          ? "not-allowed"
-                          : "pointer",
-                    }}
-                  >
-                    <span className="min-w-[75px] flex justify-center items-center bold-text uppercase">
-                      {isSoldOut ? renderIcon("soldOutIcon", "14px") : null}
-
-                      {serviceDetailsLoading ? (
-                        <span className="loader-circle"></span>
-                      ) : !isSoldOut ? (
-                        translation?.buyButton
-                      ) : (
-                        translation?.soldOutButton
-                      )}
-                    </span>
-                  </button>
-                </div>
-              </div>
-              {showLastSeats ? (
-                <div className="flex justify-end mr-[11px]">
-                  {serviceItem?.available_seats < 10 &&
-                    serviceItem?.available_seats > 0 && (
-                      <div className="text-[12px] text-[red] mt-1 text-center">
-                        ¡ Últimos Asientos!
-                      </div>
-                    )}
-                </div>
-              ) : null}
 
-              {/* <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[10px]">
-                <div
-                  className="grid items-center gap-[12px] w-full"
-                  style={{
-                    gridTemplateColumns: "30% 20% 20% 20% auto",
-                  }}
-                >
-                  {items
-                    .sort((a, b) =>
-                      a.key === "amenities"
-                        ? 1
-                        : b.key === "amenities"
-                          ? -1
-                          : 0,
-                    )
-                    .map((item) => (
-                      <div key={item.key} className="flex items-center">
-                        {item.condition === false ? (
-                          <div style={{ minHeight: "20px", width: "100%" }} />
-                        ) : (
-                          item.render
+                <div>
+                  {showLastSeats ? (
+                    <div
+                      className="flex justify-end mr-[11px] "
+                      style={{
+                        marginBottom:
+                          serviceItem?.available_seats < 10 &&
+                          serviceItem?.available_seats > 0
+                            ? "6px"
+                            : "0",
+                      }}
+                    >
+                      {serviceItem?.available_seats < 10 &&
+                        serviceItem?.available_seats > 0 && (
+                          <div className="text-[12.5px] text-[#464647] mt-1 text-center">
+                            ¡Últimos Asientos!
+                          </div>
                         )}
-                      </div>
-                    ))}
-                </div>
-              </div> */}
-
-              <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[10px]">
-                {/* 🔹 LEFT SIDE (GRID ITEMS) */}
-                <div
-                  className="grid items-center gap-[2%] flex-1"
-                  style={{
-                    gridTemplateColumns: "40% 18% 23% 23%",
-                    // otherItems
-                    //   .map((i) => i.width)
-                    //   .join(" "),
-                  }}
-                >
-                  {otherItems.map((item) => (
-                    <div key={item.key} className="flex items-center ">
-                      {item.render}
                     </div>
-                  ))}
-                </div>
-
-                {/* 🔹 RIGHT SIDE (ALWAYS END) */}
-                <div className="flex items-center ml-[12px] shrink-0 w-[130px] justify-end">
-                  {amenitiesItem?.render}
+                  ) : null}
+                  <KuposButton
+                    isSoldOut={isSoldOut}
+                    isLoading={serviceDetailsLoading}
+                    buttonColor={colors.kuposButtonColor}
+                    buyLabel={translation?.buyButton}
+                    soldOutLabel={translation?.soldOutButton}
+                    soldOutIcon={renderIcon("soldOutIcon", "14px")}
+                    onClick={checkMidnight}
+                  />
                 </div>
               </div>
+              <BottomAmenities
+                otherItems={otherItems}
+                serviceItem={serviceItem}
+                grayscaleClass={grayscaleClass}
+                isSoldOut={isSoldOut}
+                isItemExpanded={isItemExpanded}
+                colors={colors}
+                translation={translation}
+                getAnimationIcon={getAnimationIcon}
+                downArrowIcon={renderIcon("downArrow", "10px")}
+                onToggleExpand={() =>
+                  setIsExpand &&
+                  setIsExpand(isItemExpanded ? null : serviceItem.id)
+                }
+              />
+            </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" }}
+            >
+              <ExpandedDropdown serviceItem={serviceItem} />
             </div>
           </div>
 
@@ -879,27 +619,63 @@ function ServiceItemPB({
           {/* Bottom discount banner */}
           {serviceItem?.offer_text && (
             <div
-              className={`  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
+              className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]"
               style={{
-                backgroundColor: isSoldOut
-                  ? colors?.bottomStripColor
-                  : colors?.bottomStripColor,
+                backgroundColor: colors?.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
+              {/* <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("promoAnim")}
+                animationData={getAnimationIcon("bombAnimation")}
                 width="18px"
                 height="18px"
               />
-              <span className="ml-[10px]">{serviceItem?.offer_text}</span>
+              <div className="flex items-center mt-[2px]">
+                <span className="bold-text ml-[6px]">
+                  {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>
           )}
-
           <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-20`}
+                className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`}
                 style={{
                   backgroundColor: isSoldOut
                     ? "#ddd"
@@ -939,7 +715,7 @@ function ServiceItemPB({
                 <div>{"Conexión"}</div>
               </div>
             )}
-            {serviceItem?.is_direct_trip && (
+            {/* {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={{
@@ -954,7 +730,7 @@ function ServiceItemPB({
                 />
                 <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 `}