kupos-ui-components-lib 9.9.10 → 9.10.0

package/dist/components/ServiceItem/ServiceItemDesktop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,8 +87,12 @@ const ANIMATION_MAP = {
         kupos: flameAnimation,
     },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
     var _a, _b, _c;
+    const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
+        onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
+        onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
+    };
     const getAnimationIcon = (icon) => {
         var _a;
         const animation = ANIMATION_MAP[icon];
@@ -227,6 +231,16 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             });
             return;
         }
+        if (isTrain) {
+            if (!selectedSeatKey) {
+                onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
+                return;
+            }
+            if (onTrainButtonClick) {
+                onTrainButtonClick();
+                return;
+            }
+        }
         onBookButtonPress();
     };
     const items = [
@@ -293,9 +307,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
+                        React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor })),
                     React.createElement("div", { className: "relative" },
                         React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
+                        showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
+                            React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
+                                    color: colors.seatPriceColor,
+                                } }, "Selecciona el tipo de servicio"))),
                         showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px]  mt-1 text-center", style: {
                                 color: colors.seatPriceColor,

package/dist/components/ServiceItem/ServiceItemMobile.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -18,7 +18,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;

package/dist/components/ServiceItem/mobileTypes.d.ts

@@ -215,6 +215,8 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    operatorLabel?: string;
+    isTrain?: boolean;
     isFeatureDropDownExpand?: any;
     setIsFeatureDropDownExpand?: (value: any) => void;
     ticketQuantity?: number;

package/dist/components/ServiceItem/types.d.ts

@@ -245,6 +245,13 @@ 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/dist/components/Survey/SurveyDesktop.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SurveyProps } from "./types";
-declare const SurveyDesktop: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, }: SurveyProps) => React.JSX.Element;
+declare const SurveyDesktop: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }: SurveyProps) => React.JSX.Element;
 export default SurveyDesktop;

package/dist/components/Survey/SurveyDesktop.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Modal } from "../../ui/Modal";
-import { ThankYouCard, SurveyHeader, ScoreButtons, FeedbackBanner, FeedbackTextarea, SurveyFooter, getFeedbackConfig, } from "../../ui/Survey";
-const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, }) => {
+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, }) => {
     if (!isOpen)
         return null;
     const config = getFeedbackConfig(selectedScore);
@@ -10,27 +11,20 @@ const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feed
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(selectedScore, feedback);
         }
     };
-    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, variant: "center", size: "lg", maxWidth: 640, padding: isSubmitted ? 0 : "32px 36px 28px", borderRadius: 24, closeOnBackdrop: false }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose })) : (React.createElement(React.Fragment, null,
-        React.createElement(SurveyHeader, { onClose: onClose }),
-        React.createElement("h2", { style: {
-                fontSize: "22px",
-                lineHeight: 1.25,
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-            } },
-            "\u00BFQu\u00E9 tan probable es que",
-            " ",
-            React.createElement("em", { style: {
-                    color: colors === null || colors === void 0 ? void 0 : colors.secondaryColor,
-                } }, "recomiendes"),
-            " ",
-            "a un amigo?"),
-        React.createElement("p", { className: "text-[13.33px]", style: {
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 20,
-            } }, "Pulsa un n\u00FAmero: 1 significa en absoluto, 10 significa absolutamente."),
-        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 54, fontSize: 15 }),
-        React.createElement(FeedbackBanner, { config: config }),
-        React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-        React.createElement(SurveyFooter, { selectedScore: selectedScore, onSkip: onSkip, onSubmit: handleSubmit, colors: colors })))));
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, variant: "center", size: "lg", maxWidth: 550, padding: isSubmitted ? 0 : "40px 48px 36px", borderRadius: 28, closeOnBackdrop: false }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose })) : (React.createElement(React.Fragment, null,
+        React.createElement("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" },
+            React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
+        (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
+        React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+        React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+            "Bas\u00E1ndote en tu experiencia de compra.",
+            React.createElement("br", null),
+            "\u00BFNos recomendar\u00EDas a un amigo?"),
+        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 45, fontSize: 15, colors: colors }),
+        React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange, colors: colors }),
+        React.createElement("div", { className: "flex justify-center mt-[20px]" },
+            React.createElement("div", { className: "w-[180px]" },
+                React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit })))))));
 };
 export default SurveyDesktop;

package/dist/components/Survey/SurveyMobile.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SurveyProps } from "./types";
-declare const SurveyMobile: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, }: SurveyProps) => React.JSX.Element;
+declare const SurveyMobile: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }: SurveyProps) => React.JSX.Element;
 export default SurveyMobile;

package/dist/components/Survey/SurveyMobile.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { BottomSheet } from "../../ui/BottomSheet";
-import { ThankYouCard, SurveyHeader, ScoreButtons, FeedbackBanner, FeedbackTextarea, SurveyFooter, getFeedbackConfig, } from "../../ui/Survey";
-const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, }) => {
+import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }) => {
     if (!isOpen)
         return null;
     const config = getFeedbackConfig(selectedScore);
@@ -11,29 +12,19 @@ const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedb
         }
     };
     return (React.createElement(BottomSheet, { isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false, onClose: onClose, showHandle: true, showBackdrop: false, blurBackground: true, blurAmount: "2px", padding: isSubmitted ? 0 : "0 20px 32px" }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose, titleFontSize: "1.35rem" })) : (React.createElement(React.Fragment, null,
-        React.createElement(SurveyHeader, { onClose: onClose }),
-        React.createElement("h2", { style: {
-                fontSize: "1.35rem",
-                fontWeight: 800,
-                lineHeight: 1.3,
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 12,
-            } },
-            "\u00BFQu\u00E9 tan probable es que",
-            " ",
-            React.createElement("em", { style: {
-                    color: colors === null || colors === void 0 ? void 0 : colors.secondaryColor,
-                } }, "recomiendes"),
-            " ",
-            "a un amigo?"),
-        React.createElement("p", { style: {
-                fontSize: "13.33px",
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 16,
-            } }, "Pulsa un n\u00FAmero: 1 significa en absoluto, 10 significa absolutamente."),
-        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6 }),
-        React.createElement(FeedbackBanner, { config: config }),
+        React.createElement("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" },
+            React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
+        (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
+        React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+        React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+            "Bas\u00E1ndote en tu experiencia de compra.",
+            React.createElement("br", null),
+            "\u00BFNos recomendar\u00EDas a un amigo?"),
+        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6, colors: colors }),
         React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-        React.createElement(SurveyFooter, { selectedScore: selectedScore, onSkip: onSkip, onSubmit: handleSubmit, colors: colors, layout: "stacked" })))));
+        React.createElement("div", { className: "flex justify-center mt-[20px]" },
+            React.createElement("div", { className: "w-[180px]" },
+                React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit })))))));
 };
 export default SurveyMobile;

package/dist/components/Survey/types.d.ts

@@ -15,4 +15,8 @@ export interface SurveyProps {
         tertiaryColor?: string;
         primaryColor?: string;
     };
+    icons?: {
+        surveyIcon?: string;
+        closeIcon?: string;
+    };
 }

package/dist/styles.css

@@ -999,6 +999,9 @@
 .text-right {
   text-align: right;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-\[10px\] {
   font-size: 10px;
 }

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

@@ -3,6 +3,8 @@ interface SeatType {
     label: string;
     fare: number;
     key: any;
+    apiSeatType?: string;
+    api_seat_type?: string;
 }
 interface SeatSectionProps {
     seatTypes: SeatType[];
@@ -16,6 +18,10 @@ interface SeatSectionProps {
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
+    selectedSeatKey?: any;
+    onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
+    topLabelColor?: string;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -8,11 +8,13 @@ function getAllSeatTypes(seatTypes) {
     let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
         label: val === null || val === void 0 ? void 0 : val.label,
         price: val === null || val === void 0 ? void 0 : val.fare,
+        key: val === null || val === void 0 ? void 0 : val.key,
+        apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
     }));
     seatTypesWithPrices.sort((a, b) => a.price - b.price);
     return seatTypesWithPrices;
 }
-function getSortedSeatTypes(seatTypes) {
+function getSortedSeatTypes(seatTypes, isTrain) {
     if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
         return [{ label: "Salon cama", price: 0 }];
     }
@@ -21,7 +23,9 @@ function getSortedSeatTypes(seatTypes) {
     if (premiumIndex >= 3) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    if (!isTrain) {
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+    }
     const seenPrices = new Set();
     seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
         if (seenPrices.has(seat.price))
@@ -54,10 +58,10 @@ 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, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
-    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
     const numberOfSeats = getNumberOfSeats(seatTypes);
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
@@ -65,11 +69,36 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         : CommonService.currency(price, currencySign);
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-        return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : val.label
-            : null)));
+        return seats.map((val, key) => {
+            return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
+                    ? () => val.label === selectedSeatKey
+                        ? onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(null, 0, "", "")
+                        : onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price, val.key, val.apiSeatType)
+                    : undefined },
+                isTrain && (React.createElement("div", { style: {
+                        border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                        borderRadius: "50%",
+                        width: "14px",
+                        height: "14px",
+                        minWidth: "14px",
+                        marginRight: "10px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
+                        backgroundColor: topLabelColor,
+                        borderRadius: "50%",
+                        width: "7px",
+                        height: "7px",
+                    } })))),
+                React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+                    ? removeDuplicateSeats && isPeru
+                        ? CommonService.truncateSeatLabel(val.label)
+                        : isTrain
+                            ? CommonService.truncateSeatLabel(CommonService.capitalize(String(val.label)), 8)
+                            : val.label
+                    : null)));
+        });
     };
     const renderSeatPrices = () => {
         if (isPeru) {

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

@@ -4,6 +4,9 @@ interface FeedbackTextareaProps {
     config: FeedbackConfig | null;
     feedback: string;
     onFeedbackChange?: (text: string) => void;
+    colors?: {
+        primaryColor?: string;
+    };
 }
-declare const FeedbackTextarea: ({ config, feedback, onFeedbackChange, }: FeedbackTextareaProps) => React.JSX.Element;
+declare const FeedbackTextarea: ({ config, feedback, onFeedbackChange, colors, }: FeedbackTextareaProps) => React.JSX.Element;
 export default FeedbackTextarea;

package/dist/ui/Survey/FeedbackTextarea.js

@@ -1,35 +1,33 @@
 import React from "react";
 import { MAX_CHARS } from "./constants";
-const FeedbackTextarea = ({ config, feedback, onFeedbackChange, }) => {
+const FeedbackTextarea = ({ config, feedback, onFeedbackChange, colors, }) => {
     if (!config)
         return null;
-    return (React.createElement("div", { style: { marginTop: 16 } },
-        React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginBottom: 8,
-            } },
-            React.createElement("span", { style: { fontWeight: 700, color: "#111827", fontSize: "13.33px" } }, config.question),
-            React.createElement("span", { style: {
-                    fontSize: 12,
-                    color: "#6B7280",
-                    background: "#F3F4F6",
-                    borderRadius: 6,
-                    padding: "2px 8px",
-                } }, "Opcional")),
+    return (React.createElement("div", { style: { position: "relative", marginTop: 42 } },
+        React.createElement("span", { style: {
+                position: "absolute",
+                left: 16,
+                top: -10,
+                background: "#FFFFFF",
+                padding: "0 8px",
+                fontSize: "13.33px",
+                fontWeight: 600,
+                color: (colors === null || colors === void 0 ? void 0 : colors.primaryColor) || "#374151",
+                zIndex: 1,
+            } }, config.question),
         React.createElement("div", { style: {
                 border: "1.5px solid #E5E7EB",
-                borderRadius: 14,
+                borderRadius: 16,
                 overflow: "hidden",
                 position: "relative",
+                background: "transparent",
             } },
             React.createElement("textarea", { value: feedback, onChange: (e) => {
                     if (e.target.value.length <= MAX_CHARS)
                         onFeedbackChange === null || onFeedbackChange === void 0 ? void 0 : onFeedbackChange(e.target.value);
-                }, placeholder: config.placeholder, rows: 4, style: {
+                }, placeholder: "D\u00E9janos tus comentarios (opcional)", rows: 4, style: {
                     width: "100%",
-                    padding: "12px 12px 28px",
+                    padding: "16px 16px 28px",
                     background: "transparent",
                     color: "#374151",
                     fontSize: "13.33px",
@@ -42,12 +40,12 @@ const FeedbackTextarea = ({ config, feedback, onFeedbackChange, }) => {
             React.createElement("div", { style: {
                     position: "absolute",
                     bottom: 8,
-                    right: 12,
+                    right: 16,
                     fontSize: 12,
                     color: "#9CA3AF",
                 } },
                 feedback.length,
-                " / ",
+                "/",
                 MAX_CHARS))));
 };
 export default FeedbackTextarea;

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

@@ -5,6 +5,10 @@ interface ScoreButtonsProps {
     buttonHeight?: number;
     fontSize?: number;
     gap?: number;
+    colors?: {
+        secondaryColor?: string;
+        primaryColor?: string;
+    };
 }
-declare const ScoreButtons: ({ selectedScore, onScoreChange, buttonHeight, fontSize, gap, }: ScoreButtonsProps) => React.JSX.Element;
+declare const ScoreButtons: ({ selectedScore, onScoreChange, buttonHeight, fontSize, gap, colors, }: ScoreButtonsProps) => React.JSX.Element;
 export default ScoreButtons;

package/dist/ui/Survey/ScoreButtons.js

@@ -1,6 +1,6 @@
 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 } },
+const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSize = 15, gap = 8, colors, }) => (React.createElement("div", { style: { marginBottom: 4 } },
     React.createElement("div", { style: {
             display: "grid",
             gridTemplateColumns: "repeat(10, 1fr)",
@@ -8,10 +8,11 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
         } }, Array.from({ length: 10 }, (_, i) => i + 1).map((num) => {
         const isSelected = selectedScore === num;
         const zoneColor = getZoneColor(num);
+        const activeColor = (colors === null || colors === void 0 ? void 0 : colors.secondaryColor) || zoneColor;
         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;
+                    e.currentTarget.style.borderColor = activeColor;
+                    e.currentTarget.style.color = activeColor;
                 }
             }, onMouseLeave: (e) => {
                 if (!isSelected) {
@@ -20,15 +21,18 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
                 }
             }, style: {
                 height: buttonHeight,
-                borderRadius: 14,
+                borderRadius: 10,
                 fontSize,
-                fontWeight: 600,
-                border: isSelected ? "none" : "1.5px solid #E5E7EB",
-                background: isSelected ? zoneColor : "#FFFFFF",
+                border: isSelected ? "none" : "1px solid #E5E7EB",
+                background: isSelected ? activeColor : "#FFFFFF",
                 color: isSelected ? "#FFFFFF" : "#111827",
                 cursor: "pointer",
                 transition: "border-color 0.15s, color 0.15s, background 0.15s",
-                boxShadow: isSelected ? getZoneShadow(num) : "none",
+                boxShadow: isSelected
+                    ? (colors === null || colors === void 0 ? void 0 : colors.secondaryColor)
+                        ? `0 2px 8px ${colors.secondaryColor}58`
+                        : getZoneShadow(num)
+                    : "none",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -40,6 +44,6 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
             justifyContent: "space-between",
             marginTop: 8,
         } },
-        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "No es probable"),
+        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "Poco probable"),
         React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "Muy probable"))));
 export default ScoreButtons;

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

@@ -1,5 +1,5 @@
 export declare const BRAND = "#E84C0D";
-export declare const MAX_CHARS = 500;
+export declare const MAX_CHARS = 250;
 export type FeedbackConfig = {
     emoji: string;
     message: string;

package/dist/ui/Survey/constants.js

@@ -1,5 +1,5 @@
 export const BRAND = "#E84C0D";
-export const MAX_CHARS = 500;
+export const MAX_CHARS = 250;
 export const getZoneColor = (num) => {
     if (num <= 6)
         return "#E84C0D";

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

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

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -23,8 +23,10 @@ const getCleanedDepTime = (raw) => {
 };
 const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
     const formattedDate = DateService.getServiceItemDate(date);
-    const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
-    return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+    const dotPositionClass = formattedDate.includes("dom")
+        ? "max-[399px]:left-[53%]"
+        : "";
+    return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
         React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
             React.createElement("div", null,
                 " ",
@@ -33,9 +35,9 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
             React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
                 React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
                 React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
-                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
+                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
 };
-function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -47,7 +49,11 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
             ? null
             : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
     return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
-        React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
+        React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
+                justifyContent: isCiva && "center",
+                minHeight: isTrain ? undefined : "2.5rem",
+                alignSelf: isTrain ? "stretch" : undefined,
+            } },
             React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
             isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
         React.createElement("div", { style: {
@@ -56,6 +62,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 backgroundColor: "#ccc",
                 margin: "auto",
             } }),
-        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor })));
+        React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain })));
 }
 export default DateTimeSectionMobile;

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

@@ -16,6 +16,7 @@ interface SeatSectionMobileProps {
     tooltipBgColor?: string;
     showLastSeats?: boolean;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;