kupos-ui-components-lib 9.0.6 → 9.0.7

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { useState, useEffect } 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,13 +18,22 @@ 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 bombAnimation from "../../assets/images/anims/service_list/bomb.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 RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -32,61 +41,9 @@ 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";
 
 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,
-  },
-};
-
-const convertTo24Hour = (depTime: string): string => {
-  const hasAM = depTime.includes("AM");
-  const hasPM = depTime.includes("PM");
-  const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
-  const [hour, minute] = timePart.split(":").map(Number);
-  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
-
-  if (hasAM) {
-    return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
-  }
-  if (hasPM) {
-    return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
-  }
-  return timePart;
-};
-
 function ServiceItemPB({
   serviceItem,
   onBookButtonPress,
@@ -114,12 +71,49 @@ function ServiceItemPB({
   t = (key: string) => key,
   siteType,
   isAllinBus,
-  isExpand,
-  setIsExpand,
-  coachKey,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
+  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 = ANIMATION_MAP[icon];
+    const animation = animationMap[icon];
     if (!animation) return null;
     return animation[siteType] ?? animation.kupos;
   };
@@ -158,7 +152,9 @@ function ServiceItemPB({
         style={{
           filter: color === "white" ? "brightness(0) invert(1)" : "",
         }}
-        className="object-contain w-[16px] h-[16px]"
+        className={`object-contain ${
+          moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
+        }`}
       />
     );
   };
@@ -176,11 +172,6 @@ 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) {
@@ -189,7 +180,7 @@ function ServiceItemPB({
           <img
             src={iconValue}
             alt={iconKey}
-            className={`${`w-[${size}] h-[${size}]`} `}
+            className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
           />
         );
       }
@@ -197,8 +188,136 @@ 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 &&
@@ -277,37 +396,56 @@ 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 cleanedDepTime = convertTo24Hour(depTime);
+  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 items = [
     {
-      key: "amenities",
-      width: "20%",
-      condition: true,
+      key: "rating",
+      width: "30%",
       render: (
-        <AmenitiesBlock
+        <RatingBlock
+          showRating={showRating}
           serviceItem={serviceItem}
-          metaData={metaData}
           isSoldOut={isSoldOut}
           colors={colors}
-          isPeru={isPeru}
-          getAnimationIcon={getAnimationIcon}
-          getAmenityName={CommonService.getAmenityName}
-          SvgAmenities={SvgAmenities}
+          t={t}
+          translation={translation}
         />
       ),
     },
+
     {
       key: "duration",
-      width: "12%",
+      width: "20%",
       condition: serviceItem.duration,
       render: (
         <DurationBlock
@@ -320,22 +458,6 @@ function ServiceItemPB({
       ),
     },
 
-    {
-      key: "directo",
-      width: "12%",
-      condition: serviceItem?.is_direct_trip,
-      render: (
-        <div className="flex items-center gap-[10px] text-[12.5px] z-10 mt-[6px]">
-          <LottiePlayer
-            animationData={getAnimationIcon("directoAnim")}
-            width="14px"
-            height="14px"
-          />
-          <div>{translation?.directService}</div>
-        </div>
-      ),
-    },
-
     {
       key: "pet",
       width: "20%",
@@ -366,10 +488,28 @@ 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 !== "pet" && i.key !== "flexible" && !!i.condition,
+    (i) => i.key !== "amenities" && i.condition !== false,
   );
 
   return (
@@ -406,77 +546,40 @@ function ServiceItemPB({
         <div
           className={`relative ${
             serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          } mt-[14px]`}
+          } ${
+            serviceItem?.is_direct_trip ||
+            serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+            showTopLabel
+              ? "mt-[24px]"
+              : "mt-[20px]"
+          }	`}
         >
-          <TopAmenities
-            showPromo={showPromo}
-            showTopLabel={showTopLabel}
-            isSoldOut={isSoldOut}
-            priceColor={colors.priceColor}
-            buttonColor={colors.kuposButtonColor}
-            boardingIcon={renderIcon("whiteBoardingIcon", "14px")}
-            getAnimationIcon={getAnimationIcon}
-          />
           <div
-            className="bg-white mx-auto relative"
-            style={{
-              border: `1px solid ${colors.priceColor}`,
-              // showPromo
-              //   ? `1px solid ${colors.priceColor}`
-              //   : "1px solid #ccc",
-              borderRadius:
-                // showPromo || showTopLabel ?
-                "10px 0 10px 10px",
-              //  : "10px",
-            }}
+            className={
+              "bg-white rounded-[20px] shadow-service mx-auto relative"
+            }
           >
-            <div
-              //  className="p-[15px] pt-[20px]"
-              className=" pt-[20px]"
-              style={{
-                padding: coachKey
-                  ? "15px 15px 20px 15px"
-                  : "20px 15px 11px 15px",
-              }}
-            >
+            <div className="p-[15px] pt-[20px]">
               <div
-                // 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" : "" }}
+                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" : "" }}
               >
                 {/* OPERATOR LOGO */}
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "5px",
-                  }}
-                >
-                  <div
-                    // className="flex items-center justify-center m-[auto]"
-                    className=""
-                  >
+                <div className="flex items-center justify-center m-[auto]">
+                  <div className=" ">
                     <img
                       src={serviceItem.operator_details[0]}
                       alt="service logo"
-                      className={`h-auto w-[150px] object-contain ${
+                      className={` h-auto object-contain ${
                         isSoldOut ? "grayscale" : ""
                       }`}
                     />
-                    {isCiva ? (
-                      <div className="text-[13.33px] black-text ml-2">
-                        {serviceItem.operator_details[2]}
-                      </div>
-                    ) : null}
                   </div>
-                  <RatingBlock
-                    showRating={showRating}
-                    serviceItem={serviceItem}
-                    isSoldOut={isSoldOut}
-                    colors={colors}
-                    t={t}
-                    translation={translation}
-                  />
+                  {isCiva ? (
+                    <div className="text-[13.33px] black-text ml-2">
+                      {serviceItem.operator_details[2]}
+                    </div>
+                  ) : null}
                 </div>
 
                 {/* DATE AND TIME - Grid Layout */}
@@ -500,7 +603,7 @@ function ServiceItemPB({
                         <img
                           src={serviceItem.icons?.origin}
                           alt="origin"
-                          className={`w-[16px] h-auto mr-[8px] ${
+                          className={`w-[18px] h-auto mr-[8px] ${
                             isSoldOut ? "grayscale" : ""
                           }`}
                         />
@@ -517,7 +620,7 @@ function ServiceItemPB({
                         <div className="h-[20px] flex items-center">
                           <img
                             src={serviceItem.icons?.destination}
-                            className={`w-[16px] h-auto mr-[8px] ${
+                            className={`w-[18px] h-auto mr-[8px] ${
                               isSoldOut ? "grayscale" : ""
                             }`}
                             style={{ opacity: isSoldOut ? 0.5 : 1 }}
@@ -636,87 +739,151 @@ function ServiceItemPB({
                 ></div>
                 {/* SEATS */}
                 <div className="content-center">
-                  <SeatSection
-                    seatTypes={serviceItem.seat_types}
-                    availableSeats={serviceItem.available_seats}
-                    isSoldOut={isSoldOut}
-                    priceColor={colors.priceColor}
-                    currencySign={currencySign}
-                    removeDuplicateSeats={removeDuplicateSeats}
-                    isPeru={isPeru}
-                  />
-                </div>
-
-                {/* BUTTON */}
-
-                <div>
-                  {showLastSeats ? (
+                  <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 justify-end mr-[11px] "
+                      className="flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full"
                       style={{
-                        marginBottom:
-                          serviceItem?.available_seats < 10 &&
-                          serviceItem?.available_seats > 0
-                            ? "6px"
-                            : "0",
+                        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",
                       }}
                     >
-                      {serviceItem?.available_seats < 10 &&
-                        serviceItem?.available_seats > 0 && (
-                          <div className="text-[12.5px] text-[#464647] mt-1 text-center">
-                            ¡ Últimos Asientos!
-                          </div>
+                      {getSeatPrice()}
+                    </div>
+                  </div>
+                </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>
+                    ))}
+                </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>
-                  ) : null}
-                  <KuposButton
-                    isSoldOut={isSoldOut}
-                    isLoading={serviceDetailsLoading}
-                    buttonColor={colors.kuposButtonColor}
-                    buyLabel={translation?.buyButton}
-                    soldOutLabel={translation?.soldOutButton}
-                    soldOutIcon={renderIcon("soldOutIcon", "14px")}
-                    onClick={checkMidnight}
-                  />
+                  ))}
+                </div>
+
+                {/* 🔹 RIGHT SIDE (ALWAYS END) */}
+                <div className="flex items-center ml-[12px] shrink-0 w-[130px] justify-end">
+                  {amenitiesItem?.render}
                 </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) */}
-          {isItemExpanded && (
-            <ExpandedDropdown
-              serviceItem={serviceItem}
-              showPromo={showPromo}
-              colors={colors}
-              grayscaleClass={grayscaleClass}
-              translation={translation}
-              getAnimationIcon={getAnimationIcon}
-            />
-          )}
-
           {children}
           {/* 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: colors?.bottomStripColor,
+                backgroundColor: isSoldOut
+                  ? colors?.bottomStripColor
+                  : colors?.bottomStripColor,
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
@@ -728,6 +895,83 @@ function ServiceItemPB({
               <span className="ml-[10px]">{serviceItem?.offer_text}</span>
             </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`}
+                style={{
+                  backgroundColor: isSoldOut
+                    ? "#ddd"
+                    : colors.ratingBottomColor,
+                }}
+              >
+                <div className={isSoldOut ? "grayscale" : ""}>
+                  <LottiePlayer
+                    // animationData={serviceItem.icons.priorityStageAnim}
+                    animationData={getAnimationIcon("priorityStageAnim")}
+                    width="14px"
+                    height="14px"
+                  />
+                </div>
+                <div
+                  className={
+                    isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
+                  }
+                >
+                  {showTopLabel}
+                </div>
+              </div>
+            )}
+            {serviceItem?.is_transpordo && (
+              <div
+                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`}
+                style={{
+                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                }}
+              >
+                <LottiePlayer
+                  animationData={serviceItem.icons.connectingServiceIcon}
+                  // animationData={getAnimationIcon(connectingServiceIcon)}
+                  width="14px"
+                  height="14px"
+                />
+                <div>{"Conexión"}</div>
+              </div>
+            )}
+            {serviceItem?.is_direct_trip && (
+              <div
+                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
+                style={{
+                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                }}
+              >
+                <LottiePlayer
+                  // animationData={serviceItem.icons.directoAnim}
+                  animationData={getAnimationIcon("directoAnim")}
+                  width="14px"
+                  height="14px"
+                />
+                <div>{translation?.directService}</div>
+              </div>
+            )}
+            {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
+              <div
+                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
+                style={{
+                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                }}
+              >
+                <LottiePlayer
+                  // animationData={serviceItem.icons.directoAnim}
+                  animationData={getAnimationIcon("directoAnim")}
+                  width="14px"
+                  height="14px"
+                />
+                <div>{"Tren Express"}</div>
+              </div>
+            )}
+          </div>
         </div>
       )}
     </>