kupos-ui-components-lib 9.5.8 → 9.6.0

package/dist/ui/Survey/ScoreButtons.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { getZoneColor, getZoneShadow } from "./constants";
+const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSize = 15, gap = 8, }) => (React.createElement("div", { style: { marginBottom: 4 } },
+    React.createElement("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(10, 1fr)",
+            gap,
+        } }, Array.from({ length: 10 }, (_, i) => i + 1).map((num) => {
+        const isSelected = selectedScore === num;
+        const zoneColor = getZoneColor(num);
+        return (React.createElement("button", { key: num, onClick: () => onScoreChange === null || onScoreChange === void 0 ? void 0 : onScoreChange(num), onMouseEnter: (e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.borderColor = zoneColor;
+                    e.currentTarget.style.color = zoneColor;
+                }
+            }, onMouseLeave: (e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.borderColor = "#E5E7EB";
+                    e.currentTarget.style.color = "#111827";
+                }
+            }, style: {
+                height: buttonHeight,
+                borderRadius: 14,
+                fontSize,
+                fontWeight: 600,
+                border: isSelected ? "none" : "1.5px solid #E5E7EB",
+                background: isSelected ? zoneColor : "#FFFFFF",
+                color: isSelected ? "#FFFFFF" : "#111827",
+                cursor: "pointer",
+                transition: "border-color 0.15s, color 0.15s, background 0.15s",
+                boxShadow: isSelected ? getZoneShadow(num) : "none",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxSizing: "border-box",
+            } }, num));
+    })),
+    React.createElement("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: 8,
+        } },
+        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "No es probable"),
+        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "Muy probable"))));
+export default ScoreButtons;

package/dist/ui/Survey/SurveyFooter.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface SurveyFooterProps {
+    selectedScore?: number | null;
+    onSkip?: () => void;
+    onSubmit: () => void;
+    layout?: "inline" | "stacked";
+    colors?: {
+        secondaryColor?: string;
+        tertiaryColor?: string;
+        primaryColor?: string;
+    };
+}
+declare const SurveyFooter: ({ selectedScore, onSkip, onSubmit, layout, colors, }: SurveyFooterProps) => React.JSX.Element;
+export default SurveyFooter;

package/dist/ui/Survey/SurveyFooter.js

@@ -0,0 +1,88 @@
+import React from "react";
+const SurveyFooter = ({ selectedScore, onSkip, onSubmit, layout = "inline", colors, }) => {
+    if (layout === "stacked") {
+        return (React.createElement("div", { style: { marginTop: 24 } },
+            React.createElement("button", { onClick: onSkip, style: {
+                    display: "block",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: "13.33px",
+                    color: "#6B7280",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "0 0 14px",
+                } }, "Saltar por ahora"),
+            React.createElement("button", { onClick: onSubmit, disabled: selectedScore == null, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                    width: "100%",
+                    padding: "16px",
+                    borderRadius: 999,
+                    fontSize: "13.33px",
+                    fontWeight: 700,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    border: "none",
+                    cursor: selectedScore != null ? "pointer" : "not-allowed",
+                    background: selectedScore != null
+                        ? colors === null || colors === void 0 ? void 0 : colors.secondaryColor
+                        : "rgba(232,76,13,0.28)",
+                    color: "#FFFFFF",
+                    transition: "background 0.15s",
+                } },
+                "Enviar comentarios ",
+                React.createElement("span", null, "\u2192"))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginTop: 24,
+            } },
+            React.createElement("button", { onClick: onSkip, style: {
+                    fontSize: "13.33px",
+                    color: "#6B7280",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: 0,
+                } }, "Saltar por ahora"),
+            React.createElement("button", { onClick: onSubmit, disabled: selectedScore == null, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "14px 28px",
+                    borderRadius: 999,
+                    fontSize: "13.33px",
+                    fontWeight: 700,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    border: "none",
+                    cursor: selectedScore != null ? "pointer" : "not-allowed",
+                    background: selectedScore != null
+                        ? colors === null || colors === void 0 ? void 0 : colors.secondaryColor
+                        : "rgba(232,76,13,0.28)",
+                    color: "#FFFFFF",
+                    transition: "background 0.15s",
+                    minWidth: 160,
+                    justifyContent: "center",
+                } },
+                "Enviar comentarios ",
+                React.createElement("span", null, "\u2192"))),
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 6,
+                marginTop: 14,
+                fontSize: 12,
+                color: "#9CA3AF",
+            } },
+            React.createElement("span", null, "\uD83D\uDD12"),
+            React.createElement("span", null, "An\u00F3nimo \u00B7 solo se usa para mejorar el servicio"))));
+};
+export default SurveyFooter;

package/dist/ui/Survey/SurveyHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SurveyHeaderProps {
+    onClose?: () => void;
+}
+declare const SurveyHeader: ({ onClose }: SurveyHeaderProps) => React.JSX.Element;
+export default SurveyHeader;

package/dist/ui/Survey/SurveyHeader.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { BRAND } from "./constants";
+const SurveyHeader = ({ onClose }) => (React.createElement("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+    } },
+    React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } },
+        React.createElement("span", { style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: BRAND,
+                display: "inline-block",
+                flexShrink: 0,
+            } }),
+        React.createElement("span", { style: {
+                color: BRAND,
+                fontSize: 11,
+                fontWeight: 700,
+                letterSpacing: "0.1em",
+                textTransform: "uppercase",
+            } }, "Comentarios r\u00E1pidos"),
+        React.createElement("span", { style: {
+                color: "#9CA3AF",
+                fontSize: 11,
+                letterSpacing: "0.06em",
+                textTransform: "uppercase",
+            } }, "\u00B7 Tarda 20 segundos")),
+    React.createElement("button", { onClick: onClose, style: {
+            width: 36,
+            height: 36,
+            borderRadius: "50%",
+            background: "#F3F4F6",
+            border: "none",
+            cursor: "pointer",
+            fontSize: 14,
+            color: "#6B7280",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+        } }, "\u2715")));
+export default SurveyHeader;

package/dist/ui/Survey/ThankYouCard.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ThankYouCardProps {
+    onClose?: () => void;
+    titleFontSize?: string;
+}
+declare const ThankYouCard: ({ onClose, titleFontSize, }: ThankYouCardProps) => React.JSX.Element;
+export default ThankYouCard;

package/dist/ui/Survey/ThankYouCard.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { BRAND } from "./constants";
+import succes_anim from "../../assets/images/anims/service_list/succes_anim.json";
+import LottiePlayer from "../../assets/LottiePlayer";
+const ThankYouCard = ({ onClose, titleFontSize = "1.5rem", }) => (React.createElement("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "48px 40px 40px",
+        position: "relative",
+    } },
+    React.createElement("button", { onClick: onClose, style: {
+            position: "absolute",
+            top: 16,
+            right: 16,
+            width: 34,
+            height: 34,
+            borderRadius: "50%",
+            border: "none",
+            background: "#F3F4F6",
+            color: "#6B7280",
+            fontSize: 14,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        } }, "\u2715"),
+    React.createElement("div", { style: {
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            backgroundColor: "#DCFCE7",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: 20,
+        } },
+        React.createElement(LottiePlayer, { animationData: succes_anim, loop: true, autoplay: true, width: "70px", height: "70px" })),
+    React.createElement("h2", { style: {
+            fontSize: titleFontSize,
+            fontWeight: 700,
+            color: "#111827",
+            textAlign: "center",
+            marginBottom: 10,
+            lineHeight: 1.3,
+        } },
+        "Gracias por tu",
+        " ",
+        React.createElement("em", { style: {
+                color: BRAND,
+                fontFamily: "Georgia, 'Times New Roman', serif",
+                fontStyle: "italic",
+                fontWeight: "bold",
+            } }, "comentario")),
+    React.createElement("p", { style: { fontSize: "13.33px", color: "#6B7280", textAlign: "center" } }, "Hemos le\u00EDdo todas las respuestas. \u00A1Que tengas un buen viaje!")));
+export default ThankYouCard;

package/dist/ui/Survey/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const BRAND = "#E84C0D";
+export declare const MAX_CHARS = 500;
+export type FeedbackConfig = {
+    emoji: string;
+    message: string;
+    bannerBg: string;
+    bannerText: string;
+    question: string;
+    placeholder: string;
+};
+export declare const getZoneColor: (num: number) => string;
+export declare const getZoneShadow: (num: number) => string;
+export declare const getFeedbackConfig: (score: number | null | undefined) => FeedbackConfig | null;

package/dist/ui/Survey/constants.js

@@ -0,0 +1,46 @@
+export const BRAND = "#E84C0D";
+export const MAX_CHARS = 500;
+export const getZoneColor = (num) => {
+    if (num <= 6)
+        return "#E84C0D";
+    if (num <= 8)
+        return "#F59E0B";
+    return "#22C55E";
+};
+export const getZoneShadow = (num) => {
+    if (num <= 6)
+        return "0 2px 8px rgba(232,76,13,0.35)";
+    if (num <= 8)
+        return "0 2px 8px rgba(245,158,11,0.35)";
+    return "0 2px 8px rgba(34,197,94,0.35)";
+};
+export const getFeedbackConfig = (score) => {
+    if (score == null)
+        return null;
+    if (score <= 6)
+        return {
+            emoji: "😔",
+            message: "Lo sentimos, no cumplimos tus expectativas.",
+            bannerBg: "#FFF0EE",
+            bannerText: BRAND,
+            question: "¿Qué salió mal?",
+            placeholder: "Cuéntanos qué podríamos haber hecho mejor — cada detalle nos ayuda.",
+        };
+    if (score <= 8)
+        return {
+            emoji: "🤔",
+            message: "Gracias — apreciamos tu sinceridad.",
+            bannerBg: "#FFFBEB",
+            bannerText: "#92400E",
+            question: "¿Qué podría mejorar?",
+            placeholder: "Cuéntanos qué podría hacer que la experiencia sea aún mejor.",
+        };
+    return {
+        emoji: "🎉",
+        message: "¡Nos acabas de alegrar el día!",
+        bannerBg: "#F0FDF4",
+        bannerText: "#166534",
+        question: "¿Qué hicimos bien?",
+        placeholder: "¡Nos encantaría saber qué fue lo que más te gustó!",
+    };
+};

package/dist/ui/Survey/index.d.ts

@@ -0,0 +1,9 @@
+export { default as HeartIcon } from "./HeartIcon";
+export { default as ThankYouCard } from "./ThankYouCard";
+export { default as SurveyHeader } from "./SurveyHeader";
+export { default as ScoreButtons } from "./ScoreButtons";
+export { default as FeedbackBanner } from "./FeedbackBanner";
+export { default as FeedbackTextarea } from "./FeedbackTextarea";
+export { default as SurveyFooter } from "./SurveyFooter";
+export { BRAND, MAX_CHARS, getZoneColor, getZoneShadow, getFeedbackConfig } from "./constants";
+export type { FeedbackConfig } from "./constants";

package/dist/ui/Survey/index.js

@@ -0,0 +1,8 @@
+export { default as HeartIcon } from "./HeartIcon";
+export { default as ThankYouCard } from "./ThankYouCard";
+export { default as SurveyHeader } from "./SurveyHeader";
+export { default as ScoreButtons } from "./ScoreButtons";
+export { default as FeedbackBanner } from "./FeedbackBanner";
+export { default as FeedbackTextarea } from "./FeedbackTextarea";
+export { default as SurveyFooter } from "./SurveyFooter";
+export { BRAND, MAX_CHARS, getZoneColor, getZoneShadow, getFeedbackConfig } from "./constants";

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, tooltipBgColor, showLastSeats, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -133,7 +133,52 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         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%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+    const originalDpPrice = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price)
+        ? serviceItem.original_dp_price[0]
+        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price) || {})[0];
+    const dpDiscountPercent = Array.isArray(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)
+        ? serviceItem.dp_discount_percents[0]
+        : Object.values((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.fare;
+    const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
+        originalDpPrice != null &&
+        dpDiscountPercent != null &&
+        firstSeatFare != null;
+    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
+        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
+        !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+        !isNaN(Number(dpDiscountPercent)) &&
+            Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
+                animation: "pulse-zoom 2s ease-in-out infinite",
+            } },
+            React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
+                    backgroundColor: tooltipBgColor,
+                } },
+                Math.round(Number(dpDiscountPercent)),
+                "% 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] text-right", style: {
+                position: "relative",
+                display: "inline-block",
+                overflow: "hidden",
+            } },
+            commonService.currency(Number(originalDpPrice), currencySign),
+            React.createElement("span", { style: {
+                    position: "absolute",
+                    top: "35%",
+                    left: "50%",
+                    width: "80%",
+                    height: "1px",
+                    background: "#9f9f9f",
+                    transform: "rotate(-12deg)",
+                    transformOrigin: "center",
+                } })),
+        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
+        React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
+        isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
                 animation: "pulse-zoom 2s ease-in-out infinite",
             } },
@@ -161,7 +206,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 } })),
         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,
+            ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(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",

package/package.json

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

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -569,7 +569,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
           >
             {selectSeatOnward && selectedOnward && selectedOnward[0]
               ? selectedOnward[0].map((val, key) => {
-                  console.log("🚀 ~ PaymentSideBarDesktop ~ val:", val);
                   return (
                     <div
                       key={key}

package/src/ui/SeatSection/SeatSection.tsx

@@ -222,7 +222,14 @@ function SeatSection({
     return renderSeatNames();
   };
 
-  if (serviceItem?.is_dp_enabled) {
+  const _dpSeatsFirstVal = Array.isArray(serviceItem?.dp_discounted_seats)
+    ? serviceItem.dp_discounted_seats[0]
+    : Object.values(serviceItem?.dp_discounted_seats || {})[0];
+  const _dpPercentsFirstVal = Array.isArray(serviceItem?.dp_discount_percents)
+    ? serviceItem.dp_discount_percents[0]
+    : Object.values(serviceItem?.dp_discount_percents || {})[0];
+
+  if (serviceItem?.is_dp_enabled && !_dpSeatsFirstVal && !_dpPercentsFirstVal) {
     const dpSeats = (
       removeDuplicateSeats ? uniqueSeats : sortedSeatTypes
     ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
@@ -279,6 +286,96 @@ function SeatSection({
     );
   }
 
+  if (_dpSeatsFirstVal && _dpPercentsFirstVal) {
+    const originalDpPrice = Array.isArray(serviceItem.original_dp_price)
+      ? serviceItem.original_dp_price[0]
+      : Object.values(serviceItem.original_dp_price || {})[0];
+    const dpDiscountPercent = Array.isArray(serviceItem.dp_discount_percents)
+      ? serviceItem.dp_discount_percents[0]
+      : Object.values(serviceItem.dp_discount_percents || {})[0];
+    const seatTypeFare = serviceItem.seat_types?.[0]?.fare;
+
+    if (originalDpPrice && seatTypeFare) {
+      return (
+        <div className="grid grid-cols-2 items-center text-[13.33px] relative">
+          <div className="col-start-1 row-start-2 flex items-center">
+            <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
+              Antes
+            </span>
+          </div>
+
+          <div className="col-start-1 row-start-3 flex h-[20px] items-end">
+            <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
+              Desde
+            </span>
+          </div>
+
+          <div
+            className="col-start-2 row-start-1 flex items-center justify-center absolute"
+            style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
+          >
+            {!isNaN(Number(dpDiscountPercent)) &&
+              Number(dpDiscountPercent) > 0 && (
+                <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",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {Math.round(Number(dpDiscountPercent))}% OFF
+                </span>
+              )}
+          </div>
+
+          <div
+            className="col-start-2 row-start-2 flex items-center justify-center"
+            style={{ textAlign: "center" }}
+          >
+            <span
+              className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
+              style={{ position: "relative" }}
+            >
+              {formatPrice(Number(originalDpPrice))}
+              <span
+                style={{
+                  position: "absolute",
+                  left: "-2px",
+                  top: "50%",
+                  width: "calc(100% + 4px)",
+                  height: "1px",
+                  backgroundColor: "#9f9f9f",
+                  transform: "rotate(-10deg)",
+                  transformOrigin: "center",
+                }}
+              />
+            </span>
+          </div>
+
+          <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
+            <span
+              className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
+              style={{ color: isSoldOut ? "#c0c0c0" : "#ff5964" }}
+            >
+              <div
+                className="absolute"
+                style={{ left: isPeru ? "-1px" : "-8px" }}
+              >
+                {renderIcon("fireIcon", "16px")}
+              </div>
+              {availableSeats <= 0
+                ? CommonService.currency(0, currencySign)
+                : CommonService.discountedCurrency(
+                    Number(seatTypeFare),
+                    currencySign,
+                  )}
+            </span>
+          </div>
+        </div>
+      );
+    }
+  }
+
   if (hasDiscount && discountSeat) {
     return (
       <div className="grid grid-cols-2 items-center text-[13.33px] relative">