kupos-ui-components-lib 9.10.0 → 9.10.2

package/src/ui/Survey/FeedbackTextarea.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { FeedbackConfig, MAX_CHARS } from "./constants";
+
+interface FeedbackTextareaProps {
+  config: FeedbackConfig | null;
+  feedback: string;
+  onFeedbackChange?: (text: string) => void;
+  colors?: {
+    primaryColor?: string;
+  };
+}
+
+const FeedbackTextarea = ({
+  config,
+  feedback,
+  onFeedbackChange,
+  colors,
+}: FeedbackTextareaProps) => {
+  if (!config) return null;
+  return (
+    <div style={{ position: "relative", marginTop: 42 }}>
+      <span
+        style={{
+          position: "absolute",
+          left: 16,
+          top: -10,
+          background: "#FFFFFF",
+          padding: "0 8px",
+          fontSize: "13.33px",
+          fontWeight: 600,
+          color: colors?.primaryColor || "#374151",
+          zIndex: 1,
+        }}
+      >
+        {config.question}
+      </span>
+
+      <div
+        style={{
+          border: "1.5px solid #E5E7EB",
+          borderRadius: 16,
+          overflow: "hidden",
+          position: "relative",
+          background: "transparent",
+        }}
+      >
+        <textarea
+          value={feedback}
+          onChange={(e) => {
+            if (e.target.value.length <= MAX_CHARS)
+              onFeedbackChange?.(e.target.value);
+          }}
+          placeholder="Déjanos tus comentarios (opcional)"
+          rows={4}
+          style={{
+            width: "100%",
+            padding: "16px 16px 28px",
+            background: "transparent",
+            color: "#374151",
+            fontSize: "13.33px",
+            resize: "none",
+            outline: "none",
+            border: "none",
+            boxSizing: "border-box" as const,
+            fontFamily: "inherit",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 8,
+            right: 16,
+            fontSize: 12,
+            color: "#9CA3AF",
+          }}
+        >
+          {feedback.length}/{MAX_CHARS}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackTextarea;

package/src/ui/Survey/HeartIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const HeartIcon = () => (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#22c55e"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+  </svg>
+);
+
+export default HeartIcon;

package/src/ui/Survey/ScoreButtons.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { getZoneColor, getZoneShadow } from "./constants";
+
+interface ScoreButtonsProps {
+  selectedScore?: number | null;
+  onScoreChange?: (score: number) => void;
+  buttonHeight?: number;
+  fontSize?: number;
+  gap?: number;
+  colors?: {
+    secondaryColor?: string;
+    primaryColor?: string;
+  };
+}
+
+const ScoreButtons = ({
+  selectedScore,
+  onScoreChange,
+  buttonHeight = 54,
+  fontSize = 15,
+  gap = 8,
+  colors,
+}: ScoreButtonsProps) => (
+  <div style={{ marginBottom: 4 }}>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(10, 1fr)",
+        gap,
+      }}
+    >
+      {Array.from({ length: 10 }, (_, i) => i + 1).map((num) => {
+        const isSelected = selectedScore === num;
+        const zoneColor = getZoneColor(num);
+        const activeColor = colors?.secondaryColor || zoneColor;
+        return (
+          <button
+            key={num}
+            onClick={() => onScoreChange?.(num)}
+            onMouseEnter={(e) => {
+              if (!isSelected) {
+                e.currentTarget.style.borderColor = activeColor;
+                e.currentTarget.style.color = activeColor;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isSelected) {
+                e.currentTarget.style.borderColor = "#E5E7EB";
+                e.currentTarget.style.color = "#111827";
+              }
+            }}
+            style={{
+              height: buttonHeight,
+              borderRadius: 10,
+              fontSize,
+              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
+                ? colors?.secondaryColor
+                  ? `0 2px 8px ${colors.secondaryColor}58`
+                  : getZoneShadow(num)
+                : "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxSizing: "border-box" as const,
+            }}
+          >
+            {num}
+          </button>
+        );
+      })}
+    </div>
+
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: 8,
+      }}
+    >
+      <span style={{ fontSize: 12, color: "#9CA3AF" }}>Poco probable</span>
+      <span style={{ fontSize: 12, color: "#9CA3AF" }}>Muy probable</span>
+    </div>
+  </div>
+);
+
+export default ScoreButtons;

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

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -25,7 +25,6 @@ interface DateTimeSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
-  isTrain?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -68,43 +67,41 @@ const TimeRow: React.FC<TimeRowProps> = ({
   isSoldOut,
 }) => {
   const formattedDate = DateService.getServiceItemDate(date);
-  const dotPositionClass = formattedDate.includes("dom")
-    ? "max-[399px]:left-[53%]"
-    : "";
-  return (
-    <div
-      className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
-        isSoldOut ? "text-[#c0c0c0]" : ""
-      }`}
-    >
-      <div className="flex items-center" style={{ flex: 1 }}>
-        <div>
-          {" "}
-          {label ? (
-            <div className="w-[60px]">{label}</div>
-          ) : (
-            <div className="w-[12px] h-auto mr-[5px]">
-              <img
-                src={icon}
-                alt={alt}
-                className={`w-[12px] h-auto mr-[5px] ${
-                  isSoldOut ? "grayscale" : ""
-                }`}
-              />
-            </div>
-          )}
-        </div>
-        <div
-          className="flex items-center relative capitalize justify-between"
-          style={{ flex: 1 }}
-        >
-          <span className="cursor-pointer black-text">{formattedDate}</span>
-          <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
-          <div className="font-[900] relative black-text">{timeContent}</div>
-        </div>
+  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+  return <div
+    className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
+      isSoldOut ? "text-[#c0c0c0]" : ""
+    }`}
+  >
+    <div className="flex items-center" style={{ flex: 1 }}>
+      <div>
+        {" "}
+        {label ? (
+          <div className="w-[60px]">{label}</div>
+        ) : (
+          <div className="w-[12px] h-auto mr-[5px]">
+            <img
+              src={icon}
+              alt={alt}
+              className={`w-[12px] h-auto mr-[5px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            />
+          </div>
+        )}
+      </div>
+      <div
+        className="flex items-center relative capitalize justify-between"
+        style={{ flex: 1 }}
+      >
+        <span className="cursor-pointer black-text">
+          {formattedDate}
+        </span>
+        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
+        <div className="font-[900] relative black-text">{timeContent}</div>
       </div>
     </div>
-  );
+  </div>;
 };
 
 function DateTimeSectionMobile({
@@ -130,7 +127,6 @@ function DateTimeSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
-  isTrain,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -157,12 +153,8 @@ function DateTimeSectionMobile({
     >
       {/* DATE AND TIME */}
       <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,
-        }}
+        className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
+        style={{ justifyContent: isCiva && "center" }}
       >
         <TimeRow
           label={orignLabel}
@@ -206,7 +198,6 @@ function DateTimeSectionMobile({
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
         discountSeatPriceColor={discountSeatPriceColor}
-        isTrain={isTrain}
       />
     </div>
   );