diff --git a/packages/console/src/hooks/use-applications-usage.ts b/packages/console/src/hooks/use-applications-usage.ts index 46563d84d..99f42183d 100644 --- a/packages/console/src/hooks/use-applications-usage.ts +++ b/packages/console/src/hooks/use-applications-usage.ts @@ -21,6 +21,11 @@ const useApplicationsUsage = () => { [allApplications] ); + const thirdPartyAppCount = useMemo( + () => allApplications?.filter(({ isThirdParty }) => isThirdParty).length ?? 0, + [allApplications] + ); + const hasMachineToMachineAppsReachedLimit = useMemo( () => hasReachedQuotaLimit({ @@ -41,6 +46,16 @@ const useApplicationsUsage = () => { [currentPlan, m2mAppCount] ); + const hasThirdPartyAppsReachedLimit = useMemo( + () => + hasReachedQuotaLimit({ + quotaKey: 'thirdPartyApplicationsLimit', + plan: currentPlan, + usage: thirdPartyAppCount, + }), + [currentPlan, thirdPartyAppCount] + ); + const hasAppsReachedLimit = useMemo( () => hasReachedQuotaLimit({ @@ -55,6 +70,7 @@ const useApplicationsUsage = () => { hasMachineToMachineAppsReachedLimit, hasMachineToMachineAppsSurpassedLimit, hasAppsReachedLimit, + hasThirdPartyAppsReachedLimit, }; }; diff --git a/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx index f53390b12..71448ba13 100644 --- a/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx +++ b/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx @@ -12,13 +12,18 @@ import useApplicationsUsage from '@/hooks/use-applications-usage'; type Props = { selectedType?: ApplicationType; isLoading: boolean; + isThirdParty?: boolean; onClickCreate: () => void; }; -function Footer({ selectedType, isLoading, onClickCreate }: Props) { +function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) { const { currentPlan } = useContext(SubscriptionDataContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' }); - const { hasAppsReachedLimit, hasMachineToMachineAppsReachedLimit } = useApplicationsUsage(); + const { + hasAppsReachedLimit, + hasMachineToMachineAppsReachedLimit, + hasThirdPartyAppsReachedLimit, + } = useApplicationsUsage(); if (selectedType) { const { id: planId, name: planName, quota } = currentPlan; @@ -42,6 +47,21 @@ function Footer({ selectedType, isLoading, onClickCreate }: Props) { ); } + // Third party app is only available for paid plan (pro plan). + if (isThirdParty && hasThirdPartyAppsReachedLimit) { + return ( + + , + }} + > + {t('third_party_apps')} + + + ); + } + if (hasAppsReachedLimit) { return ( diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx index 652a93fc1..f753bf3f3 100644 --- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx +++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx @@ -105,7 +105,14 @@ function CreateForm({ title="applications.create" subtitle={subtitleElement} size={defaultCreateType ? 'medium' : 'large'} - footer={