addition Stripe payment integration work

2026-03-04 21:38:36 -05:00
parent 9ad414313b
commit 239ea7db85
6 changed files with 54 additions and 97 deletions
--- a/backend-go/README.md
+++ b/backend-go/README.md
@@ -2,7 +2,6 @@ Start DB:

 brew services start postgresql@15

-
 From the backend-go directory, you have a few options:

 Option 1: Single command (both API + poller)
--- a/backend-go/internal/handlers/stripe.go
+++ b/backend-go/internal/handlers/stripe.go
@@ -46,8 +46,8 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 				Quantity: stripe.Int64(1),
 			},
 		},
-		SuccessURL:        stripe.String(h.cfg.FrontendURL + "/onboarding?payment=success&session_id={CHECKOUT_SESSION_ID}"),
-		CancelURL:         stripe.String(h.cfg.FrontendURL + "/onboarding?payment=cancelled"),
+		SuccessURL:        stripe.String(h.cfg.FrontendURL + "/subscribe?payment=success&session_id={CHECKOUT_SESSION_ID}"),
+		CancelURL:         stripe.String(h.cfg.FrontendURL + "/subscribe?payment=cancelled"),
 		ClientReferenceID: stripe.String(userID),
 		CustomerEmail:     stripe.String(user.Email),
 	}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,7 +16,7 @@ export default function App() {
            <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/signup" element={<Signup />} />
-                <Route path="/onboarding" element={<Onboarding />} />
+                <Route path="/subscribe" element={<Onboarding />} />
                <Route path="*" element={<Navigate to="/login" />} />
            </Routes>
        );
@@ -30,7 +30,7 @@ export default function App() {
                <Route path="/addresses" element={<Addresses />} />
                <Route path="/alerts" element={<Alerts />} />
                <Route path="/alertevents" element={<AlertHistory />} />
-                <Route path="/onboarding" element={<Onboarding />} />
+                <Route path="/subscribe" element={<Onboarding />} />
                <Route path="*" element={<Navigate to="/addresses" />} />
            </Routes>
        </div>
--- a/frontend/src/components/Input.css
+++ b/frontend/src/components/Input.css
@@ -1,6 +1,6 @@
 .input__label {
  display: block;
-  margin-bottom: 0.4rem;
+  margin: 0.8rem 0rem 0.4rem 0rem;
  font-size: 0.9rem;
 }

--- a/frontend/src/pages/Onboarding.jsx
+++ b/frontend/src/pages/Onboarding.jsx
@@ -1,7 +1,9 @@
 /**
- * Onboarding Wizard
+ * Subscribe / Onboarding Wizard
 *
- * 6-step guided flow: Create Account -> Subscribe -> Add Wallet -> Alert Rules -> Notifications -> Done
+ * 5-step guided flow: Create Account -> Add Wallet -> Alert Rules -> Notifications -> Done
+ * After account creation, user is redirected to Stripe Checkout for payment.
+ * On successful payment, they return here at step 2 (Add Wallet).
 */

 import { useState, useEffect } from "react";
@@ -20,7 +22,6 @@ import "./Onboarding.css";

 const STEPS = [
    "Create Account",
-    "Subscribe",
    "Add Wallet",
    "Alert Rules",
    "Notifications",
@@ -80,11 +81,11 @@ export default function Onboarding() {
        const payment = searchParams.get("payment");
        if (payment === "success") {
            setSearchParams({}, { replace: true });
-            setStep(3);
+            setStep(2);
        } else if (payment === "cancelled") {
            setSearchParams({}, { replace: true });
-            setStep(2);
-            setError("Payment was cancelled. Please subscribe to continue.");
+            setStep(1);
+            setError("Payment was cancelled. Please try again.");
        }
    }, [currentUser, searchParams, setSearchParams]);

@@ -104,10 +105,18 @@ export default function Onboarding() {
            setError("Password must be at least 6 characters");
            return;
        }
-        if (!currentUser) {
        try {
            setLoading(true);
+            if (!currentUser) {
                await signup(data.email, data.password);
+            }
+            const status = await getSubscriptionStatus();
+            if (status.subscription_status === "active" || status.subscription_status === "trialing") {
+                setStep(2);
+                return;
+            }
+            const { url } = await createCheckoutSession();
+            window.location.href = url;
        } catch (err) {
            if (err.code === "auth/email-already-in-use") {
                setError("Email already in use. Try logging in instead.");
@@ -119,32 +128,10 @@ export default function Onboarding() {
                setError("Failed to create account: " + err.message);
            }
            setLoading(false);
-                return;
-            } finally {
-                setLoading(false);
-            }
-        }
-        setStep(2);
-    }
-
-    async function handleStep2Subscribe() {
-        setError("");
-        try {
-            setLoading(true);
-            const status = await getSubscriptionStatus();
-            if (status.subscription_status === "active" || status.subscription_status === "trialing") {
-                setStep(3);
-                return;
-            }
-            const { url } = await createCheckoutSession();
-            window.location.href = url;
-        } catch (err) {
-            setError(err.message);
-            setLoading(false);
        }
    }

-    async function handleStep3() {
+    async function handleStep2() {
        setError("");
        if (!data.walletAddress) {
            setError("Please enter a wallet address");
@@ -161,7 +148,7 @@ export default function Onboarding() {
                label: data.walletLabel || undefined,
            });
            set("createdAddressId", created.id);
-            setStep(4);
+            setStep(3);
        } catch (err) {
            setError(err.message);
        } finally {
@@ -169,7 +156,7 @@ export default function Onboarding() {
        }
    }

-    async function handleStep4() {
+    async function handleStep3() {
        setError("");
        const rules = [];
        if (data.alertIncomingTx) rules.push({ type: "incoming_tx" });
@@ -190,7 +177,7 @@ export default function Onboarding() {
        }

        if (rules.length === 0) {
-            setStep(5);
+            setStep(4);
            return;
        }

@@ -202,7 +189,7 @@ export default function Onboarding() {
                created.push(result);
            }
            set("alertsCreated", created);
-            setStep(5);
+            setStep(4);
        } catch (err) {
            setError(err.message);
        } finally {
@@ -210,12 +197,12 @@ export default function Onboarding() {
        }
    }

-    async function handleStep5() {
+    async function handleStep4() {
        setError("");
        const hasAny =
            data.discordWebhookUrl || data.slackWebhookUrl || data.notificationEmail;
        if (!hasAny) {
-            setStep(6);
+            setStep(5);
            return;
        }
        try {
@@ -227,7 +214,7 @@ export default function Onboarding() {
                email: data.notificationEmail || undefined,
            });
            set("notificationConfigured", true);
-            setStep(6);
+            setStep(5);
        } catch (err) {
            setError(err.message);
        } finally {
@@ -331,33 +318,6 @@ export default function Onboarding() {
    }

    function Step2() {
-        return (
-            <>
-                <h2 className="mb-sm">Subscribe to Koin Ping</h2>
-                <p className="onboarding__subtitle">
-                    A subscription is required to use Koin Ping.
-                </p>
-
-                <div className="subscribe-card">
-                    <div className="subscribe-card__price">
-                        <span className="subscribe-card__amount">$1.99</span>
-                        <span className="subscribe-card__period">/month</span>
-                    </div>
-                    <ul className="subscribe-card__features">
-                        <li>Unlimited wallet monitoring</li>
-                        <li>Real-time alert notifications</li>
-                        <li>Discord, Slack, Telegram & email alerts</li>
-                        <li>Email digest reports</li>
-                    </ul>
-                    <p className="subscribe-card__commitment">
-                        6-month minimum commitment
-                    </p>
-                </div>
-            </>
-        );
-    }
-
-    function Step3() {
        return (
            <>
                <h2 className="mb-sm">Add a wallet address</h2>
@@ -383,7 +343,7 @@ export default function Onboarding() {
        );
    }

-    function Step4() {
+    function Step3() {
        return (
            <>
                <h2 className="mb-sm">Configure alert rules</h2>
@@ -443,7 +403,7 @@ export default function Onboarding() {
        );
    }

-    function Step5() {
+    function Step4() {
        return (
            <>
                <h2 className="mb-sm">Set up notifications</h2>
@@ -508,7 +468,7 @@ export default function Onboarding() {
        );
    }

-    function Step6() {
+    function Step5() {
        const alertCount = data.alertsCreated.length;
        const hasNotif = data.notificationConfigured;

@@ -602,18 +562,17 @@ export default function Onboarding() {
    // ── Footer navigation ─────────────────────────────────────────────────────

    function Footer() {
-        if (step === 6) return null;
+        if (step === 5) return null;

-        const canSkip = step === 4 || step === 5;
-        const canBack = step > 1 && step !== 2;
+        const canSkip = step === 3 || step === 4;
+        const canBack = step > 2;

        async function handleNext() {
            setSkipWarning("");
            if (step === 1) await handleStep1();
-            else if (step === 2) await handleStep2Subscribe();
+            else if (step === 2) await handleStep2();
            else if (step === 3) await handleStep3();
            else if (step === 4) await handleStep4();
-            else if (step === 5) await handleStep5();
        }

        function handleSkip() {
@@ -628,9 +587,9 @@ export default function Onboarding() {
            setStep((s) => s - 1);
        }

-        const nextLabel = step === 2
-            ? "Subscribe — $1.99/mo"
-            : step === 5
+        const nextLabel = step === 1
+            ? "Create Account & Subscribe"
+            : step === 4
              ? "Finish"
              : "Next →";

@@ -673,12 +632,11 @@ export default function Onboarding() {
    // ── Render ────────────────────────────────────────────────────────────────

    const stepContent = {
-        1: <Step1 />,
-        2: <Step2 />,
-        3: <Step3 />,
-        4: <Step4 />,
-        5: <Step5 />,
-        6: <Step6 />,
+        1: Step1(),
+        2: Step2(),
+        3: Step3(),
+        4: Step4(),
+        5: Step5(),
    };

    return (
@@ -686,7 +644,7 @@ export default function Onboarding() {
            <div className="onboarding__container">
                <h1 className="onboarding__title">Koin Ping</h1>

-                <ProgressBar />
+                {ProgressBar()}

                {error && (
                    <div className="alert alert--error">{error}</div>
@@ -698,7 +656,7 @@ export default function Onboarding() {

                <div className="onboarding__card">
                    {stepContent[step]}
-                    <Footer />
+                    {Footer()}
                </div>

                {step === 1 && (
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -1,5 +1,5 @@
 import { Navigate } from "react-router-dom";

 export default function Signup() {
-    return <Navigate to="/onboarding" replace />;
+    return <Navigate to="/subscribe" replace />;
 }