507 lines
22 KiB
JavaScript
507 lines
22 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
|
|
import { Button } from '../../components/ui/button';
|
|
import { Input } from '../../components/ui/input';
|
|
import { Label } from '../../components/ui/label';
|
|
import { AlertCircle, CheckCircle, Settings as SettingsIcon, RefreshCw, Zap, Edit, Save, X, Copy, Eye, EyeOff, ExternalLink } from 'lucide-react';
|
|
import api from '../../utils/api';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function AdminSettings() {
|
|
const [stripeStatus, setStripeStatus] = useState(null);
|
|
const [loadingStatus, setLoadingStatus] = useState(true);
|
|
const [testing, setTesting] = useState(false);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// Form state
|
|
const [formData, setFormData] = useState({
|
|
secret_key: '',
|
|
webhook_secret: ''
|
|
});
|
|
|
|
// Show/hide sensitive values
|
|
const [showSecretKey, setShowSecretKey] = useState(false);
|
|
const [showWebhookSecret, setShowWebhookSecret] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchStripeStatus();
|
|
}, []);
|
|
|
|
const fetchStripeStatus = async () => {
|
|
setLoadingStatus(true);
|
|
try {
|
|
const response = await api.get('/admin/settings/stripe/status');
|
|
setStripeStatus(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch Stripe status:', error);
|
|
toast.error('Failed to load Stripe status');
|
|
} finally {
|
|
setLoadingStatus(false);
|
|
}
|
|
};
|
|
|
|
const handleTestConnection = async () => {
|
|
setTesting(true);
|
|
try {
|
|
const response = await api.post('/admin/settings/stripe/test-connection');
|
|
toast.success(response.data.message);
|
|
} catch (error) {
|
|
const message = error.response?.data?.detail || 'Connection test failed';
|
|
toast.error(message);
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
const handleEditClick = () => {
|
|
setIsEditing(true);
|
|
setFormData({
|
|
secret_key: '',
|
|
webhook_secret: ''
|
|
});
|
|
};
|
|
|
|
const handleCancelEdit = () => {
|
|
setIsEditing(false);
|
|
setFormData({
|
|
secret_key: '',
|
|
webhook_secret: ''
|
|
});
|
|
setShowSecretKey(false);
|
|
setShowWebhookSecret(false);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
// Validate inputs
|
|
if (!formData.secret_key || !formData.webhook_secret) {
|
|
toast.error('Both Secret Key and Webhook Secret are required');
|
|
return;
|
|
}
|
|
|
|
if (!formData.secret_key.startsWith('sk_test_') && !formData.secret_key.startsWith('sk_live_')) {
|
|
toast.error('Invalid Secret Key format. Must start with sk_test_ or sk_live_');
|
|
return;
|
|
}
|
|
|
|
if (!formData.webhook_secret.startsWith('whsec_')) {
|
|
toast.error('Invalid Webhook Secret format. Must start with whsec_');
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
await api.put('/admin/settings/stripe', formData);
|
|
toast.success('Stripe settings updated successfully');
|
|
setIsEditing(false);
|
|
setFormData({
|
|
secret_key: '',
|
|
webhook_secret: ''
|
|
});
|
|
setShowSecretKey(false);
|
|
setShowWebhookSecret(false);
|
|
// Refresh status
|
|
await fetchStripeStatus();
|
|
} catch (error) {
|
|
const message = error.response?.data?.detail || 'Failed to update Stripe settings';
|
|
toast.error(message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = (text, label) => {
|
|
navigator.clipboard.writeText(text);
|
|
toast.success(`${label} copied to clipboard`);
|
|
};
|
|
|
|
if (loadingStatus) {
|
|
return (
|
|
<div className="container mx-auto p-6">
|
|
<div className="flex items-center justify-center py-12">
|
|
<RefreshCw className="h-8 w-8 animate-spin text-brand-purple" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 max-w-4xl">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
|
<SettingsIcon className="h-8 w-8 text-brand-purple" />
|
|
Settings
|
|
</h1>
|
|
<p className="text-gray-600 mt-2">
|
|
Manage system configuration and integrations
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stripe Integration Card */}
|
|
<Card className="border-2 border-[var(--lavender-200)] shadow-sm">
|
|
<CardHeader className="bg-gradient-to-r from-[var(--lavender-100)] to-white border-b-2 border-[var(--lavender-200)]">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Zap className="h-5 w-5 text-brand-purple" />
|
|
Stripe Integration
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Payment processing and subscription management
|
|
</CardDescription>
|
|
</div>
|
|
{!isEditing && (
|
|
<Button
|
|
onClick={handleEditClick}
|
|
variant="outline"
|
|
className="border-2 border-brand-purple text-brand-purple hover:bg-[#f1eef9] rounded-full"
|
|
>
|
|
<Edit className="h-4 w-4 mr-2" />
|
|
Edit Settings
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="pt-6 space-y-6">
|
|
{isEditing ? (
|
|
/* Edit Mode */
|
|
<div className="space-y-6">
|
|
{/* Secret Key Input */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="secret_key">Stripe Secret Key</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="secret_key"
|
|
type={showSecretKey ? 'text' : 'password'}
|
|
value={formData.secret_key}
|
|
onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
|
|
placeholder="sk_test_... or sk_live_..."
|
|
className="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowSecretKey(!showSecretKey)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
{showSecretKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-gray-500">
|
|
Get this from your Stripe Dashboard → Developers → API keys
|
|
</p>
|
|
</div>
|
|
|
|
{/* Webhook Secret Input */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="webhook_secret">Stripe Webhook Secret</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="webhook_secret"
|
|
type={showWebhookSecret ? 'text' : 'password'}
|
|
value={formData.webhook_secret}
|
|
onChange={(e) => setFormData({ ...formData, webhook_secret: e.target.value })}
|
|
placeholder="whsec_..."
|
|
className="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowWebhookSecret(!showWebhookSecret)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
{showWebhookSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-gray-500">
|
|
Get this from your Stripe Dashboard → Developers → Webhooks → Add endpoint
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
|
|
<Button
|
|
onClick={handleCancelEdit}
|
|
variant="outline"
|
|
className="border-2 border-gray-300 rounded-full"
|
|
disabled={saving}
|
|
>
|
|
<X className="h-4 w-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
|
|
>
|
|
{saving ? (
|
|
<>
|
|
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
|
Saving...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
Save Settings
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* View Mode */
|
|
<>
|
|
{/* Status Display */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<p className="font-semibold text-gray-900">Configuration Status</p>
|
|
<p className="text-sm text-gray-600">Credentials stored in database (encrypted)</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{stripeStatus?.configured ? (
|
|
<>
|
|
<CheckCircle className="h-5 w-5 text-green-600" />
|
|
<span className="text-green-600 font-semibold">Configured</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertCircle className="h-5 w-5 text-amber-600" />
|
|
<span className="text-amber-600 font-semibold">Not Configured</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{stripeStatus?.configured && (
|
|
<>
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<p className="font-semibold text-gray-900">Environment</p>
|
|
<p className="text-sm text-gray-600">Detected from secret key prefix</p>
|
|
</div>
|
|
<span className={`px-3 py-1 rounded-full text-sm font-semibold ${
|
|
stripeStatus.environment === 'live'
|
|
? 'bg-green-100 text-green-800 border-2 border-green-300'
|
|
: 'bg-blue-100 text-blue-800 border-2 border-blue-300'
|
|
}`}>
|
|
{stripeStatus.environment === 'live' ? 'Live' : 'Test'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<p className="font-semibold text-gray-900">Secret Key</p>
|
|
<p className="text-sm text-gray-600 font-mono">
|
|
{stripeStatus.secret_key_prefix}...
|
|
</p>
|
|
</div>
|
|
<CheckCircle className="h-5 w-5 text-green-600" />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<p className="font-semibold text-gray-900">Webhook Secret</p>
|
|
<p className="text-sm text-gray-600">Webhook endpoint configuration</p>
|
|
</div>
|
|
{stripeStatus.webhook_secret_set ? (
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="h-5 w-5 text-green-600" />
|
|
<span className="text-green-600 font-semibold text-sm">Set</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<AlertCircle className="h-5 w-5 text-amber-600" />
|
|
<span className="text-amber-600 font-semibold text-sm">Not Set</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Webhook URL */}
|
|
<div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
|
<ExternalLink className="h-4 w-4" />
|
|
Webhook URL
|
|
</p>
|
|
<p className="text-sm text-blue-700 mb-2">
|
|
Configure this webhook endpoint in your Stripe Dashboard:
|
|
</p>
|
|
<div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
|
|
{stripeStatus.webhook_url}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => copyToClipboard(stripeStatus.webhook_url, 'Webhook URL')}
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-blue-300 text-blue-700 hover:bg-blue-100"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-3 text-xs text-blue-600">
|
|
<p className="font-semibold mb-1">Webhook Events to Configure:</p>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
|
|
<ul className="list-disc list-inside ml-2">
|
|
<li>checkout.session.completed - Handles subscriptions & donations</li>
|
|
</ul>
|
|
</div>
|
|
<div className="opacity-80">
|
|
<p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
|
|
<ul className="list-disc list-inside ml-2 text-xs">
|
|
<li>payment_intent.created</li>
|
|
<li>payment_intent.succeeded</li>
|
|
<li>charge.succeeded</li>
|
|
<li>charge.updated</li>
|
|
</ul>
|
|
<p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
|
|
</div>
|
|
<div className="opacity-70">
|
|
<p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
|
|
<ul className="list-disc list-inside ml-2">
|
|
<li>invoice.payment_succeeded</li>
|
|
<li>invoice.payment_failed</li>
|
|
<li>customer.subscription.updated</li>
|
|
<li>customer.subscription.deleted</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Configuration Instructions (Not Configured) */}
|
|
{!stripeStatus?.configured && (
|
|
<>
|
|
<div className="p-4 bg-amber-50 border-2 border-amber-200 rounded-lg">
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm">
|
|
<p className="font-semibold text-amber-900 mb-2">Configuration Required</p>
|
|
<p className="text-amber-700 mb-2">
|
|
Click "Edit Settings" above to configure your Stripe credentials.
|
|
</p>
|
|
<p className="text-amber-700">
|
|
Get your API keys from{' '}
|
|
<a
|
|
href="https://dashboard.stripe.com/apikeys"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-semibold underline"
|
|
>
|
|
Stripe Dashboard
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Webhook URL Info (Always visible) */}
|
|
<div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
|
<ExternalLink className="h-4 w-4" />
|
|
Webhook URL Configuration
|
|
</p>
|
|
<p className="text-sm text-blue-700 mb-2">
|
|
After configuring your API keys, set up this webhook endpoint in your Stripe Dashboard:
|
|
</p>
|
|
<div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
|
|
{stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe'}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => copyToClipboard(stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe', 'Webhook URL')}
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-blue-300 text-blue-700 hover:bg-blue-100"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-3 text-xs text-blue-600">
|
|
<p className="font-semibold mb-1">Webhook Events to Configure:</p>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
|
|
<ul className="list-disc list-inside ml-2">
|
|
<li>checkout.session.completed - Handles subscriptions & donations</li>
|
|
</ul>
|
|
</div>
|
|
<div className="opacity-80">
|
|
<p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
|
|
<ul className="list-disc list-inside ml-2 text-xs">
|
|
<li>payment_intent.created</li>
|
|
<li>payment_intent.succeeded</li>
|
|
<li>charge.succeeded</li>
|
|
<li>charge.updated</li>
|
|
</ul>
|
|
<p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
|
|
</div>
|
|
<div className="opacity-70">
|
|
<p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
|
|
<ul className="list-disc list-inside ml-2">
|
|
<li>invoice.payment_succeeded</li>
|
|
<li>invoice.payment_failed</li>
|
|
<li>customer.subscription.updated</li>
|
|
<li>customer.subscription.deleted</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Test Connection Button */}
|
|
{stripeStatus?.configured && (
|
|
<div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
|
|
<Button
|
|
onClick={fetchStripeStatus}
|
|
variant="outline"
|
|
className="border-2 border-gray-300 rounded-full"
|
|
disabled={loadingStatus}
|
|
>
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loadingStatus ? 'animate-spin' : ''}`} />
|
|
Refresh Status
|
|
</Button>
|
|
<Button
|
|
onClick={handleTestConnection}
|
|
disabled={testing}
|
|
className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
|
|
>
|
|
{testing ? (
|
|
<>
|
|
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
|
Testing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Zap className="h-4 w-4 mr-2" />
|
|
Test Connection
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Future Settings Sections Placeholder */}
|
|
<div className="mt-6 p-6 border-2 border-dashed border-gray-300 rounded-lg text-center text-gray-500">
|
|
<p className="text-sm">Additional settings sections will be added here</p>
|
|
<p className="text-xs mt-1">(Email, Storage, Notifications, etc.)</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|