Integrations.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
import MainLayout from '../components/Layout/MainLayout';
import './Integrations.css';
 
function Integrations() {
  // Exchange integration state
  const [exchangeEmail, setExchangeEmail] = useState('');
  const [exchangeStatus, setExchangeStatus] = useState('');
  const [exchangeLoading, setExchangeLoading] = useState(false);
  const [tenantExchangeEmail, setTenantExchangeEmail] = useState('');
 
  // Simulate login (replace with real OAuth flow)
  const handleExchangeLogin = async () => {
    setExchangeLoading(true);
    setExchangeStatus('');
    try {
      // TODO: Replace with backend OAuth/Graph login
      await new Promise(res => setTimeout(res, 1200));
      setTenantExchangeEmail(exchangeEmail);
      setExchangeStatus('Connected to Exchange as ' + exchangeEmail);
    } catch (err) {
      setExchangeStatus('Login failed: ' + err.message);
    }
    setExchangeLoading(false);
  };
  // selectedTenantId should come from props/context, not localStorage
  const [selectedTenantId, setSelectedTenantId] = useState('');
  const [integrations, setIntegrations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [configuring, setConfiguring] = useState(null); // integration being configured
  const [configForm, setConfigForm] = useState({});
  const [tenantMap, setTenantMap] = useState({});
  const [meshcentralEnabled, setMeshcentralEnabled] = useState(true);
  const [meshcentralLoading, setMeshcentralLoading] = useState(false);
  // No need for separate root detection, handled by TenantSelector
 
  // Stripe Connect state
  const [stripeConfig, setStripeConfig] = useState(null);
  const [stripeLoading, setStripeLoading] = useState(false);
  const [stripeError, setStripeError] = useState(null);
 
  // Integration categories and definitions
  const integrationGroups = {
    'Remote Desktop': [
      {
        type: 'meshcentral',
        name: 'MeshCentral',
        description: 'Open-source web-based remote management and desktop control. Supports RDP, VNC, terminal, and file transfer with browser-based access.',
        icon: '🌐',
        iconBg: 'linear-gradient(135deg, #0078d4 0%, #005ba3 100%)',
        details: 'MeshCentral provides full remote control, file transfer, and terminal access directly in your browser.',
        serverInfo: 'mesh.everydaytech.au:4430'
      }
    ],
    'Communication': [
      {
        type: 'slack',
        name: 'Slack',
        description: 'Send real-time notifications and ticket updates to Slack channels. Keep your team informed instantly.',
        icon: '💬',
        iconBg: '#4A154B',
        configFields: [
          { key: 'webhook_url', label: 'Webhook URL', type: 'text', required: true },
          { key: 'default_channel', label: 'Default Channel', type: 'text', required: false },
          { key: 'notify_on_ticket_create', label: 'Notify on Ticket Create', type: 'checkbox', required: false }
        ]
      },
      {
        type: 'mailgun',
        name: 'Mailgun',
        description: 'Powerful email delivery service for sending ticket notifications, alerts, and transactional emails reliably.',
        icon: '📧',
        iconBg: '#F06A6A',
        configFields: [
          { key: 'api_key', label: 'API Key', type: 'password', required: true },
          { key: 'domain', label: 'Domain', type: 'text', required: true },
          { key: 'from_email', label: 'From Email', type: 'email', required: true },
          { key: 'from_name', label: 'From Name', type: 'text', required: false }
        ]
      }
    ],
    'Accounting': [
      {
        type: 'xero',
        name: 'Xero',
        description: 'Seamlessly sync invoices, payments, and financial data with Xero accounting software. Automated bookkeeping.',
        icon: '💰',
        iconBg: '#13B5EA',
        configFields: [
          { key: 'client_id', label: 'Client ID', type: 'text', required: true },
          { key: 'client_secret', label: 'Client Secret', type: 'password', required: true },
          { key: 'tenant_id', label: 'Xero Tenant ID', type: 'text', required: true },
          { key: 'auto_sync_invoices', label: 'Auto-sync Invoices', type: 'checkbox', required: false }
        ]
      }
    ],
    'Payments': [
      {
        type: 'stripe',
        name: 'Stripe Connect',
        description: 'Accept payments, manage subscriptions, and automate billing with Stripe. Secure payment processing with multi-tenant isolation.',
        icon: '💳',
        iconBg: 'linear-gradient(135deg, #635BFF 0%, #0073E6 100%)',
        details: 'Connect your Stripe account to enable payment processing, recurring billing, and invoice payments.',
        requiresOAuth: true // Special handling for OAuth flow
      }
    ]
  };
 
  const getTenantHeaders = async (baseHeaders = {}) => {
    const headers = { ...baseHeaders };
    const token = localStorage.getItem('token');
 
    if (!token) return headers;
 
    // Parse token to check if user is MSP
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      const isMSP = payload.role === 'msp' || payload.role === 'admin';
 
      if (isMSP && selectedTenantId) {
        // Fetch tenant subdomain
        const tenantRes = await apiFetch('/tenants', {
          headers: { Authorization: `Bearer ${token}`, 'X-Tenant-Subdomain': 'admin' }
        });
        if (tenantRes.ok) {
          const data = await tenantRes.json();
          const tenants = Array.isArray(data) ? data : (data.tenants || []);
          const tenant = tenants.find(t => String(t.tenant_id) === String(selectedTenantId));
          if (tenant) {
            headers['X-Tenant-Subdomain'] = tenant.subdomain;
          }
        }
      }
    } catch (err) {
      console.error('Error parsing token:', err);
    }
 
    return headers;
  };
 
  const fetchIntegrations = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
      const res = await apiFetch('/integrations');
      if (!res.ok) throw new Error('Failed to load integrations');
 
      const data = await res.json();
      setIntegrations(data);
 
      // Check if MeshCentral is enabled
      const meshcentral = data.find(i => i.integration_type === 'meshcentral');
      setMeshcentralEnabled(meshcentral?.is_active ?? true); // Default to true
 
      setError(null);
    } catch (err) {
      setError(err.message || 'Error loading integrations');
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    fetchIntegrations();
    fetchStripeConfig();
  }, [selectedTenantId]);
 
  // Fetch Stripe Connect configuration
  const fetchStripeConfig = async () => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
      const res = await apiFetch('/stripe/config', {
        headers
      });
 
      if (!res.ok) {
        if (res.status === 404) {
          setStripeConfig({ configured: false });
          return;
        }
        throw new Error('Failed to fetch Stripe configuration');
      }
 
      const data = await res.json();
      setStripeConfig(data);
    } catch (err) {
      console.error('Error fetching Stripe config:', err);
      setStripeConfig({ configured: false });
    }
  };
 
  // Start Stripe Connect onboarding
  const handleStripeConnect = async () => {
    setStripeLoading(true);
    setStripeError(null);
 
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
      });
 
      // Get user email from token
      const payload = JSON.parse(atob(token.split('.')[1]));
      const email = payload.email || 'billing@example.com';
 
      const res = await apiFetch('/stripe/connect/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: email,
          country: 'US'
        })
      });
 
      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.message || 'Failed to start Stripe onboarding');
      }
 
      const data = await res.json();
      
      // Redirect to Stripe onboarding
      window.location.href = data.onboarding_url;
    } catch (err) {
      console.error('Stripe Connect error:', err);
      setStripeError(err.message);
    } finally {
      setStripeLoading(false);
    }
  };
 
  // Sync Stripe account status
  const handleStripeSyncStatus = async () => {
    setStripeLoading(true);
    setStripeError(null);
 
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
      });
 
      const res = await apiFetch('/stripe/connect/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
      });
 
      if (!res.ok) {
        throw new Error('Failed to sync Stripe account status');
      }
 
      // Refresh config after sync
      await fetchStripeConfig();
    } catch (err) {
      console.error('Stripe sync error:', err);
      setStripeError(err.message);
    } finally {
      setStripeLoading(false);
    }
  };
 
  // Disconnect Stripe account
  const handleStripeDisconnect = async () => {
    if (!confirm('Are you sure you want to disconnect your Stripe account? This will disable payment processing.')) {
      return;
    }
 
    setStripeLoading(true);
    setStripeError(null);
 
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
      const res = await apiFetch('/stripe/connect', {
        method: 'DELETE'
      });
 
      if (!res.ok) {
        throw new Error('Failed to disconnect Stripe account');
      }
 
      // Refresh config
      await fetchStripeConfig();
    } catch (err) {
      console.error('Stripe disconnect error:', err);
      setStripeError(err.message);
    } finally {
      setStripeLoading(false);
    }
  };
 
  // Check for Stripe onboarding return
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const onboardingStatus = urlParams.get('stripe_onboarding');
 
    if (onboardingStatus === 'success') {
      // Sync account status after successful onboarding
      handleStripeSyncStatus();
      // Clean URL
      window.history.replaceState({}, document.title, window.location.pathname);
    } else if (onboardingStatus === 'refresh') {
      // Link expired - show message
      setStripeError('Onboarding link expired. Please try connecting again.');
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);
 
  useEffect(() => {
    fetchIntegrations();
  }, [selectedTenantId]);
 
  const handleConfigure = (integration) => {
    const existing = integrations.find(i => i.integration_type === integration.type);
 
    if (existing) {
      // Edit existing
      setConfigForm(existing.config || {});
    } else {
      // New integration - initialize with defaults
      const defaults = {};
      integration.configFields.forEach(field => {
        defaults[field.key] = field.type === 'checkbox' ? false : '';
      });
      setConfigForm(defaults);
    }
 
    setConfiguring(integration);
  };
 
  const handleSaveIntegration = async () => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
      });
 
      const existing = integrations.find(i => i.integration_type === configuring.type);
      const method = existing ? 'PUT' : 'POST';
      const url = existing
        ? `/integrations/${existing.integration_id}`
        : '/integrations';
 
      const body = {
        integration_type: configuring.type,
        config: configForm,
        is_active: true
      };
 
      const res = await apiFetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });
 
      if (!res.ok) throw new Error('Failed to save integration');
 
      await fetchIntegrations();
      setConfiguring(null);
      setConfigForm({});
    } catch (err) {
      alert(err.message || 'Error saving integration');
    }
  };
 
  const handleToggleIntegration = async (integration) => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
      });
 
      const res = await apiFetch(`/integrations/${integration.integration_id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...integration,
          is_active: !integration.is_active
        })
      });
 
      if (!res.ok) throw new Error('Failed to update integration');
 
      await fetchIntegrations();
    } catch (err) {
      alert(err.message || 'Error updating integration');
    }
  };
 
  const handleDeleteIntegration = async (integration) => {
    if (!confirm(`Are you sure you want to delete the ${integration.integration_type} integration?`)) {
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
 
      const res = await apiFetch(`/integrations/${integration.integration_id}`, {
        method: 'DELETE'
      });
 
      if (!res.ok) throw new Error('Failed to delete integration');
 
      await fetchIntegrations();
    } catch (err) {
      alert(err.message || 'Error deleting integration');
    }
  };
 
  const isIntegrationConfigured = (type) => {
    return integrations.some(i => i.integration_type === type);
  };
 
  const getIntegrationStatus = (type) => {
    const integration = integrations.find(i => i.integration_type === type);
    return integration?.is_active ? 'active' : 'inactive';
  };
 
  // Azure AD SSO integration state
  const [azureStatus, setAzureStatus] = useState('');
  const [azureLoading, setAzureLoading] = useState(false);
  const [azureUser, setAzureUser] = useState(null);
 
  const handleAzureStart = async () => {
    setAzureLoading(true);
    setAzureStatus('');
    try {
      // Get Azure AD OAuth2 URL from backend
      const res = await apiFetch(`/sso/azure/${selectedTenantId}/start`);
      if (!res.ok) throw new Error('Failed to get Azure AD login URL');
      const data = await res.json();
      window.location.href = data.url; // Redirect to Azure AD login
    } catch (err) {
      setAzureStatus('Azure AD SSO setup failed: ' + err.message);
    }
    setAzureLoading(false);
  };
 
  // MeshCentral toggle handler
  const handleMeshcentralToggle = async (enabled) => {
    setMeshcentralLoading(true);
    try {
      const response = await apiFetch('/integrations/meshcentral', {
        method: enabled ? 'POST' : 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ enabled })
      });
 
      if (!response.ok) {
        throw new Error('Failed to update MeshCentral integration');
      }
 
      setMeshcentralEnabled(enabled);
    } catch (err) {
      console.error('MeshCentral toggle error:', err);
      alert('Failed to update MeshCentral integration: ' + err.message);
    } finally {
      setMeshcentralLoading(false);
    }
  };
 
  return (
    <MainLayout>
      <div className="integrations-page">
        <div className="page-header">
          <h1>Integrations</h1>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
        {loading ? (
          <div className="loading">Loading integrations...</div>
        ) : (
          <>
            {Object.entries(integrationGroups).map(([groupName, groupIntegrations]) => (
              <div key={groupName}>
                <h2 className="section-title">{groupName}</h2>
 
                {groupIntegrations.map((integration) => {
                  // Special handling for Stripe Connect (OAuth flow)
                  if (integration.type === 'stripe') {
                    const isConnected = stripeConfig?.configured && stripeConfig?.charges_enabled;
                    const isVerified = stripeConfig?.account_status === 'verified';
                    const isPending = stripeConfig?.configured && !stripeConfig?.charges_enabled;
 
                    return (
                      <div key={integration.type} className="remote-desktop-card">
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                          <div style={{ flex: 1 }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
                              <div style={{
                                width: '48px',
                                height: '48px',
                                borderRadius: '8px',
                                background: integration.iconBg,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                fontSize: '24px'
                              }}>
                                {integration.icon}
                              </div>
                              <div>
                                <h3 style={{ margin: 0, marginBottom: '4px' }}>{integration.name}</h3>
                                <div className={`status-badge ${isConnected ? 'enabled' : 'disabled'}`}>
                                  {isConnected ? (isVerified ? 'VERIFIED' : 'CONNECTED') : (isPending ? 'PENDING' : 'NOT CONNECTED')}
                                </div>
                              </div>
                            </div>
 
                            <p className="description">{integration.description}</p>
 
                            {stripeError && (
                              <div style={{ color: '#dc3545', fontSize: '14px', marginTop: '8px', padding: '8px', background: '#ffe6e6', borderRadius: '4px' }}>
                                ⚠️ {stripeError}
                              </div>
                            )}
 
                            {isConnected && (
                              <div className="config-details" style={{ marginTop: '12px' }}>
                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '8px' }}>
                                  <div>
                                    <strong>Account ID:</strong>
                                    <code style={{ fontSize: '11px', display: 'block', marginTop: '4px' }}>
                                      {stripeConfig.stripe_account_id}
                                    </code>
                                  </div>
                                  <div>
                                    <strong>Country:</strong> {stripeConfig.country || 'US'}
                                  </div>
                                </div>
 
                                <div style={{ display: 'flex', gap: '16px', marginTop: '8px' }}>
                                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                                    <span style={{ fontSize: '18px' }}>
                                      {stripeConfig.charges_enabled ? '✅' : '❌'}
                                    </span>
                                    <span style={{ fontSize: '13px' }}>Charges</span>
                                  </div>
                                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                                    <span style={{ fontSize: '18px' }}>
                                      {stripeConfig.payouts_enabled ? '✅' : '❌'}
                                    </span>
                                    <span style={{ fontSize: '13px' }}>Payouts</span>
                                  </div>
                                </div>
 
                                {stripeConfig.requirements_currently_due?.length > 0 && (
                                  <div style={{ marginTop: '12px', padding: '8px', background: '#fff3cd', borderRadius: '4px', fontSize: '13px' }}>
                                    ⚠️ <strong>Action Required:</strong> {stripeConfig.requirements_currently_due.length} verification step(s) needed
                                  </div>
                                )}
 
                                {stripeConfig.onboarding_completed_at && (
                                  <div style={{ marginTop: '8px', fontSize: '12px', color: 'var(--text-secondary)' }}>
                                    Connected on {new Date(stripeConfig.onboarding_completed_at).toLocaleDateString()}
                                  </div>
                                )}
                              </div>
                            )}
                          </div>
 
                          <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                            {!isConnected ? (
                              <button
                                className="btn-primary"
                                onClick={handleStripeConnect}
                                disabled={stripeLoading}
                                style={{ whiteSpace: 'nowrap' }}
                              >
                                {stripeLoading ? 'Connecting...' : '🔗 Connect with Stripe'}
                              </button>
                            ) : (
                              <>
                                <button
                                  className="btn-secondary"
                                  onClick={handleStripeSyncStatus}
                                  disabled={stripeLoading}
                                  style={{ whiteSpace: 'nowrap', fontSize: '13px' }}
                                >
                                  {stripeLoading ? 'Syncing...' : '🔄 Sync Status'}
                                </button>
                                <button
                                  className="btn-secondary"
                                  onClick={handleStripeDisconnect}
                                  disabled={stripeLoading}
                                  style={{ whiteSpace: 'nowrap', fontSize: '13px', color: '#dc3545' }}
                                >
                                  Disconnect
                                </button>
                              </>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  }
 
                  // Standard integration handling (toggle switch)
                  const configured = integrations.find(i => i.integration_type === integration.type);
                  const isEnabled = integration.type === 'meshcentral' ? meshcentralEnabled : configured?.is_active || false;
                  const isLoading = integration.type === 'meshcentral' && meshcentralLoading;
 
                  return (
                    <div key={integration.type} className="remote-desktop-card">
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ flex: 1 }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
                            <div style={{
                              width: '48px',
                              height: '48px',
                              borderRadius: '8px',
                              background: integration.iconBg,
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              fontSize: '24px'
                            }}>
                              {integration.icon}
                            </div>
                            <div>
                              <h3 style={{ margin: 0, marginBottom: '4px' }}>{integration.name}</h3>
                              <div className={`status-badge ${isEnabled ? 'enabled' : 'disabled'}`}>
                                {isEnabled ? 'ENABLED' : 'DISABLED'}
                              </div>
                            </div>
                          </div>
 
                          <p className="description">{integration.description}</p>
 
                          {isEnabled && integration.details && (
                            <div className="config-details">
                              {integration.serverInfo && (
                                <div style={{ marginBottom: '8px' }}>
                                  <strong>Server:</strong>
                                  <code>{integration.serverInfo}</code>
                                </div>
                              )}
                              <div style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
                                ℹ️ {integration.details}
                              </div>
                            </div>
                          )}
                        </div>
 
                        <div style={{ marginLeft: '24px' }}>
                          <label className="switch">
                            <input
                              type="checkbox"
                              checked={isEnabled}
                              onChange={(e) => {
                                if (integration.type === 'meshcentral') {
                                  handleMeshcentralToggle(e.target.checked);
                                } else {
                                  handleToggleIntegration(integration.type, e.target.checked);
                                }
                              }}
                              disabled={isLoading}
                            />
                            <span className="slider"></span>
                          </label>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            ))}
          </>
        )}
 
        {/* Configuration Modal */}
        {configuring && (
          <div className="modal-overlay" onClick={() => setConfiguring(null)}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
              <div className="modal-header">
                <h2>Configure {configuring.name}</h2>
                <button className="close-btn" onClick={() => setConfiguring(null)}>×</button>
              </div>
 
              <div className="modal-body">
                <p className="integration-description">{configuring.description}</p>
 
                <form className="integration-form">
                  {configuring.configFields?.map((field) => (
                    <div key={field.key} className="form-group">
                      <label htmlFor={field.key}>
                        {field.label}
                        {field.required && <span className="required">*</span>}
                      </label>
 
                      {field.type === 'checkbox' ? (
                        <input
                          type="checkbox"
                          id={field.key}
                          checked={configForm[field.key] || false}
                          onChange={(e) => setConfigForm({ ...configForm, [field.key]: e.target.checked })}
                        />
                      ) : (
                        <input
                          type={field.type}
                          id={field.key}
                          value={configForm[field.key] || ''}
                          onChange={(e) => setConfigForm({ ...configForm, [field.key]: e.target.value })}
                          required={field.required}
                          placeholder={field.label}
                        />
                      )}
                    </div>
                  ))}
                </form>
              </div>
 
              <div className="modal-footer">
                <button onClick={() => setConfiguring(null)} className="btn-secondary">
                  Cancel
                </button>
                <button onClick={handleSaveIntegration} className="btn-primary">
                  Save Integration
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  )
}
export default Integrations;