SlackCard.jsx

Go to the documentation of this file.

import React, { useState } from 'react';
 
function SlackCard({ config, status, loading, onConfigure, tenantId }) {
  const [webhookUrl, setWebhookUrl] = useState(config?.slack?.webhookUrl || '');
  const [channel, setChannel] = useState(config?.slack?.channel || '');
  const [saving, setSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState('');
 
  const handleSave = async () => {
    setSaving(true);
    setSaveStatus('');
    try {
      const res = await fetch(`/api/slack/settings/${tenantId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          slack: { webhookUrl, channel }
        })
      });
      if (res.ok) {
        setSaveStatus('Connected to Slack');
      } else {
        setSaveStatus('Failed to save Slack settings');
      }
    } catch (e) {
      setSaveStatus('Error saving Slack settings');
    }
    setSaving(false);
  };
 
  return (
    <div className="config-card">
      <h3>Slack Integration</h3>
      <p>Send notifications and ticket updates to Slack channels.</p>
      <div className="form-row">
        <label>
          Webhook URL:
          <input type="text" value={webhookUrl} onChange={e => setWebhookUrl(e.target.value)} style={{ width: '320px' }} />
        </label>
      </div>
      <div className="form-row">
        <label>
          Channel:
          <input type="text" value={channel} onChange={e => setChannel(e.target.value)} style={{ width: '180px' }} />
        </label>
      </div>
      <button onClick={handleSave} disabled={saving || loading} className="btn-primary">
        {saving || loading ? 'Saving...' : 'Save Slack 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 SlackCard;