npm - kupos-ui-components-lib - Versions diffs - 9.1.10 → 9.2.1 - Mend

kupos-ui-components-lib 9.1.10 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/components/FilterBar/FilterBarDesktop.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -138,7 +138,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                     React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
                                     React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
                                 React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
-                                    React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : null),
+                                    React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null),
                     showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
                 React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
@@ -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, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut })))));
 }
 export default ServiceItemMobile;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -6,6 +6,10 @@ interface ExpandedDropdownMobileProps {
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;
     };
+    isPeru?: boolean;
+    petSeatInfo?: Record<string, any>;
+    petFriendlyAnim?: any;
+    isSoldOut?: boolean;
 }
-declare function ExpandedDropdownMobile({ serviceItem, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js CHANGED Viewed

@@ -1,10 +1,22 @@
 import React from "react";
-function ExpandedDropdownMobile({ serviceItem, }) {
+import LottiePlayer from "../../assets/LottiePlayer";
+function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
         } },
         React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
+            petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
+                React.createElement("div", { className: `relative group cursor-default ` },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: `flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                            React.createElement("div", null,
+                                React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })),
+                            React.createElement("div", null,
+                                React.createElement("span", null, "Servicio Pet friendly"),
+                                React.createElement("span", null,
+                                    " ",
+                                    "Asientos designados Pet friendly, lo que significa que puede viajar con su mascota a bordo."))))))) : null,
             React.createElement("div", { className: "flex gap-[6px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
@@ -17,7 +29,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 +40,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 CHANGED Viewed

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

package/src/components/FilterBar/FilterBarDesktop.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -253,7 +253,7 @@ function ServiceItemMobile({
                       className="flex items-center cursor-pointer "
                       style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
                     >
-                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis">
+                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
                         {serviceItem.operator_details[2]}
                       </span>
                     </div>
@@ -497,7 +497,13 @@ function ServiceItemMobile({
             marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
           }}
         >
-          <ExpandedDropdownMobile serviceItem={serviceItem} />
+          <ExpandedDropdownMobile
+            serviceItem={serviceItem}
+            isPeru={isPeru}
+            petSeatInfo={serviceItem.pet_seat_info}
+            petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
+            isSoldOut={isSoldOut}
+          />
         </div>
       </div>
     </div>

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,5 @@
 import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
 interface ExpandedDropdownMobileProps {
   serviceItem: {
@@ -7,10 +8,18 @@ interface ExpandedDropdownMobileProps {
     is_change_ticket?: boolean;
     is_tracking_enabled?: boolean;
   };
+  isPeru?: boolean;
+  petSeatInfo?: Record<string, any>;
+  petFriendlyAnim?: any;
+  isSoldOut?: boolean;
 }
 function ExpandedDropdownMobile({
   serviceItem,
+  isPeru,
+  petSeatInfo,
+  petFriendlyAnim,
+  isSoldOut,
 }: ExpandedDropdownMobileProps): React.ReactElement {
   return (
     <div
@@ -24,6 +33,33 @@ function ExpandedDropdownMobile({
         className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
         style={{ lineHeight: 1.6 }}
       >
+        {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
+          <div className="flex items-center">
+            <div className={`relative group cursor-default `}>
+              <div className="flex items-center">
+                <div
+                  className={`flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
+                >
+                  <div>
+                    <LottiePlayer
+                      animationData={petFriendlyAnim}
+                      width="16px"
+                      height="16px"
+                    />
+                  </div>
+                  <div>
+                    <span>Servicio Pet friendly</span>
+                    <span>
+                      {" "}
+                      Asientos designados Pet friendly, lo que significa que
+                      puede viajar con su mascota a bordo.
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
         <div className="flex gap-[6px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>
@@ -36,18 +72,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>
   );