more

frontend/src/pages/subscribe/Subscribe.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
+import { useUserProperties } from "../../contexts/UserPropertiesContext";
 import {
   createOnboardingCheckout,
   verifyCheckoutSession,
@@ -15,6 +16,7 @@ const STEPS = ["Create Account", "Choose Plan"];
 
 export default function Subscribe() {
   const { currentUser, signup } = useAuth();
+  const { state: userProps, dispatch, ACTION_TYPES } = useUserProperties();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -51,9 +53,7 @@ export default function Subscribe() {
     // Phase 1: no account yet — create it. Auth state change remounts the
     // component (App.jsx swaps route trees) and 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) {
+      if (!userProps.email || !userProps.password) {
         setSearchParams({}, { replace: true });
         setError("Session expired. Please start the signup process again.");
         setStep(1);
@@ -61,7 +61,7 @@ export default function Subscribe() {
         return;
       }
       setLoading(true);
-      signup(savedEmail, savedPw).catch((err) => {
+      signup(userProps.email, userProps.password).catch((err) => {
         setSearchParams({}, { replace: true });
         setError("Account creation failed: " + err.message);
         setStep(1);
@@ -73,8 +73,7 @@ export default function Subscribe() {
     // Phase 2: authenticated — verify the checkout and go to the dashboard.
     setSearchParams({}, { replace: true });
     setLoading(true);
-    sessionStorage.removeItem("kp_onboard_email");
-    sessionStorage.removeItem("kp_onboard_pw");
+    dispatch({ type: ACTION_TYPES.CLEAR_USER_PROPERTIES });
 
     verifyCheckoutSession(sessionId)
       .then(() => {
@@ -85,7 +84,7 @@ export default function Subscribe() {
         setStep(2);
       })
       .finally(() => setLoading(false));
-  }, [currentUser, searchParams, setSearchParams, signup, navigate]);
+  }, [currentUser, searchParams, setSearchParams, signup, navigate, userProps, dispatch, ACTION_TYPES]);
 
   // ── Step handlers ─────────────────────────────────────────────────────────
 
@@ -124,8 +123,10 @@ export default function Subscribe() {
         return;
       }
 
-      sessionStorage.setItem("kp_onboard_email", data.email);
-      sessionStorage.setItem("kp_onboard_pw", data.password);
+      dispatch({
+        type: ACTION_TYPES.SET_USER_PROPERTIES,
+        payload: { email: data.email, password: data.password },
+      });
       const { url } = await createOnboardingCheckout(
         data.email,
         data.selectedTier,