diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx index 3950088ac..bcc959847 100755 --- a/src/app/Routes.tsx +++ b/src/app/Routes.tsx @@ -49,6 +49,8 @@ import { PaymentSuccessCallbackModule, PaymentCanceledCallbackModule, } from "app/modules/callback-module/payment"; +import { useRecoilValue } from "recoil"; +import { fetchPlanLoadingAtom } from "./state/recoil/atoms"; const ChartModule = lazy(() => import("app/modules/chart-module")); const ReportModule = lazy(() => import("app/modules/report-module")); @@ -104,6 +106,15 @@ const Auth0ProviderWithRedirectCallback = (props: { ); }; +const PlanLoader = () => { + const planLoading = useRecoilValue(fetchPlanLoadingAtom); + + if (planLoading) { + return ; + } + return null; +}; + const AuthLoader = () => { const { isLoading } = useAuth0(); @@ -191,7 +202,7 @@ const IntercomBootupComponent = () => { // @ts-ignore window.Intercom("boot", { api_base: "https://api-iam.intercom.io", - app_id: "tfvurn19", + app_id: process.env.REACT_APP_INTERCOM_APP_ID, name: user?.name, // Full name email: user?.email, // the email for your user user_id: user?.sub, // user_id as a string @@ -207,7 +218,7 @@ const IntercomBootupComponent = () => { // @ts-ignore window.Intercom("boot", { api_base: "https://api-iam.intercom.io", - app_id: "tfvurn19", + app_id: process.env.REACT_APP_INTERCOM_APP_ID, }); } }, [isAuthenticated]); @@ -229,6 +240,7 @@ export function MainRoutes() { }} > + {process.env.REACT_APP_ENV_TYPE === "prod" ? ( diff --git a/src/app/hooks/useCheckUserPlan.tsx b/src/app/hooks/useCheckUserPlan.tsx index 6b6a63349..060464e7a 100644 --- a/src/app/hooks/useCheckUserPlan.tsx +++ b/src/app/hooks/useCheckUserPlan.tsx @@ -1,5 +1,5 @@ import { useAuth0 } from "@auth0/auth0-react"; -import { planDialogAtom } from "app/state/recoil/atoms"; +import { fetchPlanLoadingAtom, planDialogAtom } from "app/state/recoil/atoms"; import { useStoreState } from "app/state/store/hooks"; import axios from "axios"; import React from "react"; @@ -10,6 +10,8 @@ export function useCheckUserPlan() { const token = useStoreState((state) => state.AuthToken.value); const setPlanDialog = useSetRecoilState(planDialogAtom); + const setLoading = useSetRecoilState(fetchPlanLoadingAtom); + const [userPlan, setUserPlan] = React.useState<{ planData: { name: string; @@ -49,6 +51,7 @@ export function useCheckUserPlan() { React.useEffect(() => { if (!token) return; + setLoading(true); axios .get(`${process.env.REACT_APP_API}/users/plan-data`, { headers: { @@ -58,6 +61,12 @@ export function useCheckUserPlan() { }) .then((response) => { setUserPlan(response.data); + }) + .catch((error) => { + console.error(error); + }) + .finally(() => { + setLoading(false); }); }, [token]); diff --git a/src/app/hooks/useOneDrivePicker.tsx b/src/app/hooks/useOneDrivePicker.tsx index cbf612f57..51ffb347e 100644 --- a/src/app/hooks/useOneDrivePicker.tsx +++ b/src/app/hooks/useOneDrivePicker.tsx @@ -21,7 +21,7 @@ export const useOneDrivePicker = ({ const msalParams = { auth: { authority: "https://login.microsoftonline.com/consumers", - clientId: "a5f756dd-d422-443e-93d2-3361f8a4a6f8", + clientId: "a5f756dd-d422-443e-93d2-3361f8a4a6f8", // Doesn't work if used as an env variable redirectUri: window.location.origin, }, }; diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx index 6343ed762..3bb181970 100644 --- a/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx +++ b/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx @@ -12,6 +12,7 @@ import { useSetRecoilState } from "recoil"; import { planDialogAtom } from "app/state/recoil/atoms"; import SaveAltIcon from "@material-ui/icons/SaveAlt"; import ExternalSearchTable from "../component/table/externalSearchTable"; +import { useCheckUserPlan } from "app/hooks/useCheckUserPlan"; export interface IExternalDataset { name: string; @@ -73,7 +74,9 @@ export default function ExternalSearch(props: { setOffset(0); }; - const free = true; + const { userPlan } = useCheckUserPlan(); + + const free = userPlan?.planData.name === "Free"; // Pagination on scroll React.useEffect(() => { if (isObserved && datasets.length > 0 && !free) { diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts index 7b76f21c7..bb24843f2 100644 --- a/src/app/state/recoil/atoms/index.ts +++ b/src/app/state/recoil/atoms/index.ts @@ -175,3 +175,8 @@ export const planDialogAtom = atom<{ onTryAgain: () => {}, }, }); + +export const fetchPlanLoadingAtom = atom({ + key: "fetchPlanLoadingAtom", + default: false, +});