@visns-studio/visns-components 5.15.10 → 5.15.12

package/src/components/oauth/OAuthConnectionStatus.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styles from '../styles/OAuthConnectionStatus.module.scss';
+
+const OAuthConnectionStatus = ({ provider, compact = false }) => {
+    const { connection_status: status } = provider;
+
+    const formatDate = (dateString) => {
+        if (!dateString) return null;
+        return new Date(dateString).toLocaleString();
+    };
+
+    const getStatusIcon = () => {
+        switch (status?.status) {
+            case 'connected':
+                return '✅';
+            case 'expired':
+                return '⚠️';
+            case 'error':
+                return '❌';
+            default:
+                return '⚪';
+        }
+    };
+
+    const getStatusClass = () => {
+        switch (status?.status) {
+            case 'connected':
+                return styles.connected;
+            case 'expired':
+                return styles.expired;
+            case 'error':
+                return styles.error;
+            default:
+                return styles.disconnected;
+        }
+    };
+
+    if (compact) {
+        return (
+            <div className={`${styles.connectionStatus} ${styles.compact} ${getStatusClass()}`}>
+                <span className={styles.icon}>{getStatusIcon()}</span>
+                <span className={styles.provider}>{provider.display_name}</span>
+                <span className={styles.status}>{status?.message || 'Not connected'}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`${styles.connectionStatus} ${getStatusClass()}`}>
+            <div className={styles.statusHeader}>
+                <span className={styles.icon}>{getStatusIcon()}</span>
+                <span className={styles.message}>{status?.message || 'Not connected'}</span>
+            </div>
+
+            {status && (
+                <div className={styles.statusDetails}>
+                    {status.expires_at && (
+                        <div className={styles.detail}>
+                            <span className={styles.label}>Expires:</span>
+                            <span className={styles.value}>{formatDate(status.expires_at)}</span>
+                        </div>
+                    )}
+                    
+                    {status.last_sync_at && (
+                        <div className={styles.detail}>
+                            <span className={styles.label}>Last Sync:</span>
+                            <span className={styles.value}>{formatDate(status.last_sync_at)}</span>
+                        </div>
+                    )}
+                    
+                    {status.sync_status && (
+                        <div className={styles.detail}>
+                            <span className={styles.label}>Sync Status:</span>
+                            <span className={`${styles.value} ${styles[status.sync_status]}`}>
+                                {status.sync_status}
+                            </span>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default OAuthConnectionStatus;

package/src/components/oauth/OAuthIntegrationsPage.jsx

@@ -0,0 +1,185 @@
+/**
+ * OAuthIntegrationsPage Component
+ * 
+ * A complete OAuth integrations page component that provides:
+ * - Consistent breadcrumb navigation using project styling patterns
+ * - Full OAuth provider management (connect, sync, disconnect)
+ * - Step-by-step sync wizard with preview functionality
+ * - Toast notification integration (optional)
+ * - Configurable via props for different projects
+ * 
+ * Usage:
+ * ```jsx
+ * import { OAuthIntegrationsPage } from '@visns-studio/visns-components';
+ * import { toast } from 'react-toastify';
+ * 
+ * const MyOAuthPage = () => (
+ *   <OAuthIntegrationsPage
+ *     breadcrumbConfig={{
+ *       title: 'OAuth Integrations',
+ *       parentTitle: 'Admin', 
+ *       parentUrl: '/admin'
+ *     }}
+ *     showSuccessToast={toast.success}
+ *     showErrorToast={toast.error}
+ *     showInfoToast={toast.info}
+ *   />
+ * );
+ * ```
+ */
+
+import React from 'react';
+import Breadcrumb from '../Breadcrumb';
+import OAuthManager from './OAuthManager';
+import styles from '../styles/GenericDetail.module.scss';
+
+const OAuthIntegrationsPage = ({
+    // Breadcrumb configuration
+    breadcrumbConfig = {
+        title: 'OAuth Integrations',
+        parentTitle: 'Admin', 
+        parentUrl: '/admin'
+    },
+    
+    // Page configuration
+    pageTitle = 'OAuth Integrations',
+    pageDescription = 'Connect your CRM with third-party services to automatically sync data and streamline your workflow.',
+    
+    // Event handlers - these can be passed from the consuming app
+    onAuthComplete,
+    onSyncComplete, 
+    onError,
+    
+    // Toast notification function (optional) - pass toast.success, toast.error etc.
+    showSuccessToast,
+    showErrorToast,
+    showInfoToast,
+    
+    // Optional custom styling
+    className = '',
+    layout = 'full'
+}) => {
+    
+    // Enhanced event handlers that integrate with toast notifications
+    const handleAuthComplete = (provider, action) => {
+        console.log(`OAuth ${action} completed for ${provider}`);
+        
+        if (action === 'connected' && showSuccessToast) {
+            showSuccessToast(`Successfully connected to ${provider}`, {
+                position: "top-right",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        } else if (action === 'disconnected' && showInfoToast) {
+            showInfoToast(`Successfully disconnected from ${provider}`, {
+                position: "top-right",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        }
+        
+        // Call custom handler if provided
+        if (onAuthComplete) {
+            onAuthComplete(provider, action);
+        }
+    };
+
+    const handleSyncComplete = (provider, dataType, result) => {
+        console.log(`Sync completed for ${provider}.${dataType}`, result);
+        
+        if (result.success && showSuccessToast) {
+            const totalSynced = result.result?.total || 0;
+            showSuccessToast(`Successfully synced ${totalSynced} ${dataType} from ${provider}`, {
+                position: "top-right",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        } else if (!result.success && showErrorToast) {
+            showErrorToast(`Sync failed: ${result.message || 'Unknown error'}`, {
+                position: "top-right",
+                autoClose: 7000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        }
+        
+        // Call custom handler if provided
+        if (onSyncComplete) {
+            onSyncComplete(provider, dataType, result);
+        }
+    };
+
+    const handleError = (error) => {
+        console.error('OAuth Integration Error:', error);
+        
+        if (showErrorToast) {
+            showErrorToast(`Error: ${error.message || 'An unexpected error occurred'}`, {
+                position: "top-right",
+                autoClose: 7000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        }
+        
+        // Call custom handler if provided
+        if (onError) {
+            onError(error);
+        }
+    };
+
+    return (
+        <div className={className}>
+            {/* Header Section with Breadcrumb */}
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={`${styles.grid__full} ${
+                        layout === 'full' 
+                            ? styles.crmtitle 
+                            : styles['crmtitle--alternate']
+                    }`}>
+                        <Breadcrumb 
+                            data={{}} 
+                            page={breadcrumbConfig}
+                        />
+                        {/* Description positioned on the right side */}
+                        {pageDescription && (
+                            <div style={{ 
+                                color: '#666', 
+                                fontSize: '0.95rem',
+                                fontWeight: '400',
+                                maxWidth: '60%',
+                                textAlign: 'right'
+                            }}>
+                                {pageDescription}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* OAuth Manager */}
+            <div style={{ padding: '32px 0 20px 0' }}>
+                <OAuthManager
+                    onAuthComplete={handleAuthComplete}
+                    onSyncComplete={handleSyncComplete}
+                    onError={handleError}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default OAuthIntegrationsPage;

package/src/components/oauth/OAuthManager.jsx

@@ -0,0 +1,260 @@
+import React, { useState, useEffect } from 'react';
+import OAuthProviderCard from './OAuthProviderCard';
+import OAuthConnectionStatus from './OAuthConnectionStatus';
+import DataSyncWizard from './DataSyncWizard';
+import styles from '../styles/OAuthManager.module.scss';
+
+const OAuthManager = ({ 
+    onAuthComplete = () => {}, 
+    onSyncComplete = () => {},
+    onError = () => {},
+    className = '' 
+}) => {
+    const [providers, setProviders] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [syncingProviders, setSyncingProviders] = useState(new Set());
+    const [wizardState, setWizardState] = useState({ 
+        isOpen: false, 
+        provider: null, 
+        dataType: null 
+    });
+
+    useEffect(() => {
+        loadProviders();
+    }, []);
+
+    const loadProviders = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/integrations/oauth/providers', {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                credentials: 'same-origin'
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                setProviders(Object.values(data.providers));
+                setError(null);
+            } else {
+                throw new Error(data.message || 'Failed to load providers');
+            }
+        } catch (err) {
+            setError(err.message);
+            onError(err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleConnect = (provider) => {
+        window.location.href = `/integrations/oauth/${provider.name}/authorize`;
+    };
+
+    const handleDisconnect = async (provider) => {
+        try {
+            const response = await fetch(`/integrations/oauth/${provider.name}/disconnect`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
+                },
+                credentials: 'same-origin'
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                await loadProviders(); // Refresh the list
+                onAuthComplete(provider.name, 'disconnected');
+            } else {
+                throw new Error(data.message || 'Failed to disconnect');
+            }
+        } catch (err) {
+            setError(err.message);
+            onError(err);
+        }
+    };
+
+    const handleTest = async (provider) => {
+        try {
+            const response = await fetch(`/integrations/oauth/${provider.name}/test`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
+                },
+                credentials: 'same-origin'
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                await loadProviders(); // Refresh status
+            } else {
+                throw new Error(data.message || 'Connection test failed');
+            }
+            
+            return data;
+        } catch (err) {
+            setError(err.message);
+            onError(err);
+            return { success: false, message: err.message };
+        }
+    };
+
+    const handleSync = async (provider, dataType, options = {}) => {
+        const providerId = provider.name;
+        
+        try {
+            setSyncingProviders(prev => new Set([...prev, providerId]));
+            
+            const response = await fetch(`/integrations/oauth/${providerId}/sync`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
+                },
+                credentials: 'same-origin',
+                body: JSON.stringify({
+                    type: dataType,
+                    options: options
+                }),
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                await loadProviders(); // Refresh status
+                onSyncComplete(providerId, dataType, data.result || data);
+            } else {
+                throw new Error(data.message || 'Sync failed');
+            }
+            
+            return data;
+        } catch (err) {
+            setError(err.message);
+            onError(err);
+            return { success: false, message: err.message };
+        } finally {
+            setSyncingProviders(prev => {
+                const newSet = new Set(prev);
+                newSet.delete(providerId);
+                return newSet;
+            });
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className={`${styles.oauthManager} ${className}`}>
+                <div className={styles.loading}>
+                    <div className={styles.spinner}></div>
+                    <p>Loading integrations...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={`${styles.oauthManager} ${className}`}>
+                <div className={styles.error}>
+                    <p>Error loading integrations: {error}</p>
+                    <button onClick={loadProviders} className={styles.retryButton}>
+                        Retry
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    const handleWizardOpen = (provider, dataType) => {
+        setWizardState({
+            isOpen: true,
+            provider: provider,
+            dataType: dataType
+        });
+    };
+
+    const handleWizardClose = () => {
+        setWizardState({
+            isOpen: false,
+            provider: null,
+            dataType: null
+        });
+    };
+
+    const handleWizardComplete = async (dataType, options) => {
+        if (wizardState.provider) {
+            await handleSync(wizardState.provider, dataType, options);
+        }
+        handleWizardClose();
+    };
+
+    // If wizard is open, show it full screen
+    if (wizardState.isOpen && wizardState.provider) {
+        return (
+            <DataSyncWizard
+                provider={wizardState.provider}
+                dataType={wizardState.dataType}
+                onCancel={handleWizardClose}
+                onComplete={handleWizardComplete}
+            />
+        );
+    }
+
+    return (
+        <div className={`${styles.oauthManager} ${className}`}>
+            {providers.length === 0 ? (
+                <div className={styles.empty}>
+                    <p>No integrations available.</p>
+                </div>
+            ) : (
+                <div className={styles.providersGrid}>
+                    {providers.map((provider) => (
+                        <OAuthProviderCard
+                            key={provider.name}
+                            provider={provider}
+                            isConnected={provider.is_connected}
+                            connectionStatus={provider.connection_status}
+                            isSyncing={syncingProviders.has(provider.name)}
+                            onConnect={() => handleConnect(provider)}
+                            onDisconnect={() => handleDisconnect(provider)}
+                            onTest={() => handleTest(provider)}
+                            onSync={(dataType, options) => handleSync(provider, dataType, options)}
+                            onOpenWizard={handleWizardOpen}
+                            compact={true}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default OAuthManager;