Chockfull

2026-03-28 11:10:25 -04:00
parent 288092e4b4
commit 615dd1dddc
6 changed files with 178 additions and 70 deletions
--- a/frontend/src/api/stripe.jsx
+++ b/frontend/src/api/stripe.jsx
@@ -15,6 +15,19 @@ export async function createCheckoutSession(tier = "premium") {
    return res.json();
 }

+export async function createOnboardingCheckout(email, tier = "premium") {
+    const res = await fetch(`${API_BASE}/stripe/create-onboarding-checkout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, tier }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
 export async function activateFreeTier() {
    const headers = await getAuthHeaders();
    const res = await fetch(`${API_BASE}/stripe/activate-free`, {
--- a/frontend/src/components/TierPicker.jsx
+++ b/frontend/src/components/TierPicker.jsx
@@ -3,13 +3,13 @@ import "./TierPicker.css";
 const TIERS = [
  {
    id: "free",
-    name: "Free Trial Access",
+    name: "Trial Monitoring",
    price: "$0",
    period: "",
    features: [
-      "Monitor 1 blockchain address",
-      "Daily email digest alert",
-      "1 transaction alert type per monitored address",
+      "Monitor 1 blockchain address 24/7",
+      "Configure alerts to fire on trigger events",
+      "1 transaction alert type per trigger (email digest)",
    ],
    disabledFeatures: [
      "Real-time Discord alerts",
@@ -19,11 +19,12 @@ const TIERS = [
  },
  {
    id: "premium",
-    name: "Premium Access",
+    name: "Premium Monitoring",
    price: "$1.99",
    period: "/month",
    features: [
      "Monitor 3 blockchain addresses",
+      "Configure alerts to fire on trigger events",
      "Daily email digest alert",
      "Real-time Discord alerts",
      "Real-time Telegram alerts",
@@ -36,11 +37,12 @@ const TIERS = [
  },
  {
    id: "pro",
-    name: "Pro Access",
+    name: "Professional Monitoring",
    price: "$11.99",
    period: "/month",
    features: [
      "Monitor unlimited blockchain addresses",
+      "Configure alerts to fire on trigger events",
      "Daily email digest alert",
      "Real-time Discord alerts",
      "Real-time Telegram alerts",
--- a/frontend/src/pages/subscribe/Subscribe.jsx
+++ b/frontend/src/pages/subscribe/Subscribe.jsx
@@ -7,7 +7,7 @@ import {
  updateNotificationConfig,
  testNotificationChannels,
 } from "../../api/notificationConfig";
-import { createCheckoutSession, getSubscriptionStatus, verifyCheckoutSession, activateFreeTier } from "../../api/stripe";
+import { createOnboardingCheckout, verifyCheckoutSession, activateFreeTier } from "../../api/stripe";
 import Input from "../../components/Input";
 import Button from "../../components/Button";
 import TierPicker from "../../components/TierPicker";
@@ -20,8 +20,8 @@ const TIER_LIMITS = {
 };

 const STEPS = [
-  "Choose Plan",
  "Create Account",
+  "Choose Plan",
  "Add Wallet",
  "Alert Rules",
  "Notifications",
@@ -33,8 +33,9 @@ export default function Subscribe() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

-  const [step, setStep] = useState(1);
-  const [loading, setLoading] = useState(false);
+  const hasPaymentReturn = searchParams.get("payment") === "success";
+  const [step, setStep] = useState(hasPaymentReturn || currentUser ? 2 : 1);
+  const [loading, setLoading] = useState(hasPaymentReturn);
  const [error, setError] = useState("");
  const [skipWarning, setSkipWarning] = useState("");
  const [testResults, setTestResults] = useState(null);
@@ -79,40 +80,61 @@ export default function Subscribe() {
  }, [currentUser, navigate]);

  useEffect(() => {
-    if (!currentUser) return;
    const payment = searchParams.get("payment");
    const sessionId = searchParams.get("session_id");
-    if (payment === "success" && sessionId) {
-      setSearchParams({}, { replace: true });
-      setLoading(true);
-      verifyCheckoutSession(sessionId)
-        .then(() => {
-          setStep(3);
-        })
-        .catch((err) => {
-          setError("Payment verification failed: " + err.message);
-          setStep(2);
-        })
-        .finally(() => setLoading(false));
-    } else if (payment === "cancelled") {
+
+    if (payment === "cancelled") {
      setSearchParams({}, { replace: true });
      setStep(2);
      setError("Payment was cancelled. Please try again.");
+      return;
    }
-  }, [currentUser, searchParams, setSearchParams]);
+
+    if (payment !== "success" || !sessionId) return;
+
+    // Phase 1: no account yet — create it. This triggers an auth state change
+    // which remounts the component (App.jsx swaps route trees). The URL params
+    // are preserved so Phase 2 runs on the next mount.
+    if (!currentUser) {
+      const savedEmail = sessionStorage.getItem("kp_onboard_email");
+      const savedPw = sessionStorage.getItem("kp_onboard_pw");
+      if (!savedEmail || !savedPw) {
+        setSearchParams({}, { replace: true });
+        setError("Session expired. Please start the signup process again.");
+        setStep(1);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      signup(savedEmail, savedPw).catch((err) => {
+        setSearchParams({}, { replace: true });
+        setError("Account creation failed: " + err.message);
+        setStep(1);
+        setLoading(false);
+      });
+      return;
+    }
+
+    // Phase 2: authenticated — verify the checkout and activate subscription.
+    setSearchParams({}, { replace: true });
+    setLoading(true);
+    sessionStorage.removeItem("kp_onboard_email");
+    sessionStorage.removeItem("kp_onboard_pw");
+
+    verifyCheckoutSession(sessionId)
+      .then(() => {
+        setStep(3);
+      })
+      .catch((err) => {
+        setError("Payment verification failed: " + err.message);
+        setStep(2);
+      })
+      .finally(() => setLoading(false));
+  }, [currentUser, searchParams, setSearchParams, signup]);

  // ── Step handlers ─────────────────────────────────────────────────────────

  function handleStep1() {
-    setError("");
-    if (!data.selectedTier) {
-      setError("Please select a plan to continue");
-      return;
-    }
-    setStep(2);
-  }
-
-  async function handleStep2() {
    setError("");
    if (!data.email || !data.password || !data.confirmPassword) {
      setError("Please fill in all fields");
@@ -126,24 +148,30 @@ export default function Subscribe() {
      setError("Password must be at least 6 characters");
      return;
    }
+    setStep(2);
+  }
+
+  async function handleStep2() {
+    setError("");
+    if (!data.selectedTier) {
+      setError("Please select a plan to continue");
+      return;
+    }
    try {
      setLoading(true);
-      if (!currentUser) {
-        await signup(data.email, data.password);
-      }

      if (data.selectedTier === "free") {
+        if (!currentUser) {
+          await signup(data.email, data.password);
+        }
        await activateFreeTier();
        setStep(3);
        return;
      }

-      const status = await getSubscriptionStatus();
-      if (status.subscription_status === "active" || status.subscription_status === "trialing") {
-        setStep(3);
-        return;
-      }
-      const { url } = await createCheckoutSession(data.selectedTier);
+      sessionStorage.setItem("kp_onboard_email", data.email);
+      sessionStorage.setItem("kp_onboard_pw", data.password);
+      const { url } = await createOnboardingCheckout(data.email, data.selectedTier);
      window.location.href = url;
    } catch (err) {
      if (err.code === "auth/email-already-in-use") {
@@ -153,8 +181,9 @@ export default function Subscribe() {
      } else if (err.code === "auth/weak-password") {
        setError("Password is too weak");
      } else {
-        setError("Failed to create account: " + err.message);
+        setError("Failed to process plan selection: " + err.message);
      }
+    } finally {
      setLoading(false);
    }
  }
@@ -325,21 +354,6 @@ export default function Subscribe() {

  // ── Step content ──────────────────────────────────────────────────────────

-  function StepChoosePlan() {
-    return (
-      <>
-        <h2 className="mb-sm">Choose your plan</h2>
-        <p className="subscribe__subtitle">
-          Select the plan that works best for you. You can upgrade anytime.
-        </p>
-        <TierPicker
-          onSelect={(tier) => set("selectedTier", tier)}
-          selectedTier={data.selectedTier}
-        />
-      </>
-    );
-  }
-
  function StepCreateAccount() {
    return (
      <>
@@ -373,6 +387,21 @@ export default function Subscribe() {
    );
  }

+  function StepChoosePlan() {
+    return (
+      <>
+        <h2 className="mb-sm">Choose your monitoring plan</h2>
+        <p className="subscribe__subtitle">
+          Select the plan that works best for you. You can upgrade anytime.
+        </p>
+        <TierPicker
+          onSelect={(tier) => set("selectedTier", tier)}
+          selectedTier={data.selectedTier}
+        />
+      </>
+    );
+  }
+
  function StepAddWallet() {
    return (
      <>
@@ -676,11 +705,13 @@ export default function Subscribe() {
    }

    const nextLabel = step === 1
-      ? "Continue"
+      ? "Create Account"
      : step === 2
-        ? data.selectedTier === "free"
-          ? "Create Account"
-          : "Create Account & Subscribe"
+        ? !data.selectedTier
+          ? "Continue"
+          : data.selectedTier === "free"
+            ? "Start Free Trial"
+            : "Subscribe & Continue"
        : step === 5
          ? "Finish"
          : "Next →";
@@ -711,7 +742,7 @@ export default function Subscribe() {
          )}
          <Button
            onClick={handleNext}
-            disabled={loading || (step === 1 && !data.selectedTier)}
+            disabled={loading || (step === 2 && !data.selectedTier)}
            className="text-bold"
          >
            {loading ? "Please wait..." : nextLabel}
@@ -724,8 +755,8 @@ export default function Subscribe() {
  // ── Render ────────────────────────────────────────────────────────────────

  const stepContent = {
-    1: StepChoosePlan(),
-    2: StepCreateAccount(),
+    1: StepCreateAccount(),
+    2: StepChoosePlan(),
    3: StepAddWallet(),
    4: StepAlertRules(),
    5: StepNotifications(),
@@ -734,7 +765,7 @@ export default function Subscribe() {

  return (
    <div className="subscribe">
-      <div className={`subscribe__container${step === 1 ? " subscribe__container--wide" : ""}`}>
+      <div className={`subscribe__container${step === 2 ? " subscribe__container--wide" : ""}`}>
        <h1 className="subscribe__title">Koin Ping</h1>

        {ProgressBar()}
@@ -752,7 +783,7 @@ export default function Subscribe() {
          {Footer()}
        </div>

-        {step === 2 && (
+        {step === 1 && (
          <p className="subscribe__login-link">
            Already have an account?{" "}
            <a href="/login">Log in here</a>