kupos-ui-components-lib 9.10.1 → 9.10.3

package/src/ui/Survey/SurveyFooter.tsx

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

package/src/ui/Survey/SurveyHeader.tsx

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

package/src/ui/Survey/ThankYouCard.tsx

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

package/src/ui/Survey/constants.ts

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

package/src/ui/Survey/index.ts

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