kupos-ui-components-lib 9.0.9 → 9.0.11

package/dist/ui/mobileweb/TopAmenitieMobile.js

@@ -1,6 +1,33 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, }) {
+function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim, priorityStageAnim, countdownSeconds = 0, onCountdownEnd, }) {
+    const pad = (n) => String(n).padStart(2, "0");
+    const startCountdown = (el) => {
+        if (!el || el.dataset.timerStarted)
+            return;
+        el.dataset.timerStarted = "true";
+        let remaining = countdownSeconds;
+        const update = () => {
+            const hrs = Math.floor(remaining / 3600);
+            const mins = Math.floor((remaining % 3600) / 60);
+            const secs = remaining % 60;
+            el.textContent = `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+        };
+        update();
+        const timer = setInterval(() => {
+            if (remaining <= 0) {
+                clearInterval(timer);
+                const promoBar = el.closest("[data-promo-bar]");
+                if (promoBar)
+                    promoBar.style.display = "none";
+                if (onCountdownEnd)
+                    onCountdownEnd();
+                return;
+            }
+            remaining--;
+            update();
+        }, 1000);
+    };
     return (React.createElement("div", { style: {
             display: "flex",
             justifyContent: "flex-end",
@@ -12,18 +39,24 @@ function TopAmenitieMobile({ showTopLabel, isSoldOut, seatPriceColor, bombAnim,
                 position: "relative",
                 right: showTopLabel ? "-21px" : "",
                 padding: "0 14px",
-                borderTopRightRadius: "14px",
-                borderTopLeftRadius: "14px",
+                borderTopRightRadius: "12px",
+                borderTopLeftRadius: "12px",
             } },
             React.createElement("div", { style: { display: "flex", alignItems: "center", color: "#fff" } },
-                React.createElement(LottiePlayer, { animationData: bombAnim, width: "12px", height: "12px" }),
+                React.createElement(LottiePlayer, { animationData: bombAnim, width: "16px", height: "16px" }),
                 React.createElement("span", { className: "flex items-center gap-[5px] py-[6px] pl-[6px]   text-[12px]  z-20", style: { paddingRight: showTopLabel ? "20px" : "0" } },
                     React.createElement("span", { className: "bold-text" }, "kuponazo 20% "),
-                    " | 02:10:30"))),
+                    " |",
+                    " ",
+                    React.createElement("span", { ref: startCountdown, style: {
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                            minWidth: "50px",
+                        } })))),
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[5px] py-[6px] px-[10px]  text-[12px]  z-20`, style: {
                 backgroundColor: isSoldOut ? "#ddd" : "#ff8f45",
-                borderTopRightRadius: "10px",
-                borderTopLeftRadius: "10px",
+                borderTopRightRadius: "12px",
+                borderTopLeftRadius: "12px",
             } },
             React.createElement(LottiePlayer, { animationData: priorityStageAnim, width: "12px", height: "12px" }),
             React.createElement("div", { className: 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.0.9",
+  "version": "9.0.11",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -462,6 +462,7 @@ function PeruServiceItemDesktop({
           colors={colors}
           t={t}
           translation={translation}
+          isPeru={isPeru}
         />
       ),
     },

package/src/components/ServiceItem/RatingHover.tsx

@@ -7,6 +7,7 @@ interface RatingHoverProps {
   colors: any;
   t?: (key: string) => string;
   translation?: { [key: string]: string };
+  isPeru?: boolean;
 }
 
 const RatingHover: React.FC<RatingHoverProps> = ({
@@ -15,7 +16,9 @@ const RatingHover: React.FC<RatingHoverProps> = ({
   colors,
   t = (key: string) => key,
   translation,
+  isPeru,
 }) => {
+  const ratingIndex = isPeru ? 7 : 6;
   return (
     <div className="flex items-center">
       <div className="w-[18px] h-auto mr-[4px] relative">
@@ -59,28 +62,28 @@ const RatingHover: React.FC<RatingHoverProps> = ({
           <div className="px-3 py-2 flex flex-col gap-[10px] font9">
             <RatingItem
               rating={
-                serviceItem.operator_details[6] &&
-                serviceItem.operator_details[6][
+                serviceItem.operator_details[ratingIndex] &&
+                serviceItem.operator_details[ratingIndex][
                   Object.keys(
-                    serviceItem.operator_details[6] &&
-                      serviceItem.operator_details[6]
+                    serviceItem.operator_details[ratingIndex] &&
+                      serviceItem.operator_details[ratingIndex],
                   )[0]
                 ] &&
                 parseFloat(
-                  serviceItem.operator_details[6][
+                  serviceItem.operator_details[ratingIndex][
                     Object.keys(
-                      serviceItem.operator_details[6] &&
-                        serviceItem.operator_details[6]
+                      serviceItem.operator_details[ratingIndex] &&
+                        serviceItem.operator_details[ratingIndex],
                     )[0]
-                  ]
+                  ],
                 ).toFixed(1)
                   ? +parseFloat(
-                      serviceItem.operator_details[6][
+                      serviceItem.operator_details[ratingIndex][
                         Object.keys(
-                          serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6]
+                          serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex],
                         )[0]
-                      ]
+                      ],
                     ).toFixed(1)
                   : 0
               }
@@ -89,28 +92,28 @@ const RatingHover: React.FC<RatingHoverProps> = ({
             />
             <RatingItem
               rating={
-                serviceItem.operator_details[6] &&
-                serviceItem.operator_details[6][
+                serviceItem.operator_details[ratingIndex] &&
+                serviceItem.operator_details[ratingIndex][
                   Object.keys(
-                    serviceItem.operator_details[6] &&
-                      serviceItem.operator_details[6]
+                    serviceItem.operator_details[ratingIndex] &&
+                      serviceItem.operator_details[ratingIndex],
                   )[1]
                 ] &&
                 parseFloat(
-                  serviceItem.operator_details[6][
+                  serviceItem.operator_details[ratingIndex][
                     Object.keys(
-                      serviceItem.operator_details[6] &&
-                        serviceItem.operator_details[6]
+                      serviceItem.operator_details[ratingIndex] &&
+                        serviceItem.operator_details[ratingIndex],
                     )[1]
-                  ]
+                  ],
                 ).toFixed(1)
                   ? +parseFloat(
-                      serviceItem.operator_details[6][
+                      serviceItem.operator_details[ratingIndex][
                         Object.keys(
-                          serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6]
+                          serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex],
                         )[1]
-                      ]
+                      ],
                     ).toFixed(1)
                   : 0
               }
@@ -119,28 +122,28 @@ const RatingHover: React.FC<RatingHoverProps> = ({
             />
             <RatingItem
               rating={
-                serviceItem.operator_details[6] &&
-                serviceItem.operator_details[6][
+                serviceItem.operator_details[ratingIndex] &&
+                serviceItem.operator_details[ratingIndex][
                   Object.keys(
-                    serviceItem.operator_details[6] &&
-                      serviceItem.operator_details[6]
+                    serviceItem.operator_details[ratingIndex] &&
+                      serviceItem.operator_details[ratingIndex],
                   )[2]
                 ] &&
                 parseFloat(
-                  serviceItem.operator_details[6][
+                  serviceItem.operator_details[ratingIndex][
                     Object.keys(
-                      serviceItem.operator_details[6] &&
-                        serviceItem.operator_details[6]
+                      serviceItem.operator_details[ratingIndex] &&
+                        serviceItem.operator_details[ratingIndex],
                     )[2]
-                  ]
+                  ],
                 ).toFixed(1)
                   ? +parseFloat(
-                      serviceItem.operator_details[6][
+                      serviceItem.operator_details[ratingIndex][
                         Object.keys(
-                          serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6]
+                          serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex],
                         )[2]
-                      ]
+                      ],
                     ).toFixed(1)
                   : 0
               }
@@ -149,28 +152,28 @@ const RatingHover: React.FC<RatingHoverProps> = ({
             />
             <RatingItem
               rating={
-                serviceItem.operator_details[6] &&
-                serviceItem.operator_details[6][
+                serviceItem.operator_details[ratingIndex] &&
+                serviceItem.operator_details[ratingIndex][
                   Object.keys(
-                    serviceItem.operator_details[6] &&
-                      serviceItem.operator_details[6]
+                    serviceItem.operator_details[ratingIndex] &&
+                      serviceItem.operator_details[ratingIndex],
                   )[3]
                 ] &&
                 parseFloat(
-                  serviceItem.operator_details[6][
+                  serviceItem.operator_details[ratingIndex][
                     Object.keys(
-                      serviceItem.operator_details[6] &&
-                        serviceItem.operator_details[6]
+                      serviceItem.operator_details[ratingIndex] &&
+                        serviceItem.operator_details[ratingIndex],
                     )[3]
-                  ]
+                  ],
                 ).toFixed(1)
                   ? +parseFloat(
-                      serviceItem.operator_details[6][
+                      serviceItem.operator_details[ratingIndex][
                         Object.keys(
-                          serviceItem.operator_details[6] &&
-                            serviceItem.operator_details[6]
+                          serviceItem.operator_details[ratingIndex] &&
+                            serviceItem.operator_details[ratingIndex],
                         )[3]
-                      ]
+                      ],
                     ).toFixed(1)
                   : 0
               }

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -182,7 +182,7 @@ function ServiceItemPB({
   };
 
   const checkMidnight = () => {
-    setIsExpand(null);
+    setIsExpand?.(null);
     if (
       cityOrigin?.label &&
       cityDestination?.label &&
@@ -468,6 +468,7 @@ function ServiceItemPB({
                     colors={colors}
                     t={t}
                     translation={translation}
+                    isPeru={isPeru}
                   />
                 </div>
 
@@ -563,19 +564,14 @@ function ServiceItemPB({
               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}
-                showPromo={showPromo}
-                colors={colors}
-                grayscaleClass={grayscaleClass}
-                translation={translation}
-                getAnimationIcon={getAnimationIcon}
-              />
+              <ExpandedDropdown serviceItem={serviceItem} />
             </div>
           </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -7,6 +7,7 @@ import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
 import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
+import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -32,6 +33,8 @@ function ServiceItemMobile({
   amenitiesData,
   setShowDropdown,
   showDropdown,
+  isExpanded,
+  setIsExpanded,
   setAmenetiesAtomValue,
   isCiva,
   currencySign,
@@ -41,10 +44,13 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
 }: MobileServiceItemProps): React.ReactElement {
+  const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   let isSoldOut = serviceItem.available_seats <= 0;
   const showPromo = Math.random() > 0.5;
 
+  const countdownSeconds = 7830;
+
   const labelId =
     typeof serviceItem.boarding_stages === "string"
       ? serviceItem.boarding_stages.split("|")[0]
@@ -135,6 +141,17 @@ function ServiceItemMobile({
         seatPriceColor={colors.seatPriceColor}
         bombAnim={serviceItem.icons.bombAnim}
         priorityStageAnim={serviceItem.icons.priorityStageAnim}
+        countdownSeconds={countdownSeconds}
+        onCountdownEnd={() => {
+          const cardEl = document.getElementById(
+            `service-card-${serviceItem.id}`,
+          );
+          if (!cardEl) return;
+          cardEl.style.border = "1px solid #ccc";
+          if (!showTopLabel) {
+            cardEl.style.borderRadius = "10px";
+          }
+        }}
       />
       <div
         className={" rounded-[20px]"}
@@ -142,7 +159,7 @@ function ServiceItemMobile({
           backgroundColor: "#fff",
           zIndex: 1,
           // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-          borderRadius: "14px 0 14px 14px",
+          borderRadius: "12px 0 12px 12px",
           border: `1px solid ${colors.bottomStripColor}`,
         }}
       >
@@ -268,14 +285,19 @@ function ServiceItemMobile({
             isTrackingEnabled={serviceItem?.is_tracking_enabled}
             locationAnim={serviceItem.icons.locationAnim}
             downArrowIcon={serviceItem.icons.downArrow}
-            showDropdown={showDropdown}
-            setShowDropdown={setShowDropdown}
+            showDropdown={isItemExpanded}
+            setShowDropdown={() =>
+              setIsExpanded(isItemExpanded ? null : serviceItem.id)
+            }
+            // onDropdownToggle={() => {
+            //   setShowDropdown(!showDropdown);
+            //   setAmenetiesAtomValue({
+            //     service: serviceItem,
+            //     showTopLabel: showTopLabel,
+            //   });
+            // }}
             onDropdownToggle={() => {
-              setShowDropdown(!showDropdown);
-              setAmenetiesAtomValue({
-                service: serviceItem,
-                showTopLabel: showTopLabel,
-              });
+              setIsExpanded(isItemExpanded ? null : serviceItem.id);
             }}
           />
         </div>
@@ -374,6 +396,23 @@ function ServiceItemMobile({
           )} */}
         </div>
       </div>
+
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+          opacity: isItemExpanded ? 1 : 0,
+          transition:
+            "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+          position: "relative",
+          zIndex: -1,
+        }}
+      >
+        <div style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}>
+          <ExpandedDropdownMobile serviceItem={serviceItem} />
+        </div>
+      </div>
     </div>
   );
 }

package/src/components/ServiceItem/mobileTypes.ts

@@ -124,6 +124,8 @@ export interface MobileServiceItemProps {
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
+  isExpanded?: string | null;
+  setIsExpanded?: (value: string | null) => void;
   setAmenetiesAtomValue?: (
     value:
       | {

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -94,14 +94,14 @@ function BottomAmenities({
         )}
 
         {/* DOWN ARROW ICON */}
-        {showDownArrow ? (
-          <div
-            className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`}
-            onClick={onToggleExpand}
-          >
-            {downArrowIcon}
-          </div>
-        ) : null}
+        {/* {showDownArrow ? ( */}
+        <div
+          className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] `}
+          onClick={onToggleExpand}
+        >
+          {downArrowIcon}
+        </div>
+        {/* ) : null} */}
       </div>
     </div>
   );

package/src/ui/DateTimeSection/DateTimeSection.tsx

@@ -68,7 +68,7 @@ function DateTimeSection({
       }}
     >
       {/* ICONS COLUMN */}
-      <div className="flex flex-col gap-[6px]">
+      <div className="flex flex-col gap-[4px]">
         {/* Origin Icon */}
         {orignLabel ? (
           <div className="w-[60px] h-[20px] flex items-center">
@@ -106,7 +106,7 @@ function DateTimeSection({
       </div>
 
       {/* DATES COLUMN */}
-      <div className="flex flex-col gap-[6px]">
+      <div className="flex flex-col gap-[4px]">
         {/* Departure Date */}
         <StageTooltip
           stageData={serviceItem.boarding_stages}
@@ -139,7 +139,7 @@ function DateTimeSection({
       </div>
 
       {/* DOTS COLUMN */}
-      <div className="flex flex-col gap-[6px] items-center">
+      <div className="flex flex-col gap-[4px] items-center">
         {/* Departure Dot */}
         <div className="h-[20px] flex items-center justify-center">
           <div>•</div>
@@ -156,7 +156,7 @@ function DateTimeSection({
       </div>
 
       {/* TIMES COLUMN */}
-      <div className="flex flex-col gap-[6px]">
+      <div className="flex flex-col gap-[4px]">
         {/* Departure Time */}
         <StageTooltip
           stageData={serviceItem.dropoff_stages}

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -8,22 +8,10 @@ interface ExpandedDropdownProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
-  showPromo: boolean;
-  colors: {
-    priceColor?: string;
-  };
-  grayscaleClass: string;
-  translation?: { [key: string]: string };
-  getAnimationIcon: (icon: string) => any;
 }
 
 function ExpandedDropdown({
   serviceItem,
-  showPromo,
-  colors,
-  grayscaleClass,
-  translation,
-  getAnimationIcon,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&

package/src/ui/RatingBlock.tsx

@@ -8,6 +8,7 @@ const RatingBlock = ({
   colors,
   t,
   translation,
+  isPeru,
 }) => (
   <div className="flex items-center whitespace-nowrap">
     {showRating && (
@@ -17,6 +18,7 @@ const RatingBlock = ({
         colors={colors}
         t={t}
         translation={translation}
+        isPeru={isPeru}
       />
     )}
 

package/src/ui/SeatSection/SeatSection.tsx

@@ -50,6 +50,13 @@ function getSortedSeatTypes(seatTypes: SeatType[]) {
 
   seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
 
+  const seenPrices = new Set<number>();
+  seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
+    if (seenPrices.has(seat.price)) return false;
+    seenPrices.add(seat.price);
+    return true;
+  });
+
   return seatTypesWithPrices;
 }
 
@@ -66,7 +73,13 @@ function getUniqueSeats(seatTypes: SeatType[]) {
     }
   });
 
-  return Array.from(seatMap.values());
+  const uniqueByLabel = Array.from(seatMap.values());
+  const seenPrices = new Set<number>();
+  return uniqueByLabel.filter((seat) => {
+    if (seenPrices.has(seat.price)) return false;
+    seenPrices.add(seat.price);
+    return true;
+  });
 }
 
 function getNumberOfSeats(seatTypes: SeatType[]) {
@@ -135,7 +148,14 @@ function SeatSection({
     if (isPeru) {
       return (
         <>
-          <span className="text-[13.33px]" style={{ color: "#999" }}>
+          <span
+            className="text-[13.33px]"
+            style={{
+              color: "#999",
+              // position: "relative",
+              // bottom: numberOfSeats ? "10px" : "",
+            }}
+          >
             Antes
           </span>
           <span className="text-[13.33px]">Desde</span>

package/src/ui/TopAmenities/TopAmenities.tsx

@@ -76,8 +76,8 @@ function TopAmenities({
         <div style={{ display: "flex", alignItems: "center" }}>
           <LottiePlayer
             animationData={getAnimationIcon("bombAnimation")}
-            width="16px"
-            height="16px"
+            width="20px"
+            height="20px"
           />
           <span
             className="flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20"
@@ -85,7 +85,15 @@ function TopAmenities({
           >
             <span className="bold-text">kuponazo 20%&nbsp;</span> | Termina
             en&nbsp;
-            <span className="bold-text" ref={startCountdown} />
+            <span
+              className="bold-text"
+              ref={startCountdown}
+              style={{
+                fontVariantNumeric: "tabular-nums",
+                display: "inline-block",
+                minWidth: "70px",
+              }}
+            />
             {/* <span className="bold-text">02:10:30</span> */}
           </span>
         </div>