Initial commit
This commit is contained in:
Michilis
515
frontend/src/pages/dashboard/PaywallDetail.jsx
Normal file
515
frontend/src/pages/dashboard/PaywallDetail.jsx
Normal file
@@ -0,0 +1,515 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { motion } from 'framer-motion'
|
||||
import { format } from 'date-fns'
|
||||
import toast from 'react-hot-toast'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ClipboardIcon,
|
||||
ArrowTopRightOnSquareIcon,
|
||||
PencilIcon,
|
||||
ArchiveBoxIcon,
|
||||
ChartBarIcon,
|
||||
CheckIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { paywallsApi } from '../../services/api'
|
||||
|
||||
export default function PaywallDetail() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const [paywall, setPaywall] = useState(null)
|
||||
const [stats, setStats] = useState(null)
|
||||
const [embedCode, setEmbedCode] = useState(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState('overview')
|
||||
const [editData, setEditData] = useState({})
|
||||
|
||||
useEffect(() => {
|
||||
fetchPaywall()
|
||||
fetchEmbed()
|
||||
}, [id])
|
||||
|
||||
const fetchPaywall = async () => {
|
||||
try {
|
||||
const response = await paywallsApi.get(id)
|
||||
setPaywall(response.data.paywall)
|
||||
setStats(response.data.stats)
|
||||
setEditData({
|
||||
title: response.data.paywall.title || '',
|
||||
description: response.data.paywall.description || '',
|
||||
priceSats: response.data.paywall.priceSats || 100,
|
||||
originalUrl: response.data.paywall.originalUrl || '',
|
||||
accessExpirySeconds: response.data.paywall.accessExpirySeconds || null,
|
||||
maxDevices: response.data.paywall.maxDevices || 3,
|
||||
allowEmbed: response.data.paywall.allowEmbed ?? true,
|
||||
customSuccessMessage: response.data.paywall.customSuccessMessage || '',
|
||||
slug: response.data.paywall.slug || '',
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching paywall:', error)
|
||||
toast.error('Failed to load paywall')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditChange = (e) => {
|
||||
const { name, value, type, checked } = e.target
|
||||
setEditData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? checked : (type === 'number' ? (value === '' ? null : parseInt(value)) : value)
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSaveSettings = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSaving(true)
|
||||
|
||||
try {
|
||||
const updateData = {
|
||||
...editData,
|
||||
priceSats: parseInt(editData.priceSats),
|
||||
accessExpirySeconds: editData.accessExpirySeconds ? parseInt(editData.accessExpirySeconds) : null,
|
||||
maxDevices: parseInt(editData.maxDevices),
|
||||
}
|
||||
|
||||
const response = await paywallsApi.update(id, updateData)
|
||||
setPaywall(response.data.paywall)
|
||||
toast.success('Paywall updated successfully!')
|
||||
} catch (error) {
|
||||
console.error('Error updating paywall:', error)
|
||||
toast.error(error.response?.data?.error || 'Failed to update paywall')
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchEmbed = async () => {
|
||||
try {
|
||||
const response = await paywallsApi.getEmbed(id)
|
||||
setEmbedCode(response.data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching embed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = (text, label) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
toast.success(`${label} copied!`)
|
||||
}
|
||||
|
||||
const handleArchive = async () => {
|
||||
try {
|
||||
await paywallsApi.archive(id)
|
||||
toast.success('Paywall archived')
|
||||
navigate('/dashboard/paywalls')
|
||||
} catch (error) {
|
||||
toast.error('Failed to archive paywall')
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-lightning"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!paywall) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<h2 className="text-xl font-bold mb-2">Paywall not found</h2>
|
||||
<Link to="/dashboard/paywalls" className="text-lightning hover:underline">
|
||||
Back to paywalls
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const paywallUrl = embedCode?.link || `${window.location.origin}/p/${paywall.slug || paywall.id}`
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start gap-4">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard/paywalls')}
|
||||
className="flex items-center gap-2 text-dark-400 hover:text-white self-start"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4" />
|
||||
Back
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{paywall.title}</h1>
|
||||
<p className="text-dark-400">{paywall.description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href={paywallUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
<ArrowTopRightOnSquareIcon className="w-4 h-4" />
|
||||
Preview
|
||||
</a>
|
||||
<button
|
||||
onClick={handleArchive}
|
||||
className="btn btn-secondary text-red-500 border-red-500/30 hover:bg-red-500/10"
|
||||
>
|
||||
<ArchiveBoxIcon className="w-4 h-4" />
|
||||
Archive
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="card p-4">
|
||||
<p className="text-dark-400 text-sm">Price</p>
|
||||
<p className="text-2xl font-bold text-lightning">⚡ {paywall.priceSats.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="card p-4">
|
||||
<p className="text-dark-400 text-sm">Total Sales</p>
|
||||
<p className="text-2xl font-bold">{stats?.salesCount || 0}</p>
|
||||
</div>
|
||||
<div className="card p-4">
|
||||
<p className="text-dark-400 text-sm">Total Revenue</p>
|
||||
<p className="text-2xl font-bold text-lightning">⚡ {(stats?.totalRevenue || 0).toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="card p-4">
|
||||
<p className="text-dark-400 text-sm">Status</p>
|
||||
<p className={`text-2xl font-bold ${paywall.status === 'ACTIVE' ? 'text-green-500' : 'text-dark-400'}`}>
|
||||
{paywall.status}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 border-b border-dark-800 pb-px">
|
||||
{['overview', 'embed', 'settings'].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
||||
activeTab === tab
|
||||
? 'border-lightning text-white'
|
||||
: 'border-transparent text-dark-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
{activeTab === 'overview' && (
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Preview */}
|
||||
<div className="card overflow-hidden">
|
||||
{paywall.coverImageUrl ? (
|
||||
<img src={paywall.coverImageUrl} alt="" className="w-full h-48 object-cover" />
|
||||
) : (
|
||||
<div className="w-full h-48 bg-gradient-to-br from-purple-600 to-pink-500" />
|
||||
)}
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold mb-2">{paywall.title}</h3>
|
||||
<p className="text-sm text-dark-400 mb-4">{paywall.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-lightning font-bold">⚡ {paywall.priceSats.toLocaleString()} sats</span>
|
||||
<span className="text-xs text-dark-500">
|
||||
{paywall.accessExpirySeconds
|
||||
? `${Math.round(paywall.accessExpirySeconds / 86400)} day access`
|
||||
: 'Lifetime access'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick links */}
|
||||
<div className="space-y-4">
|
||||
<div className="card p-4">
|
||||
<h4 className="font-semibold mb-3">Share Link</h4>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={paywallUrl}
|
||||
readOnly
|
||||
className="input flex-1 text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleCopy(paywallUrl, 'Link')}
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
<ClipboardIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-4">
|
||||
<h4 className="font-semibold mb-3">Details</h4>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-dark-400">Created</dt>
|
||||
<dd>{format(new Date(paywall.createdAt), 'MMM d, yyyy')}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-dark-400">Max Devices</dt>
|
||||
<dd>{paywall.maxDevices}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-dark-400">Content Type</dt>
|
||||
<dd>{paywall.originalUrlType}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-dark-400">Allow Embed</dt>
|
||||
<dd>{paywall.allowEmbed ? 'Yes' : 'No'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'embed' && embedCode && (
|
||||
<div className="space-y-6" id="embed">
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Iframe Embed</h3>
|
||||
<p className="text-sm text-dark-400 mb-4">
|
||||
Add this code to your website to embed the paywall directly.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<pre className="bg-dark-800 rounded-xl p-4 text-sm overflow-x-auto font-mono">
|
||||
{embedCode.iframe}
|
||||
</pre>
|
||||
<button
|
||||
onClick={() => handleCopy(embedCode.iframe, 'Embed code')}
|
||||
className="absolute top-2 right-2 btn btn-secondary text-xs py-1 px-2"
|
||||
>
|
||||
<ClipboardIcon className="w-4 h-4" />
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Button Embed</h3>
|
||||
<p className="text-sm text-dark-400 mb-4">
|
||||
Add a button that opens a checkout modal when clicked.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<pre className="bg-dark-800 rounded-xl p-4 text-sm overflow-x-auto font-mono">
|
||||
{embedCode.button}
|
||||
</pre>
|
||||
<button
|
||||
onClick={() => handleCopy(embedCode.button, 'Button code')}
|
||||
className="absolute top-2 right-2 btn btn-secondary text-xs py-1 px-2"
|
||||
>
|
||||
<ClipboardIcon className="w-4 h-4" />
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Direct Link</h3>
|
||||
<p className="text-sm text-dark-400 mb-4">
|
||||
Share this link directly or use it in your own custom integration.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={embedCode.link}
|
||||
readOnly
|
||||
className="input flex-1 font-mono text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleCopy(embedCode.link, 'Link')}
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
<ClipboardIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<form onSubmit={handleSaveSettings} className="space-y-6">
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Basic Settings</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="label">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={editData.title}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Description</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={editData.description}
|
||||
onChange={handleEditChange}
|
||||
className="input min-h-[100px]"
|
||||
placeholder="What are you selling?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Original URL</label>
|
||||
<input
|
||||
type="url"
|
||||
name="originalUrl"
|
||||
value={editData.originalUrl}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Custom Slug (optional)</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-dark-400">/p/</span>
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
value={editData.slug}
|
||||
onChange={handleEditChange}
|
||||
className="input flex-1"
|
||||
placeholder="my-awesome-content"
|
||||
pattern="^[a-z0-9-]+$"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-dark-500 mt-1">Lowercase letters, numbers, and hyphens only</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Pricing & Access</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="label">Price (sats)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="priceSats"
|
||||
value={editData.priceSats}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
min="1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Access Duration</label>
|
||||
<select
|
||||
name="accessExpirySeconds"
|
||||
value={editData.accessExpirySeconds || ''}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
>
|
||||
<option value="">Lifetime access</option>
|
||||
<option value="86400">24 hours</option>
|
||||
<option value="604800">7 days</option>
|
||||
<option value="2592000">30 days</option>
|
||||
<option value="7776000">90 days</option>
|
||||
<option value="31536000">1 year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Max Devices</label>
|
||||
<input
|
||||
type="number"
|
||||
name="maxDevices"
|
||||
value={editData.maxDevices}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
min="1"
|
||||
max="100"
|
||||
/>
|
||||
<p className="text-xs text-dark-500 mt-1">How many devices can access the content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card p-6">
|
||||
<h3 className="font-semibold mb-4">Advanced</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="allowEmbed"
|
||||
id="allowEmbed"
|
||||
checked={editData.allowEmbed}
|
||||
onChange={handleEditChange}
|
||||
className="w-4 h-4 rounded border-dark-700 bg-dark-800 text-lightning focus:ring-lightning"
|
||||
/>
|
||||
<label htmlFor="allowEmbed" className="text-sm">Allow embedding on other websites</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Custom Success Message</label>
|
||||
<textarea
|
||||
name="customSuccessMessage"
|
||||
value={editData.customSuccessMessage}
|
||||
onChange={handleEditChange}
|
||||
className="input"
|
||||
placeholder="Thank you for your purchase!"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{isSaving ? (
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<CheckIcon className="w-5 h-5" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleArchive}
|
||||
className="btn btn-secondary text-red-500 border-red-500/30 hover:bg-red-500/10"
|
||||
>
|
||||
<ArchiveBoxIcon className="w-4 h-4" />
|
||||
Archive Paywall
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user