XeroCard.jsx

Go to the documentation of this file.

import React, { useState } from 'react';
 
function XeroCard({ config, status, loading, onConfigure, tenantId }) {
  const [clientId, setClientId] = useState(config?.xero?.clientId || '');
  const [clientSecret, setClientSecret] = useState(config?.xero?.clientSecret || '');
  const [xeroTenantId, setXeroTenantId] = useState(config?.xero?.tenantId || '');
  const [saving, setSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState('');
 
  const handleSave = async () => {
    setSaving(true);
    setSaveStatus('');
    try {
      const res = await fetch(`/api/xero/settings/${tenantId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          xero: { clientId, clientSecret, tenantId: xeroTenantId }
        })
      });
      if (res.ok) {
        setSaveStatus('Connected to Xero');
      } else {
        setSaveStatus('Failed to save Xero settings');
      }
    } catch (e) {
      setSaveStatus('Error saving Xero settings');
    }
    setSaving(false);
  };
 
  return (
    <div className="config-card">
      <h3>Xero Integration</h3>
      <p>Sync invoices and financial data with Xero accounting.</p>
      <div className="form-row">
        <label>
          Client ID:
          <input type="text" value={clientId} onChange={e => setClientId(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <div className="form-row">
        <label>
          Client Secret:
          <input type="text" value={clientSecret} onChange={e => setClientSecret(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <div className="form-row">
        <label>
          Tenant ID:
          <input type="text" value={xeroTenantId} onChange={e => setXeroTenantId(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <button onClick={handleSave} disabled={saving || loading} className="btn-primary">
        {saving || loading ? 'Saving...' : 'Save Xero Settings'}
      </button>
      {(status || saveStatus) && (
        <div className={`status-message ${(status || saveStatus).startsWith('Connected') ? 'success' : 'error'}`}>
          {status || saveStatus}
        </div>
      )}
      {config && (
        <div className="current-config">
          <b>Current config:</b> {JSON.stringify(config)}
        </div>
      )}
    </div>
  );
}
 
export default XeroCard;