Changes

Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>

src/components/mika/telegram/StepConfiguring.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { invokeFunction } from "@/lib/invoke-function";
+
+interface Props {
+  onConfigured: () => void;
+  onSkip: () => void;
+}
+
+export function StepConfiguring({ onConfigured, onSkip }: Props) {
+  const [state, setState] = useState<"loading" | "error">("loading");
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setState("loading");
+    setError(null);
+
+    (async () => {
+      const { error: err } = await invokeFunction("configure-telegram-webhook");
+      if (cancelled) return;
+      if (err) {
+        setError(err.message);
+        setState("error");
+        return;
+      }
+      window.setTimeout(() => {
+        if (!cancelled) onConfigured();
+      }, 800);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [attempt, onConfigured]);
+
+  return (
+    <div className="px-6 py-12 flex flex-col items-center justify-center min-h-[320px]">
+      {state === "loading" && (
+        <>
+          <Loader2 className="h-10 w-10 text-primary animate-spin" />
+          <p className="mt-4 text-sm text-muted-foreground">
+            Configurando recebimento de mensagens...
+          </p>
+        </>
+      )}
+
+      {state === "error" && (
+        <div className="w-full max-w-md rounded-lg border border-destructive bg-destructive/5 p-6 text-center">
+          <AlertCircle className="mx-auto h-8 w-8 text-destructive" />
+          <h3 className="mt-3 font-semibold">Falha ao configurar webhook</h3>
+          {error && <p className="mt-2 text-sm text-muted-foreground">{error}</p>}
+          <div className="mt-5 flex flex-col sm:flex-row gap-2 justify-center">
+            <Button onClick={() => setAttempt((a) => a + 1)}>Tentar novamente</Button>
+            <Button variant="ghost" onClick={onSkip}>
+              Pular (configurar depois)
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}