feat: add Telegram album purchase bot
This commit is contained in:
+249
-15
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaDownload, FaSearch, FaCheck, FaTimes, FaClock } from 'react-icons/fa';
|
||||
import { FaDownload, FaSearch, FaCheck, FaTimes, FaClock, FaTelegramPlane, FaSave } from 'react-icons/fa';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { Purchase } from '@/lib/types';
|
||||
import { formatPrice } from '@/lib/utils';
|
||||
@@ -14,9 +14,20 @@ export default function AdminPurchasesPage() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [telegramIds, setTelegramIds] = useState('');
|
||||
const [telegramBaseUrl, setTelegramBaseUrl] = useState('https://api.telegram.org');
|
||||
const [telegramBotToken, setTelegramBotToken] = useState('');
|
||||
const [telegramGreeting, setTelegramGreeting] = useState('Welcome! Choose albums from the catalog below.');
|
||||
const [telegramCardNumber, setTelegramCardNumber] = useState('');
|
||||
const [telegramCardHolder, setTelegramCardHolder] = useState('');
|
||||
const [telegramConfigured, setTelegramConfigured] = useState(false);
|
||||
const [telegramWebhookSecretConfigured, setTelegramWebhookSecretConfigured] = useState(false);
|
||||
const [telegramSaving, setTelegramSaving] = useState(false);
|
||||
const [telegramRegistering, setTelegramRegistering] = useState(false);
|
||||
const [telegramMessage, setTelegramMessage] = useState('');
|
||||
|
||||
const fetchPurchases = async () => {
|
||||
setLoading(true);
|
||||
const fetchPurchases = async (showLoading = true) => {
|
||||
if (showLoading) setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/purchases');
|
||||
if (response.ok) {
|
||||
@@ -26,14 +37,93 @@ export default function AdminPurchasesPage() {
|
||||
} catch (error) {
|
||||
console.error('Error fetching purchases:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
if (showLoading) setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPurchases();
|
||||
const refreshTimer = window.setInterval(() => fetchPurchases(false), 10_000);
|
||||
fetch('/api/telegram/settings')
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error('Failed to load Telegram settings');
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
|
||||
setTelegramBaseUrl(data.baseUrl || 'https://api.telegram.org');
|
||||
setTelegramGreeting(data.greetingText || 'Welcome! Choose albums from the catalog below.');
|
||||
setTelegramCardNumber(data.cardNumber || '');
|
||||
setTelegramCardHolder(data.cardHolderName || '');
|
||||
setTelegramConfigured(Boolean(data.botConfigured));
|
||||
setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching Telegram settings:', error);
|
||||
setTelegramMessage('Could not load Telegram settings.');
|
||||
});
|
||||
return () => window.clearInterval(refreshTimer);
|
||||
}, []);
|
||||
|
||||
const saveTelegramSettings = async () => {
|
||||
const ids = telegramIds
|
||||
.split(/[\s,]+/)
|
||||
.map((id) => id.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
if (ids.some((id) => !/^\d+$/.test(id))) {
|
||||
setTelegramMessage('Telegram user IDs must contain digits only.');
|
||||
return;
|
||||
}
|
||||
|
||||
setTelegramSaving(true);
|
||||
setTelegramMessage('');
|
||||
try {
|
||||
const response = await fetch('/api/telegram/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
approvers: ids.map((userId) => ({ userId })),
|
||||
baseUrl: telegramBaseUrl,
|
||||
greetingText: telegramGreeting,
|
||||
cardNumber: telegramCardNumber,
|
||||
cardHolderName: telegramCardHolder,
|
||||
...(telegramBotToken.trim() ? { botToken: telegramBotToken.trim() } : {}),
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok) throw new Error(data.error || 'Failed to save Telegram approvers');
|
||||
setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
|
||||
setTelegramBaseUrl(data.baseUrl);
|
||||
setTelegramGreeting(data.greetingText);
|
||||
setTelegramCardNumber(data.cardNumber);
|
||||
setTelegramCardHolder(data.cardHolderName);
|
||||
setTelegramBotToken('');
|
||||
setTelegramConfigured(Boolean(data.botConfigured));
|
||||
setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
|
||||
setTelegramMessage('Telegram settings saved.');
|
||||
} catch (error) {
|
||||
setTelegramMessage(error instanceof Error ? error.message : 'Failed to save Telegram approvers.');
|
||||
} finally {
|
||||
setTelegramSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const registerTelegramWebhook = async () => {
|
||||
setTelegramRegistering(true);
|
||||
setTelegramMessage('');
|
||||
try {
|
||||
const response = await fetch('/api/telegram/settings', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
if (!response.ok) throw new Error(data.error || 'Failed to register Telegram webhook');
|
||||
setTelegramMessage(data.message);
|
||||
} catch (error) {
|
||||
setTelegramMessage(error instanceof Error ? error.message : 'Failed to register Telegram webhook.');
|
||||
} finally {
|
||||
setTelegramRegistering(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApprove = async (purchaseId: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/purchases/${purchaseId}/approve`, {
|
||||
@@ -63,9 +153,10 @@ export default function AdminPurchasesPage() {
|
||||
};
|
||||
|
||||
const filteredPurchases = purchases.filter((purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
||||
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
||||
const matchesSearch =
|
||||
album?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
purchaseAlbums.some((album) => album.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||||
purchase.transactionId.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
purchase.customerName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
purchase.email?.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
@@ -79,21 +170,24 @@ export default function AdminPurchasesPage() {
|
||||
const approvedPurchases = purchases.filter(p => p.approvalStatus === 'approved');
|
||||
|
||||
const totalRevenue = approvedPurchases.reduce((total, purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
return total + (album?.price || 0);
|
||||
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
||||
return total + albums
|
||||
.filter((album) => purchaseAlbumIds.includes(album.id))
|
||||
.reduce((subtotal, album) => subtotal + album.price, 0);
|
||||
}, 0);
|
||||
|
||||
const exportToCSV = () => {
|
||||
const headers = ['Date', 'Time', 'Transaction ID', 'Album', 'Price', 'Customer', 'Email', 'Phone', 'Status', 'Payment Method'];
|
||||
const rows = purchases.map((purchase) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
||||
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
||||
const date = new Date(purchase.purchaseDate);
|
||||
return [
|
||||
date.toLocaleDateString(),
|
||||
date.toLocaleTimeString(),
|
||||
purchase.transactionId,
|
||||
album?.title || 'Unknown',
|
||||
album?.price || 0,
|
||||
purchaseAlbums.map((album) => album.title).join(' + ') || 'Unknown',
|
||||
purchaseAlbums.reduce((total, album) => total + album.price, 0),
|
||||
purchase.customerName || '',
|
||||
purchase.email || '',
|
||||
purchase.phoneNumber || '',
|
||||
@@ -161,6 +255,133 @@ export default function AdminPurchasesPage() {
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="paper-card p-5 mb-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<FaTelegramPlane className="text-paper-brown" />
|
||||
<label htmlFor="telegram-approvers" className="font-semibold text-paper-dark">
|
||||
Telegram purchase approvers
|
||||
</label>
|
||||
<span className={`text-xs px-2 py-1 border ${
|
||||
telegramConfigured
|
||||
? 'bg-green-100 border-green-400 text-green-700'
|
||||
: 'bg-orange-100 border-orange-400 text-orange-700'
|
||||
}`}>
|
||||
{telegramConfigured ? 'Bot configured' : 'Bot token missing'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label htmlFor="telegram-base-url" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Telegram API base URL
|
||||
</label>
|
||||
<input
|
||||
id="telegram-base-url"
|
||||
type="url"
|
||||
value={telegramBaseUrl}
|
||||
onChange={(event) => setTelegramBaseUrl(event.target.value)}
|
||||
placeholder="https://api.telegram.org"
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="telegram-bot-token" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Bot token
|
||||
</label>
|
||||
<input
|
||||
id="telegram-bot-token"
|
||||
type="password"
|
||||
value={telegramBotToken}
|
||||
onChange={(event) => setTelegramBotToken(event.target.value)}
|
||||
placeholder={telegramConfigured ? 'Saved — leave blank to keep it' : 'Paste the BotFather token'}
|
||||
autoComplete="new-password"
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="telegram-greeting" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Greeting message
|
||||
</label>
|
||||
<textarea
|
||||
id="telegram-greeting"
|
||||
value={telegramGreeting}
|
||||
onChange={(event) => setTelegramGreeting(event.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label htmlFor="telegram-card-number" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Payment card number
|
||||
</label>
|
||||
<input
|
||||
id="telegram-card-number"
|
||||
type="text"
|
||||
value={telegramCardNumber}
|
||||
onChange={(event) => setTelegramCardNumber(event.target.value)}
|
||||
placeholder="6037 9975 1234 5678"
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="telegram-card-holder" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Cardholder name
|
||||
</label>
|
||||
<input
|
||||
id="telegram-card-holder"
|
||||
type="text"
|
||||
value={telegramCardHolder}
|
||||
onChange={(event) => setTelegramCardHolder(event.target.value)}
|
||||
placeholder="Account holder name"
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label htmlFor="telegram-approvers" className="block text-sm font-medium text-paper-dark mb-1">
|
||||
Authorized Telegram user IDs
|
||||
</label>
|
||||
<input
|
||||
id="telegram-approvers"
|
||||
type="text"
|
||||
value={telegramIds}
|
||||
onChange={(event) => setTelegramIds(event.target.value)}
|
||||
placeholder="123456789, 987654321"
|
||||
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
||||
/>
|
||||
<p className="text-xs text-paper-gray mt-2">
|
||||
Comma-separated Telegram user IDs. A user can send /id to the bot to find their ID.
|
||||
</p>
|
||||
{!telegramWebhookSecretConfigured && (
|
||||
<p className="text-xs text-orange-700 mt-2">
|
||||
TELEGRAM_WEBHOOK_SECRET must be set on the server before registering the webhook.
|
||||
</p>
|
||||
)}
|
||||
{telegramMessage && <p className="text-sm text-paper-dark mt-2">{telegramMessage}</p>}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={saveTelegramSettings}
|
||||
disabled={telegramSaving}
|
||||
className="px-5 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaSave />
|
||||
{telegramSaving ? 'Saving...' : 'Save Telegram settings'}
|
||||
</button>
|
||||
<button
|
||||
onClick={registerTelegramWebhook}
|
||||
disabled={telegramRegistering || !telegramConfigured || !telegramWebhookSecretConfigured}
|
||||
className="px-5 py-3 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown text-paper-dark font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaTelegramPlane />
|
||||
{telegramRegistering ? 'Registering...' : 'Register webhook'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mb-6 space-y-4">
|
||||
<div className="flex gap-2">
|
||||
@@ -218,7 +439,8 @@ export default function AdminPurchasesPage() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredPurchases.map((purchase, index) => {
|
||||
const album = albums.find((a) => a.id === purchase.albumId);
|
||||
const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
|
||||
const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
|
||||
const date = new Date(purchase.purchaseDate);
|
||||
|
||||
return (
|
||||
@@ -249,8 +471,13 @@ export default function AdminPurchasesPage() {
|
||||
<div className="text-xs text-paper-gray">{purchase.phoneNumber}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-paper-dark font-medium">{album?.title || 'Unknown'}</div>
|
||||
<div className="text-xs text-paper-gray">{album?.songs.length} tracks</div>
|
||||
<div className="text-paper-dark font-medium">
|
||||
{purchaseAlbums.map((album) => album.title).join(', ') || 'Unknown'}
|
||||
</div>
|
||||
<div className="text-xs text-paper-gray">
|
||||
{purchaseAlbums.length} album{purchaseAlbums.length === 1 ? '' : 's'} • {' '}
|
||||
{purchaseAlbums.reduce((total, album) => total + album.songs.length, 0)} tracks
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
|
||||
@@ -259,9 +486,16 @@ export default function AdminPurchasesPage() {
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
{getStatusBadge(purchase.approvalStatus)}
|
||||
{purchase.reviewedByTelegramId && (
|
||||
<div className="text-xs text-paper-gray mt-1">
|
||||
Telegram: {purchase.reviewedByTelegramId}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<span className="text-paper-brown font-bold">{formatPrice(album?.price || 0)}</span>
|
||||
<span className="text-paper-brown font-bold">
|
||||
{formatPrice(purchaseAlbums.reduce((total, album) => total + album.price, 0))}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
{purchase.approvalStatus === 'pending' && (
|
||||
|
||||
Reference in New Issue
Block a user