kupos-ui-components-lib 10.4.36 → 10.4.38

package/dist/components/FilterBar/FilterBarDesktop.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { FilterBarProps } from "./tyoes";
-declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, }: FilterBarProps) => React.JSX.Element;
+declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }: FilterBarProps) => React.JSX.Element;
 export default FilterBarDesktop;

package/dist/components/FilterBar/FilterBarDesktop.js

@@ -2,21 +2,45 @@ import React from "react";
 import commonService from "../../utils/CommonService";
 import ServiceFilter from "./ServiceFilter";
 let cachedStageOptions = null;
-const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, }) => {
+const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }) => {
+    // Same rule as showTopLabel in ServiceItemDesktop: a visible bus terminal
+    // label, restricted to priority_stage_ids when that list is non-empty.
+    const getTopLabel = (labelId) => {
+        const stageValue = busTerminals === null || busTerminals === void 0 ? void 0 : busTerminals[labelId];
+        if (!stageValue)
+            return false;
+        const [label, visible] = stageValue.split("|");
+        if (visible !== "true" || !label)
+            return false;
+        if (priority_stage_ids && priority_stage_ids.length > 0) {
+            return priority_stage_ids.includes(labelId) ? label : false;
+        }
+        return label;
+    };
     const getEnrichedFilters = () => {
-        const hasSpecialDeparture = filtersArray.some((f) => { var _a; return f.type === "special_departure" && ((_a = f.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
-        if (hasSpecialDeparture)
+        if (!isAllinBus)
             return filtersArray;
-        if (isAllinBus && (allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length)) {
+        if (allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length) {
+            // Mirror what each service card shows: the top label if there is one,
+            // otherwise the boarding name.
             const stageMap = new Map();
             allSchedules.forEach((schedule) => {
                 var _a, _b, _c;
+                const labelId = typeof schedule.boarding_stages === "string"
+                    ? schedule.boarding_stages.split("|")[0]
+                    : "";
+                const topLabel = labelId && getTopLabel(labelId);
+                if (topLabel) {
+                    stageMap.set(labelId, topLabel);
+                    return;
+                }
                 if ((_a = schedule.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length) {
                     const stageObj = schedule.stage_details_arr[0];
                     const stageId = Object.keys(stageObj)[0];
                     const stageName = (_c = (_b = stageObj[stageId]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.split(", ")[0];
-                    if (stageId && stageName) {
-                        stageMap.set(stageId, stageName);
+                    const id = labelId || stageId;
+                    if (id && stageName) {
+                        stageMap.set(id, stageName);
                     }
                 }
             });
@@ -28,11 +52,31 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
                 }));
             }
         }
-        if (cachedStageOptions === null || cachedStageOptions === void 0 ? void 0 : cachedStageOptions.length) {
-            return filtersArray.map((f) => f.type === "special_departure"
-                ? Object.assign(Object.assign({}, f), { options: cachedStageOptions }) : f);
-        }
-        return filtersArray;
+        if (!(cachedStageOptions === null || cachedStageOptions === void 0 ? void 0 : cachedStageOptions.length))
+            return filtersArray;
+        // Replace the special departure options with the computed ones, keeping
+        // the active state of options already selected. Stays a no-op once the
+        // options match, so the setFiltersArray call below doesn't loop.
+        let changed = false;
+        const enriched = filtersArray.map((f) => {
+            if (f.type !== "special_departure")
+                return f;
+            const existing = f.options || [];
+            const isSame = existing.length === cachedStageOptions.length &&
+                cachedStageOptions.every((opt, i) => {
+                    var _a, _b;
+                    return String((_a = existing[i]) === null || _a === void 0 ? void 0 : _a.value) === opt.value &&
+                        ((_b = existing[i]) === null || _b === void 0 ? void 0 : _b.label) === opt.label;
+                });
+            if (isSame)
+                return f;
+            changed = true;
+            return Object.assign(Object.assign({}, f), { options: cachedStageOptions.map((opt) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, opt), { active: !!((_a = existing.find((o) => String(o.value) === opt.value)) === null || _a === void 0 ? void 0 : _a.active) }));
+                }) });
+        });
+        return changed ? enriched : filtersArray;
     };
     const enrichedFilters = getEnrichedFilters();
     if (enrichedFilters !== filtersArray) {

package/dist/components/FilterBar/tyoes.d.ts

@@ -36,4 +36,5 @@ export interface FilterBarProps {
     setCoachLoading?: any;
     setCoachKey?: any;
     isAllinBus?: boolean;
+    priority_stage_ids?: string[];
 }

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -305,7 +305,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
-    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
+    return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption, priority_stage_ids: priority_stage_ids })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
                 ? null

package/dist/ui/DiscountBanners/defaultBackgrounds.js

@@ -1,4 +1,4 @@
-import greenArt from "../../assets/images/discount/green.png";
+import greenArt from "../../assets/images/discount/instant.png";
 import yellowArt from "../../assets/images/discount/yellow.png";
 import blueArt from "../../assets/images/discount/blue.png";
 import lastMinuteArt from "../../assets/images/discount/last.png";
@@ -7,7 +7,6 @@ import cashbackArt from "../../assets/images/discount/cash.png";
 import roundTripArt from "../../assets/images/discount/round.png";
 import promoCodeArt from "../../assets/images/discount/promo.png";
 import seatLevelArt from "../../assets/images/discount/seat.png";
-import instantArt from "../../assets/images/discount/instant.png";
 export function toImageUrl(art) {
     if (typeof art === "string")
         return art;
@@ -34,5 +33,5 @@ export const CAMPAIGN_ART = {
     round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
     instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
     seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
-    promo_code: { image: toImageUrl(instantArt), accent: "#107E23" },
+    promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
 };

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -40,7 +40,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
             } },
             renderIcon("directo", "12px"),
             React.createElement("div", null, "Tren Express"))),
-        boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
+        boardingName && isAllinBus && !showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -40,7 +40,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
             } },
             renderIcon("directo", "12px"),
             React.createElement("div", null, "Tren Express"))),
-        boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
+        boardingName && isAllinBus && !showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"

package/package.json

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -28,22 +28,47 @@ const FilterBarDesktop = ({
   setCoachLoading,
   setCoachKey,
   isAllinBus,
+  priority_stage_ids,
 }: FilterBarProps) => {
+  // Same rule as showTopLabel in ServiceItemDesktop: a visible bus terminal
+  // label, restricted to priority_stage_ids when that list is non-empty.
+  const getTopLabel = (labelId: string) => {
+    const stageValue = busTerminals?.[labelId];
+    if (!stageValue) return false;
+    const [label, visible] = stageValue.split("|");
+    if (visible !== "true" || !label) return false;
+    if (priority_stage_ids && priority_stage_ids.length > 0) {
+      return priority_stage_ids.includes(labelId) ? label : false;
+    }
+    return label;
+  };
+
   const getEnrichedFilters = () => {
-    const hasSpecialDeparture = filtersArray.some(
-      (f: any) => f.type === "special_departure" && f.options?.length > 0,
-    );
-    if (hasSpecialDeparture) return filtersArray;
+    if (!isAllinBus) return filtersArray;
 
-    if (isAllinBus && allSchedules?.length) {
+    if (allSchedules?.length) {
+      // Mirror what each service card shows: the top label if there is one,
+      // otherwise the boarding name.
       const stageMap = new Map<string, string>();
       allSchedules.forEach((schedule: any) => {
+        const labelId =
+          typeof schedule.boarding_stages === "string"
+            ? schedule.boarding_stages.split("|")[0]
+            : "";
+
+        const topLabel = labelId && getTopLabel(labelId);
+        if (topLabel) {
+          stageMap.set(labelId, topLabel);
+          return;
+        }
+
         if (schedule.stage_details_arr?.length) {
           const stageObj = schedule.stage_details_arr[0];
           const stageId = Object.keys(stageObj)[0];
           const stageName = stageObj[stageId]?.[0]?.split(", ")[0];
-          if (stageId && stageName) {
-            stageMap.set(stageId, stageName);
+          const id = labelId || stageId;
+          if (id && stageName) {
+            stageMap.set(id, stageName);
           }
         }
       });
@@ -59,15 +84,35 @@ const FilterBarDesktop = ({
       }
     }
 
-    if (cachedStageOptions?.length) {
-      return filtersArray.map((f: any) =>
-        f.type === "special_departure"
-          ? { ...f, options: cachedStageOptions! }
-          : f,
-      );
-    }
+    if (!cachedStageOptions?.length) return filtersArray;
+
+    // Replace the special departure options with the computed ones, keeping
+    // the active state of options already selected. Stays a no-op once the
+    // options match, so the setFiltersArray call below doesn't loop.
+    let changed = false;
+    const enriched = filtersArray.map((f: any) => {
+      if (f.type !== "special_departure") return f;
+      const existing = f.options || [];
+      const isSame =
+        existing.length === cachedStageOptions!.length &&
+        cachedStageOptions!.every(
+          (opt, i) =>
+            String(existing[i]?.value) === opt.value &&
+            existing[i]?.label === opt.label,
+        );
+      if (isSame) return f;
+      changed = true;
+      return {
+        ...f,
+        options: cachedStageOptions!.map((opt) => ({
+          ...opt,
+          active: !!existing.find((o: any) => String(o.value) === opt.value)
+            ?.active,
+        })),
+      };
+    });
 
-    return filtersArray;
+    return changed ? enriched : filtersArray;
   };
 
   const enrichedFilters = getEnrichedFilters();

package/src/components/FilterBar/tyoes.ts

@@ -35,5 +35,6 @@ export interface FilterBarProps {
       setCoachLoading?: any;
       setCoachKey?: any;
       isAllinBus?: boolean;
-      
+      priority_stage_ids?: string[];
+
    }

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -520,6 +520,7 @@ function ServiceItemPB({
           isFlores={isFlores}
           isNewUiEnabled={isNewUiEnabledPeru}
           showLoginOption={showLoginOption}
+          priority_stage_ids={priority_stage_ids}
         />
       ) : isNewUi && !isTrain ? (
         <FeatureServiceUi

package/src/ui/DiscountBanners/defaultBackgrounds.ts

@@ -1,4 +1,4 @@
-import greenArt from "../../assets/images/discount/green.png";
+import greenArt from "../../assets/images/discount/instant.png";
 import yellowArt from "../../assets/images/discount/yellow.png";
 import blueArt from "../../assets/images/discount/blue.png";
 import lastMinuteArt from "../../assets/images/discount/last.png";
@@ -38,5 +38,5 @@ export const CAMPAIGN_ART: Record<string, { image: string; accent: string }> = {
   round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
   instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
   seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
-  promo_code: { image: toImageUrl(instantArt), accent: "#107E23" },
+  promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
 };

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -97,7 +97,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
           <div>{"Tren Express"}</div>
         </div>
       )}
-      {boardingName && isAllinBus && (
+      {boardingName && isAllinBus && !showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`}
           style={{

package/src/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -104,7 +104,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
           <div>{"Tren Express"}</div>
         </div>
       )}
-      {boardingName && isAllinBus && (
+      {boardingName && isAllinBus && !showTopLabel && (
         <div
           className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
           style={{