kupos-ui-components-lib 9.10.0 → 9.10.2

package/dist/KuposUIComponent.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 interface KuposUIComponentProps {
-    typeOfComponent: "serviceitem" | "paymentsidebar" | "servicelist" | "filterbar";
+    typeOfComponent: "serviceitem" | "paymentsidebar" | "servicelist" | "filterbar" | "survey" | "cuponerafilterbar";
     variant?: "mobile" | "desktop";
     serviceItem?: any;
     onBookButtonPress?: () => void;
@@ -82,6 +82,19 @@ interface KuposUIComponentProps {
         sortOrder?: "asc" | "desc";
     };
     onFilterChange?: (filters: any) => void;
+    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;
 }
 export default function KuposUIComponent(props: KuposUIComponentProps): React.ReactElement;
 export {};

package/dist/KuposUIComponent.js

@@ -15,6 +15,7 @@ import { ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ResponsiveServiceList } from "./components/ServiceList";
 import { ResponsiveFilterBar } from "./components/FilterBar";
 import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+import { ResponsiveSurvey } from "./components/Survey";
 // Using imported ResponsivePaymentSideBar component instead
 export default function KuposUIComponent(props) {
     const { typeOfComponent } = props, restProps = __rest(props, ["typeOfComponent"]);
@@ -29,6 +30,8 @@ export default function KuposUIComponent(props) {
             return (React.createElement(ResponsiveFilterBar, Object.assign({}, restProps)));
         case "cuponerafilterbar":
             return (React.createElement(ResponsiveCuponeraFilterBar, Object.assign({}, restProps)));
+        case "survey":
+            return React.createElement(ResponsiveSurvey, Object.assign({}, restProps));
         default:
             return (React.createElement("div", { className: "error-message" },
                 "Invalid component type: ",

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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, 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, 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,12 +87,8 @@ 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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, 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, 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];
@@ -231,16 +227,6 @@ 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 = [
@@ -307,13 +293,9 @@ 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, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor })),
+                        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("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, operatorLabel, isTrain, 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, 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, operatorLabel, isTrain, 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, 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;
@@ -106,7 +106,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
             React.createElement("div", { style: {
                     padding: "12px 12px 8px 12px",
-                    marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && showTopLabel && isConexion
+                    marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (showTopLabel || isConexion)
                         ? " 10px"
                         : "",
                 } },

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Modal } from "../../ui/Modal";
-import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import { 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)
@@ -11,20 +11,21 @@ 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: 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 })))))));
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, variant: "center", size: "lg", maxWidth: 550, padding: isSubmitted ? 0 : "40px 48px 36px", borderRadius: 28, closeOnBackdrop: false },
+        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.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BottomSheet } from "../../ui/BottomSheet";
-import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import { 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)
@@ -11,20 +11,21 @@ const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedb
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(selectedScore, feedback);
         }
     };
-    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("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("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 })))))));
+    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" },
+        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: 44, fontSize: 13, gap: 6, colors: colors }),
+            React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
+            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/index.d.ts

@@ -6,9 +6,13 @@ import KuposUIComponent from "./KuposUIComponent";
 import { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ServiceListDesktop, ServiceListMobile, ResponsiveServiceList } from "./components/ServiceList";
 import { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar } from "./components/FilterBar";
-export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, };
+import { SurveyDesktop, SurveyMobile, ResponsiveSurvey } from "./components/Survey";
+import { Modal, ModalHeader } from "./ui/Modal";
+export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, SurveyDesktop, SurveyMobile, ResponsiveSurvey, Modal, ModalHeader, };
 export type { ServiceItemProps } from "./types";
 export type { MobileServiceItemProps } from "./components/ServiceItem/mobileTypes";
 export type { PaymentSideBarProps } from "./components/PaymentSideBar/types";
 export type { ServiceListProps } from "./components/ServiceList/types";
 export type { FilterBarProps } from "./components/FilterBar/tyoes";
+export type { SurveyProps } from "./components/Survey/types";
+export type { ModalProps, ModalVariant, ModalSize, ModalHeaderProps } from "./ui/Modal";

package/dist/index.js

@@ -9,10 +9,18 @@ import { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar,
 import { ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, } from "./components/ServiceList";
 // Import FilterBar components
 import { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, } from "./components/FilterBar";
+// Import Survey components
+import { SurveyDesktop, SurveyMobile, ResponsiveSurvey, } from "./components/Survey";
+// Import Modal components
+import { Modal, ModalHeader } from "./ui/Modal";
 export { ServiceItemDesktop, ServiceItemMobile, ResponsiveServiceItem, ServiceItemPBMobile, KuposUIComponent, 
 // PaymentSideBar components
 PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, 
 // ServiceList components
 ServiceListDesktop, ServiceListMobile, ResponsiveServiceList, 
 // FilterBar components
-FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, };
+FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar, 
+//Survey components
+SurveyDesktop, SurveyMobile, ResponsiveSurvey, 
+// Modal components
+Modal, ModalHeader, };

package/dist/styles.css

@@ -33,9 +33,6 @@
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
-.-top-\[12px\] {
-  top: calc(12px * -1);
-}
 .-top-\[13px\] {
   top: calc(13px * -1);
 }
@@ -48,6 +45,9 @@
 .top-\[5px\] {
   top: 5px;
 }
+.top-\[15px\] {
+  top: 15px;
+}
 .top-\[16px\] {
   top: 16px;
 }
@@ -75,6 +75,9 @@
 .right-\[18px\] {
   right: 18px;
 }
+.right-\[25px\] {
+  right: 25px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -387,6 +390,9 @@
 .h-\[30px\] {
   height: 30px;
 }
+.h-\[90px\] {
+  height: 90px;
+}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -447,6 +453,9 @@
 .w-\[80\%\] {
   width: 80%;
 }
+.w-\[90px\] {
+  width: 90px;
+}
 .w-\[100\%\] {
   width: 100%;
 }
@@ -459,6 +468,9 @@
 .w-\[150px\] {
   width: 150px;
 }
+.w-\[180px\] {
+  width: 180px;
+}
 .w-\[188px\] {
   width: 188px;
 }
@@ -497,6 +509,9 @@
 .max-w-\[220px\] {
   max-width: 220px;
 }
+.max-w-\[460px\] {
+  max-width: 460px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -539,6 +554,9 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.resize {
+  resize: both;
+}
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
@@ -999,9 +1017,6 @@
 .text-right {
   text-align: right;
 }
-.text-\[9px\] {
-  font-size: 9px;
-}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -1054,6 +1069,14 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[1\.4\] {
+  --tw-leading: 1.4;
+  line-height: 1.4;
+}
+.leading-\[1\.25\] {
+  --tw-leading: 1.25;
+  line-height: 1.25;
+}
 .leading-\[14px\] {
   --tw-leading: 14px;
   line-height: 14px;
@@ -1154,6 +1177,9 @@
 .uppercase {
   text-transform: uppercase;
 }
+.italic {
+  font-style: italic;
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);

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

@@ -3,8 +3,6 @@ interface SeatType {
     label: string;
     fare: number;
     key: any;
-    apiSeatType?: string;
-    api_seat_type?: string;
 }
 interface SeatSectionProps {
     seatTypes: SeatType[];
@@ -18,10 +16,6 @@ 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, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -8,13 +8,11 @@ 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, isTrain) {
+function getSortedSeatTypes(seatTypes) {
     if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
         return [{ label: "Salon cama", price: 0 }];
     }
@@ -23,9 +21,7 @@ function getSortedSeatTypes(seatTypes, isTrain) {
     if (premiumIndex >= 3) {
         seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
     }
-    if (!isTrain) {
-        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-    }
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
     const seenPrices = new Set();
     seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
         if (seenPrices.has(seat.price))
@@ -58,10 +54,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, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
-    const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
     const numberOfSeats = getNumberOfSeats(seatTypes);
     const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
     const formatPrice = (price) => availableSeats <= 0
@@ -69,36 +65,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         : CommonService.currency(price, currencySign);
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-        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)));
-        });
+        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)));
     };
     const renderSeatPrices = () => {
         if (isPeru) {

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

@@ -22,7 +22,6 @@ 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, isTrain, }: 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, }: DateTimeSectionMobileProps): React.ReactElement;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -23,10 +23,8 @@ 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,
                 " ",
@@ -35,9 +33,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, isTrain, }) {
+function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -49,11 +47,7 @@ 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: `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("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
             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: {
@@ -62,6 +56,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, isTrain: isTrain })));
+        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 })));
 }
 export default DateTimeSectionMobile;

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

@@ -16,7 +16,6 @@ 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, isTrain, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;