forked from jamesp/sasa-membership
Bounce management
This commit is contained in:
James Pattinson
@@ -0,0 +1,349 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
interface BounceRecord {
|
||||
id: number;
|
||||
email: string;
|
||||
bounce_type: 'hard' | 'soft' | 'complaint' | 'unsubscribe';
|
||||
bounce_reason: string | null;
|
||||
bounce_date: string;
|
||||
is_active: boolean;
|
||||
smtp2go_message_id: string | null;
|
||||
}
|
||||
|
||||
interface BounceStats {
|
||||
total_bounces: number;
|
||||
active_bounces: number;
|
||||
bounce_types: {
|
||||
hard: number;
|
||||
soft: number;
|
||||
complaint: number;
|
||||
unsubscribe: number;
|
||||
};
|
||||
}
|
||||
|
||||
const BounceManagement: React.FC = () => {
|
||||
const [bounces, setBounces] = useState<BounceRecord[]>([]);
|
||||
const [stats, setStats] = useState<BounceStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchEmail, setSearchEmail] = useState('');
|
||||
const [filteredBounces, setFilteredBounces] = useState<BounceRecord[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBounces();
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchEmail.trim() === '') {
|
||||
setFilteredBounces(bounces);
|
||||
} else {
|
||||
setFilteredBounces(
|
||||
bounces.filter(bounce =>
|
||||
bounce.email.toLowerCase().includes(searchEmail.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [bounces, searchEmail]);
|
||||
|
||||
const fetchBounces = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.get('/api/v1/email/bounces', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setBounces(response.data.bounces);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bounces:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.get('/api/v1/email/bounces/stats', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setStats(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bounce stats:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivateBounce = async (bounceId: number) => {
|
||||
if (!window.confirm('Are you sure you want to deactivate this bounce record?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
await axios.delete(`/api/v1/email/bounces/${bounceId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
fetchBounces(); // Refresh the list
|
||||
fetchStats(); // Refresh stats
|
||||
} catch (error) {
|
||||
console.error('Error deactivating bounce:', error);
|
||||
alert('Failed to deactivate bounce record');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCleanupOldBounces = async () => {
|
||||
if (!window.confirm('Are you sure you want to cleanup old soft bounces? This will deactivate soft bounces older than 365 days.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.post('/api/v1/email/bounces/cleanup', {}, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
alert(response.data.message);
|
||||
fetchBounces(); // Refresh the list
|
||||
fetchStats(); // Refresh stats
|
||||
} catch (error) {
|
||||
console.error('Error cleaning up bounces:', error);
|
||||
alert('Failed to cleanup old bounces');
|
||||
}
|
||||
};
|
||||
|
||||
const getBounceTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'hard': return '#dc3545';
|
||||
case 'soft': return '#ffc107';
|
||||
case 'complaint': return '#fd7e14';
|
||||
case 'unsubscribe': return '#6c757d';
|
||||
default: return '#6c757d';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<div>Loading bounce data...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Statistics Cards */}
|
||||
{stats && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
gap: '20px',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Total Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
|
||||
{stats.total_bounces}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Active Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
|
||||
{stats.active_bounces}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Hard Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
|
||||
{stats.bounce_types.hard}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Soft Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
|
||||
{stats.bounce_types.soft}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
gap: '20px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<label htmlFor="search" style={{ fontWeight: 'bold' }}>Search by Email:</label>
|
||||
<input
|
||||
id="search"
|
||||
type="text"
|
||||
value={searchEmail}
|
||||
onChange={(e) => setSearchEmail(e.target.value)}
|
||||
placeholder="Enter email address..."
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '4px',
|
||||
minWidth: '250px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCleanupOldBounces}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#6c757d',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cleanup Old Bounces
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bounce Records Table */}
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
borderBottom: '1px solid #dee2e6',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}>
|
||||
<h2 style={{ margin: 0, color: '#495057' }}>Bounce Records</h2>
|
||||
</div>
|
||||
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse'
|
||||
}}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#f8f9fa' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Email</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Type</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Reason</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Status</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredBounces.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} style={{
|
||||
padding: '40px',
|
||||
textAlign: 'center',
|
||||
color: '#6c757d',
|
||||
fontStyle: 'italic'
|
||||
}}>
|
||||
{searchEmail ? 'No bounces found matching your search.' : 'No bounce records found.'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredBounces.map((bounce) => (
|
||||
<tr key={bounce.id} style={{ borderBottom: '1px solid #f1f3f4' }}>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<div style={{ fontWeight: '500' }}>{bounce.email}</div>
|
||||
{bounce.smtp2go_message_id && (
|
||||
<div style={{ fontSize: '0.8rem', color: '#6c757d' }}>
|
||||
ID: {bounce.smtp2go_message_id}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span style={{
|
||||
backgroundColor: getBounceTypeColor(bounce.bounce_type),
|
||||
color: 'white',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase'
|
||||
}}>
|
||||
{bounce.bounce_type}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px', maxWidth: '300px' }}>
|
||||
<div style={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}}>
|
||||
{bounce.bounce_reason || 'No reason provided'}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{formatDate(bounce.bounce_date)}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span style={{
|
||||
color: bounce.is_active ? '#dc3545' : '#28a745',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{bounce.is_active ? 'Active' : 'Resolved'}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{bounce.is_active && (
|
||||
<button
|
||||
onClick={() => handleDeactivateBounce(bounce.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
backgroundColor: '#28a745',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem'
|
||||
}}
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BounceManagement;
|
||||
Reference in New Issue
Block a user