From a54fd502bda86761562815246509957749e8d888 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Fri, 21 Jul 2023 15:04:44 +0800 Subject: [PATCH] refactor(console): refactor subscription-related hooks (#4197) --- .../CreateConnectorForm/Footer/index.tsx | 8 ++++--- .../hooks/use-current-subscription-usage.ts | 22 ------------------- ...ption-plan.ts => use-subscription-plan.ts} | 8 +++---- .../src/hooks/use-subscription-usage.ts | 22 +++++++++++++++++++ ...nt-subscription.ts => use-subscription.ts} | 11 ++++------ .../CreatePermissionModal/index.tsx | 7 ++++-- .../components/CreateForm/index.tsx | 7 ++++-- .../components/CreateForm/Footer/index.tsx | 8 ++++--- .../GetStarted/FreePlanNotification/index.tsx | 7 ++++-- .../AssignPermissionsModal/index.tsx | 8 ++++--- .../Roles/components/CreateRoleForm/index.tsx | 7 ++++-- .../TenantSettings/Subscription/index.tsx | 11 ++++++---- .../TenantDomainSettings/index.tsx | 7 ++++-- .../components/CreateFormModal/CreateForm.tsx | 7 ++++-- 14 files changed, 82 insertions(+), 58 deletions(-) delete mode 100644 packages/console/src/hooks/use-current-subscription-usage.ts rename packages/console/src/hooks/{use-current-subscription-plan.ts => use-subscription-plan.ts} (75%) create mode 100644 packages/console/src/hooks/use-subscription-usage.ts rename packages/console/src/hooks/{use-current-subscription.ts => use-subscription.ts} (56%) diff --git a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx index 4b6e6149a..1247a12e8 100644 --- a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx +++ b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx @@ -3,15 +3,16 @@ import { type ConnectorResponse, type ConnectorFactoryResponse, } from '@logto/schemas'; -import { useMemo } from 'react'; +import { useContext, useMemo } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; import { ReservedPlanId } from '@/consts/subscriptions'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import { type ConnectorGroup } from '@/types/connector'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -30,8 +31,9 @@ function Footer({ isCreateButtonDisabled, onClickCreateButton, }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); const standardConnectorCount = useMemo( () => diff --git a/packages/console/src/hooks/use-current-subscription-usage.ts b/packages/console/src/hooks/use-current-subscription-usage.ts deleted file mode 100644 index 8ce793512..000000000 --- a/packages/console/src/hooks/use-current-subscription-usage.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useContext } from 'react'; -import useSWR from 'swr'; - -import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; -import { type SubscriptionUsage } from '@/cloud/types/router'; -import { isCloud } from '@/consts/env'; -import { TenantsContext } from '@/contexts/TenantsProvider'; - -const useCurrentSubscriptionUsage = () => { - const { currentTenantId } = useContext(TenantsContext); - const cloudApi = useCloudApi(); - - return useSWR( - isCloud && `/api/tenants/${currentTenantId}/usage`, - async () => - cloudApi.get('/api/tenants/:tenantId/usage', { - params: { tenantId: currentTenantId }, - }) - ); -}; - -export default useCurrentSubscriptionUsage; diff --git a/packages/console/src/hooks/use-current-subscription-plan.ts b/packages/console/src/hooks/use-subscription-plan.ts similarity index 75% rename from packages/console/src/hooks/use-current-subscription-plan.ts rename to packages/console/src/hooks/use-subscription-plan.ts index 3e6971695..2a7f8d691 100644 --- a/packages/console/src/hooks/use-current-subscription-plan.ts +++ b/packages/console/src/hooks/use-subscription-plan.ts @@ -1,10 +1,10 @@ import { useMemo } from 'react'; -import useCurrentSubscription from './use-current-subscription'; +import useSubscription from './use-subscription'; import useSubscriptionPlans from './use-subscription-plans'; -const useCurrentSubscriptionPlan = () => { - const { data: subscription, error: fetchSubscriptionError } = useCurrentSubscription(); +const useSubscriptionPlan = (tenantId: string) => { + const { data: subscription, error: fetchSubscriptionError } = useSubscription(tenantId); const { data: subscriptionPlans, error: fetchSubscriptionPlansError } = useSubscriptionPlans(); const currentPlan = useMemo( @@ -18,4 +18,4 @@ const useCurrentSubscriptionPlan = () => { }; }; -export default useCurrentSubscriptionPlan; +export default useSubscriptionPlan; diff --git a/packages/console/src/hooks/use-subscription-usage.ts b/packages/console/src/hooks/use-subscription-usage.ts new file mode 100644 index 000000000..5994720d0 --- /dev/null +++ b/packages/console/src/hooks/use-subscription-usage.ts @@ -0,0 +1,22 @@ +import useSWR from 'swr'; + +import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { type SubscriptionUsage } from '@/cloud/types/router'; +import { isCloud, isProduction } from '@/consts/env'; + +const useSubscriptionUsage = (tenantId: string) => { + const cloudApi = useCloudApi(); + + return useSWR( + /** + * Todo: @xiaoyijun remove this condition on subscription features ready. + */ + !isProduction && isCloud && `/api/tenants/${tenantId}/usage`, + async () => + cloudApi.get('/api/tenants/:tenantId/usage', { + params: { tenantId }, + }) + ); +}; + +export default useSubscriptionUsage; diff --git a/packages/console/src/hooks/use-current-subscription.ts b/packages/console/src/hooks/use-subscription.ts similarity index 56% rename from packages/console/src/hooks/use-current-subscription.ts rename to packages/console/src/hooks/use-subscription.ts index ffb6e5da0..35af54395 100644 --- a/packages/console/src/hooks/use-current-subscription.ts +++ b/packages/console/src/hooks/use-subscription.ts @@ -1,24 +1,21 @@ -import { useContext } from 'react'; import useSWR from 'swr'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; import { type Subscription } from '@/cloud/types/router'; import { isCloud, isProduction } from '@/consts/env'; -import { TenantsContext } from '@/contexts/TenantsProvider'; -const useCurrentSubscription = () => { - const { currentTenantId } = useContext(TenantsContext); +const useSubscription = (tenantId: string) => { const cloudApi = useCloudApi(); return useSWR( /** * Todo: @xiaoyijun remove this condition on subscription features ready. */ - !isProduction && isCloud && `/api/tenants/${currentTenantId}/subscription`, + !isProduction && isCloud && `/api/tenants/${tenantId}/subscription`, async () => cloudApi.get('/api/tenants/:tenantId/subscription', { - params: { tenantId: currentTenantId }, + params: { tenantId }, }) ); }; -export default useCurrentSubscription; +export default useSubscription; diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx index a5291983f..88fc3329a 100644 --- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx +++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx @@ -1,5 +1,6 @@ import { noSpaceRegEx } from '@logto/core-kit'; import type { Scope } from '@logto/schemas'; +import { useContext } from 'react'; import { useForm } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; @@ -7,12 +8,13 @@ import ReactModal from 'react-modal'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import ModalLayout from '@/ds-components/ModalLayout'; import TextInput from '@/ds-components/TextInput'; import useApi from '@/hooks/use-api'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import * as modalStyles from '@/scss/modal.module.scss'; import { trySubmitSafe } from '@/utils/form'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -26,8 +28,9 @@ type Props = { type CreatePermissionFormData = Pick; function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); const { handleSubmit, register, diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx index 3dfb1f198..c00ada101 100644 --- a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx +++ b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx @@ -1,4 +1,5 @@ import { isManagementApi, type Resource } from '@logto/schemas'; +import { useContext } from 'react'; import { useForm } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; import useSWR from 'swr'; @@ -8,13 +9,14 @@ import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; import { type ApiResource } from '@/consts'; import { isProduction } from '@/consts/env'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import ModalLayout from '@/ds-components/ModalLayout'; import TextInput from '@/ds-components/TextInput'; import TextLink from '@/ds-components/TextLink'; import useApi from '@/hooks/use-api'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import { trySubmitSafe } from '@/utils/form'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -28,8 +30,9 @@ type Props = { }; function CreateForm({ onClose }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); /** * Todo: @xiaoyijun remove this condition on subscription features ready. */ 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 2d619dbdb..e1f2522fd 100644 --- a/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx +++ b/packages/console/src/pages/Applications/components/CreateForm/Footer/index.tsx @@ -1,5 +1,5 @@ import { type Application, ApplicationType } from '@logto/schemas'; -import { useMemo } from 'react'; +import { useContext, useMemo } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import useSWR from 'swr'; @@ -8,8 +8,9 @@ import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; import { isProduction } from '@/consts/env'; import { ReservedPlanId } from '@/consts/subscriptions'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import { hasReachedQuotaLimit } from '@/utils/quota'; type Props = { @@ -19,8 +20,9 @@ type Props = { }; function Footer({ selectedType, isLoading, onClickCreate }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); /** * Todo: @xiaoyijun remove this condition on subscription features ready. */ diff --git a/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx b/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx index 494a8c460..fff65a04d 100644 --- a/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx +++ b/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx @@ -1,18 +1,21 @@ +import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import FreePlanNotificationImage from '@/assets/images/free-plan-notification-image.svg'; import PlanName from '@/components/PlanName'; import { isCloud, isProduction } from '@/consts/env'; import { ReservedPlanId } from '@/consts/subscriptions'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; -import useCurrentSubscription from '@/hooks/use-current-subscription'; +import useSubscription from '@/hooks/use-subscription'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import { ReservedPlanName } from '@/types/subscriptions'; import * as styles from './index.module.scss'; function FreePlanNotification() { - const { data: currentSubscription, error } = useCurrentSubscription(); + const { currentTenantId } = useContext(TenantsContext); + const { data: currentSubscription, error } = useSubscription(currentTenantId); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.get_started' }); const { navigate } = useTenantPathname(); const isLoadingSubscription = !currentSubscription && !error; diff --git a/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx b/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx index fe9057fd6..6f6704753 100644 --- a/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx +++ b/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx @@ -1,5 +1,5 @@ import type { ScopeResponse } from '@logto/schemas'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; @@ -8,11 +8,12 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; import RoleScopesTransfer from '@/components/RoleScopesTransfer'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import ModalLayout from '@/ds-components/ModalLayout'; import useApi from '@/hooks/use-api'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import * as modalStyles from '@/scss/modal.module.scss'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -23,8 +24,9 @@ type Props = { }; function AssignPermissionsModal({ roleId, totalRoleScopeCount, onClose }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); const [isSubmitting, setIsSubmitting] = useState(false); const [scopes, setScopes] = useState([]); diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx index 3059aaa79..a7cdc20bc 100644 --- a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx +++ b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx @@ -1,6 +1,7 @@ import type { Role, ScopeResponse } from '@logto/schemas'; import { internalRolePrefix } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; +import { useContext } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; @@ -8,13 +9,14 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; import RoleScopesTransfer from '@/components/RoleScopesTransfer'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import ModalLayout from '@/ds-components/ModalLayout'; import TextInput from '@/ds-components/TextInput'; import useApi from '@/hooks/use-api'; import useConfigs from '@/hooks/use-configs'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import { trySubmitSafe } from '@/utils/form'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -32,8 +34,9 @@ type CreateRolePayload = Pick & { }; function CreateRoleForm({ totalRoleCount, onClose }: Props) { + const { currentTenantId } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); const { control, handleSubmit, diff --git a/packages/console/src/pages/TenantSettings/Subscription/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/index.tsx index 742022eb1..baf3dd3bd 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/index.tsx @@ -1,9 +1,11 @@ import { withAppInsights } from '@logto/app-insights/react'; +import { useContext } from 'react'; import PageMeta from '@/components/PageMeta'; -import useCurrentSubscription from '@/hooks/use-current-subscription'; -import useCurrentSubscriptionUsage from '@/hooks/use-current-subscription-usage'; +import { TenantsContext } from '@/contexts/TenantsProvider'; +import useSubscription from '@/hooks/use-subscription'; import useSubscriptionPlans from '@/hooks/use-subscription-plans'; +import useSubscriptionUsage from '@/hooks/use-subscription-usage'; import Skeleton from '../components/Skeleton'; @@ -13,14 +15,15 @@ import SwitchPlanActionBar from './SwitchPlanActionBar'; import * as styles from './index.module.scss'; function Subscription() { + const { currentTenantId } = useContext(TenantsContext); const { data: subscriptionPlans, error: fetchPlansError } = useSubscriptionPlans(); const { data: currentSubscription, error: fetchSubscriptionError, mutate: mutateSubscription, - } = useCurrentSubscription(); + } = useSubscription(currentTenantId); const { data: subscriptionUsage, error: fetchSubscriptionUsageError } = - useCurrentSubscriptionUsage(); + useSubscriptionUsage(currentTenantId); const isLoadingPlans = !subscriptionPlans && !fetchPlansError; const isLoadingSubscription = !currentSubscription && !fetchSubscriptionError; diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx index 0bdbd1681..1a026cad0 100644 --- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx @@ -1,4 +1,5 @@ import { withAppInsights } from '@logto/app-insights/react'; +import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import FormCard from '@/components/FormCard'; @@ -6,12 +7,13 @@ import PageMeta from '@/components/PageMeta'; import ProTag from '@/components/ProTag'; import { contactEmailLink } from '@/consts'; import { isProduction } from '@/consts/env'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import FormField from '@/ds-components/FormField'; import InlineNotification from '@/ds-components/InlineNotification'; import TextLink from '@/ds-components/TextLink'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; import useCustomDomain from '@/hooks/use-custom-domain'; import useDocumentationUrl from '@/hooks/use-documentation-url'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import Skeleton from '../components/Skeleton'; @@ -22,8 +24,9 @@ import DefaultDomain from './DefaultDomain'; import * as styles from './index.module.scss'; function TenantDomainSettings() { + const { currentTenantId } = useContext(TenantsContext); const { data: customDomain, isLoading: isLoadingCustomDomain, mutate } = useCustomDomain(true); - const { data: currentPlan, error: fetchCurrentPlanError } = useCurrentSubscriptionPlan(); + const { data: currentPlan, error: fetchCurrentPlanError } = useSubscriptionPlan(currentTenantId); const isLoadingCurrentPlan = !currentPlan && !fetchCurrentPlanError; const { getDocumentationUrl } = useDocumentationUrl(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); diff --git a/packages/console/src/pages/Webhooks/components/CreateFormModal/CreateForm.tsx b/packages/console/src/pages/Webhooks/components/CreateFormModal/CreateForm.tsx index e9a79ea29..ea134cad5 100644 --- a/packages/console/src/pages/Webhooks/components/CreateFormModal/CreateForm.tsx +++ b/packages/console/src/pages/Webhooks/components/CreateFormModal/CreateForm.tsx @@ -1,14 +1,16 @@ import { type Hook, type CreateHook, type HookEvent, type HookConfig } from '@logto/schemas'; +import { useContext } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import ModalLayout from '@/ds-components/ModalLayout'; import useApi from '@/hooks/use-api'; -import useCurrentSubscriptionPlan from '@/hooks/use-current-subscription-plan'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; import { trySubmitSafe } from '@/utils/form'; import { hasReachedQuotaLimit } from '@/utils/quota'; @@ -28,7 +30,8 @@ type CreateHookPayload = Pick & { }; function CreateForm({ totalWebhookCount, onClose }: Props) { - const { data: currentPlan } = useCurrentSubscriptionPlan(); + const { currentTenantId } = useContext(TenantsContext); + const { data: currentPlan } = useSubscriptionPlan(currentTenantId); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const shouldBlockCreation = hasReachedQuotaLimit({