diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 23f11a6..9e7edc8 100755 --- a/src/components/App/index.tsx +++ b/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); - 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(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(assetsData); + // data // useEffect(() => { // async function getApng() { @@ -324,10 +282,12 @@ function App(): JSX.Element { element={} /> } /> - } - /> + }> + } + /> + } diff --git a/src/components/PalmistryV2/pages/TrialPayment/index.tsx b/src/components/PalmistryV2/pages/TrialPayment/index.tsx index 5b3e542..05babba 100644 --- a/src/components/PalmistryV2/pages/TrialPayment/index.tsx +++ b/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(userData); + const { data: user } = useApiCall(userData); const singleOrWithPartner = useMemo(() => { return user?.partner ? "partner" : "single"; diff --git a/src/components/pages/Auth/index.tsx b/src/components/pages/Auth/index.tsx index 4849adf..dbc3d8d 100644 --- a/src/components/pages/Auth/index.tsx +++ b/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); diff --git a/src/hooks/payment/nmi/usePayment.ts b/src/hooks/payment/nmi/usePayment.ts index 904f67f..3292d82 100644 --- a/src/hooks/payment/nmi/usePayment.ts +++ b/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 { diff --git a/src/init.tsx b/src/init.tsx index 162046c..d4c82a8 100755 --- a/src/init.tsx +++ b/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 () => { - + + + diff --git a/src/initialization/index.tsx b/src/initialization/index.tsx new file mode 100644 index 0000000..60d3ad0 --- /dev/null +++ b/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}; +} \ No newline at end of file