kupos-ui-components-lib 9.10.1 → 9.10.2

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";