MailgunCard.jsx

Go to the documentation of this file.

import React, { useState } from 'react';
 
function MailgunCard({ config, status, loading, onConfigure, tenantId }) {
  const [apiKey, setApiKey] = useState(config?.mailgun?.apiKey || '');
  const [domain, setDomain] = useState(config?.mailgun?.domain || '');
  const [from, setFrom] = useState(config?.from || '');
  const [saving, setSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState('');
 
  const handleSave = async () => {
    setSaving(true);
    setSaveStatus('');
    try {
      const res = await fetch(`/api/email/settings/${tenantId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          provider: 'mailgun',
          mailgun: { apiKey, domain },
          from
        })
      });
      if (res.ok) {
        setSaveStatus('Connected to Mailgun');
      } else {
        setSaveStatus('Failed to save Mailgun settings');
      }
    } catch (e) {
      setSaveStatus('Error saving Mailgun settings');
    }
    setSaving(false);
  };
 
  return (
    <div className="config-card">
      <h3>Mailgun Integration</h3>
      <p>Send emails via Mailgun for ticket notifications and alerts.</p>
      <div className="form-row">
        <label>
          API Key:
          <input type="text" value={apiKey} onChange={e => setApiKey(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <div className="form-row">
        <label>
          Domain:
          <input type="text" value={domain} onChange={e => setDomain(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <div className="form-row">
        <label>
          Sender Email:
          <input type="text" value={from} onChange={e => setFrom(e.target.value)} style={{ width: '240px' }} />
        </label>
      </div>
      <button onClick={handleSave} disabled={saving || loading} className="btn-primary">
        {saving || loading ? 'Saving...' : 'Save Mailgun 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 MailgunCard;