kupos-ui-components-lib 9.10.10 → 9.11.0

package/dist/styles.css

@@ -1274,6 +1274,13 @@
     }
   }
 }
+.hover\:z-\[200\] {
+  &:hover {
+    @media (hover: hover) {
+      z-index: 200;
+    }
+  }
+}
 .hover\:z-\[500\] {
   &:hover {
     @media (hover: hover) {

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -86,7 +86,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
         ? selectedSlotService.original_price
         : originalPrice;
     const displaySavingsPercent = selectedSlotService && selectedSlotService.original_price
-        ? Math.round(((selectedSlotService.original_price - selectedSlotService.final_price) /
+        ? Math.round(((selectedSlotService.original_price -
+            selectedSlotService.final_price) /
             selectedSlotService.original_price) *
             100)
         : savingsPercent;
@@ -173,7 +174,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
                     React.createElement("span", { className: "bold-text" }, "Remate"),
                     "\u00A0t\u00E9rmina en \u00A0",
-                    React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, getCountdownSeconds()), style: {
+                    React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startDealCountdown(node, getCountdownSeconds()), style: {
                             fontVariantNumeric: "tabular-nums",
                             display: "inline-block",
                             color: "#FF5C60",
@@ -210,7 +211,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                             filter: "brightness(0) invert(1)",
                                         } })),
                                 isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
-                                    React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
+                                    React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)] hover:z-[200]", style: {
                                             zIndex: 20,
                                             backgroundColor: "#fff",
                                             borderRadius: "14px",
@@ -282,7 +283,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                         ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
                                             "/images/service-list/bus-icon.svg";
                                 }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
-                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center text-[white]" }, op.name),
+                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center text-[white] whitespace-nowrap " }, op.name),
                             React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
                                 React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
                             React.createElement("span", { className: "text-[10px] mt-[6px] text-[white]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),

package/dist/ui/SeatSection/SeatSection.js

@@ -58,6 +58,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+    console.log("🚀 ~ SeatSection ~ sortedSeatTypes:", sortedSeatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
@@ -116,13 +117,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     })();
     const renderLabels = () => {
         if (isPeru) {
+            const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+            const filteredSeats = seats.filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
+            const seatLabel = filteredSeats.length > 0
+                ? removeDuplicateSeats
+                    ? CommonService.truncateSeatLabel(filteredSeats[0].label)
+                    : filteredSeats[0].label
+                : null;
+            const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
+            const bottomLabel = operatorServiceName || "Desde";
             return (React.createElement(React.Fragment, null,
                 hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
                         color: "#999",
-                        // position: "relative",
-                        // bottom: numberOfSeats ? "10px" : "",
                     } }, "Antes")),
-                React.createElement("span", { className: "text-[13.33px]" }, "Desde")));
+                React.createElement("span", { className: "text-[13.33px] flex flex-col" }, operatorServiceName ? (React.createElement("span", { className: "text-[13.33px]" }, seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
         }
         return renderSeatNames();
     };

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -65,12 +65,20 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             return null;
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
+        const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
+        const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], 1);
+        const seatLabel = uniqueSeats.length > 0
+            ? commonService.truncateSeatLabel(uniqueSeats[0].label)
+            : null;
+        const bottomLabel = isMovilBus ? seatLabel || "Desde" : "Desde";
         return (React.createElement(React.Fragment, null,
             originalPrice !== discountedPrice && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
             React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus"
+                    ? seatLabel
+                    : "Desde"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {

package/dist/utils/CommonService.d.ts

@@ -27,6 +27,7 @@ declare const commonService: {
         interval?: number;
     }) => void;
     startCountdown: (node: HTMLSpanElement | null, countdownSeconds?: number) => void;
+    startDealCountdown: (node: HTMLSpanElement | null, countdownSeconds: number) => void;
     startComprandoCount: (node: HTMLSpanElement | null, min?: number, max?: number) => void;
     timeToMinutes: (time: string) => number;
     minutesToTime: (minutes: number) => string;

package/dist/utils/CommonService.js

@@ -348,6 +348,39 @@ const commonService = {
         }, 1000);
         node.dataset.countdownId = String(id);
     },
+    startDealCountdown: (node, countdownSeconds) => {
+        if (!node)
+            return;
+        if (node.dataset.dealTimerStarted)
+            return;
+        node.dataset.dealTimerStarted = "true";
+        const prevId = node.dataset.dealCountdownId;
+        if (prevId)
+            clearInterval(Number(prevId));
+        let remaining = Math.max(0, Math.floor(countdownSeconds));
+        const formatTime = (totalSeconds) => {
+            if (totalSeconds <= 0)
+                return "Expirado";
+            const h = Math.floor(totalSeconds / 3600);
+            const m = Math.floor((totalSeconds % 3600) / 60);
+            const s = totalSeconds % 60;
+            if (h > 0) {
+                return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+            }
+            return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+        };
+        node.textContent = formatTime(remaining);
+        if (remaining <= 0)
+            return;
+        const id = setInterval(() => {
+            remaining -= 1;
+            node.textContent = formatTime(remaining);
+            if (remaining <= 0) {
+                clearInterval(Number(node.dataset.dealCountdownId));
+            }
+        }, 1000);
+        node.dataset.dealCountdownId = String(id);
+    },
     startComprandoCount: (node, min = 4, max = 16) => {
         if (!node)
             return;

package/package.json

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

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -120,13 +120,15 @@ const FeatureServiceUi = ({
   const displayOriginalPrice = selectedSlotService
     ? selectedSlotService.original_price
     : originalPrice;
-  const displaySavingsPercent = selectedSlotService && selectedSlotService.original_price
-    ? Math.round(
-        ((selectedSlotService.original_price - selectedSlotService.final_price) /
-          selectedSlotService.original_price) *
-          100,
-      )
-    : savingsPercent;
+  const displaySavingsPercent =
+    selectedSlotService && selectedSlotService.original_price
+      ? Math.round(
+          ((selectedSlotService.original_price -
+            selectedSlotService.final_price) /
+            selectedSlotService.original_price) *
+            100,
+        )
+      : savingsPercent;
 
   // The label shown on the dropdown button
   const departureRange =
@@ -231,7 +233,7 @@ const FeatureServiceUi = ({
             <span
               className="bold-text text-end"
               ref={(node) =>
-                commonService.startCountdown(node, getCountdownSeconds())
+                commonService.startDealCountdown(node, getCountdownSeconds())
               }
               style={{
                 fontVariantNumeric: "tabular-nums",
@@ -326,7 +328,7 @@ const FeatureServiceUi = ({
                   {isThisTimeDropdownOpen && (
                     <>
                       <div
-                        className="absolute left-0 top-[calc(100%+10px)]"
+                        className="absolute left-0 top-[calc(100%+10px)] hover:z-[200]"
                         style={{
                           zIndex: 20,
                           backgroundColor: "#fff",
@@ -472,7 +474,7 @@ const FeatureServiceUi = ({
                         isSoldOut ? "grayscale" : ""
                       }`}
                     />
-                    <span className="text-[11px] truncate max-w-full text-center text-[white]">
+                    <span className="text-[11px] truncate max-w-full text-center text-[white] whitespace-nowrap ">
                       {op.name}
                     </span>
                     <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">

package/src/ui/SeatSection/SeatSection.tsx

@@ -107,6 +107,7 @@ function SeatSection({
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+  console.log("🚀 ~ SeatSection ~ sortedSeatTypes:", sortedSeatTypes);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -217,6 +218,21 @@ function SeatSection({
 
   const renderLabels = () => {
     if (isPeru) {
+      const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+      const filteredSeats = seats.filter(
+        (s) => !SEAT_EXCEPTIONS.includes(s.label),
+      );
+      const seatLabel =
+        filteredSeats.length > 0
+          ? removeDuplicateSeats
+            ? CommonService.truncateSeatLabel(filteredSeats[0].label)
+            : filteredSeats[0].label
+          : null;
+
+      const operatorServiceName =
+        serviceItem?.operator_service_name === "MovilBus";
+      const bottomLabel = operatorServiceName || "Desde";
+
       return (
         <>
           {hasDiscount && (
@@ -224,14 +240,19 @@ function SeatSection({
               className="text-[13.33px]"
               style={{
                 color: "#999",
-                // position: "relative",
-                // bottom: numberOfSeats ? "10px" : "",
               }}
             >
               Antes
             </span>
           )}
-          <span className="text-[13.33px]">Desde</span>
+
+          <span className="text-[13.33px] flex flex-col">
+            {operatorServiceName ? (
+              <span className="text-[13.33px]">{seatLabel}</span>
+            ) : (
+              <span className="text-[13.33px]">Desde</span>
+            )}
+          </span>
         </>
       );
     }
@@ -318,7 +339,7 @@ function SeatSection({
         <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
           <span
             className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
-            style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor||"#ff5964" }}
+            style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" }}
           >
             <div
               className="absolute"

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -152,6 +152,14 @@ function SeatSectionMobile({
     const { originalPrice, discountedPrice } =
       commonService.calculateDiscountedPrice(lowestFare, serviceItem);
 
+    const isMovilBus = serviceItem?.operator_service_name === "MovilBus";
+    const uniqueSeats = getUniqueSeats(seatTypesData ?? [], 1);
+    const seatLabel =
+      uniqueSeats.length > 0
+        ? commonService.truncateSeatLabel(uniqueSeats[0].label)
+        : null;
+    const bottomLabel = isMovilBus ? seatLabel || "Desde" : "Desde";
+
     return (
       <>
         {originalPrice !== discountedPrice && (
@@ -175,7 +183,9 @@ function SeatSectionMobile({
             className="min-[420]:text-[13px] text-[12px] bold-text"
             style={{ color: isSoldOut ? "#bbb" : "#464647" }}
           >
-            Desde
+            {serviceItem?.operator_service_name === "MovilBus"
+              ? seatLabel
+              : "Desde"}
           </span>
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"

package/src/utils/CommonService.ts

@@ -399,6 +399,45 @@ const commonService = {
     node.dataset.countdownId = String(id);
   },
 
+  startDealCountdown: (
+    node: HTMLSpanElement | null,
+    countdownSeconds: number,
+  ) => {
+    if (!node) return;
+    if (node.dataset.dealTimerStarted) return;
+    node.dataset.dealTimerStarted = "true";
+
+    const prevId = node.dataset.dealCountdownId;
+    if (prevId) clearInterval(Number(prevId));
+
+    let remaining = Math.max(0, Math.floor(countdownSeconds));
+
+    const formatTime = (totalSeconds: number) => {
+      if (totalSeconds <= 0) return "Expirado";
+      const h = Math.floor(totalSeconds / 3600);
+      const m = Math.floor((totalSeconds % 3600) / 60);
+      const s = totalSeconds % 60;
+      if (h > 0) {
+        return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+      }
+      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    if (remaining <= 0) return;
+
+    const id = setInterval(() => {
+      remaining -= 1;
+      node.textContent = formatTime(remaining);
+      if (remaining <= 0) {
+        clearInterval(Number(node.dataset.dealCountdownId));
+      }
+    }, 1000);
+
+    node.dataset.dealCountdownId = String(id);
+  },
+
   startComprandoCount: (
     node: HTMLSpanElement | null,
     min: number = 4,