diff --git a/src/components/Dashboard/DashboardAbilityProvider.js b/src/components/Dashboard/DashboardAbilityProvider.js index 37de0ced2..8fc9dfe8d 100644 --- a/src/components/Dashboard/DashboardAbilityProvider.js +++ b/src/components/Dashboard/DashboardAbilityProvider.js @@ -1,7 +1,8 @@ import React from 'react'; import { Ability } from '@casl/ability'; import { createContextualCan } from '@casl/react'; -import { useDashboardMeta } from '../../hooks/query'; + +import { useDashboardMetaBoot } from './DashboardBoot'; export const AbilityContext = React.createContext(); export const Can = createContextualCan(AbilityContext.Consumer); @@ -11,8 +12,8 @@ export const Can = createContextualCan(AbilityContext.Consumer); */ export function DashboardAbilityProvider({ children }) { const { - data: { abilities }, - } = useDashboardMeta(); + meta: { abilities }, + } = useDashboardMetaBoot(); // Ability instance. const ability = new Ability(abilities); diff --git a/src/components/Dashboard/DashboardBoot.js b/src/components/Dashboard/DashboardBoot.js index 6e3d967fb..6e6f45448 100644 --- a/src/components/Dashboard/DashboardBoot.js +++ b/src/components/Dashboard/DashboardBoot.js @@ -6,18 +6,26 @@ import { } from '../../hooks/query'; import { useSplashLoading } from '../../hooks/state'; import { useWatch, useWatchImmediate, useWhen } from '../../hooks'; +import { useSubscription } from '../../hooks/state'; import { setCookie, getCookie } from '../../utils'; /** * Dashboard meta async booting. + * - Fetches the dashboard meta only if the organization subscribe is active. + * - Once the dashboard meta query is loading display dashboard splash screen. */ export function useDashboardMetaBoot() { + const { isSubscriptionActive } = useSubscription(); + const { data: dashboardMeta, isLoading: isDashboardMetaLoading, isSuccess: isDashboardMetaSuccess, } = useDashboardMeta({ keepPreviousData: true, + + // Avoid run the query if the organization subscription is not active. + enabled: isSubscriptionActive, }); const [startLoading, stopLoading] = useSplashLoading(); @@ -30,20 +38,12 @@ export function useDashboardMetaBoot() { }, isDashboardMetaSuccess); return { + meta: dashboardMeta, isLoading: isDashboardMetaLoading, + isSuccess: isDashboardMetaSuccess }; } -/** - * Dashboard async booting. - * @returns {{ isLoading: boolean }} - */ -export function useDashboardBoot() { - const { isLoading } = useDashboardMetaBoot(); - - return { isLoading }; -} - /** * Application async booting. */ diff --git a/src/components/Dashboard/DashboardProvider.js b/src/components/Dashboard/DashboardProvider.js index 68c8e5654..7e05fb00c 100644 --- a/src/components/Dashboard/DashboardProvider.js +++ b/src/components/Dashboard/DashboardProvider.js @@ -1,12 +1,12 @@ import React from 'react'; import { DashboardAbilityProvider } from '../../components'; -import { useDashboardBoot } from './DashboardBoot'; +import { useDashboardMetaBoot } from './DashboardBoot'; /** * Dashboard provider. */ export default function DashboardProvider({ children }) { - const { isLoading } = useDashboardBoot(); + const { isLoading } = useDashboardMetaBoot(); // Avoid display any dashboard component before complete booting. if (isLoading) { diff --git a/src/hooks/state/subscriptions.js b/src/hooks/state/subscriptions.js index 95f2cdd4d..42a9c3f54 100644 --- a/src/hooks/state/subscriptions.js +++ b/src/hooks/state/subscriptions.js @@ -1,6 +1,11 @@ import { useCallback } from "react" -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { setSubscriptions } from 'store/subscription/subscription.actions'; +import { + isSubscriptionOnTrialFactory, + isSubscriptionInactiveFactory, + isSubscriptionActiveFactory, +} from 'store/subscription/subscription.selectors'; /** * Sets subscriptions. @@ -12,3 +17,20 @@ export const useSetSubscriptions = () => { dispatch(setSubscriptions(subscriptions)); }, [dispatch]); } + +/** + * The organization subscription selector. + * @param {string} slug + * @returns {} + */ +export const useSubscription = (slug = 'main') => { + const isSubscriptionOnTrial = useSelector(isSubscriptionOnTrialFactory(slug)); + const isSubscriptionInactive = useSelector(isSubscriptionInactiveFactory(slug)); + const isSubscriptionActive = useSelector(isSubscriptionActiveFactory(slug)); + + return { + isSubscriptionActive, + isSubscriptionInactive, + isSubscriptionOnTrial + } +} \ No newline at end of file