145 lines
7.4 KiB
TypeScript
145 lines
7.4 KiB
TypeScript
import { cookies } from "next/headers";
|
|
import { redirect } from "next/navigation";
|
|
|
|
export default async function ConnectXeroPage() {
|
|
const cookieStore = await cookies();
|
|
const session = cookieStore.get("session");
|
|
|
|
if (!session) {
|
|
redirect("/login");
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-sm border-b border-slate-200">
|
|
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center">
|
|
<div className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
|
|
S2X
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="pt-20">
|
|
<div className="max-w-2xl mx-auto px-6 py-16">
|
|
{/* Header */}
|
|
<div className="mb-12">
|
|
<div className="inline-flex items-center gap-2 mb-4 px-3 py-1 bg-blue-50 rounded-full border border-blue-200">
|
|
<span className="w-2 h-2 bg-blue-600 rounded-full"></span>
|
|
<span className="text-sm font-medium text-blue-700">Step 3 of 3</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold text-slate-900 mb-4">
|
|
Connect Xero
|
|
</h1>
|
|
|
|
<p className="text-lg text-slate-600">
|
|
We need access to your Xero organisation to automatically create invoices and mark them as paid when Stripe payments succeed.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Two Column Layout */}
|
|
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
|
{/* Left Column - Information */}
|
|
<div className="md:col-span-2">
|
|
{/* What we do */}
|
|
<div className="bg-white border border-slate-200 rounded-xl p-6 mb-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">What we can create</h2>
|
|
<ul className="space-y-3">
|
|
<li className="flex gap-3">
|
|
<svg className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">Invoices</p>
|
|
<p className="text-sm text-slate-600">Sales invoices matched to Stripe payments</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<svg className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">Credit notes</p>
|
|
<p className="text-sm text-slate-600">For Stripe refunds and chargebacks</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<svg className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">Journal entries</p>
|
|
<p className="text-sm text-slate-600">For Stripe fees and reconciliation</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Important notes */}
|
|
<div className="bg-purple-50 border border-purple-200 rounded-xl p-6 mb-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Important notes</h2>
|
|
<ul className="space-y-2 text-sm text-slate-700">
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-600 font-bold">→</span>
|
|
<span>We only create invoices; we never modify or delete them</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-600 font-bold">→</span>
|
|
<span>All invoices are created as draft and marked as paid automatically</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-600 font-bold">→</span>
|
|
<span>VAT is handled correctly based on your Stripe data</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* How it works */}
|
|
<div className="bg-white border border-slate-200 rounded-xl p-6">
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">What happens next</h2>
|
|
<ol className="space-y-3">
|
|
<li className="flex gap-4">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">1</span>
|
|
<span className="text-slate-700">You'll be securely redirected to Xero</span>
|
|
</li>
|
|
<li className="flex gap-4">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">2</span>
|
|
<span className="text-slate-700">Select which organisation to connect</span>
|
|
</li>
|
|
<li className="flex gap-4">
|
|
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">3</span>
|
|
<span className="text-slate-700">Your dashboard will be ready to configure</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - CTA Card */}
|
|
<div>
|
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-600 rounded-xl p-6 sticky top-24">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Almost there!</h3>
|
|
<a
|
|
href="/api/xero/connect"
|
|
className="block w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg text-center hover:shadow-lg hover:from-blue-700 hover:to-blue-800 transition"
|
|
>
|
|
Connect Xero →
|
|
</a>
|
|
<p className="text-xs text-slate-600 mt-4 text-center">
|
|
You'll be redirected to Xero's secure OAuth page
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trust badges */}
|
|
<div className="bg-green-50 border border-green-200 rounded-xl p-6">
|
|
<p className="text-sm text-green-900">
|
|
<strong>🔒 Your security matters:</strong> We use OAuth, so you can revoke access from Xero at any time. We never see or store your Xero password.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|