kupos-ui-components-lib 9.3.1 → 9.3.2

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;
 }
@@ -445,6 +454,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 +472,9 @@
 .items-center {
   align-items: center;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -472,6 +487,9 @@
 .justify-end {
   justify-content: flex-end;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .gap-\[1px\] {
   gap: 1px;
 }
@@ -509,6 +527,10 @@
   -moz-column-gap: 2%;
        column-gap: 2%;
 }
+.gap-x-\[8px\] {
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -527,12 +549,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 +666,9 @@
 .bg-\[\#ff8f45\] {
   background-color: #ff8f45;
 }
+.bg-\[\#ff5964\] {
+  background-color: #ff5964;
+}
 .bg-\[\#fff\] {
   background-color: #fff;
 }
@@ -678,6 +709,12 @@
 .p-\[30px_20px\] {
   padding: 30px 20px;
 }
+.px-\[6px\] {
+  padding-inline: 6px;
+}
+.px-\[8px\] {
+  padding-inline: 8px;
+}
 .px-\[10px\] {
   padding-inline: 10px;
 }
@@ -735,12 +772,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 +811,9 @@
 .text-left {
   text-align: left;
 }
+.text-right {
+  text-align: right;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -798,6 +841,12 @@
 .text-\[17px\] {
   font-size: 17px;
 }
+.text-\[18px\] {
+  font-size: 18px;
+}
+.text-\[22px\] {
+  font-size: 22px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -805,6 +854,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 +895,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 +973,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) {

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,22 @@ 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" },
+                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] line-through" }, formatPrice(discountSeat.originalPrice))),
+            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 +142,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/mobileweb/ExpandedDropdownMobile.js

@@ -7,6 +7,23 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
             opacity: isSoldOut ? 0.5 : 1,
         } },
         React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
+            isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
+                    " Tu pasaje puede ser cambiado de manera online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ",
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", null,
+                        React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
+                        " Esta empresa no permite cambios de pasajes")))),
             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" },
@@ -24,23 +41,6 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
                     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-[6px]" },
-                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
-                React.createElement("span", null,
-                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
-                    " Tu pasaje puede ser cambiado de manera online",
-                    " ",
-                    React.createElement("span", { className: "bold-text" },
-                        "hasta ",
-                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
-                        " horas antes"),
-                    " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
-                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")))))));
+                    " antes de la salida del bus.")))));
 }
 export default ExpandedDropdownMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -43,7 +43,7 @@ const getUniqueSeats = (data, limit) => {
         .slice(0, limit);
 };
 function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -59,10 +59,6 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             return null;
         return filtered.reduce((min, item) => (item.fare < min ? item.fare : min), filtered[0].fare);
     };
-    const getHighestFare = () => {
-        var _a;
-        return (((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => !EXCEPTIONS.includes(item.label))) === null || _a === void 0 ? void 0 : _a.reduce((max, item) => (item.fare > max ? item.fare : max), 0)) || 0);
-    };
     const renderPeruSeats = () => {
         const lowestFare = getLowestFare();
         if (lowestFare === null)
@@ -92,17 +88,29 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         ? getUniqueSeats(seatTypesData, 3)
         : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
     const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
-    const highestOriginalPrice = Math.max(...((discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.map((s) => s.originalPrice)) || [0]));
     const hasDiscount = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
-    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } },
-        !isPeru && hasDiscount && (React.createElement("div", { className: "absolute -top-[16px] right-[0] flex justify-end" },
-            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(highestOriginalPrice, currencySign)))),
-        React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
-                gap: isSoldOut ? "0px" : "5px",
-                justifyContent: hasMultipleTypes ? "space-between" : "center",
-            } },
-            renderSeats(),
-            isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null)));
+    const discountSeat = (_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;
+    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px]" },
+        discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]" },
+            React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: { backgroundColor: seatPriceColor } },
+                discountValue,
+                "% OFF"))),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] line-through text-right" }, commonService.currency(discountSeat.originalPrice, currencySign)),
+        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" } },
+            ((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            commonService.currency(discountSeat.discountedPrice, currencySign)),
+        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
+            gap: isSoldOut ? "0px" : "5px",
+            justifyContent: hasMultipleTypes ? "space-between" : "center",
+        } },
+        renderSeats(),
+        isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
+            React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
 }
 export default SeatSectionMobile;

package/package.json

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

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

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":260.03,"w":256,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"circle 3","sr":1,"st":12,"op":91,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-96.841,-18.544,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[1000,1000],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[400,400],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":53},{"s":[1000,1000],"t":78}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,130.015]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[20],"t":40},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[70],"t":53},{"s":[100],"t":78}]}},"shapes":[{"ty":"gr","nm":"Ellipse 1","it":[{"ty":"el","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[23.352,23.352]}},{"ty":"fl","nm":"Fill 1","c":{"a":0,"k":[1,1,1]},"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":[-96.841,-18.544]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":29.97,"op":84,"ip":0,"assets":[]}