kupos-ui-components-lib 9.6.10 → 9.7.1

package/dist/styles.css

@@ -63,6 +63,9 @@
 .right-\[0px\] {
   right: 0px;
 }
+.right-\[18px\] {
+  right: 18px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -75,6 +78,9 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
+.bottom-\[11px\] {
+  bottom: 11px;
+}
 .bottom-\[35px\] {
   bottom: 35px;
 }
@@ -171,6 +177,9 @@
 .mx-auto {
   margin-inline: auto;
 }
+.my-\[14px\] {
+  margin-block: 14px;
+}
 .-mt-\[15px\] {
   margin-top: calc(15px * -1);
 }
@@ -189,12 +198,21 @@
 .mt-\[5px\] {
   margin-top: 5px;
 }
+.mt-\[6px\] {
+  margin-top: 6px;
+}
+.mt-\[8px\] {
+  margin-top: 8px;
+}
 .mt-\[10px\] {
   margin-top: 10px;
 }
 .mt-\[13px\] {
   margin-top: 13px;
 }
+.mt-\[14px\] {
+  margin-top: 14px;
+}
 .mt-\[15px\] {
   margin-top: 15px;
 }
@@ -279,6 +297,9 @@
 .ml-\[10px\] {
   margin-left: 10px;
 }
+.ml-\[12px\] {
+  margin-left: 12px;
+}
 .ml-\[50px\] {
   margin-left: 50px;
 }
@@ -336,6 +357,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[34px\] {
+  height: 34px;
+}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -372,6 +396,12 @@
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[30px\] {
+  width: 30px;
+}
+.w-\[34px\] {
+  width: 34px;
+}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -396,6 +426,12 @@
 .w-\[115px\] {
   width: 115px;
 }
+.w-\[120px\] {
+  width: 120px;
+}
+.w-\[130px\] {
+  width: 130px;
+}
 .w-\[150px\] {
   width: 150px;
 }
@@ -434,6 +470,12 @@
 .max-w-\[165px\] {
   max-width: 165px;
 }
+.max-w-\[220px\] {
+  max-width: 220px;
+}
+.max-w-full {
+  max-width: 100%;
+}
 .min-w-\[75px\] {
   min-width: 75px;
 }
@@ -464,6 +506,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -476,12 +521,21 @@
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
 .grid-cols-\[1\.5fr_1fr_auto\] {
   grid-template-columns: 1.5fr 1fr auto;
 }
+.grid-cols-\[23\%_50\%_27\%\] {
+  grid-template-columns: 23% 50% 27%;
+}
 .grid-cols-\[26px_auto_26\%_1fr\] {
   grid-template-columns: 26px auto 26% 1fr;
 }
@@ -509,6 +563,9 @@
 .items-start {
   align-items: flex-start;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -551,6 +608,12 @@
 .gap-\[14px\] {
   gap: 14px;
 }
+.gap-\[16px\] {
+  gap: 16px;
+}
+.gap-\[20px\] {
+  gap: 20px;
+}
 .gap-x-\[2\%\] {
   -moz-column-gap: 2%;
        column-gap: 2%;
@@ -559,12 +622,20 @@
   -moz-column-gap: 8px;
        column-gap: 8px;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -577,6 +648,9 @@
 .rounded-\[15px\] {
   border-radius: 15px;
 }
+.rounded-\[16px\] {
+  border-radius: 16px;
+}
 .rounded-\[18px\] {
   border-radius: 18px;
 }
@@ -620,6 +694,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 8px;
 }
+.border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .border-r-8 {
   border-right-style: var(--tw-border-style);
   border-right-width: 8px;
@@ -648,6 +726,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 8px;
 }
+.border-l {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
 .border-l-8 {
   border-left-style: var(--tw-border-style);
   border-left-width: 8px;
@@ -664,6 +746,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\[\#363c48\] {
+  border-color: #363c48;
+}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -682,9 +767,21 @@
 .border-l-transparent {
   border-left-color: transparent;
 }
+.bg-\[\#0C1421\] {
+  background-color: #0C1421;
+}
+.bg-\[\#2d374d\] {
+  background-color: #2d374d;
+}
+.bg-\[\#222b3d\] {
+  background-color: #222b3d;
+}
 .bg-\[\#E6E6E6\] {
   background-color: #E6E6E6;
 }
+.bg-\[\#FF8F45\] {
+  background-color: #FF8F45;
+}
 .bg-\[\#FFF2F2\] {
   background-color: #FFF2F2;
 }
@@ -725,6 +822,9 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
+.p-\[14px\] {
+  padding: 14px;
+}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -758,9 +858,18 @@
 .px-\[15px\] {
   padding-inline: 15px;
 }
+.px-\[16px\] {
+  padding-inline: 16px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
+.px-\[22px\] {
+  padding-inline: 22px;
+}
+.py-\[2px\] {
+  padding-block: 2px;
+}
 .py-\[4px\] {
   padding-block: 4px;
 }
@@ -785,6 +894,12 @@
 .pt-\[6px\] {
   padding-top: 6px;
 }
+.pt-\[10px\] {
+  padding-top: 10px;
+}
+.pt-\[14px\] {
+  padding-top: 14px;
+}
 .pt-\[20px\] {
   padding-top: 20px;
 }
@@ -800,6 +915,9 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[10px\] {
+  padding-right: 10px;
+}
 .pr-\[15px\] {
   padding-right: 15px;
 }
@@ -809,6 +927,9 @@
 .pr-\[22px\] {
   padding-right: 22px;
 }
+.pb-\[6px\] {
+  padding-bottom: 6px;
+}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -827,6 +948,9 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
+.pl-\[22px\] {
+  padding-left: 22px;
+}
 .text-center {
   text-align: center;
 }
@@ -872,9 +996,21 @@
 .text-\[18px\] {
   font-size: 18px;
 }
+.text-\[20px\] {
+  font-size: 20px;
+}
 .text-\[22px\] {
   font-size: 22px;
 }
+.text-\[25px\] {
+  font-size: 25px;
+}
+.text-\[26px\] {
+  font-size: 26px;
+}
+.text-\[28px\] {
+  font-size: 28px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -882,6 +1018,10 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[14px\] {
+  --tw-leading: 14px;
+  line-height: 14px;
+}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -902,6 +1042,10 @@
   --tw-leading: 1;
   line-height: 1;
 }
+.font-\[9px\] {
+  --tw-font-weight: 9px;
+  font-weight: 9px;
+}
 .font-\[14px\] {
   --tw-font-weight: 14px;
   font-weight: 14px;
@@ -923,12 +1067,27 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[\#4a4a4a\] {
+  color: #4a4a4a;
+}
 .text-\[\#9f9f9f\] {
   color: #9f9f9f;
 }
+.text-\[\#666\] {
+  color: #666;
+}
+.text-\[\#171717\] {
+  color: #171717;
+}
+.text-\[\#272727\] {
+  color: #272727;
+}
 .text-\[\#464647\] {
   color: #464647;
 }
+.text-\[\#FF8F45\] {
+  color: #FF8F45;
+}
 .text-\[\#c0c0c0\] {
   color: #c0c0c0;
 }
@@ -944,6 +1103,9 @@
 .text-\[\#fff\] {
   color: #fff;
 }
+.text-\[red\] {
+  color: red;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -963,6 +1125,9 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-50 {
+  opacity: 50%;
+}
 .opacity-100 {
   opacity: 100%;
 }

package/dist/types.d.ts

@@ -108,6 +108,7 @@ export interface ServiceItemProps {
             frazaIcon?: string;
             specialDeparture?: string;
             fireIcon?: string;
+            cancelTicketIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

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

@@ -13,6 +13,7 @@ interface ExpandedDropdownProps {
     isSoldOut?: boolean;
     ladiesBookedSeats?: string;
     isDpEnabled?: boolean;
+    renderIcon?: any;
 }
-declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, }) {
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }) {
     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: {
@@ -22,7 +22,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                         " horas antes"),
                     " ",
                     "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", { style: { marginTop: "2px" } },
+                    " ",
+                    React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
                 React.createElement("span", null,
                     React.createElement("span", null,
                         React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
@@ -33,7 +35,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                     React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
             ladiesBookedSeats &&
                 String(ladiesBookedSeats).trim() !== "" &&
-                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
+                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px] items-center" },
                 React.createElement("span", { style: { marginTop: "2px" } },
                     " ",
                     React.createElement(LottiePlayer, { animationData: getAnimationIcon("femaaleAnimation"), width: "20px", height: "20px" })),
@@ -41,7 +43,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                     React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
                     " Esta empresa cuenta con asientos recomendados para mujeres."))),
             React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null, renderIcon("cancelTicketIcon", "14px")),
                 React.createElement("span", null,
                     React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
                     " Tu pasaje puede ser anulado de forma online",

package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, }: {
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
     serviceItem: any;
     showTopLabel: any;
     colors: any;
@@ -9,5 +9,11 @@ declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut,
     cityDestination: any;
     renderIcon: any;
     viewersConfig: any;
+    isFeatureDropDownExpand: any;
+    onToggleExpand: any;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity: any;
+    onDecreaseTicketQuantity: any;
+    onBookButtonPress: any;
 }) => React.JSX.Element;
 export default FeatureServiceUi;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -77,11 +77,14 @@ const AssuranceIcon = ({ type }) => {
         React.createElement("path", { d: "M10 2.2 16.3 4v5c0 4-2.4 6.8-6.3 8.7C6.1 15.8 3.7 13 3.7 9V4L10 2.2Z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }),
         React.createElement("path", { d: "m6.9 9.7 2.1 2.1 4.3-4.4", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })));
 };
-const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, }) => {
+const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
     var _a, _b, _c, _d, _e;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? serviceItem.operators
         : HARDCODED_OPERATORS;
+    const isItemExpanded = serviceItem.id === isFeatureDropDownExpand ||
+        isFeatureDropDownExpand === true;
+    const canDecreaseTicketQuantity = ticketQuantity > 1;
     return (React.createElement("div", { 
         // ${
         //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
@@ -118,52 +121,51 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 fontVariantNumeric: "tabular-nums",
                                 display: "inline-block",
                                 color: "#FF5C60",
+                                minWidth: "40px",
                             } })))),
             React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px]  p-[14px] text-[13.33px]" },
-                React.createElement("div", { className: "grid grid-cols-[1.3fr_2fr_1.2fr] gap-[16px] items-stretch" },
-                    React.createElement("div", { className: "flex flex-col justify-between gap-[20px] py-[2px]  " },
+                React.createElement("div", { className: "grid grid-cols-[23%_50%_27%] items-stretch" },
+                    React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
                                 React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[16px] h-[16px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "text-[12px] bold-text whitespace-nowrap" }, "Entre 07:00 AM y 10:00 AM"),
                             React.createElement("div", { className: "text-[11px] bold-text" }, "Viernes 23 de mayo")),
                         React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
-                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                            React.createElement("div", { className: "flex items-justify gap-[8px]" },
                                 React.createElement(AssuranceIcon, { type: "pending" }),
                                 React.createElement("span", { className: "text-[10px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Empresa y hora a confirmar luego del pago.")),
-                            React.createElement("div", { className: "flex items-center gap-[8px]" },
+                            React.createElement("div", { className: "flex items-justify gap-[8px]" },
                                 React.createElement(AssuranceIcon, { type: "secured" }),
                                 React.createElement("span", { className: "text-[10px]", style: {
                                         lineHeight: 1.3,
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
-                    React.createElement("div", { className: "px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
+                    React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
                         React.createElement("div", { className: "text-center" },
                             React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra")),
-                        React.createElement("div", { className: "flex items-stretch justify-center gap-[8px] w-full mb-[16px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
-                                width: "140px",
+                        React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 // height: "80px",
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
-                                padding: "14px",
+                                padding: "14px 10px",
                             } },
-                            React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] w-auto object-contain ${isSoldOut ? "grayscale" : ""}` }),
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
-                            React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[16px] py-[4px] rounded-[4px] bold-text" },
+                            React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
                                 React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
                             React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
-                        React.createElement("div", { className: "flex items-center justify-center gap-[6px] text-[12px]", style: {
+                        React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px]", style: {
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
                                 padding: "8px 14px",
                                 borderRadius: "24px",
-                                width: "430px",
                             } },
                             React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.userIcon, alt: "eye", style: { width: "16px", height: "16px" } }),
                             React.createElement("span", null,
@@ -183,14 +185,38 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 React.createElement("span", { className: "bold-text", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
                                 " ",
                                 "han comprado"))),
-                    React.createElement("div", { className: "flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]" },
+                    React.createElement("div", { className: "flex flex-col justify-center gap-[12px] py-[2px] pl-[22px] pr-[10px] relative mb-[16px]" },
                         React.createElement("div", { className: "flex flex-col gap-[6px] ", style: {
                                 alignItems: "center",
                             } },
                             React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight" }, "60% OFF"),
-                            React.createElement("span", { className: "text-[#666] text-[14px] line-through" }, "$10.000"),
+                            React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
+                                "$10.000",
+                                React.createElement("span", { style: {
+                                        position: "absolute",
+                                        left: "-2px",
+                                        top: "50%",
+                                        width: "calc(100% + 4px)",
+                                        height: "1px",
+                                        backgroundColor: "#FF5C60",
+                                        transform: "rotate(-10deg)",
+                                        transformOrigin: "center",
+                                    } })),
                             React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, "$4.000")),
-                        React.createElement("button", { className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[12px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer", style: {
+                        React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
+                            React.createElement("span", { className: "text-[12px] text-white" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
+                            React.createElement("div", { className: "flex w-full items-center justify-between", style: {
+                                    border: "1px solid #363c48",
+                                    backgroundColor: "#1a202e",
+                                    padding: "6px 14px",
+                                    borderRadius: "14px",
+                                } },
+                                React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-white ${canDecreaseTicketQuantity
+                                        ? "cursor-pointer bg-[#2d374d]"
+                                        : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
+                                React.createElement("span", { className: "bold-text text-[20px] text-white" }, ticketQuantity),
+                                React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-white" }, "+"))),
+                        React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px]  justify-center border-none cursor-pointer", style: {
                                 backgroundColor: "#FF5C60",
                             } },
                             React.createElement(LottiePlayer
@@ -199,17 +225,22 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
                                 // animationData={serviceItem.icons.flexibleAnim}
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
-                    React.createElement("div", { className: "absolute bottom-[11px] right-[18px]" },
+                    React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
                         React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",
                             } })))),
-            React.createElement("div", { className: "px-[16px] pt-[14px] pb-[6px] text-[13.33px]" },
-                React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
-                React.createElement("div", { className: "mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] " }, HOW_IT_WORKS_STEPS.map((step) => (React.createElement("div", { key: step.name, className: "flex flex-col items-center text-center text-[#272727]" },
-                    React.createElement(FeatureStepIcon, { icon: step.icon }),
-                    React.createElement("span", { className: "bold-text mt-[10px] text-[12px] leading-[14px]" }, step.name),
-                    React.createElement("span", { className: "mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]" }, step.text)))))))));
+            React.createElement("div", { className: "grid", style: {
+                    gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+                    opacity: isItemExpanded ? 1 : 0,
+                    transition: "grid-template-rows 300ms ease-in-out, opacity 250ms ease-in-out",
+                } },
+                React.createElement("div", { className: `min-h-0 overflow-hidden px-[16px] text-[13.33px] ${isItemExpanded ? "pt-[14px] pb-[6px]" : "py-0"}`, style: { transition: "padding 300ms ease-in-out" } },
+                    React.createElement("span", { className: "bold-text" }, "\u00BFC\u00F3mo funciona?"),
+                    React.createElement("div", { className: "mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] " }, HOW_IT_WORKS_STEPS.map((step) => (React.createElement("div", { key: step.name, className: "flex flex-col items-center text-center text-[#272727]" },
+                        React.createElement(FeatureStepIcon, { icon: step.icon }),
+                        React.createElement("span", { className: "bold-text mt-[10px] text-[12px] leading-[14px]" }, step.name),
+                        React.createElement("span", { className: "mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]" }, step.text))))))))));
 };
 export default FeatureServiceUi;

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

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