import { useState, useEffect } from 'react'; import Head from 'next/head'; import Layout from '../components/Layout'; import { subscriptionAPI } from '../services/api'; import { useAuth } from '../hooks/useAuth'; export default function SubscriptionPage() { const { isPro } = useAuth(); const [plans, setPlans] = useState([]); const [payments, setPayments] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { loadData(); }, []); const loadData = async () => { try { const [planRes, payRes] = await Promise.all([ subscriptionAPI.getPlans(), subscriptionAPI.getPayments(), ]); setPlans(planRes.data.data || []); setPayments(payRes.data.data?.payments || []); } catch (err) { console.error(err); } }; const handleSubscribe = async (planId: string) => { setLoading(true); try { const { data } = await subscriptionAPI.subscribe(planId); if (data.data?.paymentUrl) { window.open(data.data.paymentUrl, '_blank'); } } catch (err: any) { alert(err.response?.data?.message || 'Subscription failed'); } setLoading(false); }; const formatIDR = (n: number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n); return ( <> Subscription – MarketScope

Subscription Plans

Upgrade untuk fitur unlimited scan dan AI recommendation

{/* Plans */}
{plans.map((plan) => (
{plan.id === 'PRO_MONTHLY' && (
POPULAR
)}

{plan.name}

{plan.price === 0 ? ( Gratis ) : ( <> {formatIDR(plan.price)} /{plan.id.includes('YEARLY') ? 'tahun' : 'bulan'} )}
    {plan.features.map((f: string, i: number) => (
  • ✓ {f}
    • ))}
{plan.id === 'FREE' ? (
Current Plan
) : ( )}
))}
{/* Payment History */}

💳 Payment History

{payments.map((p: any) => ( ))} {payments.length === 0 && ( )}
Invoice Amount Method Status Date
{p.invoiceNumber} {formatIDR(p.amount)} {p.paymentMethod || '-'} {p.status} {new Date(p.createdAt).toLocaleDateString('id-ID')}
Belum ada riwayat pembayaran
); }