74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
// STEP 3 — Connect Xero
|
||
// Purpose:
|
||
// - Explain why Xero access is needed
|
||
// - Make the next step obvious
|
||
// - Match the Stripe connect page exactly
|
||
|
||
import { cookies } from "next/headers";
|
||
import { redirect } from "next/navigation";
|
||
|
||
export default async function ConnectXeroPage() {
|
||
const cookieStore = await cookies();
|
||
const session = cookieStore.get("session");
|
||
|
||
// Safety: if not logged in, bounce to login
|
||
if (!session) {
|
||
redirect("/login");
|
||
}
|
||
|
||
return (
|
||
<main className="max-w-2xl mx-auto p-8 space-y-10">
|
||
{/* --------------------------------------------------
|
||
Header
|
||
-------------------------------------------------- */}
|
||
<section>
|
||
<h1 className="text-2xl font-semibold">
|
||
Connect Xero
|
||
</h1>
|
||
|
||
<p className="mt-3 text-gray-700">
|
||
We need access to your Xero organisation so we can automatically
|
||
create invoices and mark them as paid when Stripe payments succeed.
|
||
</p>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
What will happen
|
||
-------------------------------------------------- */}
|
||
<section>
|
||
<h2 className="text-lg font-medium">
|
||
What happens next
|
||
</h2>
|
||
|
||
<ul className="mt-3 space-y-2 list-disc list-inside text-gray-700">
|
||
<li>You’ll be redirected to Xero</li>
|
||
<li>You’ll choose which organisation to connect</li>
|
||
<li>You’ll be sent back here once connected</li>
|
||
</ul>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
Trust / reassurance
|
||
-------------------------------------------------- */}
|
||
<section className="text-sm text-gray-600">
|
||
<p>
|
||
We never see your Xero password.
|
||
<br />
|
||
Access can be revoked at any time from Xero.
|
||
</p>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
Primary action
|
||
-------------------------------------------------- */}
|
||
<section className="pt-4 border-t">
|
||
<a
|
||
href="/api/xero/connect"
|
||
className="inline-block px-6 py-3 bg-black text-white rounded text-sm"
|
||
>
|
||
Connect Xero →
|
||
</a>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|