kupos-ui-components-lib 9.9.6 → 9.9.7

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -18,65 +18,31 @@ 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 bombAnimation from "../../assets/images/anims/service_list/bomb.json";
-import dotAnimation from "../../assets/images/anims/service_list/dot_animation.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 StageTooltip from "../../ui/StagesTooltip";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
 import FlexibleBlock from "../../ui/FlexibleBlock";
 import AmenitiesBlock from "../../ui/AmenitiesBlock";
-import SeatSection from "../../ui/SeatSection/SeatSection";
-import KuposButton from "../../ui/KuposButton/KuposButton";
-import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
-import OfferBanner from "../../ui/OfferBanner";
-import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 
 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,
-  },
-  dotAnimation: {
-    kupos: dotAnimation,
-    opsites: dotAnimation,
-  },
-};
-
 function PeruServiceItemDesktop({
   serviceItem,
   onBookButtonPress,
@@ -101,21 +67,53 @@ function PeruServiceItemDesktop({
   isPeru,
   siteType,
   isAllinBus,
-  viewersConfig,
-  isExpand,
-  setIsExpand,
-  coachKey,
-  isLoggedIn,
-  showLoginModal,
   isFlores,
-  isNewUiEnabled,
-  showLoginOption,
   t = (key: string) => key,
 }: 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 = ANIMATION_MAP[icon];
+    const animation = animationMap[icon];
     if (!animation) return null;
-    return animation[siteType] ?? animation.kupos;
+    const currentSiteType = siteType || "kupos";
+    return animation[currentSiteType];
   };
   const SvgAmenities = ({
     moreAnemities,
@@ -151,9 +149,8 @@ function PeruServiceItemDesktop({
         style={{
           filter: color === "white" ? "brightness(0) invert(1)" : "",
         }}
-        className={`object-contain ${
-          moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
-        }`}
+        className={`object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
+          }`}
       />
     );
   };
@@ -170,7 +167,6 @@ function PeruServiceItemDesktop({
     busStage[labelId].split("|")[0];
 
   let isSoldOut = serviceItem.available_seats <= 0;
-  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
 
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
@@ -265,9 +261,8 @@ function PeruServiceItemDesktop({
         SEAT_EXCEPTIONS.includes(val.label) ? null : (
           <span
             key={key}
-            className={`flex items-center justify-between  text-[13.33px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
+            className={`flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
+              }`}
           >
             <div>
               <img
@@ -292,9 +287,8 @@ function PeruServiceItemDesktop({
       SEAT_EXCEPTIONS.includes(val.label) ? null : (
         <span
           key={key}
-          className={`flex items-center justify-between  text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
+          className={`flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
+            }`}
         >
           <div>
             <img
@@ -350,8 +344,6 @@ function PeruServiceItemDesktop({
   };
 
   const checkMidnight = () => {
-    setIsExpand?.(null);
-
     if (
       cityOrigin?.label &&
       cityDestination?.label &&
@@ -456,56 +448,26 @@ function PeruServiceItemDesktop({
     ? extractStage(serviceItem.stage_details_arr, 1)
     : null;
 
-  const countdownSeconds = 599;
-
-  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 m = Math.floor(totalSecs / 60);
-      const s = totalSecs % 60;
-      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-    };
-
-    node.textContent = formatTime(remaining);
-
-    const id = setInterval(() => {
-      remaining -= 1;
-      if (remaining <= 0) {
-        remaining = countdownSeconds;
-      }
-      node.textContent = formatTime(remaining);
-    }, 1000);
-
-    node.dataset.countdownId = String(id);
-  };
-
   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}
-          getAnimationIcon={getAnimationIcon}
-          getAmenityName={CommonService.getAmenityName}
-          SvgAmenities={SvgAmenities}
+          t={t}
+          translation={translation}
           isPeru={isPeru}
         />
       ),
     },
+
     {
       key: "duration",
-      width: "12%",
+      width: "20%",
       condition: serviceItem.duration,
       render: (
         <DurationBlock
@@ -518,20 +480,6 @@ function PeruServiceItemDesktop({
       ),
     },
 
-    // {
-    //   key: "directo",
-    //   width: "12%",
-    //   condition: serviceItem?.is_direct_trip === true,
-    //   render: (
-    //     <DirectoBlock
-    //       translation={translation}
-    //       getAnimationIcon={getAnimationIcon}
-    //       colors={colors}
-    //       isSoldOut={isSoldOut}
-    //     />
-    //   ),
-    // },
-
     {
       key: "pet",
       width: "20%",
@@ -551,7 +499,7 @@ function PeruServiceItemDesktop({
     {
       key: "flexible",
       width: "20%",
-      condition: serviceItem.is_change_ticket === true,
+      condition: false,
       render: (
         <FlexibleBlock
           translation={translation}
@@ -562,145 +510,81 @@ function PeruServiceItemDesktop({
         />
       ),
     },
+
+    {
+      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,
-  );
-
-  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
-  const grayscaleClass = isSoldOut ? "grayscale" : "";
-
-  const hasOfferText = Boolean(serviceItem?.offer_text);
-
-  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
-  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
-  const serviceCardStyle: React.CSSProperties =
-    (hasOfferText && isNewUiEnabled) || hasDpEnabled
-      ? {
-          borderColor: "transparent",
-          borderStyle: "solid",
-          borderWidth: "3px 3px 0 3px",
-          borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
-          background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
-          // zIndex: 1,
-        }
-      : {};
-
-  const seats = removeDuplicateSeats
-    ? serviceItem.seat_types?.filter(
-        (seat, index, self) =>
-          index === self.findIndex((s) => s.label === seat.label),
-      ) || []
-    : serviceItem.seat_types || [];
-
-  const discountedSeats = seats.map((seat) => ({
-    ...seat,
-    ...CommonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
-  }));
-
-  const hasDiscount = discountedSeats.some(
-    (seat) => seat.originalPrice !== seat.discountedPrice,
+    (i) => i.key !== "amenities" && i.condition !== false,
   );
 
   return (
     <div
-      className={`relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${
-        serviceItem?.is_direct_trip ||
-        serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-        showTopLabel
+      className={`relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+        } ${serviceItem?.is_direct_trip ||
+          serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+          showTopLabel
           ? "mt-[24px]"
           : "mt-[20px]"
-      }	`}
+        }	`}
     >
-      {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
-        <OfferBanner
-          offerGradient={offerGradient}
-          isSoldOut={isSoldOut}
-          serviceItem={serviceItem}
-          renderIcon={renderIcon}
-          isLoggedIn={isLoggedIn}
-          showLoginModal={showLoginModal}
-          viewersConfig={viewersConfig}
-          getAnimationIcon={getAnimationIcon}
-          showLoginOption={showLoginOption}
-          isNewUiEnabled={isNewUiEnabled}
-          colors={colors}
-        />
-      )}
       <div
-        id={`service-card-${serviceItem.id}`}
-        className={`bg-white mx-auto relative ${
-          (hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
-            ? "z-[3] rounded-[18px]"
-            : "rounded-[10px] border border-[#ccc]"
-        }`}
-        style={serviceCardStyle}
+        className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
       >
-        <div
-          className=" pt-[20px]"
-          style={{
-            padding: hasOfferText
-              ? "20px 15px 10px 15px"
-              : coachKey
-                ? "20px 15px 20px 15px"
-                : "20px 15px 10px 15px",
-
-            marginTop: hasDiscount || hasOfferText ? "14px" : "",
-          }}
-        >
-          {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
-          <div
-            className="grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center"
-            // style={{ marginTop: showTopLabel ? "8px" : "" }}
-            style={{
-              marginTop:
-                showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
-            }}
-          >
-            {/* OPERATOR LOGO */}
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                // gap: "5px",
-              }}
-            >
-              <div
-                // className="flex items-center justify-center m-[auto]"
-                className=""
-              >
+        <div className="p-[15px] pt-[20px]">
+          {/* Header with operator info and favorite */}
+          {/* <div className="flex justify-between items-center mb-[15px]">
+            <div className="flex items-center justify-between w-[250px]">
+              <div className="w-[120px] overflow-y-hidden">
                 <img
                   src={serviceItem.operator_details[0]}
                   alt="service logo"
-                  className={`h-auto object-contain ${
-                    isFlores ? "w-[80%]" : "w-full"
-                  } ${isSoldOut ? "grayscale" : ""}`}
+                  className={`w-[120px] h-auto object-contain ${
+                    isSoldOut ? "grayscale" : ""
+                  }`}
                 />
+              </div>
+
+              <div>
+                {" "}
                 {isCiva ? (
-                  <div className="text-[13.33px] black-text ml-2">
+                  <div className="text-[13.33px] black-text">
                     {serviceItem.operator_details[2]}
                   </div>
                 ) : null}
               </div>
-              <RatingBlock
-                showRating={showRating}
-                serviceItem={serviceItem}
-                isSoldOut={isSoldOut}
-                colors={colors}
-                t={t}
-                translation={translation}
-                isPeru={isPeru}
-              />
             </div>
-            {/* <div className="flex items-center justify-center m-[auto]">
+          </div> */}
+
+          {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
+          <div
+            className="grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center"
+            style={{ marginTop: showTopLabel ? "8px" : "" }}
+          >
+            {/* OPERATOR LOGO */}
+            <div className="flex items-center justify-center m-[auto]">
               <div className=" ">
                 <img
                   src={serviceItem.operator_details[0]}
                   alt="service logo"
-                  className={` h-auto object-contain ${
-                    isSoldOut ? "grayscale" : ""
-                  }`}
+                  className={`h-auto object-contain ${isFlores ? "w-[80%]" : "w-full"
+                    } ${isSoldOut ? "grayscale" : ""}`}
                 />
               </div>
               {isCiva ? (
@@ -708,19 +592,18 @@ function PeruServiceItemDesktop({
                   {serviceItem.operator_details[2]}
                 </div>
               ) : null}
-            </div> */}
+            </div>
 
             {/* DATE AND TIME - Grid Layout */}
             <div
-              className={`min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
-                isSoldOut ? "text-[#c0c0c0]" : ""
-              }`}
+              className={`min-h-[2.5rem] grid grid-cols-[0.8fr_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-[4px]">
+              <div className="flex flex-col gap-[10px]">
                 {/* Origin Icon */}
                 {orignLabel ? (
                   <div className="w-[60px] h-[20px] flex items-center bold-text">
@@ -731,9 +614,8 @@ function PeruServiceItemDesktop({
                     <img
                       src={serviceItem.icons?.origin}
                       alt="origin"
-                      className={`w-[18px] h-auto mr-[8px] ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
+                      className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
+                        }`}
                     />
                   </div>
                 )}
@@ -748,9 +630,8 @@ function PeruServiceItemDesktop({
                     <div className="h-[20px] flex items-center">
                       <img
                         src={serviceItem.icons?.destination}
-                        className={`w-[18px] h-auto mr-[8px] ${
-                          isSoldOut ? "grayscale" : ""
-                        }`}
+                        className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
+                          }`}
                         style={{ opacity: isSoldOut ? 0.5 : 1 }}
                       />
                     </div>
@@ -758,7 +639,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* DATES COLUMN */}
-              <div className="flex flex-col gap-[4px]">
+              <div className="flex flex-col gap-[10px]">
                 {/* Departure Date */}
                 <StageTooltip
                   stageData={serviceItem.boarding_stages}
@@ -791,7 +672,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* DOTS COLUMN */}
-              <div className="flex flex-col gap-[4px] items-center">
+              <div className="flex flex-col gap-[10px] items-center">
                 {/* Departure Dot */}
                 <div className="h-[20px] flex items-center justify-center">
                   <div>•</div>
@@ -808,7 +689,7 @@ function PeruServiceItemDesktop({
               </div>
 
               {/* TIMES COLUMN */}
-              <div className="flex flex-col gap-[4px]">
+              <div className="flex flex-col gap-[10px]">
                 {/* Departure Time */}
                 <StageTooltip
                   stageData={serviceItem.boarding_stages}
@@ -854,180 +735,142 @@ function PeruServiceItemDesktop({
             ></div>
             {/* SEATS */}
             <div className="content-center">
-              <SeatSection
-                seatTypes={serviceItem.seat_types}
-                serviceItem={serviceItem}
-                availableSeats={serviceItem.available_seats}
-                isSoldOut={isSoldOut}
-                priceColor={colors.priceColor}
-                currencySign={currencySign}
-                removeDuplicateSeats={removeDuplicateSeats}
-                isPeru={isPeru}
-                renderIcon={renderIcon}
-                discountSeatPriceColor={colors.discountSeatPriceColor}
-              />
-            </div>
+              <div
+                className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""
+                  }`}
+                style={
+                  getNumberOfSeats() < 2
+                    ? { alignItems: "center" }
+                    : { alignItems: "center" }
+                }
+              >
+                <div className="flex flex-col justify-between">
+                  {getSeatNames()}
+                </div>
 
-            {/* BUTTON */}
-            {/* {showLastSeats ? (
                 <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={{
-                    position: "absolute",
-                    top: serviceDetailsLoading ? "7px" : "5px",
-                    right: "16px",
+                    color: isSoldOut ? "#c0c0c0" : colors.priceColor,
+                    top: 0,
+                    bottom: 0,
+                    left: "68%",
+                    right: 0,
+                    justifyContent:
+                      getNumberOfSeats() < 2 ? "center" : "center",
+                    gap: "5px",
                   }}
                 >
-                  {serviceItem?.available_seats < 10 &&
-                    serviceItem?.available_seats > 0 && (
-                      <div className="text-[12px] text-[#464647] mt-1 text-center">
-                        ¡Últimos Asientos!
-                      </div>
-                    )}
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: getNumberOfSeats() > 1 ? -10 : -5,
+                      fontWeight: "initial",
+                      fontSize: "12px",
+                      left: 0,
+                      color: "#6a6a6a",
+                    }}
+                  >
+                    Desde
+                  </span>
+                  {getSeatPrice()}
                 </div>
-              ) : null}
-              <KuposButton
-                isSoldOut={isSoldOut}
-                isLoading={serviceDetailsLoading}
-                buttonColor={colors.kuposButtonColor}
-                buyLabel={translation?.buyButton}
-                soldOutLabel={translation?.soldOutButton}
-                soldOutIcon={renderIcon("soldOutIcon", "14px")}
-                onClick={checkMidnight}
-              /> */}
-            <div className="relative">
-              <KuposButton
-                isSoldOut={isSoldOut}
-                isLoading={serviceDetailsLoading}
-                buttonColor={colors.kuposButtonColor}
-                buyLabel={translation?.buyButton}
-                soldOutLabel={translation?.soldOutButton}
-                soldOutIcon={renderIcon("soldOutIcon", "14px")}
-                onClick={checkMidnight}
-              />
-              {showLastSeats ? (
-                <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
-                  {serviceItem?.available_seats < 10 &&
-                    serviceItem?.available_seats > 0 && (
-                      <div
-                        className="text-[12px]  mt-1 text-center"
-                        style={{
-                          color: colors.seatPriceColor,
-                        }}
-                      >
-                        ¡Últimos Asientos!
-                      </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]">
+            {/* 🔹 LEFT SIDE (GRID ITEMS) */}
+            <div
+              className="grid items-center gap-[2%] flex-1"
+              style={{
+                gridTemplateColumns: "30% 18% 23% 23%",
+
+                // otherItems
+                //   .map((i) => i.width)
+                //   .join(" "),
+              }}
+            >
+              {otherItems.map((item) => (
+                <div key={item.key} className="flex items-center ">
+                  {item.render}
                 </div>
-              ) : null}
+              ))}
+            </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)
-            }
-            isPeru={isPeru}
-          />
         </div>
       </div>
 
       {children}
-
-      {/* {serviceItem?.offer_text && (
+      {/* 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]  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={{
-            background: offerGradient,
+            backgroundColor: isSoldOut
+              ? colors?.bottomStripColor
+              : colors?.bottomStripColor,
             opacity: isSoldOut ? 0.5 : 1,
           }}
         >
-          <div className="flex  justify-between items-center w-full">
-            <div className="flex items-center ">
-              <div className="flex items-center">
-                <LottiePlayer
-                  animationData={getAnimationIcon("bombAnimation")}
-                  width="18px"
-                  height="18px"
-                />
-                <div className="flex items-center mt-[2px]">
-                  <span className="bold-text ml-[6px]">
-                    {(serviceItem?.offer_text || "").length > 30
-                      ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
-                      : serviceItem?.offer_text || ""}{" "}
-                    {isLoggedIn ? null : (
-                      <span onClick={showLoginModal} className="cursor-pointer">
-                        - registro
-                      </span>
-                    )}{" "}
-                    &nbsp;
-                  </span>{" "}
-                  | Termina en&nbsp;
-                  <span
-                    className="bold-text text-end"
-                    ref={(node) => CommonService.startCountdown(node, 599)}
-                    style={{
-                      fontVariantNumeric: "tabular-nums",
-                      display: "inline-block",
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center">
-              <LottiePlayer
-                animationData={getAnimationIcon("dotAnimation")}
-                width="12px"
-                height="12px"
-              />
-
-              <span className="ml-[6px]">
-                <span
-                  className="bold-text"
-                  ref={(node) =>
-                    CommonService.startViewerCount(node, viewersConfig)
-                  }
-                  style={{ fontVariantNumeric: "tabular-nums" }}
-                />{" "}
-                <span>
-                  {" "}
-                  {viewersConfig?.label || " viendo"} |{" "}
-                  <span className="">
-                    {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        CommonService.startComprandoCount(node, 4, 16)
-                      }
-                      style={{ fontVariantNumeric: "tabular-nums" }}
-                    />{" "}
-                    comprando
-                  </span>
-                </span>
-              </span>
-            </div>
-          </div>
+          <LottiePlayer
+            // animationData={serviceItem.icons.promoAnim}
+            animationData={getAnimationIcon("promoAnim")}
+            width="18px"
+            height="18px"
+          />
+          <span className="ml-[10px]">{serviceItem?.offer_text}</span>
         </div>
-      )} */}
-
-      <ServiceBadges
-        showTopLabel={showTopLabel}
-        isSoldOut={isSoldOut}
-        colors={colors}
-        renderIcon={renderIcon}
-        translation={translation}
-        serviceItem={serviceItem}
-      />
+      )}
 
-      {/* <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
+      <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`}
@@ -1037,6 +880,7 @@ function PeruServiceItemDesktop({
           >
             <div className={isSoldOut ? "grayscale" : ""}>
               <LottiePlayer
+                // animationData={serviceItem.icons.priorityStageAnim}
                 animationData={getAnimationIcon("priorityStageAnim")}
                 width="14px"
                 height="14px"
@@ -1061,6 +905,7 @@ function PeruServiceItemDesktop({
           >
             <div className={isSoldOut ? "grayscale" : ""}>
               <LottiePlayer
+                // animationData={serviceItem.icons.priorityStageAnim}
                 animationData={getAnimationIcon("priorityStageAnim")}
                 width="14px"
                 height="14px"
@@ -1076,6 +921,30 @@ function PeruServiceItemDesktop({
           </div>
         )}
 
+        {/* {dropoffName && (
+          <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}]`
+              }
+            >
+              {dropoffName}
+            </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`}
@@ -1083,8 +952,11 @@ function PeruServiceItemDesktop({
               backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
             }}
           >
-            {renderIcon("connectingServiceIcon", "12px")}
-
+            <LottiePlayer
+              animationData={serviceItem.icons.connectingServiceIcon}
+              width="14px"
+              height="14px"
+            />
             <div>{"Conexión"}</div>
           </div>
         )}
@@ -1111,6 +983,7 @@ function PeruServiceItemDesktop({
             }}
           >
             <LottiePlayer
+              // animationData={serviceItem.icons.directoAnim}
               animationData={getAnimationIcon("directoAnim")}
               width="14px"
               height="14px"
@@ -1118,7 +991,7 @@ function PeruServiceItemDesktop({
             <div>{"Tren Express"}</div>
           </div>
         )}
-      </div> */}
+      </div>
     </div>
   );
 }