Develop

src/components/App/index.tsx

@@ -54,7 +54,7 @@ import NavbarFooter, { INavbarHomeItems } from "../NavbarFooter";
 import { EPathsFromHome } from "@/store/siteConfig";
 import { APNG } from "apng-js";
 import { useApi, useApiCall } from "@/api";
-import { Asset } from "@/api/resources/Assets";
+// import { Asset } from "@/api/resources/Assets";
 import PaymentResultPage from "../PaymentPage/results";
 import PaymentSuccessPage from "../PaymentPage/results/SuccessPage";
 import PaymentFailPage from "../PaymentPage/results/ErrorPage";
@@ -151,11 +151,11 @@ function App(): JSX.Element {
   //   padLockApng,
   //   setPadLockApng,
   // ] = useState<Error | APNG>(Error);
-  const api = useApi();
+  // const api = useApi();
   const dispatch = useDispatch();
-  const { token, user, signUp, logout } = useAuth();
+  const { user } = useAuth();
   const [searchParams] = useSearchParams();
-  const jwtToken = searchParams.get("token");
+  // const jwtToken = searchParams.get("token");
   const isForce = searchParams.get("force");
   const subscriptionStatus = useSelector(selectors.selectStatus);
 
@@ -225,57 +225,15 @@ function App(): JSX.Element {
     });
   }, []);
 
-  const assetsData = useCallback(async () => {
-    const { assets } = await api.getAssets({
-      category: String("au"),
-    });
-    return assets;
-  }, [api]);
+  // const assetsData = useCallback(async () => {
+  //   const { assets } = await api.getAssets({
+  //     category: String("au"),
+  //   });
+  //   return assets;
+  // }, [api]);
 
-  const { data } = useApiCall<Asset[]>(assetsData);
-  data
-
-  // jwt auth
-  useLayoutEffect(() => {
-    (async () => {
-      if (!jwtToken) return;
-      logout();
-      try {
-        const { token } = await api.getRealToken({ token: jwtToken });
-        const { user } = await api.getUser({ token });
-        const { user: userMe } = await api.getMe({ token });
-        signUp(token, user, userMe);
-      } catch (error) {
-        console.log("Error of get real token or get user: ");
-        console.error(error);
-      }
-    })();
-  }, [api, jwtToken, logout, signUp]);
-
-  useEffect(() => {
-    (async () => {
-      if (!token.length || !user) return;
-      const {
-        user: { has_subscription },
-      } = await api.getSubscriptionStatus({
-        token,
-      });
-
-      const { subscription: subscriptionStatusNew } =
-        await api.getSubscriptionStatusNew({ token });
-
-      if ((has_subscription || subscriptionStatusNew) && user) {
-        return dispatch(actions.status.update("subscribed"));
-      }
-      if (!has_subscription && !subscriptionStatusNew && user) {
-        return dispatch(actions.status.update("unsubscribed"));
-      }
-      if (!user) {
-        return dispatch(actions.status.update("lead"));
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, api, token]);
+  // const { data } = useApiCall<Asset[]>(assetsData);
+  // data
 
   // useEffect(() => {
   //   async function getApng() {
@@ -324,10 +282,12 @@ function App(): JSX.Element {
           element={<PalmistryV1Routes />}
         />
         <Route path={routes.client.auth()} element={<Auth redirectUrl={routes.client.trialPaymentV1()} />} />
-        <Route
-          path={`${palmistryV2Prefix}/*`}
-          element={<PalmistryV2Routes />}
-        />
+        <Route element={<AuthorizedUserOutlet />}>
+          <Route
+            path={`${palmistryV2Prefix}/*`}
+            element={<PalmistryV2Routes />}
+          />
+        </Route>
         <Route
           path={`${emailMarketingV1Prefix}/*`}
           element={<MarketingLandingV1Routes />}

src/components/PalmistryV2/pages/TrialPayment/index.tsx

@@ -56,6 +56,7 @@ function TrialPayment() {
     error,
     isPaymentSuccess,
     isModalClosed,
+    isLoading,
     showCreditCardForm,
   } = usePayment({
     placementKey,
@@ -87,6 +88,7 @@ function TrialPayment() {
 
   const onModalClosed = () => {
     // setIsPaymentModalOpen(false);
+    if (isPaymentSuccess || isLoading || error) return;
     return handleDiscount()
   }
 
@@ -104,11 +106,12 @@ function TrialPayment() {
   };
 
   const userData = useCallback(async () => {
+    if (!token) return null;
     const { user } = await api.getMe({ token: token });
     return user;
-  }, [api]);
+  }, [api, token]);
 
-  const { data: user } = useApiCall<User.IUser>(userData);
+  const { data: user } = useApiCall<User.IUser | null>(userData);
 
   const singleOrWithPartner = useMemo(() => {
     return user?.partner ? "partner" : "single";

src/components/pages/Auth/index.tsx

@@ -35,7 +35,7 @@ function Auth({ redirectUrl = routes.client.home() }: IAuthPage) {
   const [passwordFromQuery, emailFromQuery] = useMemo(() => {
     const url = window.location.href;
     const [_password, _email] = url.split("?")?.[1]?.split("password=", 2)?.[1]?.split("&email=") || ["", ""]
-    return [decodeURIComponent(_password), decodeURIComponent(_email)]
+    return [decodeURIComponent(_password?.split("&")?.[0]), decodeURIComponent(_email?.split("&")?.[0])]
   }, [window.location.href]);
 
   const { translate } = useTranslations(ELocalesPlacement.V1);

src/hooks/payment/nmi/usePayment.ts

@@ -77,7 +77,7 @@ export const usePayment = ({
     }, [products, activeProduct]);
 
     useEffect(() => {
-        if (!activeProduct) return;
+        if (!activeProduct || !token) return;
 
         const config: any = {
             variant: paymentFormType,
@@ -114,7 +114,7 @@ export const usePayment = ({
         };
 
         window.CollectJS?.configure(config);
-    }, [placementId, paywallId, activeProduct]);
+    }, [placementId, paywallId, activeProduct, token]);
 
     const finishSubmit = async (response: any) => {
         try {

src/init.tsx

@@ -22,6 +22,7 @@ import "core-js/actual";
 import { pdfjs } from "react-pdf";
 import HeadData from "./utils/Helmet";
 import Clarity from '@microsoft/clarity';
+import { InitializationProvider } from "./initialization";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
 
@@ -94,7 +95,9 @@ const init = async () => {
             <ApiContext.Provider value={api}>
               <AuthProvider>
                 <LegalContext.Provider value={legal}>
-                  <App />
+                  <InitializationProvider>
+                    <App />
+                  </InitializationProvider>
                 </LegalContext.Provider>
               </AuthProvider>
             </ApiContext.Provider>

src/initialization/index.tsx

@@ -0,0 +1,74 @@
+import { useApi } from "@/api";
+import { useAuth } from "@/auth/useAuth";
+import { actions } from "@/store";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+
+interface InitializationProviderProps {
+    children: React.ReactNode;
+}
+
+export function InitializationProvider({ children }: InitializationProviderProps) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [searchParams] = useSearchParams();
+    const jwtToken = searchParams.get("token");
+    const api = useApi();
+    const { signUp, logout, token, user } = useAuth();
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        const initialize = async () => {
+            if (!jwtToken) {
+                setIsInitialized(true);
+                return;
+            }
+
+            try {
+                logout();
+                const { token } = await api.getRealToken({ token: jwtToken });
+                const { user } = await api.getUser({ token });
+                const { user: userMe } = await api.getMe({ token });
+                signUp(token, user, userMe);
+            } catch (error) {
+                console.log("Error of get real token or get user: ");
+                console.error(error);
+            } finally {
+                setIsInitialized(true);
+            }
+        };
+
+        initialize();
+    }, [api, jwtToken, logout, signUp]);
+
+    useEffect(() => {
+        (async () => {
+            if (!token.length || !user) return;
+            const {
+                user: { has_subscription },
+            } = await api.getSubscriptionStatus({
+                token,
+            });
+
+            const { subscription: subscriptionStatusNew } =
+                await api.getSubscriptionStatusNew({ token });
+
+            if ((has_subscription || subscriptionStatusNew) && user) {
+                return dispatch(actions.status.update("subscribed"));
+            }
+            if (!has_subscription && !subscriptionStatusNew && user) {
+                return dispatch(actions.status.update("unsubscribed"));
+            }
+            if (!user) {
+                return dispatch(actions.status.update("lead"));
+            }
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, api, token]);
+
+    if (!isInitialized) {
+        return null;
+    }
+
+    return <>{children}</>;
+}