@visns-studio/visns-components 5.15.10 → 5.15.12

package/src/components/oauth/OAuthProviderCard.jsx

@@ -0,0 +1,291 @@
+import React, { useState } from 'react';
+import { 
+    Ticket, 
+    Building2, 
+    Cloud, 
+    Link, 
+    CheckCircle, 
+    XCircle, 
+    AlertCircle, 
+    Loader,
+    RefreshCw,
+    TestTube,
+    Download,
+    Upload,
+    ArrowRightLeft,
+    Users,
+    Building
+} from 'lucide-react';
+import OAuthConnectionStatus from './OAuthConnectionStatus';
+import styles from '../styles/OAuthProviderCard.module.scss';
+
+const OAuthProviderCard = ({
+    provider,
+    isConnected,
+    connectionStatus,
+    isSyncing,
+    onConnect,
+    onDisconnect,
+    onTest,
+    onSync,
+    onOpenWizard,
+    compact = false,
+}) => {
+    const [isTestingConnection, setIsTestingConnection] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+
+    const handleTestConnection = async () => {
+        setIsTestingConnection(true);
+        setTestResult(null);
+        
+        try {
+            const result = await onTest();
+            setTestResult(result);
+        } finally {
+            setIsTestingConnection(false);
+        }
+    };
+
+    const handlePreview = (dataType) => {
+        if (onOpenWizard) {
+            onOpenWizard(provider, dataType);
+        }
+    };
+
+    const handleSync = async (dataType, options = {}) => {
+        try {
+            await onSync(dataType, options);
+        } catch (error) {
+            console.error('Sync failed:', error);
+        }
+    };
+
+
+    const getProviderIcon = (providerName) => {
+        const iconProps = { size: 24, className: styles.providerIcon };
+        
+        switch (providerName) {
+            case 'zoho_desk':
+                return <Ticket {...iconProps} />;
+            case 'hubspot':
+                return <Building2 {...iconProps} />;
+            case 'salesforce':
+                return <Cloud {...iconProps} />;
+            default:
+                return <Link {...iconProps} />;
+        }
+    };
+
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'connected':
+                return styles.statusConnected;
+            case 'expired':
+                return styles.statusExpired;
+            case 'error':
+                return styles.statusError;
+            default:
+                return styles.statusDisconnected;
+        }
+    };
+
+    return (
+        <div className={`${styles.providerCard} ${isConnected ? styles.connected : styles.disconnected} ${compact ? styles.compact : ''}`}>
+            <div className={styles.header}>
+                <div className={styles.icon}>
+                    {getProviderIcon(provider.name)}
+                </div>
+                <div className={styles.info}>
+                    <h3>{provider.display_name}</h3>
+                    <div className={`${styles.status} ${getStatusColor(connectionStatus?.status)}`}>
+                        {connectionStatus?.message || 'Not connected'}
+                    </div>
+                </div>
+            </div>
+
+            {!compact && (
+                <div className={styles.content}>
+                    {/* Data Types */}
+                    {provider.data_types && Object.keys(provider.data_types).length > 0 && (
+                        <div className={styles.dataTypes}>
+                            <h4>Available Data</h4>
+                            <div className={styles.dataTypesList}>
+                                {Object.entries(provider.data_types).map(([key, dataType]) => {
+                                    const getDataIcon = (type) => {
+                                        switch (type) {
+                                            case 'contacts':
+                                                return <Users size={16} className={styles.dataIcon} />;
+                                            case 'accounts':
+                                                return <Building size={16} className={styles.dataIcon} />;
+                                            default:
+                                                return <Link size={16} className={styles.dataIcon} />;
+                                        }
+                                    };
+
+                                    const getSyncDirection = (direction) => {
+                                        switch (direction) {
+                                            case 'pull':
+                                                return <Download size={14} className={styles.directionIcon} title="Pull from external service" />;
+                                            case 'push':
+                                                return <Upload size={14} className={styles.directionIcon} title="Push to external service" />;
+                                            case 'bidirectional':
+                                                return <ArrowRightLeft size={14} className={styles.directionIcon} title="Two-way sync" />;
+                                            default:
+                                                return <Download size={14} className={styles.directionIcon} title="Pull from external service" />;
+                                        }
+                                    };
+
+                                    return (
+                                        <div key={key} className={styles.dataType}>
+                                            <div className={styles.dataTypeHeader}>
+                                                {getDataIcon(key)}
+                                                <span className={styles.dataTypeName}>{dataType.name}</span>
+                                                <div className={styles.syncDirection}>
+                                                    {getSyncDirection(dataType.sync_direction || 'pull')}
+                                                </div>
+                                            </div>
+                                            <span className={styles.dataTypeDescription}>{dataType.description}</span>
+                                            <div className={styles.syncInfo}>
+                                                <small className={styles.syncDirectionText}>
+                                                    {dataType.sync_direction === 'push' ? 'Push to ' : 
+                                                     dataType.sync_direction === 'bidirectional' ? 'Two-way sync with ' : 'Pull from '}
+                                                    {provider.display_name}
+                                                </small>
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Test Result */}
+                    {testResult && (
+                        <div className={`${styles.testResult} ${testResult.success ? styles.success : styles.error}`}>
+                            {testResult.message}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Compact mode data types */}
+            {compact && provider.data_types && Object.keys(provider.data_types).length > 0 && (
+                <div className={styles.compactDataTypes}>
+                    {Object.entries(provider.data_types).map(([key, dataType]) => {
+                        const getDataIcon = (type) => {
+                            switch (type) {
+                                case 'contacts':
+                                    return <Users size={14} className={styles.dataIcon} />;
+                                case 'accounts':
+                                    return <Building size={14} className={styles.dataIcon} />;
+                                default:
+                                    return <Link size={14} className={styles.dataIcon} />;
+                            }
+                        };
+
+                        const getSyncDirection = (direction) => {
+                            switch (direction) {
+                                case 'pull':
+                                    return <Download size={12} className={styles.directionIcon} title="Configure sync settings" />;
+                                case 'push':
+                                    return <Upload size={12} className={styles.directionIcon} title="Configure sync settings" />;
+                                case 'bidirectional':
+                                    return <ArrowRightLeft size={12} className={styles.directionIcon} title="Configure sync settings" />;
+                                default:
+                                    return <Download size={12} className={styles.directionIcon} title="Configure sync settings" />;
+                            }
+                        };
+
+                        return (
+                            <div 
+                                key={key} 
+                                className={`${styles.compactDataType} ${styles.clickableRow}`}
+                                onClick={() => !isSyncing && handlePreview(key)}
+                                title={`Configure sync settings for ${dataType.name}`}
+                            >
+                                {getDataIcon(key)}
+                                <span className={styles.dataTypeName}>{dataType.name}</span>
+                                <div className={styles.syncSettingsIndicator}>
+                                    {getSyncDirection(dataType.sync_direction || 'pull')}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            <div className={styles.actions}>
+                {!isConnected ? (
+                    <button 
+                        onClick={onConnect}
+                        className={`${styles.button} ${styles.primary} ${compact ? styles.compactButton : ''}`}
+                    >
+                        <Link size={compact ? 14 : 16} className={styles.buttonIcon} />
+                        {compact ? 'Connect' : 'Connect'}
+                    </button>
+                ) : (
+                    <>
+                        {!compact && (
+                            <button 
+                                onClick={handleTestConnection}
+                                disabled={isTestingConnection}
+                                className={`${styles.button} ${styles.secondary}`}
+                            >
+                                {isTestingConnection ? (
+                                    <Loader size={16} className={`${styles.buttonIcon} ${styles.spinning}`} />
+                                ) : (
+                                    <TestTube size={16} className={styles.buttonIcon} />
+                                )}
+                                {isTestingConnection ? 'Testing...' : 'Test Connection'}
+                            </button>
+                        )}
+
+                        {/* Preview and Sync buttons for each data type */}
+                        {provider.data_types && Object.entries(provider.data_types).map(([key, dataType]) => (
+                            <div key={key} className={`${styles.dataTypeActions} ${compact ? styles.compactActions : ''}`}>
+                                {!compact && (
+                                    <button
+                                        onClick={() => handlePreview(key)}
+                                        disabled={isSyncing}
+                                        className={`${styles.button} ${styles.preview}`}
+                                        title={`Preview ${dataType.name} before syncing`}
+                                    >
+                                        <TestTube size={16} className={styles.buttonIcon} />
+                                        Configure {dataType.name}
+                                    </button>
+                                )}
+                                
+                                <button
+                                    onClick={() => handleSync(key)}
+                                    disabled={isSyncing}
+                                    className={`${styles.button} ${styles.sync} ${compact ? styles.compactButton : ''}`}
+                                    title={`Sync ${dataType.name} (${dataType.sync_direction || 'pull'})`}
+                                >
+                                    {isSyncing ? (
+                                        <Loader size={compact ? 14 : 16} className={`${styles.buttonIcon} ${styles.spinning}`} />
+                                    ) : (
+                                        <RefreshCw size={compact ? 14 : 16} className={styles.buttonIcon} />
+                                    )}
+                                    {compact ? dataType.name : `Sync ${dataType.name}`}
+                                </button>
+                            </div>
+                        ))}
+
+                        {!compact && (
+                            <button 
+                                onClick={onDisconnect}
+                                className={`${styles.button} ${styles.danger}`}
+                            >
+                                <XCircle size={16} className={styles.buttonIcon} />
+                                Disconnect
+                            </button>
+                        )}
+                    </>
+                )}
+            </div>
+
+        </div>
+    );
+};
+
+export default OAuthProviderCard;