ericlay
/
flowDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add src/pages/StripeConnect.jsx

This commit is contained in:
Eric Lay 2026-03-11 08:52:00 -05:00
parent 523ca30de8
commit e12333aff2
1 changed files with 157 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/pages/StripeConnect.jsx Normal file
View File

@ -0,0 +1,157 @@
import React from "react";
import { AlertTriangle, Download, ExternalLink, CheckCircle2, Info, Circle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import Sidebar from "@/components/dashboard/Sidebar";
import TopBar from "@/components/dashboard/TopBar";
const steps = [
{
number: 1,
label: "STEP 1 — DOWNLOAD",
title: "Stripe Express Checklist",
description: "Review what information you'll need before you begin.",
action: "download",
},
{
number: 2,
label: "STEP 2 — DOWNLOAD",
title: "Stripe Onboarding Instructions",
description: "Read the step-by-step guide before opening Stripe.",
action: "download",
},
{
number: 3,
label: "STEP 3 — ACTION REQUIRED",
title: "Open Stripe Onboarding",
description: "Complete your Stripe Express account setup.",
action: "open",
highlight: true,
},
];
const recommendations = [
{ color: "blue", text: "Account cannot receive payments - create account link to collect missing information" },
{ color: "blue", text: "Account cannot receive payouts - verify bank account information" },
{ color: "red", text: "Missing required information: Business Category Code (MCC), Business Website URL, Company Address City, Company Address Line 1, Company Address Postal Code, Company Address State, Company Name, Company Owners Information, Company Phone Number, Company Tax ID, Bank Account Information, Owner Email Address, Owner First Name, Owner Last Name, Representative Information..." },
];
export default function StripeConnect() {
const stored = sessionStorage.getItem("demo_user");
const userData = stored ? JSON.parse(stored) : {
full_name: "Radoslav Nedyalkov",
email: "Eric@rscentral.org",
store_id: "AA1112",
store_name: "Radi Box N Ship",
};
return (
<div className="flex min-h-screen bg-[#f0f2f5]">
<Sidebar activePage="StripeConnect" />
<div className="flex-1 ml-[220px]">
<TopBar breadcrumb="Stripe Connect" userData={userData} />
<main className="p-6 max-w-4xl">
{/* CTA Banner */}
<div className="text-center mb-6">
<p className="text-sm text-gray-600">
Click here to Set-up your Stripe Payments account to receive compensation for PackageHub programs
</p>
</div>
{/* Disclaimer */}
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5 mb-6">
<div className="flex items-start gap-3">
<AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
<div>
<p className="text-xs font-bold text-amber-800 uppercase tracking-wider mb-2">Stripe Onboarding Disclaimer</p>
<p className="text-sm text-amber-900 leading-relaxed">
By clicking on the link below, you will be redirected to a secure webpage hosted by Stripe to complete your{" "}
<span className="font-semibold">Stripe Express account setup</span>. Stripe uses industry-standard encryption and security controls to protect your personal, banking, and tax information during data entry and submission.
</p>
<p className="text-sm text-amber-900 leading-relaxed mt-2">
Enrollment in Stripe Express is required to receive electronic program payouts from PackageHub. Electronic payouts provide faster funding, improved accuracy, and simplified reconciliation.
</p>
<p className="text-sm text-amber-900 leading-relaxed mt-2">
By proceeding, you acknowledge your participation in select PackageHub sponsored programs and confirm that you have read and understand the applicable terms and resources available at{" "}
<a href="#" className="text-[#3498db] underline">rscentral.org</a>,{" "}
<a href="#" className="text-[#3498db] underline">pbcsupport.net</a>, and{" "}
<a href="#" className="text-[#3498db] underline">stripe.com</a>.
</p>
</div>
</div>
</div>
{/* Steps */}
<div className="space-y-3 mb-6">
{steps.map((step) => (
<div
key={step.number}
className={`bg-white rounded-xl border p-5 flex items-center justify-between ${
step.highlight
? "border-emerald-200 bg-emerald-50"
: "border-gray-200"
}`}
>
<div className="flex items-center gap-4">
<div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-white text-sm ${
step.highlight ? "bg-emerald-500" : "bg-[#3498db]"
}`}>
{step.number}
</div>
<div>
<p className={`text-xs font-bold uppercase tracking-wider mb-0.5 ${
step.highlight ? "text-emerald-700" : "text-gray-400"
}`}>
{step.label}
</p>
<p className={`text-sm font-semibold ${step.highlight ? "text-emerald-900" : "text-gray-800"}`}>
{step.title}
</p>
<p className="text-xs text-gray-500 mt-0.5">{step.description}</p>
</div>
</div>
{step.action === "download" ? (
<Button className="bg-[#3498db] hover:bg-[#2980b9] rounded-lg">
<Download className="w-4 h-4 mr-1.5" />
Download
</Button>
) : (
<Button variant="outline" className="rounded-lg border-gray-300">
<ExternalLink className="w-4 h-4 mr-1.5" />
Open
</Button>
)}
</div>
))}
</div>
{/* Recommendations */}
<div className="bg-white rounded-xl border border-gray-200 p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="text-lg">💡</span>
<h3 className="font-bold text-gray-800">Recommendations</h3>
</div>
<Button variant="outline" size="sm" className="rounded-lg">
<CheckCircle2 className="w-4 h-4 mr-1.5" />
Check Status
</Button>
</div>
<div className="space-y-3">
{recommendations.map((rec, i) => (
<div key={i} className="flex items-start gap-2">
<Circle className={`w-3 h-3 mt-1 flex-shrink-0 ${
rec.color === "blue" ? "text-blue-500 fill-blue-500" : "text-red-500 fill-red-500"
}`} />
<p className="text-sm text-gray-700 leading-relaxed">{rec.text}</p>
</div>
))}
</div>
</div>
</main>
</div>
</div>
);
}