@greatapps/greatagents-ui 0.3.7 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/capabilities/integration-wizard.tsx

@@ -218,49 +218,64 @@ export function IntegrationWizard({
   // OAuth start
   // -----------------------------------------------------------------------
 
-  function startOAuth() {
-    const { language = "pt-br", idWl = 1, accountId } = config;
-
-    // Build OAuth authorize URL -- the backend already handles the full flow
-    const redirectUri = `${window.location.origin}/oauth/callback`;
-    const url = new URL(
-      `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`,
-    );
-    url.searchParams.set("redirect_uri", redirectUri);
+  async function startOAuth() {
+    const { language = "pt-br", idWl = 1, accountId, token } = config;
 
     setOauthStatus("waiting");
 
-    // Open popup
-    const popup = window.open(
-      url.toString(),
-      "oauth-popup",
-      "width=500,height=600,scrollbars=yes,resizable=yes",
-    );
-    popupRef.current = popup;
-
-    // Poll for popup closed without completing
-    if (popup) {
-      // Clear any previous poll interval
-      if (popupPollRef.current) {
-        clearInterval(popupPollRef.current);
+    try {
+      // 1. Get auth URL from backend
+      const response = await fetch(
+        `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`,
+        { headers: { Authorization: `Bearer ${token}` } },
+      );
+      const result = await response.json();
+
+      if (result.status !== 1 || !result.data?.auth_url) {
+        setOauthStatus("error");
+        setOauthResult({
+          success: false,
+          error: result.message || "Erro ao obter URL de autorização",
+        });
+        return;
       }
-      popupPollRef.current = setInterval(() => {
-        if (popup.closed) {
-          if (popupPollRef.current) {
-            clearInterval(popupPollRef.current);
-            popupPollRef.current = null;
-          }
-          // Only set error if we're still waiting (no success message received)
-          setOauthStatus((prev) =>
-            prev === "waiting" ? "error" : prev,
-          );
-          setOauthResult((prev) =>
-            prev === null
-              ? { success: false, error: "Janela fechada antes de concluir" }
-              : prev,
-          );
+
+      // 2. Open auth URL in popup
+      const popup = window.open(
+        result.data.auth_url,
+        "oauth-popup",
+        "width=500,height=600,scrollbars=yes,resizable=yes",
+      );
+      popupRef.current = popup;
+
+      // Poll for popup closed without completing
+      if (popup) {
+        if (popupPollRef.current) {
+          clearInterval(popupPollRef.current);
         }
-      }, 500);
+        popupPollRef.current = setInterval(() => {
+          if (popup.closed) {
+            if (popupPollRef.current) {
+              clearInterval(popupPollRef.current);
+              popupPollRef.current = null;
+            }
+            setOauthStatus((prev) =>
+              prev === "waiting" ? "error" : prev,
+            );
+            setOauthResult((prev) =>
+              prev === null
+                ? { success: false, error: "Janela fechada antes de concluir" }
+                : prev,
+            );
+          }
+        }, 500);
+      }
+    } catch (err) {
+      setOauthStatus("error");
+      setOauthResult({
+        success: false,
+        error: "Erro de rede ao obter URL de autorização",
+      });
     }
   }
 

package/src/components/capabilities/wizard-steps/credentials-step.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { CheckCircle2, Loader2, AlertCircle, Shield, Info } from "lucide-react";
-import { Button, Input, Label, Tooltip, TooltipTrigger, TooltipContent } from "@greatapps/greatauth-ui/ui";
+import { CheckCircle2, Loader2, AlertCircle, Shield } from "lucide-react";
+import { Button, Input, Label } from "@greatapps/greatauth-ui/ui";
 import type { IntegrationDefinition } from "../../../data/integrations-registry";
 import type { WizardIntegrationMeta, OAuthStatus, OAuthResult } from "../types";
 
@@ -14,8 +14,6 @@ interface CredentialsStepProps {
   onApiKeyChange: (value: string) => void;
   onStartOAuth: () => void;
   isReconnect?: boolean;
-  /** When true, the OAuth authorize endpoint is available on the backend. */
-  oauthConfigured?: boolean;
 }
 
 export function CredentialsStep({
@@ -27,7 +25,6 @@ export function CredentialsStep({
   onApiKeyChange,
   onStartOAuth,
   isReconnect = false,
-  oauthConfigured = false,
 }: CredentialsStepProps) {
   if (integration.authType === "oauth2") {
     return (
@@ -38,7 +35,6 @@ export function CredentialsStep({
         oauthResult={oauthResult}
         onStartOAuth={onStartOAuth}
         isReconnect={isReconnect}
-        oauthConfigured={oauthConfigured}
       />
     );
   }
@@ -57,7 +53,6 @@ function OAuthCredentials({
   oauthResult,
   onStartOAuth,
   isReconnect,
-  oauthConfigured,
 }: {
   integration: IntegrationDefinition;
   meta: WizardIntegrationMeta;
@@ -65,7 +60,6 @@ function OAuthCredentials({
   oauthResult: OAuthResult | null;
   onStartOAuth: () => void;
   isReconnect: boolean;
-  oauthConfigured: boolean;
 }) {
   const providerLabel = meta.providerLabel || integration.name;
 
@@ -80,51 +74,19 @@ function OAuthCredentials({
         </p>
       </div>
 
-      {/* OAuth not configured notice */}
-      {!oauthConfigured && oauthStatus === "idle" && (
-        <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/30">
-          <Info
-            aria-hidden="true"
-            className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400"
-          />
-          <div className="space-y-1">
-            <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-              Configuração necessária
-            </p>
-            <p className="text-xs text-amber-700 dark:text-amber-300">
-              A integração com {providerLabel} requer configuração pelo
-              administrador do sistema. Entre em contato com o suporte para
-              ativar esta funcionalidade.
-            </p>
-          </div>
-        </div>
-      )}
-
       {/* OAuth status area */}
       <div className="flex flex-col items-center gap-4 rounded-lg border p-6">
         {oauthStatus === "idle" && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span tabIndex={!oauthConfigured ? 0 : undefined}>
-                <Button
-                  onClick={onStartOAuth}
-                  size="lg"
-                  className="gap-2"
-                  disabled={!oauthConfigured}
-                >
-                  {meta.icon}
-                  {isReconnect
-                    ? `Reconectar com ${providerLabel}`
-                    : `Conectar com ${providerLabel}`}
-                </Button>
-              </span>
-            </TooltipTrigger>
-            {!oauthConfigured && (
-              <TooltipContent>
-                Integração OAuth ainda não configurada no servidor
-              </TooltipContent>
-            )}
-          </Tooltip>
+          <Button
+            onClick={onStartOAuth}
+            size="lg"
+            className="gap-2"
+          >
+            {meta.icon}
+            {isReconnect
+              ? `Reconectar com ${providerLabel}`
+              : `Conectar com ${providerLabel}`}
+          </Button>
         )}
 
         {oauthStatus === "waiting" && (