Clone

src/components/SubscriptionPage/index.tsx

@@ -49,15 +49,14 @@ function SubscriptionPage(): JSX.Element {
   const [apiError, setApiError] = useState<ApiError | null>(null);
   const [error, setError] = useState<boolean>(false);
   const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
+  const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
+  const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
+    activeSubPlanFromStore
+  );
+  const { subPlan } = useParams();
   const birthday = useSelector(selectors.selectBirthday);
 
-  // const queryParameters = new URLSearchParams(window.location.search);
+  useEffect(() => {
-  // const sub_plan = queryParameters.get("sub_plan") || "";
-  const { subPlan } = useParams();
-
-  const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
-  let activeSubPlan;
-
     if (subPlan) {
       const targetSubPlan = subPlans.find(
         (sub_plan) =>
@@ -68,11 +67,10 @@ function SubscriptionPage(): JSX.Element {
           ) === subPlan
       );
       if (targetSubPlan) {
-      activeSubPlan = targetSubPlan;
+        setActiveSubPlan(targetSubPlan);
       }
-  } else {
-    activeSubPlan = activeSubPlanFromStore;
     }
+  }, [subPlan, subPlans]);
 
   const paymentItems = [
     {
@@ -103,6 +101,11 @@ function SubscriptionPage(): JSX.Element {
         dispatch(actions.user.update(updatedUser.user));
       }
       dispatch(actions.status.update("registred"));
+      dispatch(
+        actions.payment.update({
+          activeSubPlan,
+        })
+      );
       setIsLoading(false);
       setIsAuth(true);
       setTimeout(() => {