kupos-ui-components-lib 9.10.0 → 9.10.2

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -11,7 +11,7 @@ const EXCEPTIONS = [
     "blanco",
     "asiento_mascota",
 ];
-const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
+const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
     if (EXCEPTIONS.includes(type.label))
         return null;
     const rowClass = hasMultipleTypes
@@ -20,9 +20,7 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
     const labelColor = isSoldOut ? "#bbb" : "#464647";
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
     return (React.createElement("div", { className: rowClass, key: index },
-        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
-            ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
-            : displayLabel),
+        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize}  bold-text`, style: { color: priceColor } }, fare)));
 };
 const getFilteredSeats = (item) => {
@@ -44,8 +42,8 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -103,24 +101,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
     };
     const renderSeats = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (isPeru) {
             return renderPeruSeats();
         }
         if (removeDuplicateSeats) {
             const uniqueSeats = getUniqueSeats(seatTypesData, 3);
-            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
+            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
         }
-        const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-        return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
+        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
     };
     const seats = removeDuplicateSeats
         ? getUniqueSeats(seatTypesData, 3)
-        : (() => {
-            var _a;
-            const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-            return isTrain ? filtered : filtered === null || filtered === void 0 ? void 0 : filtered.slice(0, 2);
-        })();
+        : (_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 peruLowestFare = isPeru ? getLowestFare() : null;
     const peruDiscountCalc = isPeru && peruLowestFare != null
@@ -131,7 +124,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
         : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     const discountSeat = isPeru && peruDiscountCalc
-        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_b = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
     const discountValue = (() => {
         if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
             typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
@@ -154,14 +147,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
     };
     const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
     const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
-    const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
         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) &&
-        !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
+        !((_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: {
@@ -193,7 +186,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                 color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
             } },
-            ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
@@ -227,8 +220,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                     color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
                 } },
-                ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
-                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
+                ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -1,7 +1,7 @@
 import React from "react";
 const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
-    return (React.createElement("div", { className: "absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
-        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
+    return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
+        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
                 backgroundColor: "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"

package/dist/utils/CommonService.d.ts

@@ -3,7 +3,7 @@ declare const commonService: {
     discountedCurrency(amount: number, currencySign?: string): string;
     copyObject: (ob: any) => any;
     getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
-    truncateSeatLabel: (label: string | number, maxLength?: number) => string;
+    truncateSeatLabel: (label: string | number) => string;
     getAmenitiesImage: (name: string, serviceItem: any) => string;
     getAmenityName: (rawAmenity: string) => string;
     getSeatNameForFilters: (rawSeat: any) => any;

package/dist/utils/CommonService.js

@@ -34,15 +34,11 @@ const commonService = {
                 return "";
         }
     },
-    truncateSeatLabel: (label, maxLength) => {
+    truncateSeatLabel: (label) => {
         if (typeof label !== "string")
             return String(label);
         if (label.includes("("))
             return label;
-        // If maxLength provided, hard-truncate regardless of word count
-        if (maxLength != null && label.length > maxLength) {
-            return label.slice(0, maxLength) + "...";
-        }
         const words = label.trim().split(/\s+/);
         const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
         if (words.length === 1)

package/package.json

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

package/src/KuposUIComponent.tsx

@@ -9,13 +9,16 @@ import { FilterBarProps } from "./components/FilterBar/tyoes";
 import { CuponeraFilterBarProps } from "./components/CuponeraFilterBar/types";
 import { ResponsiveFilterBar } from "./components/FilterBar";
 import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+import { ResponsiveSurvey, SurveyProps } from "./components/Survey";
 
 interface KuposUIComponentProps {
   typeOfComponent:
     | "serviceitem"
     | "paymentsidebar"
     | "servicelist"
-    | "filterbar";
+    | "filterbar"
+    | "survey"
+    | "cuponerafilterbar";
   variant?: "mobile" | "desktop";
 
   // Original ServiceItem props
@@ -105,6 +108,21 @@ interface KuposUIComponentProps {
     sortOrder?: "asc" | "desc";
   };
   onFilterChange?: (filters: any) => void;
+
+  // Survey props
+  isOpen?: boolean;
+  selectedScore?: number | null;
+  onScoreChange?: (score: number) => void;
+  feedback?: string;
+  onFeedbackChange?: (text: string) => void;
+  onClose?: () => void;
+  onSkip?: () => void;
+  onSubmit?: (score: number, feedback: string) => void;
+  isSubmitted?: boolean;
+  bookingId?: string;
+  origin?: string;
+  destination?: string;
+  operatorName?: string;
 }
 
 // Using imported ResponsivePaymentSideBar component instead
@@ -144,6 +162,9 @@ export default function KuposUIComponent(
         />
       );
 
+    case "survey":
+      return <ResponsiveSurvey {...(restProps as unknown as SurveyProps)} />;
+
     default:
       return (
         <div className="error-message">

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

@@ -0,0 +1 @@
+{"v":"5.7.6","fr":30,"ip":0,"op":60,"w":512,"h":512,"nm":"Checkmark-final","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Capa de formas 6","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[173.75,411.25,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[0,0,100]},{"t":39,"s":[3.598,3.598,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Capa de formas 5","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[423.5,238.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":36,"s":[0,0,100]},{"t":50,"s":[4.406,4.406,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Capa de formas 4","sr":1,"ks":{"o":{"a":0,"k":67,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,140,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":46,"s":[0,0,100]},{"t":60,"s":[5.219,5.219,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":67,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.969,0.576,0.118,0.5,0.957,0.465,0.129,1,0.945,0.353,0.141],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Capa 1/Check-Mark-Animation2 contornos","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2,"l":2},"a":{"a":0,"k":[256,256,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-54.205,3.498],[-19.88,36.986],[54.205,-36.986]],"c":false},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":14.2,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[262.249,261.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Grupo 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[0]},{"t":40,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Recortar trazados 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"CirculoNaranja","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[254,256,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"t":25,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,1,0.655,0.212,0.5,1,0.608,0.241,1,1,0.561,0.271],"ix":9}},"s":{"a":0,"k":[-29,-62],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":21,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Relleno de degradado 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"CirculoBlanco","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[254,256,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[0,0,100]},{"t":25,"s":[109,109,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[187.68,187.68],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Trazado elíptico 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.988,-0.426],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[131.424,131.424],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Elipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"CirculoAnaranjadoFondo","sr":1,"ks":{"o":{"a":0,"k":14,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2,"l":2},"a":{"a":0,"k":[256,256,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":20,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-141.385,0],[0,-141.385],[141.385,0],[0,141.385]],"o":[[141.385,0],[0,141.385],[-141.385,0],[0,-141.385]],"v":[[0,-256],[256,0],[0,256],[-256,0]],"c":true},"ix":2},"nm":"Trazado 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.944999964097,0.352999997606,0.141000007181,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 2","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[256,256],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Grupo 1","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Capa de formas 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,252,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[518.633,518.633],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Trazado de rectángulo 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Trazo 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Relleno 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3.316,3.316],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectángulo 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -131,13 +131,6 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -151,15 +144,6 @@ function ServiceItemPB({
   wowDealData,
   isFlores,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const handleSeatSelect = (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => {
-    onClearSeatSelectionError?.();
-    onSeatSelect?.(key, price, seatKey, apiSeatType);
-  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -360,17 +344,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -624,10 +597,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -643,18 +612,6 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
-                  {showSeatSelectionError === serviceItem.id && isTrain && (
-                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
-                      <div
-                        className="text-[9px] text-center whitespace-nowrap"
-                        style={{
-                          color: colors.seatPriceColor,
-                        }}
-                      >
-                        Selecciona el tipo de servicio
-                      </div>
-                    </div>
-                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -46,8 +46,6 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
-  operatorLabel,
-  isTrain,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -232,7 +230,7 @@ function ServiceItemMobile({
               style={{
                 padding: "12px 12px 8px 12px",
                 marginTop:
-                  serviceItem?.is_direct_trip && showTopLabel && isConexion
+                  serviceItem?.is_direct_trip && (showTopLabel || isConexion)
                     ? " 10px"
                     : "",
               }}

package/src/components/ServiceItem/mobileTypes.ts

@@ -135,36 +135,36 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string;
+      personIcon?: string
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string;
-      femaleAnim?: string;
-      thunderAnim?: string;
-      personsAnim?: string;
-      whiteOrigin?: string;
-      whiteDestination?: string;
-      userIcon?: string;
-
-      sheildIcon?: string;
-      busIcon?: string;
-      whiteDownArrow?: string;
-      empressaIcon?: string;
-      flexibleIcon?: string;
-      listoIcon?: string;
-      precioIcon?: string;
-      confirmarIcon?: string;
+      whiteFireIcon?: string
+      femaleAnim?:string
+       thunderAnim?: string
+       personsAnim?: string
+        whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+      empressaIcon?: string,
+      flexibleIcon?: string,
+      listoIcon?: string,
+      precioIcon?: string,
+      confirmarIcon?: string
       cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string;
+      womenSeatIcon?: string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
-  onRemateUiButtonClick?: () => void;
+  onRemateUiButtonClick?: ()=> void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -208,7 +208,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string;
+    discountSeatPriceColor?: string
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -221,29 +221,23 @@ export interface MobileServiceItemProps {
   showLastSeats?: boolean;
   removeDuplicateSeats?: boolean;
   isLinatal?: boolean;
-  viewersConfig?: {
+    viewersConfig?: {
     min: number;
     max: number;
     interval?: number; // ms, default 5000
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
-  operatorLabel?: string;
-  isTrain?: boolean;
-  isFeatureDropDownExpand?: any;
+   isFeatureDropDownExpand?: any;
   setIsFeatureDropDownExpand?: (value: any) => void;
   ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
-  onDecreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
+  onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
-  isNewUi?: boolean;
+    isNewUi?: boolean
 
-  selectedTimeSlot?: string;
+    selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;
   onTimeDropdownToggle?: (id?: string | number | null) => void;

package/src/components/ServiceItem/types.ts

@@ -252,18 +252,6 @@ export interface ServiceItemProps {
   showLoginModal?: any;
   isLoggedIn?: any;
   showLoginOption?: boolean;
-  isTrain?: boolean;
-  selectedSeatKey?: any;
-  onSeatSelect?: (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => void;
-  onTrainButtonClick?: any;
-  showSeatSelectionError?: string | null;
-  onShowSeatSelectionError?: (serviceId: string) => void;
-  onClearSeatSelectionError?: () => void;
   selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;

package/src/components/Survey/ResponsiveSurvey.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import SurveyDesktop from "./SurveyDesktop";
+import SurveyMobile from "./SurveyMobile";
+
+export default function ResponsiveSurvey(props: SurveyProps) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return <SurveyMobile {...(props as unknown as SurveyProps)} />;
+  }
+
+  return <SurveyDesktop {...props} />;
+}

package/src/components/Survey/SurveyDesktop.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import { Modal } from "../../ui/Modal";
+import {
+  ThankYouCard,
+  ScoreButtons,
+  FeedbackTextarea,
+  getFeedbackConfig,
+} from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+
+const SurveyDesktop = ({
+  isOpen,
+  isSubmitted,
+  selectedScore,
+  onScoreChange,
+  feedback = "",
+  onFeedbackChange,
+  onClose,
+  onSkip,
+  onSubmit,
+  colors,
+  icons,
+  isLoading,
+}: SurveyProps) => {
+  if (!isOpen) return null;
+
+  const config = getFeedbackConfig(selectedScore);
+
+  const handleSubmit = () => {
+    if (selectedScore != null) {
+      onSubmit?.(selectedScore, feedback);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      variant="center"
+      size="lg"
+      maxWidth={550}
+      padding={isSubmitted ? 0 : "40px 48px 36px"}
+      borderRadius={28}
+      closeOnBackdrop={false}
+    >
+      {/* {isSubmitted ? (
+        <ThankYouCard onClose={onClose} />
+      ) : ( */}
+      <>
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          aria-label="Close survey"
+          className="absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600"
+        >
+          <img
+            src={icons.closeIcon}
+            alt="Close"
+            className="w-[16px] h-[16px] block"
+          />
+        </button>
+
+        {/* Centered Illustration */}
+        {icons?.surveyIcon && (
+          <div className="flex justify-center mb-3 mt-2">
+            <img
+              src={icons.surveyIcon}
+              alt="Survey Illustration"
+              className="w-[90px] h-[90px] block"
+            />
+          </div>
+        )}
+
+        {/* Centered Title */}
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+          Ayúdanos a mejorar
+        </h2>
+
+        {/* Centered Subtitle */}
+        <p className="text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto">
+          Basándote en tu experiencia de compra.
+          <br />
+          ¿Nos recomendarías a un amigo?
+        </p>
+
+        <ScoreButtons
+          selectedScore={selectedScore}
+          onScoreChange={onScoreChange}
+          buttonHeight={45}
+          fontSize={15}
+          colors={colors}
+        />
+
+        <FeedbackTextarea
+          config={config}
+          feedback={feedback}
+          onFeedbackChange={onFeedbackChange}
+          colors={colors}
+        />
+
+        {/* Centered Submit Button */}
+        <div className="flex justify-center mt-[20px]">
+          <div className="w-[180px]">
+            <KuposButton
+              isSoldOut={selectedScore == null}
+              isLoading={isLoading || false}
+              buttonColor={"#FF8E43"}
+              buyLabel="Enviar"
+              soldOutLabel="Enviar"
+              onClick={handleSubmit}
+            />
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </Modal>
+  );
+};
+
+export default SurveyDesktop;