From e12333aff2fa5b995ddf8938693023e48c6d4557 Mon Sep 17 00:00:00 2001
From: Eric Lay <ericlay@noreply.ericlay.online>
Date: Wed, 11 Mar 2026 08:52:00 -0500
Subject: [PATCH] Add src/pages/StripeConnect.jsx

---
 src/pages/StripeConnect.jsx | 157 ++++++++++++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 src/pages/StripeConnect.jsx

diff --git a/src/pages/StripeConnect.jsx b/src/pages/StripeConnect.jsx
new file mode 100644
index 0000000..3a582e3
--- /dev/null
+++ b/src/pages/StripeConnect.jsx
@@ -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>
+  );
+}
\ No newline at end of file