kupos-ui-components-lib 9.3.1 → 9.3.3

package/dist/styles.css

@@ -27,14 +27,14 @@
 .-top-\[8px\] {
   top: calc(8px * -1);
 }
+.-top-\[9px\] {
+  top: calc(9px * -1);
+}
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
-.-top-\[14px\] {
-  top: calc(14px * -1);
-}
-.-top-\[16px\] {
-  top: calc(16px * -1);
+.-top-\[18px\] {
+  top: calc(18px * -1);
 }
 .top-\[2px\] {
   top: 2px;
@@ -54,9 +54,6 @@
 .top-\[88\%\] {
   top: 88%;
 }
-.right-\[0\] {
-  right: 0;
-}
 .right-\[0px\] {
   right: 0px;
 }
@@ -123,6 +120,24 @@
 .z-\[1\] {
   z-index: 1;
 }
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+.col-start-1 {
+  grid-column-start: 1;
+}
+.col-start-2 {
+  grid-column-start: 2;
+}
+.row-start-1 {
+  grid-row-start: 1;
+}
+.row-start-2 {
+  grid-row-start: 2;
+}
+.row-start-3 {
+  grid-row-start: 3;
+}
 .container {
   width: 100%;
 }
@@ -159,9 +174,6 @@
 .mt-\[13px\] {
   margin-top: 13px;
 }
-.mt-\[14px\] {
-  margin-top: 14px;
-}
 .mt-\[15px\] {
   margin-top: 15px;
 }
@@ -240,9 +252,6 @@
 .ml-\[6px\] {
   margin-left: 6px;
 }
-.ml-\[8px\] {
-  margin-left: 8px;
-}
 .ml-\[10px\] {
   margin-left: 10px;
 }
@@ -424,6 +433,9 @@
 .rotate-180 {
   rotate: 180deg;
 }
+.transform {
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+}
 .cursor-default {
   cursor: default;
 }
@@ -445,6 +457,9 @@
 .grid-cols-\[26px_auto_26\%_1fr\] {
   grid-template-columns: 26px auto 26% 1fr;
 }
+.grid-cols-\[auto_auto\] {
+  grid-template-columns: auto auto;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -460,6 +475,9 @@
 .items-center {
   align-items: center;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -472,6 +490,9 @@
 .justify-end {
   justify-content: flex-end;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .gap-\[1px\] {
   gap: 1px;
 }
@@ -509,6 +530,10 @@
   -moz-column-gap: 2%;
        column-gap: 2%;
 }
+.gap-x-\[8px\] {
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -527,12 +552,18 @@
 .rounded-\[15px\] {
   border-radius: 15px;
 }
+.rounded-\[18px\] {
+  border-radius: 18px;
+}
 .rounded-\[20px\] {
   border-radius: 20px;
 }
 .rounded-\[38px\] {
   border-radius: 38px;
 }
+.rounded-\[100px\] {
+  border-radius: 100px;
+}
 .rounded-full {
   border-radius: calc(infinity * 1px);
 }
@@ -638,6 +669,9 @@
 .bg-\[\#ff8f45\] {
   background-color: #ff8f45;
 }
+.bg-\[\#ff5964\] {
+  background-color: #ff5964;
+}
 .bg-\[\#fff\] {
   background-color: #fff;
 }
@@ -678,6 +712,12 @@
 .p-\[30px_20px\] {
   padding: 30px 20px;
 }
+.px-\[6px\] {
+  padding-inline: 6px;
+}
+.px-\[8px\] {
+  padding-inline: 8px;
+}
 .px-\[10px\] {
   padding-inline: 10px;
 }
@@ -735,12 +775,15 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
-.pr-\[13px\] {
-  padding-right: 13px;
-}
 .pr-\[15px\] {
   padding-right: 15px;
 }
+.pr-\[20px\] {
+  padding-right: 20px;
+}
+.pr-\[22px\] {
+  padding-right: 22px;
+}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -771,6 +814,9 @@
 .text-left {
   text-align: left;
 }
+.text-right {
+  text-align: right;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -798,6 +844,12 @@
 .text-\[17px\] {
   font-size: 17px;
 }
+.text-\[18px\] {
+  font-size: 18px;
+}
+.text-\[22px\] {
+  font-size: 22px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -805,6 +857,22 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[20px\] {
+  --tw-leading: 20px;
+  line-height: 20px;
+}
+.leading-\[22px\] {
+  --tw-leading: 22px;
+  line-height: 22px;
+}
+.leading-\[24px\] {
+  --tw-leading: 24px;
+  line-height: 24px;
+}
+.leading-\[30px\] {
+  --tw-leading: 30px;
+  line-height: 30px;
+}
 .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -830,15 +898,18 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[\#9f9f9f\] {
+  color: #9f9f9f;
+}
 .text-\[\#464647\] {
   color: #464647;
 }
-.text-\[\#bbb\] {
-  color: #bbb;
-}
 .text-\[\#c0c0c0\] {
   color: #c0c0c0;
 }
+.text-\[\#c2c2c2\] {
+  color: #c2c2c2;
+}
 .text-\[\#ccc\] {
   color: #ccc;
 }
@@ -905,9 +976,6 @@
   --tw-outline-style: none;
   outline-style: none;
 }
-.\[rid-template-columns\:18\%_28\%_2\.5\%_28\%_15\.5\%\] {
-  rid-template-columns: 18% 28% 2.5% 28% 15.5%;
-}
 .group-hover\:block {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1016,6 +1084,15 @@
     transform: translateY(0);
   }
 }
+@keyframes pulse-zoom {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
@@ -1038,6 +1115,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1149,6 +1246,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/dist/types.d.ts

@@ -105,6 +105,8 @@ export interface ServiceItemProps {
             wifiIcon?: string;
             cortinaIcon?: string;
             frazaIcon?: string;
+            specialDeparture?: string;
+            fireIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -6,26 +6,12 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
             backgroundColor: "#ffefef",
             borderRadius: "0 0 10px 10px",
-            // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
-            // border: `1px solid ${colors.priceColor}`,
-            // 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,
-                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
-                    " Tu pasaje puede ser anulado de forma online",
-                    React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
-                    " antes de la salida del bus.")),
-            isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]" },
+        React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5 } },
+            isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
-                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
+                    React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
                     " Tu pasaje puede ser cambiado de manera online",
                     " ",
                     React.createElement("span", { className: "bold-text" },
@@ -37,7 +23,18 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,
                     React.createElement("span", null,
-                        React.createElement("span", { className: "bold-text" }, "Pol\u00EDtica de cambios:"),
-                        " Esta empresa no permite cambios de pasajes")))))));
+                        React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
+                        " Esta empresa no permite cambios de pasajes.")))),
+            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,
+                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
+                    " Tu pasaje puede ser anulado de forma online",
+                    React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
+                    " antes de la salida del bus.")))));
 }
 export default ExpandedDropdown;

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare const FeatureServiceUi: ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, }: {
+    serviceItem: any;
+    showTopLabel: any;
+    colors: any;
+    isSoldOut: any;
+    getAnimationIcon: any;
+    cityOrigin: any;
+    cityDestination: any;
+    renderIcon: any;
+}) => React.JSX.Element;
+export default FeatureServiceUi;

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -0,0 +1,101 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+const HARDCODED_OPERATORS = [
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+        name: "Turbus",
+    },
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
+        name: "Pullmanbus",
+    },
+    {
+        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
+        name: "Expreso Santa C...",
+    },
+];
+const HARDCODED_COUNTDOWN = "09:55";
+const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    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;
+    return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+            showTopLabel
+            ? "mt-[24px]"
+            : "mt-[20px]"}` },
+        React.createElement("div", null,
+            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: "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("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: "flex items-center gap-[6px] rounded-[8px] px-[8px] py-[4px] w-fit mb-[6px]", style: {
+                                    border: "1px solid #363c48",
+                                    backgroundColor: "#1a202e",
+                                } },
+                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.busIcon, alt: "bus", style: { width: "20px", height: "20px" } }),
+                                React.createElement("span", { className: "text-[12px] whitespace-nowrap" }, "Salida flexible")),
+                            React.createElement("div", { className: "text-[13px] bold-text whitespace-nowrap" }, "07:00 AM \u2013 10:00 AM"),
+                            React.createElement("div", { className: "text-[12px] bold-text" }, "Vie, 04/11")),
+                        React.createElement("div", { className: "flex items-start gap-[6px] text-[12px] " },
+                            React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.sheildIcon, alt: "shield", style: { width: "14px", height: "14px" } }),
+                            React.createElement("span", null, "Tu asiento confirmado al instante."))),
+                    React.createElement("div", { className: "px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px]" },
+                        React.createElement("div", { className: "text-center" },
+                            React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra"),
+                            React.createElement("div", { className: "text-[12px]  mt-[8px]" }, "Empresa a confirmar despu\u00E9s de tu pago")),
+                        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",
+                                height: "80px",
+                                border: "1px solid #363c48",
+                                backgroundColor: "#1a202e",
+                            } },
+                            React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] w-auto object-contain ${isSoldOut ? "grayscale" : ""}` }),
+                            React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]))))),
+                        React.createElement("div", { className: "flex items-center gap-[6px] text-[12px]" },
+                            React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.userIcon, alt: "eye", style: { width: "16px", height: "16px" } }),
+                            React.createElement("span", null,
+                                React.createElement("span", { className: "bold-text text-white" }, "50 personas"),
+                                " ",
+                                "est\u00E1n viendo este viaje"))),
+                    React.createElement("div", { className: "flex flex-col  justify-center gap-[12px] py-[2px] relative mb-[16px]" },
+                        React.createElement("div", { className: "flex flex-col gap-[6px] ", style: {
+                                alignItems: "center",
+                            } },
+                            React.createElement("span", { className: "text-[#FF8F45] bold-text text-[22px] leading-tight" }, "60% OFF"),
+                            React.createElement("span", { className: "text-[#666] text-[14px] line-through" }, "$10.000"),
+                            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: {
+                                backgroundColor: "#FF5C60",
+                            } },
+                            React.createElement(LottiePlayer
+                            // animationData={serviceItem.icons.flexibleAnim}
+                            , { 
+                                // 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("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
+                                width: "14px",
+                                height: "8px",
+                                filter: "brightness(0) invert(1)",
+                            } }))))),
+        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
+            React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "14px", height: "14px" }),
+                React.createElement("span", null,
+                    React.createElement("strong", null, "Remate"),
+                    " | Termina en",
+                    " ",
+                    React.createElement("strong", null, HARDCODED_COUNTDOWN),
+                    " min")))));
+};
+export default FeatureServiceUi;

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -13,6 +13,7 @@ interface SeatSectionProps {
     removeDuplicateSeats?: boolean;
     isPeru?: boolean;
     serviceItem?: any;
+    renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -54,7 +54,7 @@ function getUniqueSeats(seatTypes) {
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, }) {
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
@@ -74,9 +74,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         if (isPeru) {
             const allSeats = getAllSeatTypes(seatTypes);
             const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
-            const { originalPrice, discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
+            const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
             return (React.createElement(React.Fragment, null,
-                originalPrice !== discountedPrice && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(originalPrice))),
                 React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
         }
         if (removeDuplicateSeats) {
@@ -95,13 +94,16 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 : null));
         });
     };
-    const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
-        ? { position: "relative", top: 0 }
-        : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
     const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
-    const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
     const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
+    const discountSeat = discountedSeats
+        .filter((seat) => !SEAT_EXCEPTIONS.includes(seat.label))
+        .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 renderLabels = () => {
         if (isPeru) {
             return (React.createElement(React.Fragment, null,
@@ -114,6 +116,37 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         }
         return renderSeatNames();
     };
+    if (hasDiscount && discountSeat) {
+        return (React.createElement("div", { className: "grid   items-center text-[13.33px] relative" },
+            React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#c2c2c2]" }, "Antes")),
+            React.createElement("div", { className: "col-start-1 row-start-3 flex h-[30px] items-end" },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
+            React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", right: "30px" } }, discountValue != null && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px]  text-[12px] bold-text leading-[20px] text-white", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                } },
+                discountValue,
+                "% OFF"))),
+            React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: {
+                        position: "relative",
+                    } },
+                    formatPrice(discountSeat.originalPrice),
+                    React.createElement("span", { style: {
+                            position: "absolute",
+                            left: "-2px",
+                            top: "50%",
+                            width: "calc(100% + 4px)",
+                            height: "1px",
+                            backgroundColor: "#9f9f9f",
+                            transform: "rotate(-10deg)",
+                            transformOrigin: "center",
+                        } }))),
+            React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-start" },
+                React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
+                    renderIcon("fireIcon", "16px"),
+                    formatPrice(discountSeat.discountedPrice)))));
+    }
     return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
         React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
         React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
@@ -124,8 +157,6 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 right: 0,
                 justifyContent: isCentered ? "center" : "",
                 gap: "10px",
-            } },
-            hasDiscount && !isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
-            renderSeatPrices())));
+            } }, renderSeatPrices())));
 }
 export default SeatSection;

package/dist/ui/ServiceBadges/ServiceBadges.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface ServiceBadgesProps {
+    showTopLabel?: string;
+    isSoldOut: boolean;
+    colors: any;
+    renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+    translation?: {
+        directService?: string;
+    };
+    serviceItem: {
+        is_transpordo?: boolean;
+        is_direct_trip?: boolean;
+        train_type_label?: string;
+    };
+}
+declare const ServiceBadges: React.FC<ServiceBadgesProps>;
+export default ServiceBadges;

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -0,0 +1,33 @@
+import React from "react";
+const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, }) => {
+    return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
+        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("connectingServiceIcon", "12px"),
+            React.createElement("div", null, "Conexión"))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
+            } },
+            renderIcon("directo", "12px"),
+            React.createElement("div", null, "Tren Express")))));
+};
+export default ServiceBadges;

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

@@ -19,6 +19,7 @@ interface DateTimeSectionMobileProps {
     availableSeats: number;
     removeDuplicateSeats?: boolean;
     serviceItem?: any;
+    tooltipBgColor?: string;
 }
-declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }: DateTimeSectionMobileProps): React.ReactElement;
+declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;