mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-28 13:32:23 +00:00
remove unwanted pages
This commit is contained in:
Steven Enamakel
@@ -1,586 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Navigation from '../components/Navigation';
|
||||
import { useCurrentSubscriptionPlan } from '../hooks/useCurrentSubscriptionPlan';
|
||||
import { useStripePlans } from '../hooks/useStripePlans';
|
||||
import { useStripeCheckout } from '../hooks/useStripeCheckout';
|
||||
import { useCoinbaseCheckout } from '../hooks/useCoinbaseCheckout';
|
||||
|
||||
// Mock data - in production, this would come from an API
|
||||
const mockUsage = {
|
||||
dailyRecapsUsed: 8,
|
||||
dailyRecapsLimit: 15,
|
||||
aiTokensUsed: 125000,
|
||||
aiTokensLimit: 500000,
|
||||
connectionsUsed: 2,
|
||||
connectionsLimit: 3,
|
||||
};
|
||||
|
||||
export default function Dashboard() {
|
||||
const { plan, loading, error, refetch } = useCurrentSubscriptionPlan();
|
||||
const { plans: stripePlans, loading: plansLoading } = useStripePlans();
|
||||
const { handleCheckout: handleStripeCheckout, loading: stripeLoading } = useStripeCheckout();
|
||||
const { handleCheckout: handleCoinbaseCheckout, loading: coinbaseLoading } = useCoinbaseCheckout();
|
||||
const [showCancelModal, setShowCancelModal] = useState(false);
|
||||
const [showConvertModal, setShowConvertModal] = useState(false);
|
||||
const [showSwitchModal, setShowSwitchModal] = useState(false);
|
||||
const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
|
||||
const [billingCycle, setBillingCycle] = useState<'monthly' | 'annual'>('monthly');
|
||||
|
||||
const recapsPercentage = (mockUsage.dailyRecapsUsed / mockUsage.dailyRecapsLimit) * 100;
|
||||
const tokensPercentage = (mockUsage.aiTokensUsed / mockUsage.aiTokensLimit) * 100;
|
||||
const connectionsPercentage = (mockUsage.connectionsUsed / mockUsage.connectionsLimit) * 100;
|
||||
|
||||
// Format plan name from API format (FREE, BASIC, PRO) to display format (Free, Basic, Pro)
|
||||
const formatPlanName = (planType: string | null | undefined): string => {
|
||||
if (!planType) return 'Free';
|
||||
return planType.charAt(0) + planType.slice(1).toLowerCase();
|
||||
};
|
||||
|
||||
const currentPlanName = formatPlanName(plan?.plan);
|
||||
const isUpgrade = (planName: string) => {
|
||||
const planOrder = ['Free', 'Basic', 'Pro'];
|
||||
const currentIndex = planOrder.indexOf(currentPlanName);
|
||||
const newIndex = planOrder.indexOf(planName);
|
||||
return newIndex > currentIndex;
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateString: string | null | undefined): string => {
|
||||
if (!dateString) return 'N/A';
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
} catch {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
// Get next billing date from subscription
|
||||
const getNextBillingDate = (): string => {
|
||||
if (plan?.subscription?.currentPeriodEnd) {
|
||||
return formatDate(plan.subscription.currentPeriodEnd);
|
||||
}
|
||||
if (plan?.planExpiry) {
|
||||
return formatDate(plan.planExpiry);
|
||||
}
|
||||
return 'N/A';
|
||||
};
|
||||
|
||||
const handleSwitchPlan = (planName: string) => {
|
||||
setSelectedPlan(planName);
|
||||
setShowSwitchModal(true);
|
||||
};
|
||||
|
||||
const handleStripePayment = async () => {
|
||||
if (!selectedPlan || selectedPlan === 'Free') return;
|
||||
|
||||
const planType = selectedPlan.toLowerCase() as 'basic' | 'pro';
|
||||
try {
|
||||
await handleStripeCheckout(planType, billingCycle);
|
||||
setShowSwitchModal(false);
|
||||
setSelectedPlan(null);
|
||||
} catch {
|
||||
// Error is already handled in the hook
|
||||
}
|
||||
};
|
||||
|
||||
const handleCoinbasePayment = async () => {
|
||||
if (!selectedPlan || selectedPlan === 'Free') return;
|
||||
|
||||
const planType = selectedPlan.toLowerCase() as 'basic' | 'pro';
|
||||
try {
|
||||
await handleCoinbaseCheckout(planType);
|
||||
setShowSwitchModal(false);
|
||||
setSelectedPlan(null);
|
||||
} catch {
|
||||
// Error is already handled in the hook
|
||||
}
|
||||
};
|
||||
|
||||
// Get plan data from Stripe plans
|
||||
const getPlanData = (planName: string) => {
|
||||
return stripePlans.find((p) => p.name === planName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<Navigation />
|
||||
<main className="mx-auto max-w-7xl px-6 pt-24 sm:px-8 sm:pt-32">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="mt-2 text-zinc-400">Manage your subscription and usage</p>
|
||||
|
||||
{/* Subscription Card */}
|
||||
<div className="mt-8 rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<p className="text-zinc-400">Loading subscription information...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<p className="text-red-400">{error}</p>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="mt-4 rounded-lg border border-zinc-800 px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
) : plan ? (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">
|
||||
Current Plan: {currentPlanName}
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Status: {plan.hasActiveSubscription ? (
|
||||
<span className="text-green-400">Active</span>
|
||||
) : (
|
||||
<span className="text-zinc-500">Inactive</span>
|
||||
)}
|
||||
</p>
|
||||
{plan.planExpiry && (
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Plan expires: {formatDate(plan.planExpiry)}
|
||||
</p>
|
||||
)}
|
||||
{plan.subscription?.currentPeriodEnd && (
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Next billing date: {formatDate(plan.subscription.currentPeriodEnd)}
|
||||
</p>
|
||||
)}
|
||||
{plan.subscription?.status && (
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Subscription status: <span className="capitalize">{plan.subscription.status}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
{plan.hasActiveSubscription && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setShowConvertModal(true)}
|
||||
className="rounded-lg border border-zinc-800 px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Convert to Annual
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCancelModal(true)}
|
||||
className="rounded-lg border border-red-800 px-4 py-2 text-sm font-semibold text-red-400 transition-colors hover:border-red-700"
|
||||
>
|
||||
Cancel Subscription
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<p className="text-zinc-400">No subscription information available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Switch Plan Section */}
|
||||
<div className="mt-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">Switch Plan</h2>
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
Upgrade or downgrade your subscription plan
|
||||
</p>
|
||||
</div>
|
||||
{/* Billing Cycle Toggle */}
|
||||
<div className="inline-flex rounded-lg border border-zinc-800 bg-zinc-900/50 p-1">
|
||||
<button
|
||||
onClick={() => setBillingCycle('monthly')}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
billingCycle === 'monthly'
|
||||
? 'bg-white text-zinc-950'
|
||||
: 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingCycle('annual')}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
billingCycle === 'annual'
|
||||
? 'bg-white text-zinc-950'
|
||||
: 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Annual
|
||||
{billingCycle === 'annual' && (
|
||||
<span className="ml-2 rounded-full bg-green-600 px-2 py-0.5 text-xs text-white">
|
||||
Save 20%
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-3">
|
||||
{plansLoading ? (
|
||||
<div className="col-span-3 text-center text-zinc-400">Loading plans...</div>
|
||||
) : (
|
||||
stripePlans.map((planData) => {
|
||||
const isCurrentPlan = planData.name === currentPlanName;
|
||||
const isUpgradePlan = isUpgrade(planData.name);
|
||||
const price = billingCycle === 'monthly' ? planData.monthlyPrice : planData.annualPrice;
|
||||
const monthlyEquivalent = billingCycle === 'annual' && price > 0
|
||||
? Math.round(price / 12)
|
||||
: price;
|
||||
const savings = billingCycle === 'annual' && planData.monthlyPrice > 0
|
||||
? (planData.monthlyPrice * 12) - price
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={planData.name}
|
||||
className={`relative rounded-lg border p-6 ${
|
||||
isCurrentPlan
|
||||
? 'border-white bg-zinc-900'
|
||||
: 'border-zinc-800 bg-zinc-900/50'
|
||||
}`}
|
||||
>
|
||||
{isCurrentPlan && (
|
||||
<div className="absolute -top-3 left-4">
|
||||
<span className="rounded-full bg-white px-2 py-0.5 text-xs font-semibold text-zinc-950">
|
||||
Current
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-white">{planData.name}</h3>
|
||||
<div className="mt-2 flex items-baseline justify-center gap-1">
|
||||
<span className="text-3xl font-bold text-white">
|
||||
${price}
|
||||
</span>
|
||||
{price > 0 && (
|
||||
<span className="text-sm text-zinc-400">
|
||||
/{billingCycle === 'monthly' ? 'month' : 'year'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{billingCycle === 'annual' && price > 0 && (
|
||||
<div className="mt-2">
|
||||
<p className="text-xs text-zinc-400">
|
||||
${monthlyEquivalent}/month
|
||||
</p>
|
||||
{savings > 0 && (
|
||||
<p className="mt-1 text-xs font-semibold text-green-400">
|
||||
Save ${savings}/year
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleSwitchPlan(planData.name)}
|
||||
disabled={isCurrentPlan}
|
||||
className={`mt-6 w-full rounded-lg px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
isCurrentPlan
|
||||
? 'cursor-not-allowed border border-zinc-700 bg-zinc-800 text-zinc-500'
|
||||
: isUpgradePlan
|
||||
? 'bg-white text-zinc-950 hover:bg-zinc-200'
|
||||
: 'border border-zinc-800 text-white hover:border-zinc-700'
|
||||
}`}
|
||||
>
|
||||
{isCurrentPlan
|
||||
? 'Current Plan'
|
||||
: isUpgradePlan
|
||||
? 'Upgrade'
|
||||
: 'Downgrade'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Stats */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-semibold text-white">Usage Statistics</h2>
|
||||
<div className="mt-4 grid gap-6 sm:grid-cols-3">
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-zinc-400">Daily Recaps Used</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-white">
|
||||
{mockUsage.dailyRecapsUsed}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-zinc-500">
|
||||
of {mockUsage.dailyRecapsLimit}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-zinc-800">
|
||||
<div
|
||||
className="h-full bg-white transition-all"
|
||||
style={{ width: `${recapsPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-zinc-400">AI Tokens Used</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-white">
|
||||
{mockUsage.aiTokensUsed.toLocaleString()}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-zinc-500">
|
||||
of {mockUsage.aiTokensLimit.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-zinc-800">
|
||||
<div
|
||||
className="h-full bg-white transition-all"
|
||||
style={{ width: `${tokensPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-zinc-400">Connections Used</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-white">
|
||||
{mockUsage.connectionsUsed}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-zinc-500">
|
||||
of {mockUsage.connectionsLimit}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-zinc-800">
|
||||
<div
|
||||
className="h-full bg-white transition-all"
|
||||
style={{ width: `${connectionsPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Cancel Modal */}
|
||||
{showCancelModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="relative w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
<button
|
||||
onClick={() => setShowCancelModal(false)}
|
||||
className="absolute right-4 top-4 text-zinc-400 hover:text-white transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="text-xl font-semibold text-white pr-8">
|
||||
Cancel Subscription
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Are you sure you want to cancel your subscription? You'll lose
|
||||
access to all premium features at the end of your billing period.
|
||||
</p>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowCancelModal(false)}
|
||||
className="flex-1 rounded-lg border border-zinc-800 px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Keep Subscription
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Handle cancellation
|
||||
setShowCancelModal(false);
|
||||
alert('Subscription cancelled');
|
||||
}}
|
||||
className="flex-1 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-red-700"
|
||||
>
|
||||
Cancel Subscription
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Convert to Annual Modal */}
|
||||
{showConvertModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="relative w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
<button
|
||||
onClick={() => setShowConvertModal(false)}
|
||||
className="absolute right-4 top-4 text-zinc-400 hover:text-white transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="text-xl font-semibold text-white pr-8">
|
||||
Convert to Annual Plan
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Save 20% by switching to an annual plan. Your subscription will
|
||||
be billed annually at $278.40 (equivalent to $23.20/month).
|
||||
</p>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowConvertModal(false)}
|
||||
className="flex-1 rounded-lg border border-zinc-800 px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Handle conversion
|
||||
setShowConvertModal(false);
|
||||
alert('Converted to annual plan');
|
||||
}}
|
||||
className="flex-1 rounded-lg bg-white px-4 py-2 text-sm font-semibold text-zinc-950 transition-colors hover:bg-zinc-200"
|
||||
>
|
||||
Convert Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Switch Plan Modal */}
|
||||
{showSwitchModal && selectedPlan && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="relative w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowSwitchModal(false);
|
||||
setSelectedPlan(null);
|
||||
}}
|
||||
className="absolute right-4 top-4 text-zinc-400 hover:text-white transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<h3 className="text-xl font-semibold text-white pr-8">
|
||||
Switch to {selectedPlan} Plan
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
{isUpgrade(selectedPlan) ? (
|
||||
<>
|
||||
You're upgrading from <strong>{currentPlanName}</strong> to{' '}
|
||||
<strong>{selectedPlan}</strong>. Changes will take effect
|
||||
immediately. You'll be charged a prorated amount for the
|
||||
remainder of your billing cycle.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
You're downgrading from <strong>{currentPlanName}</strong> to{' '}
|
||||
<strong>{selectedPlan}</strong>. Changes will take effect at
|
||||
the end of your current billing period on{' '}
|
||||
{getNextBillingDate()}.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{selectedPlan !== 'Free' && (
|
||||
<>
|
||||
{/* Price Display */}
|
||||
<div className="mt-4 rounded-lg border border-zinc-800 bg-zinc-950/50 p-4">
|
||||
{(() => {
|
||||
const planData = getPlanData(selectedPlan);
|
||||
if (!planData) return null;
|
||||
|
||||
const price = billingCycle === 'monthly'
|
||||
? planData.monthlyPrice
|
||||
: planData.annualPrice;
|
||||
const monthlyEquivalent = billingCycle === 'annual' && price > 0
|
||||
? Math.round(price / 12)
|
||||
: price;
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-sm text-zinc-300">
|
||||
{billingCycle === 'monthly' ? 'Monthly' : 'Annual'} charge: ${price}
|
||||
{billingCycle === 'annual' && price > 0 && (
|
||||
<span className="ml-2 text-zinc-400">
|
||||
(${monthlyEquivalent}/month)
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Payment Buttons */}
|
||||
<div className="mt-6 space-y-3">
|
||||
<button
|
||||
onClick={handleStripePayment}
|
||||
disabled={stripeLoading || coinbaseLoading}
|
||||
className="w-full rounded-lg bg-white px-4 py-3 text-sm font-semibold text-zinc-950 transition-colors hover:bg-zinc-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{stripeLoading ? 'Processing...' : 'Pay with Card'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCoinbasePayment}
|
||||
disabled={stripeLoading || coinbaseLoading}
|
||||
className="w-full rounded-lg border border-zinc-800 px-4 py-3 text-sm font-semibold text-white transition-colors hover:border-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{coinbaseLoading ? 'Processing...' : 'Pay with Crypto'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,702 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import TelegramLogin from '../components/TelegramLogin';
|
||||
import FeedbackList from '../components/FeedbackList';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
const USE_MOCK_DATA = true; // Set to false when ready to use real API
|
||||
|
||||
export interface Feedback {
|
||||
_id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'planned' | 'in_progress' | 'complete';
|
||||
type: 'feature' | 'bug' | 'improvement';
|
||||
createdBy: {
|
||||
telegramId: number;
|
||||
telegramFirstName?: string;
|
||||
telegramLastName?: string;
|
||||
telegramUsername?: string;
|
||||
};
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
userVote: 'upvote' | 'downvote' | null;
|
||||
comments: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// Mock data
|
||||
const mockFeedbacks: Feedback[] = [
|
||||
{
|
||||
_id: '1',
|
||||
title: 'Summarize conversations',
|
||||
description: 'Get up to speed more quickly in any channel, direct message (DM), or thread. Whether we\'re joining a new channel, returning from time off, or catching up on missed messages.',
|
||||
status: 'planned',
|
||||
type: 'feature',
|
||||
createdBy: {
|
||||
telegramId: 123456789,
|
||||
telegramFirstName: 'John',
|
||||
telegramLastName: 'Doe',
|
||||
telegramUsername: 'johndoe',
|
||||
},
|
||||
upvotes: 5,
|
||||
downvotes: 0,
|
||||
userVote: null,
|
||||
comments: ['1', '2'],
|
||||
createdAt: new Date(Date.now() - 86400000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 86400000).toISOString(),
|
||||
},
|
||||
{
|
||||
_id: '2',
|
||||
title: 'Create a daily recap of selected chats',
|
||||
description: 'Get caught up after some time away from Telegram with a customized summary of our unread channels. With recaps, we can get automated daily summaries for selected chats.',
|
||||
status: 'planned',
|
||||
type: 'feature',
|
||||
createdBy: {
|
||||
telegramId: 987654321,
|
||||
telegramFirstName: 'Jane',
|
||||
telegramLastName: 'Smith',
|
||||
telegramUsername: 'janesmith',
|
||||
},
|
||||
upvotes: 3,
|
||||
downvotes: 1,
|
||||
userVote: null,
|
||||
comments: ['3'],
|
||||
createdAt: new Date(Date.now() - 172800000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 172800000).toISOString(),
|
||||
},
|
||||
{
|
||||
_id: '3',
|
||||
title: 'Create a macOS & Windows App',
|
||||
description: 'For all the desktop users using these platforms',
|
||||
status: 'planned',
|
||||
type: 'feature',
|
||||
createdBy: {
|
||||
telegramId: 555555555,
|
||||
telegramFirstName: 'Bob',
|
||||
telegramLastName: 'Johnson',
|
||||
telegramUsername: 'bobjohnson',
|
||||
},
|
||||
upvotes: 8,
|
||||
downvotes: 0,
|
||||
userVote: null,
|
||||
comments: [],
|
||||
createdAt: new Date(Date.now() - 259200000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 259200000).toISOString(),
|
||||
},
|
||||
{
|
||||
_id: '4',
|
||||
title: 'Fix message sync issues',
|
||||
description: 'Messages sometimes don\'t sync properly across devices',
|
||||
status: 'in_progress',
|
||||
type: 'bug',
|
||||
createdBy: {
|
||||
telegramId: 111222333,
|
||||
telegramFirstName: 'Alice',
|
||||
telegramLastName: 'Williams',
|
||||
telegramUsername: 'alicew',
|
||||
},
|
||||
upvotes: 12,
|
||||
downvotes: 0,
|
||||
userVote: null,
|
||||
comments: ['4', '5'],
|
||||
createdAt: new Date(Date.now() - 345600000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 345600000).toISOString(),
|
||||
},
|
||||
{
|
||||
_id: '5',
|
||||
title: 'Dark mode improvements',
|
||||
description: 'Better contrast and color scheme for dark mode',
|
||||
status: 'complete',
|
||||
type: 'improvement',
|
||||
createdBy: {
|
||||
telegramId: 444555666,
|
||||
telegramFirstName: 'Charlie',
|
||||
telegramLastName: 'Brown',
|
||||
telegramUsername: 'charlieb',
|
||||
},
|
||||
upvotes: 7,
|
||||
downvotes: 0,
|
||||
userVote: null,
|
||||
comments: ['6'],
|
||||
createdAt: new Date(Date.now() - 432000000).toISOString(),
|
||||
updatedAt: new Date(Date.now() - 432000000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
const mockComments: Record<string, Array<{
|
||||
_id: string;
|
||||
content: string;
|
||||
user: {
|
||||
telegramId: number;
|
||||
telegramFirstName?: string;
|
||||
telegramLastName?: string;
|
||||
telegramUsername?: string;
|
||||
};
|
||||
createdAt: string;
|
||||
}>> = {
|
||||
'1': [
|
||||
{
|
||||
_id: '1',
|
||||
content: 'This would be really helpful for catching up on group chats!',
|
||||
user: {
|
||||
telegramId: 999888777,
|
||||
telegramFirstName: 'David',
|
||||
telegramLastName: 'Lee',
|
||||
telegramUsername: 'davidlee',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 82800000).toISOString(),
|
||||
},
|
||||
],
|
||||
'2': [
|
||||
{
|
||||
_id: '2',
|
||||
content: 'Great idea! Would love to see this implemented.',
|
||||
user: {
|
||||
telegramId: 123456789,
|
||||
telegramFirstName: 'John',
|
||||
telegramLastName: 'Doe',
|
||||
telegramUsername: 'johndoe',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 82000000).toISOString(),
|
||||
},
|
||||
],
|
||||
'3': [
|
||||
{
|
||||
_id: '3',
|
||||
content: 'This feature would save me so much time!',
|
||||
user: {
|
||||
telegramId: 777666555,
|
||||
telegramFirstName: 'Emma',
|
||||
telegramLastName: 'Davis',
|
||||
telegramUsername: 'emmad',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 170000000).toISOString(),
|
||||
},
|
||||
],
|
||||
'4': [
|
||||
{
|
||||
_id: '4',
|
||||
content: 'I\'ve experienced this issue multiple times. Hope it gets fixed soon!',
|
||||
user: {
|
||||
telegramId: 333444555,
|
||||
telegramFirstName: 'Frank',
|
||||
telegramLastName: 'Miller',
|
||||
telegramUsername: 'frankm',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 340000000).toISOString(),
|
||||
},
|
||||
{
|
||||
_id: '5',
|
||||
content: 'Same here, very annoying bug.',
|
||||
user: {
|
||||
telegramId: 666777888,
|
||||
telegramFirstName: 'Grace',
|
||||
telegramLastName: 'Wilson',
|
||||
telegramUsername: 'gracew',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 338000000).toISOString(),
|
||||
},
|
||||
],
|
||||
'6': [
|
||||
{
|
||||
_id: '6',
|
||||
content: 'The new dark mode looks amazing! Great work!',
|
||||
user: {
|
||||
telegramId: 111222333,
|
||||
telegramFirstName: 'Alice',
|
||||
telegramLastName: 'Williams',
|
||||
telegramUsername: 'alicew',
|
||||
},
|
||||
createdAt: new Date(Date.now() - 428000000).toISOString(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Global mock state (in a real app, this would be in a state management solution)
|
||||
let mockFeedbacksState = [...mockFeedbacks];
|
||||
let mockToken: string | null = null;
|
||||
|
||||
// Export functions to update mock state
|
||||
export const updateMockFeedback = (feedbackId: string, updates: Partial<Feedback>) => {
|
||||
const index = mockFeedbacksState.findIndex(f => f._id === feedbackId);
|
||||
if (index !== -1) {
|
||||
mockFeedbacksState[index] = { ...mockFeedbacksState[index], ...updates };
|
||||
}
|
||||
};
|
||||
|
||||
export const getMockFeedbacks = () => mockFeedbacksState;
|
||||
export const setMockFeedbacks = (feedbacks: Feedback[]) => {
|
||||
mockFeedbacksState = feedbacks;
|
||||
};
|
||||
|
||||
export default function FeedbackPage() {
|
||||
const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [user, setUser] = useState<{ id: number; first_name?: string; last_name?: string; username?: string } | null>(null);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [newFeedback, setNewFeedback] = useState<{ title: string; description: string; type: 'feature' | 'bug' | 'improvement' }>({ title: '', description: '', type: 'feature' });
|
||||
const [selectedBoard, setSelectedBoard] = useState<'feature' | 'bug'>('feature');
|
||||
const [sortBy, setSortBy] = useState<'trending' | 'newest' | 'oldest'>('trending');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Check for stored token
|
||||
const storedToken = localStorage.getItem('telegram_token');
|
||||
if (storedToken) {
|
||||
setToken(storedToken);
|
||||
mockToken = storedToken;
|
||||
// Mock user data
|
||||
setUser({
|
||||
id: 123456789,
|
||||
first_name: 'John',
|
||||
last_name: 'Doe',
|
||||
username: 'johndoe',
|
||||
});
|
||||
}
|
||||
loadFeedbacks();
|
||||
}, []);
|
||||
|
||||
const loadFeedbacks = async () => {
|
||||
try {
|
||||
if (USE_MOCK_DATA) {
|
||||
// Mock API response
|
||||
await new Promise(resolve => setTimeout(resolve, 300)); // Simulate network delay
|
||||
|
||||
// Sync mock state - initialize if empty
|
||||
if (mockFeedbacksState.length === 0) {
|
||||
mockFeedbacksState = [...mockFeedbacks];
|
||||
}
|
||||
|
||||
// Use current mockFeedbacksState
|
||||
let filteredFeedbacks = [...mockFeedbacksState].filter(f => {
|
||||
if (selectedBoard === 'bug') {
|
||||
return f.type === 'bug';
|
||||
}
|
||||
return f.type === 'feature';
|
||||
});
|
||||
|
||||
// Sort feedbacks
|
||||
if (sortBy === 'trending') {
|
||||
filteredFeedbacks.sort((a, b) => (b.upvotes - b.downvotes) - (a.upvotes - a.downvotes));
|
||||
} else if (sortBy === 'newest') {
|
||||
filteredFeedbacks.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
} else {
|
||||
filteredFeedbacks.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery) {
|
||||
filteredFeedbacks = filteredFeedbacks.filter(
|
||||
(f) =>
|
||||
f.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
f.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
setFeedbacks(filteredFeedbacks);
|
||||
} else {
|
||||
const storedToken = localStorage.getItem('telegram_token');
|
||||
const headers: HeadersInit = {};
|
||||
if (storedToken) {
|
||||
headers['Authorization'] = `Bearer ${storedToken}`;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (selectedBoard === 'bug') {
|
||||
params.append('type', 'bug');
|
||||
} else {
|
||||
params.append('type', 'feature');
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/api/feedback?${params.toString()}`, { headers });
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
let sortedFeedbacks = [...data.data];
|
||||
|
||||
// Sort feedbacks
|
||||
if (sortBy === 'trending') {
|
||||
sortedFeedbacks.sort((a, b) => (b.upvotes - b.downvotes) - (a.upvotes - a.downvotes));
|
||||
} else if (sortBy === 'newest') {
|
||||
sortedFeedbacks.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
} else {
|
||||
sortedFeedbacks.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery) {
|
||||
sortedFeedbacks = sortedFeedbacks.filter(
|
||||
(f) =>
|
||||
f.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
f.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
setFeedbacks(sortedFeedbacks);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load feedbacks:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadFeedbacks();
|
||||
}, [selectedBoard, sortBy, searchQuery]);
|
||||
|
||||
const handleTelegramAuth = async (telegramUser: { id: number; first_name?: string; last_name?: string; username?: string; auth_date: number; hash: string }) => {
|
||||
try {
|
||||
if (USE_MOCK_DATA) {
|
||||
// Mock login response
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
const mockJwtToken = 'mock_jwt_token_' + Date.now();
|
||||
localStorage.setItem('telegram_token', mockJwtToken);
|
||||
setToken(mockJwtToken);
|
||||
mockToken = mockJwtToken;
|
||||
setUser(telegramUser);
|
||||
await loadFeedbacks();
|
||||
} else {
|
||||
const response = await fetch(`${API_BASE_URL}/telegram/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
telegramId: telegramUser.id,
|
||||
telegramUser: {
|
||||
id: telegramUser.id,
|
||||
first_name: telegramUser.first_name,
|
||||
last_name: telegramUser.last_name,
|
||||
username: telegramUser.username,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success && data.token) {
|
||||
localStorage.setItem('telegram_token', data.token);
|
||||
setToken(data.token);
|
||||
setUser(telegramUser);
|
||||
await loadFeedbacks();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to login:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('telegram_token');
|
||||
setToken(null);
|
||||
mockToken = null;
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
const handleCreateFeedback = async () => {
|
||||
if (!token || !newFeedback.title.trim()) return;
|
||||
|
||||
try {
|
||||
if (USE_MOCK_DATA) {
|
||||
// Mock create feedback
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
const newId = String(Date.now());
|
||||
const newFeedbackItem: Feedback = {
|
||||
_id: newId,
|
||||
title: newFeedback.title,
|
||||
description: newFeedback.description,
|
||||
status: 'planned',
|
||||
type: newFeedback.type,
|
||||
createdBy: {
|
||||
telegramId: user?.id || 123456789,
|
||||
telegramFirstName: user?.first_name,
|
||||
telegramLastName: user?.last_name,
|
||||
telegramUsername: user?.username,
|
||||
},
|
||||
upvotes: 0,
|
||||
downvotes: 0,
|
||||
userVote: null,
|
||||
comments: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
mockFeedbacksState.push(newFeedbackItem);
|
||||
setMockFeedbacks(mockFeedbacksState);
|
||||
setShowCreateForm(false);
|
||||
setNewFeedback({ title: '', description: '', type: selectedBoard === 'bug' ? ('bug' as const) : ('feature' as const) });
|
||||
await loadFeedbacks();
|
||||
} else {
|
||||
const response = await fetch(`${API_BASE_URL}/api/feedback`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(newFeedback),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
setShowCreateForm(false);
|
||||
setNewFeedback({ title: '', description: '', type: selectedBoard === 'bug' ? ('bug' as const) : ('feature' as const) });
|
||||
await loadFeedbacks();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create feedback:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-zinc-400">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const boardTitle = selectedBoard === 'bug' ? 'Bugs' : 'Feature Requests';
|
||||
const boardDescription = selectedBoard === 'bug'
|
||||
? "Report any bugs or issues you've encountered. We'll prioritize fixing them based on upvotes."
|
||||
: "Any feature that you'd like to request the team to build can go in over here. We prioritize requests based on upvotes.";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
{/* Custom Header - Mobile Responsive */}
|
||||
<header className="fixed top-0 left-1/2 z-50 w-full max-w-[1280px] -translate-x-1/2 border-x border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
|
||||
<div className="px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-14 sm:h-16 items-center justify-between">
|
||||
<div className="flex items-center gap-3 sm:gap-8">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="lg:hidden p-2 text-zinc-400 hover:text-white"
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-lg sm:text-xl font-semibold text-white">OpenHuman</h1>
|
||||
<div className="hidden sm:flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => window.location.href = '/feedback?view=roadmap'}
|
||||
className="text-sm text-zinc-400 transition-colors hover:text-white"
|
||||
>
|
||||
Roadmap
|
||||
</button>
|
||||
<button className="text-sm font-semibold text-white">Feedback</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{token ? (
|
||||
<>
|
||||
{user && (
|
||||
<div className="hidden sm:block text-xs sm:text-sm text-zinc-400 truncate max-w-[100px] sm:max-w-none">
|
||||
{user.first_name} {user.last_name || ''} {user.username && `(@${user.username})`}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="rounded-lg border border-zinc-800 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<TelegramLogin onAuth={handleTelegramAuth} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="w-full px-4 sm:px-6 lg:px-8 pt-20 sm:pt-24 pb-8">
|
||||
<div className="flex gap-4 lg:gap-8">
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar - Mobile Drawer / Desktop Sidebar */}
|
||||
<aside
|
||||
className={`fixed lg:static inset-y-0 left-0 z-50 w-64 bg-zinc-950 border-r border-zinc-800 transform transition-transform duration-300 ease-in-out lg:transform-none ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
||||
}`}
|
||||
style={{ top: '56px', height: 'calc(100vh - 56px)' }}
|
||||
>
|
||||
<div className="h-full overflow-y-auto p-4 sm:p-6">
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 flex items-center justify-between lg:block">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">BOARDS</h2>
|
||||
<button
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className="lg:hidden text-zinc-400 hover:text-white"
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedBoard('feature');
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
className={`w-full rounded-lg px-4 py-3 text-left text-sm transition-colors ${selectedBoard === 'feature'
|
||||
? 'bg-zinc-800 text-white'
|
||||
: 'text-zinc-400 hover:bg-zinc-900 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Feature Requests
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedBoard('bug');
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
className={`w-full rounded-lg px-4 py-3 text-left text-sm transition-colors ${selectedBoard === 'bug'
|
||||
? 'bg-zinc-800 text-white'
|
||||
: 'text-zinc-400 hover:bg-zinc-900 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Bugs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 text-xs text-zinc-500">
|
||||
Powered by OpenHuman
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold">{boardTitle}</h2>
|
||||
<p className="mt-1 sm:mt-2 text-xs sm:text-sm text-zinc-400">{boardDescription}</p>
|
||||
</div>
|
||||
|
||||
{/* Create Form */}
|
||||
{showCreateForm ? (
|
||||
<div className="mb-6 sm:mb-8 rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={newFeedback.title}
|
||||
onChange={(e) => setNewFeedback({ ...newFeedback, title: e.target.value })}
|
||||
className="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3 text-sm sm:text-base text-white placeholder-zinc-500 focus:border-zinc-700 focus:outline-none"
|
||||
placeholder="Short, descriptive title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-2 block text-xs sm:text-sm text-zinc-400">Details</label>
|
||||
<textarea
|
||||
value={newFeedback.description}
|
||||
onChange={(e) => setNewFeedback({ ...newFeedback, description: e.target.value })}
|
||||
className="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3 text-sm sm:text-base text-white placeholder-zinc-500 focus:border-zinc-700 focus:outline-none"
|
||||
rows={4}
|
||||
placeholder="Any additional details..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="text-zinc-400 hover:text-white p-2">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowCreateForm(false);
|
||||
setNewFeedback({ title: '', description: '', type: selectedBoard === 'bug' ? ('bug' as const) : ('feature' as const) });
|
||||
}}
|
||||
className="rounded-lg border border-zinc-800 px-3 sm:px-4 py-2 text-xs sm:text-sm font-semibold text-white transition-colors hover:border-zinc-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateFeedback}
|
||||
disabled={!token || !newFeedback.title.trim()}
|
||||
className="rounded-lg bg-yellow-500 px-3 sm:px-4 py-2 text-xs sm:text-sm font-semibold text-zinc-950 transition-colors hover:bg-yellow-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Create Post
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
token && (
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="mb-4 sm:mb-6 w-full rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-left text-sm text-zinc-400 transition-colors hover:border-zinc-700 hover:text-white"
|
||||
>
|
||||
+ Create new {selectedBoard === 'bug' ? 'bug report' : 'feature request'}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Filters and Search - Mobile Responsive */}
|
||||
<div className="mb-4 sm:mb-6 space-y-3 sm:space-y-0 sm:flex sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs sm:text-sm text-zinc-400">Showing</span>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as 'trending' | 'newest' | 'oldest')}
|
||||
className="rounded-lg border border-zinc-800 bg-zinc-950 px-2 sm:px-3 py-1.5 sm:py-1 text-xs sm:text-sm text-white focus:border-zinc-700 focus:outline-none"
|
||||
>
|
||||
<option value="trending">Trending</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="oldest">Oldest</option>
|
||||
</select>
|
||||
<span className="text-xs sm:text-sm text-zinc-400">posts</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full sm:w-64">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-2 pl-9 sm:pl-10 text-sm text-white placeholder-zinc-500 focus:border-zinc-700 focus:outline-none"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<svg
|
||||
className="absolute left-2.5 sm:left-3 top-1/2 h-4 w-4 sm:h-5 sm:w-5 -translate-y-1/2 text-zinc-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feedback List */}
|
||||
<FeedbackList
|
||||
feedbacks={feedbacks}
|
||||
token={token}
|
||||
onUpdate={loadFeedbacks}
|
||||
useMockData={USE_MOCK_DATA}
|
||||
mockComments={mockComments}
|
||||
setFeedbacks={setFeedbacks}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Export mock data for use in other components
|
||||
export { mockFeedbacksState, mockComments, mockToken };
|
||||
@@ -1,249 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, Suspense } from 'react';
|
||||
import Navigation from '../components/Navigation';
|
||||
import PlanCard from '../components/PlanCard';
|
||||
import { useAuthToken } from '../hooks/useAuthToken';
|
||||
import { useStripePlans } from '../hooks/useStripePlans';
|
||||
import { useStripeCheckout } from '../hooks/useStripeCheckout';
|
||||
import { useCoinbaseCheckout } from '../hooks/useCoinbaseCheckout';
|
||||
|
||||
function PricingContent() {
|
||||
const [billingCycle, setBillingCycle] = useState<'monthly' | 'annual'>('monthly');
|
||||
const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
|
||||
const token = useAuthToken();
|
||||
const { plans, loading: plansLoading, error: plansError, refetch: refetchPlans } = useStripePlans();
|
||||
const { handleCheckout: handleStripeCheckout, loading: stripeLoading } = useStripeCheckout();
|
||||
const { handleCheckout: handleCoinbaseCheckout, loading: coinbaseLoading } = useCoinbaseCheckout();
|
||||
|
||||
const onStripeCheckout = async (planType: 'basic' | 'pro') => {
|
||||
if (!token) {
|
||||
alert('Missing token in URL. Please access this page via a valid link.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingPlan(planType);
|
||||
try {
|
||||
await handleStripeCheckout(planType, billingCycle);
|
||||
} finally {
|
||||
setLoadingPlan(null);
|
||||
}
|
||||
};
|
||||
|
||||
const onCoinbaseCheckout = async (planType: 'basic' | 'pro') => {
|
||||
if (!token) {
|
||||
alert('Missing token in URL. Please access this page via a valid link.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingPlan(`coinbase-${planType}`);
|
||||
try {
|
||||
await handleCoinbaseCheckout(planType);
|
||||
} finally {
|
||||
setLoadingPlan(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<Navigation />
|
||||
<main className="mx-auto max-w-7xl px-6 pt-24 sm:px-8 sm:pt-32">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-zinc-400">
|
||||
Choose the plan that works best for you. Upgrade or downgrade at
|
||||
any time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Billing Cycle Tabs */}
|
||||
<div className="mx-auto mt-8 flex justify-center">
|
||||
<div className="inline-flex rounded-lg border border-zinc-800 bg-zinc-900/50 p-1">
|
||||
<button
|
||||
onClick={() => setBillingCycle('monthly')}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${billingCycle === 'monthly'
|
||||
? 'bg-white text-zinc-950'
|
||||
: 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingCycle('annual')}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold transition-colors ${billingCycle === 'annual'
|
||||
? 'bg-white text-zinc-950'
|
||||
: 'text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Annual
|
||||
<span className="ml-2 rounded-full bg-green-600 px-2 py-0.5 text-xs text-white">
|
||||
Save 20%
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{plansError && (
|
||||
<div className="mx-auto mt-16 max-w-2xl">
|
||||
<div className="rounded-lg border border-red-500/20 bg-red-500/10 p-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/20">
|
||||
<svg
|
||||
className="h-6 w-6 text-red-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-white">
|
||||
Unable to Load Pricing Plans
|
||||
</h3>
|
||||
<p className="mb-6 text-sm text-zinc-400">
|
||||
{plansError}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => refetchPlans()}
|
||||
disabled={plansLoading}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-semibold text-zinc-950 transition-colors hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{plansLoading ? (
|
||||
<>
|
||||
<svg
|
||||
className="h-4 w-4 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Retrying...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
Try Again
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{plansLoading ? (
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex h-96 animate-pulse flex-col rounded-lg border border-zinc-800 bg-zinc-900/50 p-8"
|
||||
>
|
||||
<div className="h-8 w-24 rounded bg-zinc-700"></div>
|
||||
<div className="mt-4 h-12 w-32 rounded bg-zinc-700"></div>
|
||||
<div className="mt-8 space-y-4">
|
||||
{[1, 2, 3, 4].map((j) => (
|
||||
<div
|
||||
key={j}
|
||||
className="h-4 w-full rounded bg-zinc-700"
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{plans.map((plan) => {
|
||||
const isPaidPlan = plan.type === 'basic' || plan.type === 'pro';
|
||||
const isStripeLoading = loadingPlan === plan.type && stripeLoading;
|
||||
const isCoinbaseLoading = loadingPlan === `coinbase-${plan.type}` && coinbaseLoading;
|
||||
|
||||
return (
|
||||
<PlanCard
|
||||
key={plan.name}
|
||||
name={plan.name}
|
||||
monthlyPrice={plan.monthlyPrice}
|
||||
annualPrice={plan.annualPrice}
|
||||
description={plan.description}
|
||||
features={plan.features}
|
||||
cta={isPaidPlan ? plan.cta : plan.cta}
|
||||
popular={plan.popular}
|
||||
billingCycle={billingCycle}
|
||||
disabled={isPaidPlan && !token}
|
||||
loading={isStripeLoading || isCoinbaseLoading}
|
||||
onPrimaryAction={
|
||||
isPaidPlan
|
||||
? () => onStripeCheckout(plan.type as 'basic' | 'pro')
|
||||
: () => {
|
||||
window.location.href = '/downloads';
|
||||
}
|
||||
}
|
||||
onSecondaryAction={
|
||||
isPaidPlan
|
||||
? () => onCoinbaseCheckout(plan.type as 'basic' | 'pro')
|
||||
: undefined
|
||||
}
|
||||
secondaryCta={isPaidPlan ? 'Pay with Crypto' : undefined}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<Navigation />
|
||||
<main className="mx-auto max-w-7xl px-6 pt-24 sm:px-8 sm:pt-32">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-zinc-400">
|
||||
Loading pricing plans...
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
}>
|
||||
<PricingContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import Navigation from '../components/Navigation';
|
||||
|
||||
export default function PrivacyPolicy() {
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<Navigation />
|
||||
<main className="mx-auto max-w-4xl px-6 pt-24 sm:px-8 sm:pt-32 pb-16">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Privacy Policy
|
||||
</h1>
|
||||
<p className="mt-4 text-sm text-zinc-400">Last updated: {new Date().toLocaleDateString()}</p>
|
||||
|
||||
<div className="mt-12 space-y-8 text-zinc-300">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">1. Information We Collect</h2>
|
||||
<p className="leading-relaxed">
|
||||
We collect information that you provide directly to us, including your name, email address,
|
||||
and any other information you choose to provide when using our services.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">2. How We Use Your Information</h2>
|
||||
<p className="leading-relaxed">
|
||||
We use the information we collect to provide, maintain, and improve our services, process
|
||||
transactions, send you technical notices and support messages, and respond to your comments
|
||||
and questions.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">3. Information Sharing</h2>
|
||||
<p className="leading-relaxed">
|
||||
We do not sell, trade, or otherwise transfer your personal information to third parties
|
||||
without your consent, except as described in this policy.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">4. Data Security</h2>
|
||||
<p className="leading-relaxed">
|
||||
We implement appropriate technical and organizational measures to protect your personal
|
||||
information against unauthorized access, alteration, disclosure, or destruction.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">5. Your Rights</h2>
|
||||
<p className="leading-relaxed">
|
||||
You have the right to access, update, or delete your personal information at any time.
|
||||
You may also opt out of certain communications from us.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">6. Contact Us</h2>
|
||||
<p className="leading-relaxed">
|
||||
If you have any questions about this Privacy Policy, please contact us at{' '}
|
||||
<a href="mailto:privacy@openhuman.xyz" className="text-white underline hover:text-zinc-300">
|
||||
privacy@openhuman.xyz
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import Navigation from '../components/Navigation';
|
||||
|
||||
export default function TermsAndConditions() {
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<Navigation />
|
||||
<main className="mx-auto max-w-4xl px-6 pt-24 sm:px-8 sm:pt-32 pb-16">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
|
||||
Terms & Conditions
|
||||
</h1>
|
||||
<p className="mt-4 text-sm text-zinc-400">Last updated: {new Date().toLocaleDateString()}</p>
|
||||
|
||||
<div className="mt-12 space-y-8 text-zinc-300">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">1. Acceptance of Terms</h2>
|
||||
<p className="leading-relaxed">
|
||||
By accessing and using OpenHuman, you accept and agree to be bound by the terms and
|
||||
provision of this agreement.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">2. Use License</h2>
|
||||
<p className="leading-relaxed">
|
||||
Permission is granted to temporarily use OpenHuman for personal, non-commercial
|
||||
transitory viewing only. This is the grant of a license, not a transfer of title.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">3. Service Availability</h2>
|
||||
<p className="leading-relaxed">
|
||||
We strive to ensure our services are available 24/7, but we do not guarantee
|
||||
uninterrupted access. We reserve the right to modify or discontinue services at any time.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">4. User Accounts</h2>
|
||||
<p className="leading-relaxed">
|
||||
You are responsible for maintaining the confidentiality of your account credentials and
|
||||
for all activities that occur under your account.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">5. Payment Terms</h2>
|
||||
<p className="leading-relaxed">
|
||||
Subscription fees are billed in advance on a monthly or annual basis. All fees are
|
||||
non-refundable except as required by law. You may cancel your subscription at any time.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">6. Limitation of Liability</h2>
|
||||
<p className="leading-relaxed">
|
||||
In no event shall OpenHuman be liable for any indirect, incidental, special,
|
||||
consequential, or punitive damages resulting from your use of the service.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">7. Changes to Terms</h2>
|
||||
<p className="leading-relaxed">
|
||||
We reserve the right to modify these terms at any time. Your continued use of the
|
||||
service after changes constitutes acceptance of the new terms.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">8. Contact Information</h2>
|
||||
<p className="leading-relaxed">
|
||||
If you have any questions about these Terms & Conditions, please contact us at{' '}
|
||||
<a href="mailto:legal@openhuman.xyz" className="text-white underline hover:text-zinc-300">
|
||||
legal@openhuman.xyz
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user