White Label Integration

1
import { useState } from 'react';
2
import { Button } from '@/components/ui/button';
3
import { ExternalLink } from 'lucide-react';
4
5
interface ConnectServiceProps {
6
  customerId: string;
7
  integrationId: string;
8
}
9
10
export function ConnectService({ customerId, integrationId }: ConnectServiceProps) {
11
  const [connecting, setConnecting] = useState(false);
12
13
  const handleConnect = async () => {
14
    try {
15
      setConnecting(true);
16
17
      // Get the branded OAuth URL
18
      const response = await fetch(
19
        `/api/integrations/${integrationId}/auth-url?customer=${customerId}`,
20
        { headers: { 'Authorization': `Bearer ${apiKey}` } }
21
      );
22
23
      const { authUrl } = await response.json();
24
25
      // Redirect to branded OAuth flow
26
      window.location.href = authUrl;
27
28
    } catch (error) {
29
      console.error('Failed to initiate connection:', error);
30
    } finally {
31
      setConnecting(false);
32
    }
33
  };
34
35
  return (
36
    <Button
37
      onClick={handleConnect}
38
      disabled={connecting}
39
      className="w-full"
40
    >
41
      {connecting ? (
42
        'Connecting...'
43
      ) : (
44
        <>
45
          Connect Google Drive <ExternalLink className="ml-2 h-4 w-4" />
46
        </>
47
      )}
48
    </Button>
49
  );
50
}