kupos-ui-components-lib 9.1.10 → 9.2.0

package/dist/components/FilterBar/FilterBarDesktop.js

@@ -1,42 +1,43 @@
 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 getEnrichedFilters = () => {
-        if (!isAllinBus || !(allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length))
-            return filtersArray;
         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)
             return filtersArray;
-        const stageMap = new Map();
-        allSchedules.forEach((schedule) => {
-            var _a, _b, _c;
-            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);
+        if (isAllinBus && (allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length)) {
+            const stageMap = new Map();
+            allSchedules.forEach((schedule) => {
+                var _a, _b, _c;
+                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);
+                    }
                 }
+            });
+            if (stageMap.size > 0) {
+                cachedStageOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
+                    label: name,
+                    value: id,
+                    active: false,
+                }));
             }
-        });
-        if (stageMap.size === 0)
-            return filtersArray;
-        const specialDeptOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
-            label: name,
-            value: id,
-            active: false,
-        }));
-        return [
-            ...filtersArray,
-            {
-                type: "special_departure",
-                title: "SPECIAL_DEPARTURE",
-                options: specialDeptOptions,
-            },
-        ];
+        }
+        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;
     };
     const enrichedFilters = getEnrichedFilters();
+    if (enrichedFilters !== filtersArray) {
+        setFiltersArray(enrichedFilters);
+    }
     const filterBy = (filters) => {
         try {
             let routes = allSchedules;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -283,7 +283,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 } },
                 React.createElement("div", { 
                     // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
-                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                    className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center", 
+                    // style={{ marginTop: showTopLabel ? "8px" : "" }}
+                    style: {
+                        marginTop: showTopLabel && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
+                    } },
                     React.createElement("div", { style: {
                             display: "flex",
                             flexDirection: "column",
@@ -322,7 +326,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 zIndex: -1,
             } },
             React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem }))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon }))),
         children,
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { 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: {
                 backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -229,6 +229,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru })))));
 }
 export default ServiceItemMobile;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -6,6 +6,9 @@ interface ExpandedDropdownProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
+    isPeru?: boolean;
+    translation?: Record<string, string>;
+    getAnimationIcon?: (iconName: string) => any;
 }
-declare function ExpandedDropdown({ serviceItem, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,6 @@
 import React from "react";
-function ExpandedDropdown({ serviceItem, }) {
+import LottiePlayer from "../../assets/LottiePlayer";
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -10,6 +11,10 @@ function ExpandedDropdown({ serviceItem, }) {
             // borderTop: "none",
         } },
         React.createElement("div", { className: "flex flex-col gap-[10px] text-[13px] text-[#464647]", style: { lineHeight: 1.6 } },
+            hasPetInfo && (React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
+                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
+                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
             React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
@@ -22,7 +27,7 @@ function ExpandedDropdown({ serviceItem, }) {
                         " horas antes"),
                     " ",
                     "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
-            React.createElement("div", { className: "flex gap-[8px]" },
+            isPeru ? null : (React.createElement("div", { className: "flex gap-[8px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
@@ -33,6 +38,6 @@ function ExpandedDropdown({ serviceItem, }) {
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
 }
 export default ExpandedDropdown;

package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts

@@ -6,6 +6,7 @@ interface ExpandedDropdownMobileProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
+    isPeru?: boolean;
 }
-declare function ExpandedDropdownMobile({ serviceItem, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdownMobile({ serviceItem, }) {
+function ExpandedDropdownMobile({ serviceItem, isPeru, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
@@ -17,7 +17,7 @@ function ExpandedDropdownMobile({ serviceItem, }) {
                         " horas antes"),
                     " ",
                     "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
-            React.createElement("div", { className: "flex gap-[6px]" },
+            isPeru ? null : (React.createElement("div", { className: "flex gap-[6px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
@@ -28,6 +28,6 @@ function ExpandedDropdownMobile({ serviceItem, }) {
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))))));
 }
 export default ExpandedDropdownMobile;

package/package.json

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -3,6 +3,8 @@ import { FilterBarProps } from "./tyoes";
 import commonService from "../../utils/CommonService";
 import ServiceFilter from "./ServiceFilter";
 
+let cachedStageOptions: any[] | null = null;
+
 const FilterBarDesktop = ({
   t,
   serviceList,
@@ -28,47 +30,52 @@ const FilterBarDesktop = ({
   isAllinBus,
 }: FilterBarProps) => {
   const getEnrichedFilters = () => {
-    if (!isAllinBus || !allSchedules?.length) return filtersArray;
-
     const hasSpecialDeparture = filtersArray.some(
       (f: any) => f.type === "special_departure" && f.options?.length > 0,
     );
     if (hasSpecialDeparture) return filtersArray;
 
-    const stageMap = new Map<string, string>();
-    allSchedules.forEach((schedule: any) => {
-      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);
+    if (isAllinBus && allSchedules?.length) {
+      const stageMap = new Map<string, string>();
+      allSchedules.forEach((schedule: any) => {
+        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);
+          }
         }
-      }
-    });
+      });
 
-    if (stageMap.size === 0) return filtersArray;
+      if (stageMap.size > 0) {
+        cachedStageOptions = Array.from(stageMap.entries()).map(
+          ([id, name]) => ({
+            label: name,
+            value: id,
+            active: false,
+          }),
+        );
+      }
+    }
 
-    const specialDeptOptions = Array.from(stageMap.entries()).map(
-      ([id, name]) => ({
-        label: name,
-        value: id,
-        active: false,
-      }),
-    );
+    if (cachedStageOptions?.length) {
+      return filtersArray.map((f: any) =>
+        f.type === "special_departure"
+          ? { ...f, options: cachedStageOptions! }
+          : f,
+      );
+    }
 
-    return [
-      ...filtersArray,
-      {
-        type: "special_departure",
-        title: "SPECIAL_DEPARTURE",
-        options: specialDeptOptions,
-      },
-    ];
+    return filtersArray;
   };
 
   const enrichedFilters = getEnrichedFilters();
 
+  if (enrichedFilters !== filtersArray) {
+    setFiltersArray(enrichedFilters);
+  }
+
   const filterBy = (filters) => {
     try {
       let routes = allSchedules;

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -496,6 +496,10 @@ function ServiceItemPB({
                 // className="grid text-[#464647] w-full [grid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
                 className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
                 // style={{ marginTop: showTopLabel ? "8px" : "" }}
+                style={{
+                  marginTop:
+                    showTopLabel && serviceItem?.is_direct_trip ? "8px" : "",
+                }}
               >
                 {/* OPERATOR LOGO */}
                 <div
@@ -631,7 +635,12 @@ function ServiceItemPB({
             <div
               style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
             >
-              <ExpandedDropdown serviceItem={serviceItem} />
+              <ExpandedDropdown
+                serviceItem={serviceItem}
+                isPeru={isPeru}
+                translation={translation}
+                getAnimationIcon={getAnimationIcon}
+              />
             </div>
           </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -497,7 +497,7 @@ function ServiceItemMobile({
             marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
           }}
         >
-          <ExpandedDropdownMobile serviceItem={serviceItem} />
+          <ExpandedDropdownMobile serviceItem={serviceItem} isPeru={isPeru} />
         </div>
       </div>
     </div>

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -8,10 +8,16 @@ interface ExpandedDropdownProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
+  isPeru?: boolean;
+  translation?: Record<string, string>;
+  getAnimationIcon?: (iconName: string) => any;
 }
 
 function ExpandedDropdown({
   serviceItem,
+  isPeru = false,
+  translation = {},
+  getAnimationIcon,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -71,6 +77,18 @@ function ExpandedDropdown({
         className="flex flex-col gap-[10px] text-[13px] text-[#464647]"
         style={{ lineHeight: 1.6 }}
       >
+        {hasPetInfo && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("petFriendlyAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.petFriendly}</span>
+            </div>
+          </div>
+        )}
         <div className="flex gap-[8px] text-[13.33px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>
@@ -83,18 +101,20 @@ function ExpandedDropdown({
             del 85% del monto de tu compra.
           </span>
         </div>
-        <div className="flex gap-[8px]">
-          <span style={{ marginTop: "2px" }}>•</span>
-          <span>
-            <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-            puede ser cambiado de manera online{" "}
-            <span className="bold-text">
-              hasta {serviceItem?.change_ticket_hours || 6} horas antes
-            </span>{" "}
-            de la salida del bus. El monto será reembolsado a tu billetera
-            kupospay.
-          </span>
-        </div>
+        {isPeru ? null : (
+          <div className="flex gap-[8px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -7,10 +7,12 @@ interface ExpandedDropdownMobileProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
+  isPeru?: boolean;
 }
 
 function ExpandedDropdownMobile({
   serviceItem,
+  isPeru,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -36,18 +38,20 @@ function ExpandedDropdownMobile({
             del 85% del monto de tu compra.
           </span>
         </div>
-        <div className="flex gap-[6px]">
-          <span style={{ marginTop: "2px" }}>•</span>
-          <span>
-            <span className="bold-text">Políticas de cambios:</span> Tu pasaje
-            puede ser cambiado de manera online{" "}
-            <span className="bold-text">
-              hasta {serviceItem?.change_ticket_hours || 6} horas antes
-            </span>{" "}
-            de la salida del bus. El monto será reembolsado a tu billetera
-            kupospay.
-          </span>
-        </div>
+        {isPeru ? null : (
+          <div className="flex gap-[6px]">
+            <span style={{ marginTop: "2px" }}>•</span>
+            <span>
+              <span className="bold-text">Políticas de cambios:</span> Tu pasaje
+              puede ser cambiado de manera online{" "}
+              <span className="bold-text">
+                hasta {serviceItem?.change_ticket_hours || 6} horas antes
+              </span>{" "}
+              de la salida del bus. El monto será reembolsado a tu billetera
+              kupospay.
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );