kupos-ui-components-lib 9.9.10 → 9.10.1

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -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/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 { 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,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: 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 },
+        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

@@ -33,9 +33,6 @@
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
-.-top-\[12px\] {
-  top: calc(12px * -1);
-}
 .-top-\[13px\] {
   top: calc(13px * -1);
 }

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/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/package.json

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

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -230,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/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -24,10 +24,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
   isConexion,
 }) => {
   return (
-    <div className="absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
+    <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
       {showTopLabel && (
         <div
-          className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
+          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