kupos-ui-components-lib 10.4.37 → 10.4.39

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/PaymentCardMobile/PaymentCardMobile.js

@@ -419,7 +419,7 @@ export const PaymentCardMobile = (props) => {
                                 React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_g = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _g !== void 0 ? _g : 0, currencySign)))) : null,
                             ((_h = props.serviceFeeDataStateValue) === null || _h === void 0 ? void 0 : _h.total_convenience_fee_amount) && (React.createElement("div", { style: S.sectionRow },
                                 React.createElement("span", { style: { flex: 1 } }, "Cargo por servicio"),
-                                React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(props.serviceFeeDataStateValue
+                                React.createElement("span", { style: S.sectionRowValue }, CommonService.currency(props.serviceFeeDataStateValue
                                     .total_convenience_fee_amount, currencySign)))),
                             (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
                                 React.createElement("div", { style: S.sectionRow },
@@ -476,8 +476,7 @@ export const PaymentCardMobile = (props) => {
                             virtualMoney ? (React.createElement("div", { style: S.sectionRow },
                                 React.createElement("span", { style: { flex: 1 } },
                                     React.createElement("span", { style: { color: "var(--secondary-color)" } }, `${creditosLabel}(${virtualLimit}%)`)),
-                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: "var(--secondary-color)" }), className: "bold-text" }, CommonService.currency(((virtualLimit !== null && virtualLimit !== void 0 ? virtualLimit : 0) / 100) *
-                                    Number(virtualMoney !== null && virtualMoney !== void 0 ? virtualMoney : 0), currencySign)))) : null,
+                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: "var(--secondary-color)" }), className: "bold-text" }, CommonService.currency(virtualMoney, currencySign)))) : null,
                             React.createElement("div", { style: {
                                     borderTop: "1.5px dashed #464647",
                                     margin: "14px 0",
@@ -495,10 +494,17 @@ export const PaymentCardMobile = (props) => {
                                     currency ? currency : "",
                                     " ",
                                     CommonService.currency(isPeru
-                                        ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) / 100
+                                        ? Math.round(Math.max(0, ((removeDiscountAtomValue
+                                            ? 0
+                                            : (netFare !== null && netFare !== void 0 ? netFare : 0)) -
+                                            (walletMoney !== null && walletMoney !== void 0 ? walletMoney : 0) -
+                                            (virtualMoney !== null && virtualMoney !== void 0 ? virtualMoney : 0)) *
+                                            100)) / 100
                                         : removeDiscountAtomValue
                                             ? 0
-                                            : netFare, currencySign))))));
+                                            : Math.max(0, (netFare !== null && netFare !== void 0 ? netFare : 0) -
+                                                (walletMoney !== null && walletMoney !== void 0 ? walletMoney : 0) -
+                                                (virtualMoney !== null && virtualMoney !== void 0 ? virtualMoney : 0)), currencySign))))));
                 } }),
             React.createElement("div", { style: {
                     display: "flex",

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.37",
+  "version": "10.4.39",
   "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/PaymentSideBar/PaymentSideBarMobile.tsx

@@ -712,7 +712,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = (props) => {
                     }
                     amount={CommonService.currency(
                       ((virtualLimit ?? 0) / 100) * Number(virtualMoney ?? 0),
-                      currencySign
+                      currencySign,
                     )}
                     customStyle={{ color: "var(--secondary-color)" }}
                     className="text-[14px]"

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/PaymentCardMobile/PaymentCardMobile.tsx

@@ -777,7 +777,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                     ?.total_convenience_fee_amount && (
                     <div style={S.sectionRow}>
                       <span style={{ flex: 1 }}>Cargo por servicio</span>
-                      <span style={S.sectionRowValue} className="bold-text">
+                      <span style={S.sectionRowValue}>
                         {CommonService.currency(
                           props.serviceFeeDataStateValue
                             .total_convenience_fee_amount,
@@ -934,11 +934,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                         }}
                         className="bold-text"
                       >
-                        {CommonService.currency(
-                          ((virtualLimit ?? 0) / 100) *
-                            Number(virtualMoney ?? 0),
-                          currencySign,
-                        )}
+                        {CommonService.currency(virtualMoney, currencySign)}
                       </span>
                     </div>
                   ) : null}
@@ -968,11 +964,24 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
                       {CommonService.currency(
                         isPeru
                           ? Math.round(
-                              (removeDiscountAtomValue ? 0 : netFare) * 100,
+                              Math.max(
+                                0,
+                                ((removeDiscountAtomValue
+                                  ? 0
+                                  : (netFare ?? 0)) -
+                                  (walletMoney ?? 0) -
+                                  (virtualMoney ?? 0)) *
+                                  100,
+                              ),
                             ) / 100
                           : removeDiscountAtomValue
                             ? 0
-                            : netFare,
+                            : Math.max(
+                                0,
+                                (netFare ?? 0) -
+                                  (walletMoney ?? 0) -
+                                  (virtualMoney ?? 0),
+                              ),
                         currencySign,
                       )}
                     </span>

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={{