kupos-ui-components-lib 9.6.2 → 9.6.4

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

@@ -11,6 +11,8 @@ interface ExpandedDropdownMobileProps {
     petFriendlyAnim?: any;
     isSoldOut?: boolean;
     isChangeTicket?: boolean;
+    ladiesBookedSeats?: string;
+    isDpEnabled?: boolean;
 }
-declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, }: ExpandedDropdownMobileProps): React.ReactElement;
+declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownMobileProps): React.ReactElement;
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/ExpandedDropdownMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, }) {
+function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, }) {
     return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 14px 14px",
@@ -24,6 +24,13 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                     React.createElement("span", null,
                         React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                         " Esta empresa no permite cambios de pasajes")))),
+            ladiesBookedSeats &&
+                String(ladiesBookedSeats).trim() !== "" &&
+                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
+                    " Esta empresa cuenta con asientos recomendados para mujeres."))),
             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" },

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

@@ -15,6 +15,7 @@ interface SeatSectionMobileProps {
     serviceItem?: any;
     tooltipBgColor?: string;
     showLastSeats?: boolean;
+    discountSeatPriceColor?: string;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -42,7 +42,7 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
@@ -97,10 +97,6 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
                     ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "dp", className: "h-[14px] w-[14px] object-contain", style: { filter: isSoldOut ? "grayscale(1)" : "" } })) : null,
                     commonService.currency(discountedPrice, currencySign))),
-            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-center mt-[3px]", style: {
-                    color: tooltipBgColor,
-                } }, "\u00A1\u00DAltimos Asientos!")))) : null,
             isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
     };
@@ -129,17 +125,29 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     const discountSeat = isPeru && peruDiscountCalc
         ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
-    const discountValue = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
-        typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number"
-        ? Math.round(serviceItem.discount_value)
-        : null;
-    const originalDpPrice = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price)
-        ? serviceItem.original_dp_price[0]
-        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price) || {})[0];
-    const dpDiscountPercent = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)
-        ? serviceItem.dp_discount_percents[0]
-        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
-    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.fare;
+    const discountValue = (() => {
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
+            typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
+            return Math.round(serviceItem.discount_value);
+        }
+        if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "fixed" && discountSeat) {
+            const { originalPrice, discountedPrice } = discountSeat;
+            if (originalPrice > 0 && originalPrice !== discountedPrice) {
+                return Math.round(((originalPrice - discountedPrice) / originalPrice) * 100);
+            }
+        }
+        return null;
+    })();
+    const getMinValue = (data) => {
+        const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(Number);
+        if (!vals.length)
+            return undefined;
+        const min = Math.min(...vals);
+        return isFinite(min) ? min : undefined;
+    };
+    const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
+    const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
@@ -175,7 +183,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                     transformOrigin: "center",
                 } })),
         React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
-        React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
+        React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
+                color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
+            } },
             ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
@@ -207,7 +217,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                         transformOrigin: "center",
                     } })),
             React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
-            React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
+            React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
+                    color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
+                } },
                 ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
                 commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
             gap: isSoldOut ? "0px" : "5px",

package/dist/utils/CommonService.js

@@ -282,12 +282,14 @@ const commonService = {
             return { originalPrice: price, discountedPrice: price };
         }
         const { discount_type, discount_value, max_discount } = serviceItem;
+        const fixedDiscount = discount_type === "fixed" && discount_value != null ? discount_value : 0;
         const percentageDiscount = discount_type === "percentage" && discount_value != null
             ? (price * discount_value) / 100
             : 0;
+        const rawDiscount = fixedDiscount || percentageDiscount;
         const finalDiscount = max_discount != null && max_discount > 0
-            ? Math.min(percentageDiscount, max_discount)
-            : percentageDiscount;
+            ? Math.min(rawDiscount, max_discount)
+            : rawDiscount;
         const discountedPrice = Math.max(0, price - finalDiscount);
         return { originalPrice: price, discountedPrice };
     },

package/package.json

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

package/src/assets/images/anims/service_list/female_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":389.908,"w":378.169,"meta":{"g":"@lottiefiles/creator@1.90.1"},"layers":[{"ty":0,"nm":"Precomp Layer Main Scene_1","sr":1,"st":0,"op":180,"ip":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[189,195]},"s":{"a":0,"k":[104.157,104.157]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,236.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":378,"h":390,"refId":"precomp_Main Scene_jM9TeYrW1Y_3d99d97a-abbe-4c5f-99bc-d6c3a9ec0397_6ced1adb-81c6-4f2a-81fe-41ec223cce28","ind":1,"tp":2},{"ty":4,"nm":"Ellipse 2","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[106.977,106.977]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,194.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[348.546,348.546]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.937,0.937]},"r":1,"o":{"a":0,"k":100}}],"ind":2},{"ty":4,"nm":"Ellipse 1","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[106.977,106.977]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[189.084,194.954]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"el","nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[348.546,348.546]}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.937,0.937]},"r":1,"o":{"a":0,"k":100}}],"ind":3},{"ty":0,"nm":"Nested Scene 2","sr":1,"st":0,"op":0,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":378,"h":390,"refId":"precomp_newScene_pAg4ss2wXg_138db0d9-ba9c-43eb-990d-ed6033f0b644_471ef448-e667-4911-b181-2b927ec28255","ind":4}],"v":"5.7.0","fr":60,"op":180,"ip":0,"assets":[{"nm":"Nested Scene 1","id":"precomp_newScene_eEKvnUyRwM_1e5c472e-e670-4951-b2be-c78f3b3c23a8_936e2ff8-1715-4d83-ac9b-e003a62870fb","fr":60,"layers":[]},{"nm":"Nested Scene 2","id":"precomp_newScene_pAg4ss2wXg_138db0d9-ba9c-43eb-990d-ed6033f0b644_471ef448-e667-4911-b181-2b927ec28255","fr":60,"layers":[]},{"nm":"Main Scene_1","id":"precomp_Main Scene_jM9TeYrW1Y_3d99d97a-abbe-4c5f-99bc-d6c3a9ec0397_6ced1adb-81c6-4f2a-81fe-41ec223cce28","fr":60,"layers":[{"ty":3,"nm":"Main Stroke width - Color Ctrl","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[50,50,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ef":[{"ty":5,"nm":"Stroke width","en":1,"ef":[{"ty":0,"nm":"Slider","v":{"a":0,"k":16}}]},{"ty":5,"nm":"Highlight width","en":1,"ef":[{"ty":0,"nm":"Slider","v":{"a":0,"k":18}}]},{"ty":5,"nm":"Base Color","en":1,"ef":[{"ty":2,"nm":"Color","v":{"a":0,"k":[1,0.361,0.377]}}]},{"ty":5,"nm":"Highlight","en":1,"ef":[{"ty":2,"nm":"Color","v":{"a":0,"k":[1,0.361,0.377]}}]}],"ind":1,"parent":8},{"ty":4,"nm":"bubble","sr":1,"st":0,"op":10798.799,"ip":0,"hd":true,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[272.075,245.691,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[272.207,146.933],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[307.207,110.933],"t":57.018,"ti":[0,0,0],"to":[0,0,0]},{"s":[272.207,146.933],"t":123.158}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.489,"y":1},"s":[0],"t":6.842},{"o":{"x":0.494,"y":0},"i":{"x":0.519,"y":1},"s":[-16.557],"t":41.93},{"o":{"x":0.547,"y":0},"i":{"x":0.551,"y":1},"s":[8.915],"t":77.018},{"o":{"x":0.385,"y":0},"i":{"x":0.43,"y":1.633},"s":[-3.821],"t":103.334},{"s":[0],"t":130}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[44.97,0],[0,-44.97],[-12.308,-14.265],[0,0],[0,0],[-10.847,0],[0,44.969]],"o":[[-44.97,0],[0,20.319],[0,0],[0,0],[9.464,3.85],[44.97,0],[0,-44.97]],"v":[[0,-83.691],[-81.425,-2.266],[-61.672,50.898],[-68.116,83.691],[-30.66,73.182],[0,79.158],[81.425,-2.266]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,162.191]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[328.207,192.589],[351.944,192.589]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 3","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[340.075,169.05],[340.075,206.849]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 4","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,-15.567],[15.641,0],[0,15.567],[-15.641,0]],"o":[[0,15.567],[-15.641,0],[0,-15.567],[15.641,0]],"v":[[28.321,0],[0,28.187],[-28.321,0],[0,-28.187]]}}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":14},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,140.863]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[340.075,141.762]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[340.075,141.762]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.489,"y":1},"s":[0],"t":11},{"o":{"x":0.494,"y":0},"i":{"x":0.519,"y":1},"s":[-16.557],"t":46.088},{"o":{"x":0.547,"y":0},"i":{"x":0.551,"y":1},"s":[8.915],"t":81.176},{"o":{"x":0.385,"y":0},"i":{"x":0.43,"y":1.633},"s":[-3.821],"t":107.492},{"s":[0],"t":134.158}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"Head","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,297.865,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,200.095],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.189,"y":1},"s":[191.514,212.095],"t":30,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.651,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,194.095],"t":60,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,212.095],"t":90,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":114,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":138.42},{"s":[191.514,202.095],"t":155}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":4.838},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":34},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":64},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":94},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":118.193},{"s":[0],"t":142.58}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[4.662,4.662]],"o":[[-4.662,4.662],[0,0]],"v":[[8.441,-2.331],[-8.441,-2.331]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[2.38,1.849]],"o":[[-2.38,1.849],[0,0]],"v":[[4.308,-0.924],[-4.308,-0.924]]}],"t":60},{"s":[{"c":false,"i":[[0,0],[4.662,4.662]],"o":[[-4.662,4.662],[0,0]],"v":[[8.441,-2.331],[-8.441,-2.331]]}],"t":120}]}},{"ty":"st","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,260.977]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[2.157,16.6],[25.37,0],[0,0],[-27.113,0],[0,27.113]],"o":[[-17.187,0],[-15.163,17.991],[0,0],[0,27.113],[27.114,0],[0,0]],"v":[[49.092,-24.529],[14.136,-53.952],[-49.092,-24.529],[-49.092,4.859],[-0.001,53.952],[49.092,4.859]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,243.365]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3},{"ty":4,"nm":"Head 2","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[191.364,297.865,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,199.095],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.189,"y":1},"s":[191.514,212.095],"t":30,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.651,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,194.095],"t":60,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[191.514,212.095],"t":90,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":114,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[191.514,199.095],"t":138.42},{"s":[191.514,202.095],"t":155}]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":4.838},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":34},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":64},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":94},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":118.193},{"s":[0],"t":142.58}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[2.157,16.6],[25.37,0],[0,0],[-27.113,0],[0,27.113]],"o":[[-17.187,0],[-15.163,17.991],[0,0],[0,27.113],[27.114,0],[0,0]],"v":[[49.092,-24.529],[14.136,-53.952],[-49.092,-24.529],[-49.092,4.859],[-0.001,53.952],[49.092,4.859]]}}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,243.365]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":4},{"ty":4,"nm":"Body","sr":1,"st":0,"op":10798.799,"ip":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,352.25,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,257.295]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[-12.718,0],[0,12.719],[0,0]],"o":[[0,0],[0,12.719],[12.719,0],[0,0],[0,0]],"v":[[-23.029,-26.591],[-23.029,3.561],[-0.001,26.591],[23.029,3.561],[23.029,-26.591]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,309.591]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-113.136,75.974],[114.717,76.586],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,369.345]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":5,"tp":4},{"ty":4,"nm":"Mask","sr":1,"st":0,"op":10798.799,"ip":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[250.066,250.098,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250.066,154.143]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Body 2","it":[{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.652,-46.38],[-112.728,-8.328],[-112.864,52.155],[112.864,52.155],[113,-8.328],[82.925,-46.38],[22.669,-52.154]]}],"t":30},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":60},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.652,-46.38],[-112.728,-8.328],[-112.864,52.155],[112.864,52.155],[113,-8.328],[82.925,-46.38],[22.669,-52.154]]}],"t":90},{"s":[{"c":false,"i":[[0,0],[0,0],[0,-18.119],[0,0],[0,0],[0,0],[17.629,4.186],[0,0]],"o":[[0,0],[-17.63,4.186],[0,0],[0,0],[0,0],[0,-18.119],[0,0],[0,0]],"v":[[-22.669,-52.154],[-82.788,-37.88],[-112.864,0.172],[-112.864,52.155],[112.864,52.155],[112.864,0.172],[82.789,-37.88],[22.669,-52.154]]}],"t":120}]}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,369.345]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[191.364,352.25]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,352.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":6},{"ty":4,"nm":"Hair","sr":1,"st":0,"op":10798.799,"ip":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.364,175.258,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,179.258]},"r":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.475,"y":1},"s":[0],"t":16},{"o":{"x":0.426,"y":0},"i":{"x":0.339,"y":1},"s":[-8],"t":45.162},{"o":{"x":0.582,"y":0},"i":{"x":0.525,"y":1},"s":[5],"t":75.162},{"o":{"x":0.603,"y":0},"i":{"x":0.601,"y":1},"s":[-5],"t":105.162},{"o":{"x":0.422,"y":0},"i":{"x":0.681,"y":1.31},"s":[3],"t":129.355},{"s":[0],"t":153.742}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[60.022,27.729],[0,13.706],[-3.82,6.033],[0,0],[0,20.738],[-47.742,0],[0,-47.741],[-11.095,-17.52],[0,0],[0,-7.141],[10.939,-6.599]],"o":[[-10.939,-6.599],[0,-7.141],[0,0],[11.095,-17.52],[0,-47.741],[47.741,0],[0,20.738],[0,0],[3.821,6.033],[0,13.706],[-60.022,27.729]],"v":[[-94.604,87.706],[-112.864,55.413],[-107.015,35.244],[-103.428,29.579],[-86.443,-28.992],[0.001,-115.436],[86.444,-28.992],[103.428,29.579],[107.016,35.244],[112.865,55.413],[94.604,87.706]]}}},{"ty":"st","nm":"Stroke 1","lc":1,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":11},"c":{"a":0,"k":[1,0.361,0.377]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[191.364,248.725]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":7,"parent":3,"tp":6},{"ty":3,"nm":"Zero | troke width - Color Ctrl","sr":1,"st":0,"op":180,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,151.045]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ind":8}]}]}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -26,6 +26,7 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
+import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -76,6 +77,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   starAnimation: {
     kupos: starAnimation,
   },
+  femaaleAnimation: {
+    kupos: femaleAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -111,6 +115,7 @@ function ServiceItemPB({
   viewersConfig,
   showLoginModal,
   isLoggedIn,
+  showLoginOption
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -430,6 +435,7 @@ function ServiceItemPB({
               showLoginModal={showLoginModal}
               viewersConfig={viewersConfig}
               getAnimationIcon={getAnimationIcon}
+              showLoginOption={showLoginOption}
             />
           )}
           <div
@@ -518,6 +524,7 @@ function ServiceItemPB({
                     removeDuplicateSeats={removeDuplicateSeats}
                     isPeru={isPeru}
                     renderIcon={renderIcon}
+                    discountSeatPriceColor={colors.discountSeatPriceColor}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -247,6 +247,7 @@ function ServiceItemMobile({
             removeDuplicateSeats={removeDuplicateSeats}
             serviceItem={serviceItem}
             showLastSeats={showLastSeats}
+            discountSeatPriceColor={colors.discountSeatPriceColor}
           />
 
           {hasDiscount && (
@@ -269,7 +270,7 @@ function ServiceItemMobile({
                       color: colors.tooltipBgColor,
                     }}
                   >
-                    ¡ Últimos Asientos!
+                    ¡Últimos Asientos!
                   </div>
                 )}
             </div>
@@ -302,6 +303,9 @@ function ServiceItemMobile({
               setIsExpanded(isItemExpanded ? null : serviceItem.id);
             }}
             isPeru={isPeru}
+            femaleAnim={serviceItem.icons.femaleAnim}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
           />
         </div>
 
@@ -332,7 +336,10 @@ function ServiceItemMobile({
               style={{ lineHeight: 1.6 }}
             >
               <div className="flex justify-between items-center">
-                {serviceItem?.is_dp_enabled ? (
+                {serviceItem?.is_dp_enabled &&
+                Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
+                  0 &&
+                (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
                   <div className="flex items-center gap-[6px]">
                     {/* {renderIcon("whiteFireIcon", "14px")} */}
                     <LottiePlayer
@@ -414,77 +421,8 @@ function ServiceItemMobile({
                       </span>
                     </span>
                   </div>
-                  {/* <div className="flex items-center">
-                  <span className="whitespace-nowrap">
-                    {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
-                    <span
-                      className="bold-text"
-                      ref={(node) =>
-                        commonService.startComprandoCount(node, 4, 16)
-                      }
-                      style={{ fontVariantNumeric: "tabular-nums" }}
-                    />{" "}
-                    comprando
-                  </span>
-                </div> */}
                 </div>
               </div>
-              {/* <div className="flex flex-col gap-[4px]">
-              <div
-                className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
-              >
-                <div className={isLongOfferText ? "mt-[2px]" : ""}>
-                  <LottiePlayer
-                    animationData={serviceItem.icons.bombAnim}
-                    width="12px"
-                    height="12px"
-                  />
-                </div>
-                <div
-                  className={`ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                  style={{
-                    color: "#fff",
-                    lineHeight: 1.4,
-                  }}
-                >
-                  <span className="min-[380px]:text-[12px] bold-text">
-                    {serviceItem?.offer_text || ""}
-                  </span>{" "}
-                  <span className="min-[380px]:text-[12px]">|</span>{" "}
-                  <span className="whitespace-nowrap min-[380px]:text-[12px]">
-                    Termina en&nbsp;
-                    <span
-                      className="bold-text"
-                      ref={(node) => commonService.startCountdown(node, 599)}
-                      style={{
-                        fontVariantNumeric: "tabular-nums",
-                        display: "inline-block",
-                      }}
-                    />
-                  </span>
-                </div>
-              </div>
-              <div
-                className="flex items-start"
-                style={{
-                  color: "#fff",
-                }}
-              >
-                <div>{renderIcon("personIcon", "16px")}</div>
-                <span className="flex-1" style={{ lineHeight: 1.4 }}>
-                  <span
-                    className="bold-text"
-                    ref={(node) => commonService.startViewerCount(node, viewersConfig)}
-                    style={{ fontVariantNumeric: "tabular-nums" }}
-                  />{" "}
-                  <span className="bold-text">personas</span>{" "}
-                  <span>
-                    {" "}
-                    {viewersConfig.label || " están viendo este viaje"}
-                  </span>
-                </span>
-              </div>
-            </div> */}
             </div>
           </div>
         )}
@@ -516,6 +454,8 @@ function ServiceItemMobile({
             petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
             isSoldOut={isSoldOut}
             isChangeTicket={serviceItem.is_change_ticket === true}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
           />
         </div>
       </div>

package/src/components/ServiceItem/mobileTypes.ts

@@ -37,11 +37,14 @@ export interface MobileServiceItemProps {
     change_ticket_hours?: number;
     duration?: number;
     train_type_label?: string;
+    ladies_booked_seats?: string;
     is_dp_enabled?: boolean;
     offer_text?: string;
     is_direct_trip?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
+    dp_discount_percents?: Record<string, number>;
+    dp_discounted_seats?: string[];
     dep_validation_text?: string;
     metaData?: {};
     is_tracking_enabled?: boolean;
@@ -123,6 +126,7 @@ export interface MobileServiceItemProps {
       fireIcon?: string;
       directoIcon?: string;
       whiteFireIcon?: string
+      femaleAnim?:string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -171,6 +175,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
+    discountSeatPriceColor?: string
   };
   isCiva?: boolean;
   currencySign?: string;

package/src/components/ServiceItem/types.ts

@@ -41,15 +41,16 @@ export interface ServiceItemProps {
     offer_text?: string;
     is_direct_trip?: boolean;
     is_dp_enabled?: boolean;
-    dp_discount_percents?: Record<string, number | string> | Array<number | string>;
-    dp_discounted_seats?: Array<string | number>;
-    original_dp_price?: Record<string, number | string> | Array<number | string>;
+    dp_discount_percents?: any;
+    dp_discounted_seats?: any;
+    original_dp_price?: any;
     discount_type?: string;
     discount_value?: number;
     max_discount?: number;
     is_transpordo?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
+    ladies_booked_seats?: string;
     dep_validation_text?: string;
     metaData?: {};
     is_tracking_enabled?: boolean;
@@ -129,6 +130,7 @@ export interface ServiceItemProps {
       downArrow?:string
       personIcon?: string
       whiteFireIcon?: string
+      fireIcon?: string
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -159,6 +161,7 @@ export interface ServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
+    discountSeatPriceColor?: string
   };
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
@@ -222,5 +225,6 @@ export interface ServiceItemProps {
   };
   showLoginModal?: any
   isLoggedIn?: any
+  showLoginOption?: boolean
   
 }

package/src/types.ts

@@ -57,6 +57,7 @@ export interface ServiceItemProps {
     is_direct_trip?: boolean;
     is_transpordo?: boolean;
     is_train_type?: boolean;
+    ladies_booked_seats?: any
     operator_service_name?: string;
     dep_validation_text?: string;
     metaData?: {};

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
+import FemaleBlock from "../FemaleBlock";
 
 interface ItemEntry {
   key: string;
@@ -15,6 +16,8 @@ interface BottomAmenitiesProps {
     is_tracking_enabled?: boolean;
     is_change_ticket?: boolean;
     pet_seat_info?: Record<string, any>;
+    ladies_booked_seats?: any;
+    is_dp_enabled?: boolean;
   };
   grayscaleClass: string;
   isSoldOut: boolean;
@@ -86,6 +89,17 @@ function BottomAmenities({
             isSoldOut={isSoldOut}
           />
         )}
+        {serviceItem.ladies_booked_seats &&
+          String(serviceItem.ladies_booked_seats).trim() !== "" &&
+          serviceItem?.is_dp_enabled === true && (
+            <FemaleBlock
+              translation={translation}
+              getAnimationIcon={getAnimationIcon}
+              colors={colors}
+              serviceItem={serviceItem}
+              isSoldOut={isSoldOut}
+            />
+          )}
         {hasPetInfo && (
           <PetBlock
             translation={translation}

package/src/ui/FemaleBlock.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+
+const FemaleBlock = ({
+  translation,
+  getAnimationIcon,
+  colors,
+  serviceItem,
+  isSoldOut,
+}) => (
+  <div className="flex items-center">
+    <div className="relative group cursor-pointer">
+      <div className="flex items-center">
+        <div className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}>
+          <LottiePlayer
+            // animationData={serviceItem.icons.flexibleAnim}
+            animationData={getAnimationIcon("femaaleAnimation")}
+            width="20px"
+            height="20px"
+          />
+        </div>
+        {/* <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
+          <span>{translation?.flexible}</span>
+        </div> */}
+      </div>
+      <div
+        className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
+        style={{
+          backgroundColor: colors.bottomStripColor,
+          lineHeight: "1.5",
+          zIndex: "1000",
+        }}
+      >
+        {/* Tooltip arrow */}
+        <div
+          className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
+          style={{ borderBottomColor: colors.bottomStripColor }}
+        ></div>
+        Esta empresa cuenta con asientos recomendados para mujeres.
+      </div>
+    </div>
+  </div>
+);
+
+export default FemaleBlock;

package/src/ui/OfferBanner.tsx

@@ -8,13 +8,17 @@ interface OfferBannerProps {
   isSoldOut: boolean;
   serviceItem: Pick<
     ServiceItemProps["serviceItem"],
-    "is_dp_enabled" | "offer_text"
+    | "is_dp_enabled"
+    | "offer_text"
+    | "dp_discount_percents"
+    | "dp_discounted_seats"
   >;
   renderIcon: (name: string, size: string) => React.ReactNode;
   isLoggedIn: any;
   showLoginModal: any;
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
+  showLoginOption?: boolean
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -26,6 +30,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   showLoginModal,
   viewersConfig,
   getAnimationIcon,
+  showLoginOption
 }) => {
   return (
     <div
@@ -38,7 +43,9 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
     >
       <div className="flex  justify-between items-center w-full">
         <div className="flex items-center ">
-          {serviceItem?.is_dp_enabled ? (
+          {serviceItem?.is_dp_enabled &&
+          Object.keys(serviceItem?.dp_discount_percents ?? {}).length === 0 &&
+          (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
             <div className="flex items-center gap-[5px]">
               {/* {renderIcon("whiteFireIcon", "14px")} */}
               <LottiePlayer
@@ -57,18 +64,24 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                 height="18px"
               />
               <div className="flex items-center mt-[2px]">
-                <span className="bold-text ml-[6px]">
+                <span
+                  className="bold-text"
+                  style={{
+                    marginLeft: serviceItem?.offer_text ? "6px" : "3px",
+                  }}
+                >
                   {(serviceItem?.offer_text || "").length > 30
                     ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
                     : serviceItem?.offer_text || ""}{" "}
-                  {isLoggedIn ? null : (
+                  {isLoggedIn && showLoginOption ? null : (
                     <span onClick={showLoginModal} className="cursor-pointer">
                       - registro
                     </span>
                   )}{" "}
                   &nbsp;
                 </span>{" "}
-                | Termina en&nbsp;
+                {serviceItem?.offer_text ? "|" : ""}
+                Termina en&nbsp;
                 <span
                   className="bold-text text-end"
                   ref={(node) => CommonService.startCountdown(node, 599)}
@@ -102,7 +115,12 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
               {" "}
               {viewersConfig?.label || " viendo"} |{" "}
               <span className="">
-                {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
+                {serviceItem?.is_dp_enabled &&
+                Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
+                  0 &&
+                (serviceItem?.dp_discounted_seats ?? []).length === 0
+                  ? null
+                  : "Quedan pocos • "}
                 <span
                   className="bold-text"
                   ref={(node) => CommonService.startComprandoCount(node, 4, 16)}