From ac40ef17d707879c0beeec3895a2c39082df4318 Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Fri, 26 Jul 2024 11:18:21 +0800 Subject: [PATCH] refactor(console): update admin console using new pricing model (#6295) * refactor(console): update cloud API calls * refactor: update code according to CR * refactor: correct component usage --- packages/console/src/cloud/types/router.ts | 20 +++ .../CreateForm/Footer/index.tsx | 7 +- .../components/ChargeNotification/index.tsx | 5 +- .../CreateConnectorForm/Footer/index.tsx | 68 +++++---- .../SkuCardItem/FeaturedSkuContent/index.tsx | 35 +++++ .../use-featured-sku-content.ts | 77 +++++++++++ .../SkuCardItem/index.tsx | 100 ++++++++++++++ .../SelectTenantPlanModal/index.tsx | 84 +++++++++--- .../src/components/MauExceededModal/index.tsx | 16 ++- .../src/components/PlanDescription/index.tsx | 14 +- .../console/src/components/PlanName/index.tsx | 10 +- .../src/components/PlanUsage/index.tsx | 22 ++- .../TenantDropdownItem/TenantStatusTag.tsx | 29 +++- .../TenantDropdownItem/index.tsx | 16 ++- packages/console/src/consts/plan-quotas.ts | 29 ++++ .../console/src/consts/quota-item-phrases.ts | 115 ++++++++++++++++ packages/console/src/consts/tenants.ts | 90 +++++++++++- .../src/containers/AppContent/index.tsx | 25 +++- .../SubscriptionDataProvider/index.tsx | 22 ++- .../SubscriptionDataProvider/types.ts | 24 +++- .../use-new-subscription-data.ts | 64 +++++++++ .../src/hooks/use-api-resources-usage.ts | 55 +++++--- .../src/hooks/use-applications-usage.ts | 118 +++++++++++----- packages/console/src/hooks/use-logto-skus.ts | 52 +++++++ .../src/hooks/use-new-subscription-quota.ts | 19 +++ .../use-new-subscription-scopes-usage.ts | 33 +++++ .../src/hooks/use-new-subscription-usage.ts | 19 +++ packages/console/src/hooks/use-subscribe.ts | 23 ++++ .../src/hooks/use-subscription-plans.ts | 1 + .../src/hooks/use-subscription-usage.ts | 1 + .../CreatePermissionModal/index.tsx | 34 +++-- .../components/CreateForm/Footer.tsx | 13 +- .../components/ProtectedAppForm/index.tsx | 20 ++- .../pages/CustomizeJwt/CreateButton/index.tsx | 14 +- .../EnterpriseSso/SsoCreationModal/index.tsx | 11 +- .../console/src/pages/Mfa/MfaForm/index.tsx | 8 +- .../src/pages/OrganizationTemplate/index.tsx | 10 +- .../CreateOrganizationModal/index.tsx | 10 +- .../console/src/pages/Organizations/index.tsx | 10 +- .../AssignPermissionsModal/index.tsx | 30 ++-- .../components/CreateRoleForm/Footer.tsx | 49 +++++-- .../MauLimitExceededNotification/index.tsx | 50 ++++++- .../Subscription/CurrentPlan/index.tsx | 39 ++++-- .../DiffQuotaItem/SkuQuotaItemPhrase.tsx | 43 ++++++ .../PlanQuotaList/DiffQuotaItem/index.tsx | 39 ++++++ .../PlanQuotaDiffCard/PlanQuotaList/index.tsx | 32 +++-- .../PlanQuotaDiffCard/index.tsx | 27 +++- .../DowngradeConfirmModalContent/index.tsx | 37 ++++- .../SwitchPlanActionBar/index.tsx | 129 ++++++++++++++---- .../TenantSettings/Subscription/index.tsx | 15 +- .../InviteMemberModal/Footer/index.tsx | 10 +- .../TenantSettings/TenantMembers/hooks.ts | 57 +++++--- .../index.tsx | 103 +++++++++++++- .../Webhooks/CreateFormModal/CreateForm.tsx | 31 +++-- packages/console/src/types/skus.ts | 14 ++ packages/console/src/types/subscriptions.ts | 1 + packages/console/src/utils/quota.ts | 42 ++++++ packages/console/src/utils/subscription.ts | 54 +++++++- 58 files changed, 1843 insertions(+), 282 deletions(-) create mode 100644 packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx create mode 100644 packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/use-featured-sku-content.ts create mode 100644 packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx create mode 100644 packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts create mode 100644 packages/console/src/hooks/use-logto-skus.ts create mode 100644 packages/console/src/hooks/use-new-subscription-quota.ts create mode 100644 packages/console/src/hooks/use-new-subscription-scopes-usage.ts create mode 100644 packages/console/src/hooks/use-new-subscription-usage.ts create mode 100644 packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/PlanQuotaDiffCard/PlanQuotaList/DiffQuotaItem/SkuQuotaItemPhrase.tsx create mode 100644 packages/console/src/types/skus.ts diff --git a/packages/console/src/cloud/types/router.ts b/packages/console/src/cloud/types/router.ts index ed175b7af..7d6cf2f10 100644 --- a/packages/console/src/cloud/types/router.ts +++ b/packages/console/src/cloud/types/router.ts @@ -11,10 +11,30 @@ export type SubscriptionPlanResponse = GuardedResponse< GetRoutes['/api/subscription-plans'] >[number]; +export type LogtoSkuResponse = GetArrayElementType>; + export type Subscription = GuardedResponse; +/** @deprecated */ export type SubscriptionUsage = GuardedResponse; +/* ===== Use `New` in the naming to avoid confusion with legacy types ===== */ +/** The response of `GET /api/tenants/my/subscription/quota` has the same response type. */ +export type NewSubscriptionQuota = GuardedResponse< + GetRoutes['/api/tenants/:tenantId/subscription/quota'] +>; + +/** The response of `GET /api/tenants/my/subscription/usage` has the same response type. */ +export type NewSubscriptionUsage = GuardedResponse< + GetRoutes['/api/tenants/:tenantId/subscription/usage'] +>; + +/** The response of `GET /api/tenants/my/subscription/usage/:entityName/scopes` has the same response type. */ +export type NewSubscriptionScopeUsage = GuardedResponse< + GetRoutes['/api/tenants/:tenantId/subscription/usage/:entityName/scopes'] +>; +/* ===== Use `New` in the naming to avoid confusion with legacy types ===== */ + export type InvoicesResponse = GuardedResponse; export type InvitationResponse = GuardedResponse; diff --git a/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx b/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx index 0928e6cf9..f19933559 100644 --- a/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx +++ b/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx @@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button from '@/ds-components/Button'; import useApplicationsUsage from '@/hooks/use-applications-usage'; @@ -17,7 +18,7 @@ type Props = { }; function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) { - const { currentPlan } = useContext(SubscriptionDataContext); + const { currentPlan, currentSku } = useContext(SubscriptionDataContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' }); const { hasAppsReachedLimit, @@ -32,7 +33,7 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) selectedType === ApplicationType.MachineToMachine && hasMachineToMachineAppsReachedLimit && // For paid plan (pro plan), we don't guard the m2m app creation since it's an add-on feature. - planId === ReservedPlanId.Free + (isDevFeaturesEnabled ? currentSku.id : planId) === ReservedPlanId.Free ) { return ( @@ -68,7 +69,7 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) , - planName: , + planName: , }} > {t('applications', { count: quota.applicationsLimit ?? 0 })} diff --git a/packages/console/src/components/ChargeNotification/index.tsx b/packages/console/src/components/ChargeNotification/index.tsx index 2fd62a5f4..e2ce6ffe3 100644 --- a/packages/console/src/components/ChargeNotification/index.tsx +++ b/packages/console/src/components/ChargeNotification/index.tsx @@ -5,6 +5,7 @@ import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { newPlansBlogLink } from '@/consts'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import InlineNotification from '@/ds-components/InlineNotification'; import TextLink from '@/ds-components/TextLink'; @@ -38,7 +39,7 @@ function ChargeNotification({ checkedFlagKey, }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell' }); - const { currentPlan } = useContext(SubscriptionDataContext); + const { currentPlan, currentSku } = useContext(SubscriptionDataContext); const { configs, updateConfigs } = useConfigs(); // Display null when loading @@ -52,7 +53,7 @@ function ChargeNotification({ Boolean(checkedChargeNotification?.[checkedFlagKey]) || !hasSurpassedLimit || // No charge notification for free plan - currentPlan.id === ReservedPlanId.Free + (isDevFeaturesEnabled ? currentSku.id : currentPlan.id) === ReservedPlanId.Free ) { return null; } diff --git a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx index 53c7b4032..8c86cce55 100644 --- a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx +++ b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx @@ -10,10 +10,11 @@ import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button from '@/ds-components/Button'; import { type ConnectorGroup } from '@/types/connector'; -import { hasReachedQuotaLimit } from '@/utils/quota'; +import { hasReachedQuotaLimit, hasReachedSubscriptionQuotaLimit } from '@/utils/quota'; type Props = { readonly isCreatingSocialConnector: boolean; @@ -31,35 +32,51 @@ function Footer({ onClickCreateButton, }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' }); - const { currentPlan } = useContext(SubscriptionDataContext); + const { currentPlan, currentSku, currentSubscriptionUsage, currentSubscriptionQuota } = + useContext(SubscriptionDataContext); const standardConnectorCount = useMemo( () => - existingConnectors.filter( - ({ isStandard, isDemo, type }) => isStandard && !isDemo && type === ConnectorType.Social - ).length, + isDevFeaturesEnabled + ? // No more standard connector limit in new pricing model. + 0 + : existingConnectors.filter( + ({ isStandard, isDemo, type }) => isStandard && !isDemo && type === ConnectorType.Social + ).length, [existingConnectors] ); const socialConnectorCount = useMemo( () => - existingConnectors.filter( - ({ isStandard, isDemo, type }) => !isStandard && !isDemo && type === ConnectorType.Social - ).length, - [existingConnectors] + isDevFeaturesEnabled + ? currentSubscriptionUsage.socialConnectorsLimit + : existingConnectors.filter( + ({ isStandard, isDemo, type }) => + !isStandard && !isDemo && type === ConnectorType.Social + ).length, + [existingConnectors, currentSubscriptionUsage.socialConnectorsLimit] ); - const isStandardConnectorsReachLimit = hasReachedQuotaLimit({ - quotaKey: 'standardConnectorsLimit', - plan: currentPlan, - usage: standardConnectorCount, - }); + const isStandardConnectorsReachLimit = isDevFeaturesEnabled + ? // No more standard connector limit in new pricing model. + false + : hasReachedQuotaLimit({ + quotaKey: 'standardConnectorsLimit', + plan: currentPlan, + usage: standardConnectorCount, + }); - const isSocialConnectorsReachLimit = hasReachedQuotaLimit({ - quotaKey: 'socialConnectorsLimit', - plan: currentPlan, - usage: socialConnectorCount, - }); + const isSocialConnectorsReachLimit = isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'socialConnectorsLimit', + usage: currentSubscriptionUsage.socialConnectorsLimit, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'socialConnectorsLimit', + plan: currentPlan, + usage: socialConnectorCount, + }); if (isCreatingSocialConnector && selectedConnectorGroup) { const { id: planId, name: planName, quota } = currentPlan; @@ -70,13 +87,15 @@ function Footer({ , - planName: , + planName: , }} > {quota.standardConnectorsLimit === 0 ? t('standard_connectors_feature') : t( - planId === ReservedPlanId.Pro ? 'standard_connectors_pro' : 'standard_connectors', + (isDevFeaturesEnabled ? currentSku.id : planId) === ReservedPlanId.Pro + ? 'standard_connectors_pro' + : 'standard_connectors', { count: quota.standardConnectorsLimit ?? 0, } @@ -92,11 +111,14 @@ function Footer({ , - planName: , + planName: , }} > {t('social_connectors', { - count: quota.socialConnectorsLimit ?? 0, + count: + (isDevFeaturesEnabled + ? currentSubscriptionQuota.socialConnectorsLimit + : quota.socialConnectorsLimit) ?? 0, })} diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx new file mode 100644 index 000000000..6ecbbeead --- /dev/null +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx @@ -0,0 +1,35 @@ +import classNames from 'classnames'; + +import Failed from '@/assets/icons/failed.svg?react'; +import Success from '@/assets/icons/success.svg?react'; + +import styles from '../../PlanCardItem/FeaturedPlanContent/index.module.scss'; + +import useFeaturedSkuContent from './use-featured-sku-content'; + +type Props = { + readonly skuId: string; +}; + +function FeaturedSkuContent({ skuId }: Props) { + const contentData = useFeaturedSkuContent(skuId); + + return ( +
    + {contentData.map(({ title, isAvailable }) => { + return ( +
  • + {isAvailable ? ( + + ) : ( + + )} + {title} +
    • + ); + })} +
+ ); +} + +export default FeaturedSkuContent; diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/use-featured-sku-content.ts b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/use-featured-sku-content.ts new file mode 100644 index 000000000..70662e19b --- /dev/null +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/use-featured-sku-content.ts @@ -0,0 +1,77 @@ +import { ReservedPlanId } from '@logto/schemas'; +import { cond } from '@silverhand/essentials'; +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { + freePlanAuditLogsRetentionDays, + freePlanM2mLimit, + freePlanMauLimit, + freePlanPermissionsLimit, + freePlanRoleLimit, + proPlanAuditLogsRetentionDays, +} from '@/consts/subscriptions'; + +type ContentData = { + readonly title: string; + readonly isAvailable: boolean; +}; + +const useFeaturedSkuContent = (skuId: string) => { + const { t } = useTranslation(undefined, { + keyPrefix: 'admin_console.upsell.featured_plan_content', + }); + + const contentData: ContentData[] = useMemo(() => { + const isFreePlan = skuId === ReservedPlanId.Free; + const planPhraseKey = isFreePlan ? 'free_plan' : 'pro_plan'; + + return [ + { + title: t(`mau.${planPhraseKey}`, { ...cond(isFreePlan && { count: freePlanMauLimit }) }), + isAvailable: true, + }, + { + title: t(`m2m.${planPhraseKey}`, { ...cond(isFreePlan && { count: freePlanM2mLimit }) }), + isAvailable: true, + }, + { + title: t('third_party_apps'), + isAvailable: !isFreePlan, + }, + { + title: t('mfa'), + isAvailable: !isFreePlan, + }, + { + title: t('sso'), + isAvailable: !isFreePlan, + }, + { + title: t(`role_and_permissions.${planPhraseKey}`, { + ...cond( + isFreePlan && { + roleCount: freePlanRoleLimit, + permissionCount: freePlanPermissionsLimit, + } + ), + }), + isAvailable: true, + }, + { + title: t('organizations'), + isAvailable: !isFreePlan, + }, + { + title: t('audit_logs', { + count: isFreePlan ? freePlanAuditLogsRetentionDays : proPlanAuditLogsRetentionDays, + }), + isAvailable: true, + }, + ]; + }, [t, skuId]); + + return contentData; +}; + +export default useFeaturedSkuContent; diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx new file mode 100644 index 000000000..81fbcb7c6 --- /dev/null +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx @@ -0,0 +1,100 @@ +import { maxFreeTenantLimit, adminTenantId, ReservedPlanId } from '@logto/schemas'; +import classNames from 'classnames'; +import { useContext, useMemo } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import ArrowRight from '@/assets/icons/arrow-right.svg?react'; +import { type LogtoSkuResponse } from '@/cloud/types/router'; +import PlanDescription from '@/components/PlanDescription'; +import PlanName from '@/components/PlanName'; +import { pricingLink } from '@/consts'; +import { TenantsContext } from '@/contexts/TenantsProvider'; +import Button, { type Props as ButtonProps } from '@/ds-components/Button'; +import DangerousRaw from '@/ds-components/DangerousRaw'; +import DynamicT from '@/ds-components/DynamicT'; +import TextLink from '@/ds-components/TextLink'; + +import styles from '../PlanCardItem/index.module.scss'; + +import FeaturedSkuContent from './FeaturedSkuContent'; + +type Props = { + readonly sku: LogtoSkuResponse; + readonly onSelect: () => void; + readonly buttonProps?: Partial; +}; + +function SkuCardItem({ sku, onSelect, buttonProps }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.create_tenant' }); + const { tenants } = useContext(TenantsContext); + const { unitPrice: basePrice, id: skuId } = sku; + + const isFreeSku = skuId === ReservedPlanId.Free; + + const isFreeTenantExceeded = useMemo( + () => + /** Should not block admin tenant owners from creating more than three tenants */ + !tenants.some(({ id }) => id === adminTenantId) && + tenants.filter(({ planId }) => planId === ReservedPlanId.Free).length >= maxFreeTenantLimit, + [tenants] + ); + + return ( +
+
+
+ +
+
+
{t('base_price')}
+
+ ${t('monthly_price', { value: (basePrice ?? 0) / 100 })} +
+
+
+ +
+
+
+ + {isFreeSku && isFreeTenantExceeded && ( +
+ {t('free_tenants_limit', { count: maxFreeTenantLimit })} +
+ )} + {!isFreeSku && ( +
+ } + className={styles.link} + > + + +
+ )} +
+ {skuId === ReservedPlanId.Pro && ( +
{t('most_popular')}
+ )} +
+ ); +} + +export default SkuCardItem; diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx index 2d4f796a6..f7bfbfdbb 100644 --- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx @@ -5,21 +5,24 @@ import { Trans, useTranslation } from 'react-i18next'; import Modal from 'react-modal'; import { useCloudApi, toastResponseError } from '@/cloud/hooks/use-cloud-api'; -import { type TenantResponse } from '@/cloud/types/router'; +import { type TenantResponse, type LogtoSkuResponse } from '@/cloud/types/router'; import { GtagConversionId, reportToGoogle } from '@/components/Conversion/utils'; import { pricingLink } from '@/consts'; +import { isDevFeaturesEnabled } from '@/consts/env'; import DangerousRaw from '@/ds-components/DangerousRaw'; import ModalLayout from '@/ds-components/ModalLayout'; import TextLink from '@/ds-components/TextLink'; +import useLogtoSkus from '@/hooks/use-logto-skus'; import useSubscribe from '@/hooks/use-subscribe'; import useSubscriptionPlans from '@/hooks/use-subscription-plans'; import modalStyles from '@/scss/modal.module.scss'; import { type SubscriptionPlan } from '@/types/subscriptions'; -import { pickupFeaturedPlans } from '@/utils/subscription'; +import { pickupFeaturedPlans, pickupFeaturedLogtoSkus } from '@/utils/subscription'; import { type CreateTenantData } from '../types'; import PlanCardItem from './PlanCardItem'; +import SkuCardItem from './SkuCardItem'; import styles from './index.module.scss'; type Props = { @@ -28,21 +31,27 @@ type Props = { }; function SelectTenantPlanModal({ tenantData, onClose }: Props) { - const [isSubmitting, setIsSubmitting] = useState(); + const [processingPlanId, setProcessingPlanId] = useState(); + const [processingSkuId, setProcessingSkuId] = useState(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { data: subscriptionPlans } = useSubscriptionPlans(); + const { data: logtoSkus } = useLogtoSkus(); + const { subscribe } = useSubscribe(); const cloudApi = useCloudApi({ hideErrorToast: true }); - const reservedPlans = conditional(subscriptionPlans && pickupFeaturedPlans(subscriptionPlans)); - if (!reservedPlans || !tenantData) { + const reservedPlans = conditional(subscriptionPlans && pickupFeaturedPlans(subscriptionPlans)); + const reservedBasicLogtoSkus = conditional(logtoSkus && pickupFeaturedLogtoSkus(logtoSkus)); + + if (!reservedPlans || !reservedBasicLogtoSkus || !tenantData) { return null; } const handleSelectPlan = async (plan: SubscriptionPlan) => { const { id: planId } = plan; try { - setIsSubmitting(planId); + setProcessingPlanId(planId); if (planId === ReservedPlanId.Free) { const { name, tag, regionName } = tenantData; const newTenant = await cloudApi.post('/api/tenants', { body: { name, tag, regionName } }); @@ -56,7 +65,28 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { } catch (error: unknown) { void toastResponseError(error); } finally { - setIsSubmitting(undefined); + setProcessingPlanId(undefined); + } + }; + + const handleSelectSku = async (logtoSku: LogtoSkuResponse) => { + const { id: skuId } = logtoSku; + try { + setProcessingSkuId(skuId); + if (skuId === ReservedPlanId.Free) { + const { name, tag, regionName } = tenantData; + const newTenant = await cloudApi.post('/api/tenants', { body: { name, tag, regionName } }); + + reportToGoogle(GtagConversionId.CreateProductionTenant, { transactionId: newTenant.id }); + onClose(newTenant); + return; + } + + await subscribe({ skuId, planId: skuId, tenantData }); + } catch (error: unknown) { + void toastResponseError(error); + } finally { + setProcessingSkuId(undefined); } }; @@ -83,19 +113,33 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { onClose={onClose} >
- {reservedPlans.map((plan) => ( - { - void handleSelectPlan(plan); - }} - /> - ))} + {isDevFeaturesEnabled + ? reservedBasicLogtoSkus.map((logtoSku) => ( + { + void handleSelectSku(logtoSku); + }} + /> + )) + : reservedPlans.map((plan) => ( + { + void handleSelectPlan(plan); + }} + /> + ))}
diff --git a/packages/console/src/components/MauExceededModal/index.tsx b/packages/console/src/components/MauExceededModal/index.tsx index 947e53835..835a14b40 100644 --- a/packages/console/src/components/MauExceededModal/index.tsx +++ b/packages/console/src/components/MauExceededModal/index.tsx @@ -4,6 +4,7 @@ import ReactModal from 'react-modal'; import PlanUsage from '@/components/PlanUsage'; import { contactEmailLink } from '@/consts'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { subscriptionPage } from '@/consts/pages'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import { TenantsContext } from '@/contexts/TenantsProvider'; @@ -21,7 +22,13 @@ import styles from './index.module.scss'; function MauExceededModal() { const { currentTenant } = useContext(TenantsContext); const { usage } = currentTenant ?? {}; - const { currentPlan, currentSubscription } = useContext(SubscriptionDataContext); + const { + currentPlan, + currentSubscription, + currentSku, + currentSubscriptionQuota, + currentSubscriptionUsage, + } = useContext(SubscriptionDataContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { navigate } = useTenantPathname(); @@ -40,7 +47,10 @@ function MauExceededModal() { name: planName, } = currentPlan; - const isMauExceeded = mauLimit !== null && usage.activeUsers >= mauLimit; + const isMauExceeded = isDevFeaturesEnabled + ? currentSubscriptionQuota.mauLimit !== null && + currentSubscriptionUsage.mauLimit >= currentSubscriptionQuota.mauLimit + : mauLimit !== null && usage.activeUsers >= mauLimit; if (!isMauExceeded) { return null; @@ -76,7 +86,7 @@ function MauExceededModal() { , + planName: , }} > {t('upsell.mau_exceeded_modal.notification')} diff --git a/packages/console/src/components/PlanDescription/index.tsx b/packages/console/src/components/PlanDescription/index.tsx index f39a94c1b..1db3e0785 100644 --- a/packages/console/src/components/PlanDescription/index.tsx +++ b/packages/console/src/components/PlanDescription/index.tsx @@ -1,4 +1,5 @@ import { ReservedPlanId } from '@logto/schemas'; +import { conditional } from '@silverhand/essentials'; import { type TFuncKey } from 'i18next'; import DynamicT from '@/ds-components/DynamicT'; @@ -11,10 +12,17 @@ const registeredPlanDescriptionPhrasesMap: Record< [ReservedPlanId.Pro]: 'pro_plan_description', }; -type Props = { readonly planId: string }; +type Props = { + /** Temporarily mark as optional. */ + readonly skuId?: string; + /** @deprecated */ + readonly planId: string; +}; -function PlanDescription({ planId }: Props) { - const description = registeredPlanDescriptionPhrasesMap[planId]; +function PlanDescription({ skuId, planId }: Props) { + const description = + conditional(skuId && registeredPlanDescriptionPhrasesMap[skuId]) ?? + registeredPlanDescriptionPhrasesMap[planId]; if (!description) { return null; diff --git a/packages/console/src/components/PlanName/index.tsx b/packages/console/src/components/PlanName/index.tsx index 2dc5f8e77..abd91e3a0 100644 --- a/packages/console/src/components/PlanName/index.tsx +++ b/packages/console/src/components/PlanName/index.tsx @@ -1,3 +1,4 @@ +import { conditional } from '@silverhand/essentials'; import { type TFuncKey } from 'i18next'; import { useTranslation } from 'react-i18next'; @@ -15,12 +16,17 @@ const registeredPlanNamePhraseMap: Record< }; type Props = { + /** Temporarily use optional for backward compatibility. */ + readonly skuId?: string; + /** @deprecated */ readonly name: string; }; -function PlanName({ name }: Props) { +// TODO: rename the component once new pricing model is ready, should be `SkuName`. +function PlanName({ skuId, name }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' }); - const planNamePhrase = registeredPlanNamePhraseMap[name]; + const planNamePhrase = + conditional(skuId && registeredPlanNamePhraseMap[skuId]) ?? registeredPlanNamePhraseMap[name]; /** * Note: fallback to the plan name if the phrase is not registered. diff --git a/packages/console/src/components/PlanUsage/index.tsx b/packages/console/src/components/PlanUsage/index.tsx index 0a27d441c..69f42fbfd 100644 --- a/packages/console/src/components/PlanUsage/index.tsx +++ b/packages/console/src/components/PlanUsage/index.tsx @@ -1,8 +1,11 @@ import { conditional } from '@silverhand/essentials'; import classNames from 'classnames'; import dayjs from 'dayjs'; +import { useContext } from 'react'; import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router'; +import { isDevFeaturesEnabled } from '@/consts/env'; +import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import DynamicT from '@/ds-components/DynamicT'; import { type SubscriptionPlan } from '@/types/subscriptions'; import { formatPeriod } from '@/utils/subscription'; @@ -10,17 +13,28 @@ import { formatPeriod } from '@/utils/subscription'; import styles from './index.module.scss'; type Props = { + /** @deprecated */ readonly subscriptionUsage: SubscriptionUsage; + /** @deprecated */ readonly currentSubscription: Subscription; + /** @deprecated */ readonly currentPlan: SubscriptionPlan; }; function PlanUsage({ subscriptionUsage, currentSubscription, currentPlan }: Props) { - const { currentPeriodStart, currentPeriodEnd } = currentSubscription; - const { activeUsers } = subscriptionUsage; const { - quota: { mauLimit }, - } = currentPlan; + currentSubscriptionQuota, + currentSubscriptionUsage, + currentSubscription: currentSubscriptionFromNewPricingModel, + } = useContext(SubscriptionDataContext); + + const { currentPeriodStart, currentPeriodEnd } = isDevFeaturesEnabled + ? currentSubscriptionFromNewPricingModel + : currentSubscription; + + const [activeUsers, mauLimit] = isDevFeaturesEnabled + ? [currentSubscriptionUsage.mauLimit, currentSubscriptionQuota.mauLimit] + : [subscriptionUsage.activeUsers, currentPlan.quota.mauLimit]; const usagePercent = conditional(mauLimit && activeUsers / mauLimit); diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx index 394c31d99..6dd5b94bb 100644 --- a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx +++ b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx @@ -1,15 +1,26 @@ -import { type TenantResponse } from '@/cloud/types/router'; +import { conditional } from '@silverhand/essentials'; + +import { + type TenantResponse, + type NewSubscriptionUsage, + type NewSubscriptionQuota, +} from '@/cloud/types/router'; +import { isDevFeaturesEnabled } from '@/consts/env'; import DynamicT from '@/ds-components/DynamicT'; import Tag from '@/ds-components/Tag'; import { type SubscriptionPlan } from '@/types/subscriptions'; type Props = { readonly tenantData: TenantResponse; - readonly tenantPlan: SubscriptionPlan; + readonly tenantSubscriptionPlan: SubscriptionPlan; + readonly tenantStatus: { + usage: NewSubscriptionUsage; + quota: NewSubscriptionQuota; + }; readonly className?: string; }; -function TenantStatusTag({ tenantData, tenantPlan, className }: Props) { +function TenantStatusTag({ tenantData, tenantSubscriptionPlan, tenantStatus, className }: Props) { const { usage, openInvoices, isSuspended } = tenantData; /** @@ -35,13 +46,21 @@ function TenantStatusTag({ tenantData, tenantPlan, className }: Props) { ); } + const { usage: tenantUsage, quota: tenantQuota } = tenantStatus; + const { activeUsers } = usage; const { quota: { mauLimit }, - } = tenantPlan; + } = tenantSubscriptionPlan; - const isMauExceeded = mauLimit !== null && activeUsers >= mauLimit; + const isMauExceeded = + conditional( + isDevFeaturesEnabled && + tenantQuota.mauLimit !== null && + tenantUsage.mauLimit >= tenantQuota.mauLimit + ) ?? + (mauLimit !== null && activeUsers >= mauLimit); if (isMauExceeded) { return ( diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx index 444f4ba4c..f2191ce6b 100644 --- a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx +++ b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx @@ -26,13 +26,18 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { subscription: { planId }, } = tenantData; - const { subscriptionPlans } = useContext(SubscriptionDataContext); - const tenantPlan = useMemo( + const { + subscriptionPlans, + currentSku, + currentSubscriptionUsage: usage, + currentSubscriptionQuota: quota, + } = useContext(SubscriptionDataContext); + const tenantSubscriptionPlan = useMemo( () => subscriptionPlans.find((plan) => plan.id === planId), [subscriptionPlans, planId] ); - if (!tenantPlan) { + if (!tenantSubscriptionPlan) { return null; } @@ -44,7 +49,8 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { @@ -52,7 +58,7 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { {tag === TenantTag.Development ? ( ) : ( - + )} diff --git a/packages/console/src/consts/plan-quotas.ts b/packages/console/src/consts/plan-quotas.ts index 2a271279c..d6111c134 100644 --- a/packages/console/src/consts/plan-quotas.ts +++ b/packages/console/src/consts/plan-quotas.ts @@ -1,5 +1,6 @@ import { ReservedPlanId } from '@logto/schemas'; +import { type LogtoSkuQuota } from '@/types/skus'; import { type SubscriptionPlanQuota } from '@/types/subscriptions'; /** @@ -35,9 +36,37 @@ export const planQuotaItemOrder: Array = [ 'ticketSupportResponseTime', ]; +/** + * Define the order of quota items in the downgrade plan notification modal and not eligible for downgrade plan modal. + */ +export const skuQuotaItemOrder: Array = [ + 'mauLimit', + 'tokenLimit', + 'applicationsLimit', + 'machineToMachineLimit', + 'thirdPartyApplicationsLimit', + 'resourcesLimit', + 'scopesPerResourceLimit', + 'socialConnectorsLimit', + 'mfaEnabled', + 'enterpriseSsoLimit', + 'userRolesLimit', + 'machineToMachineRolesLimit', + 'scopesPerRoleLimit', + 'organizationsEnabled', + 'auditLogsRetentionDays', + 'hooksLimit', + 'customJwtEnabled', + 'subjectTokenEnabled', + 'bringYourUiEnabled', + 'ticketSupportResponseTime', +]; + /** * Unreleased quota keys will be added here, and it will effect the following: * - Related quota items will have a "Coming soon" tag in the plan selection component. * - Related quota items will be hidden from the downgrade plan notification modal. */ export const comingSoonQuotaKeys: Array = []; + +export const comingSoonSkuQuotaKeys: Array = []; diff --git a/packages/console/src/consts/quota-item-phrases.ts b/packages/console/src/consts/quota-item-phrases.ts index 3a6dec712..c80de6e88 100644 --- a/packages/console/src/consts/quota-item-phrases.ts +++ b/packages/console/src/consts/quota-item-phrases.ts @@ -1,7 +1,9 @@ import { type TFuncKey } from 'i18next'; +import { type LogtoSkuQuota } from '@/types/skus'; import { type SubscriptionPlanQuota } from '@/types/subscriptions'; +/** @deprecated */ export const quotaItemPhrasesMap: Record< keyof SubscriptionPlanQuota, TFuncKey<'translation', 'admin_console.subscription.quota_item'> @@ -32,6 +34,7 @@ export const quotaItemPhrasesMap: Record< bringYourUiEnabled: 'bring_your_ui_enabled.name', }; +/** @deprecated */ export const quotaItemUnlimitedPhrasesMap: Record< keyof SubscriptionPlanQuota, TFuncKey<'translation', 'admin_console.subscription.quota_item'> @@ -62,6 +65,7 @@ export const quotaItemUnlimitedPhrasesMap: Record< bringYourUiEnabled: 'bring_your_ui_enabled.unlimited', }; +/** @deprecated */ export const quotaItemLimitedPhrasesMap: Record< keyof SubscriptionPlanQuota, TFuncKey<'translation', 'admin_console.subscription.quota_item'> @@ -92,6 +96,7 @@ export const quotaItemLimitedPhrasesMap: Record< bringYourUiEnabled: 'bring_your_ui_enabled.limited', }; +/** @deprecated */ export const quotaItemNotEligiblePhrasesMap: Record< keyof SubscriptionPlanQuota, TFuncKey<'translation', 'admin_console.subscription.quota_item'> @@ -121,3 +126,113 @@ export const quotaItemNotEligiblePhrasesMap: Record< subjectTokenEnabled: 'impersonation_enabled.not_eligible', bringYourUiEnabled: 'bring_your_ui_enabled.not_eligible', }; + +/* === for new pricing model === */ +export const skuQuotaItemPhrasesMap: Record< + keyof LogtoSkuQuota, + TFuncKey<'translation', 'admin_console.subscription.quota_item'> +> = { + mauLimit: 'mau_limit.name', + tokenLimit: 'token_limit.name', + applicationsLimit: 'applications_limit.name', + machineToMachineLimit: 'machine_to_machine_limit.name', + thirdPartyApplicationsLimit: 'third_party_applications_limit.name', + resourcesLimit: 'resources_limit.name', + scopesPerResourceLimit: 'scopes_per_resource_limit.name', + socialConnectorsLimit: 'social_connectors_limit.name', + userRolesLimit: 'roles_limit.name', + machineToMachineRolesLimit: 'machine_to_machine_roles_limit.name', + scopesPerRoleLimit: 'scopes_per_role_limit.name', + hooksLimit: 'hooks_limit.name', + auditLogsRetentionDays: 'audit_logs_retention_days.name', + ticketSupportResponseTime: 'email_ticket_support.name', + mfaEnabled: 'mfa_enabled.name', + organizationsEnabled: 'organizations_enabled.name', + enterpriseSsoLimit: 'sso_enabled.name', + tenantMembersLimit: 'tenant_members_limit.name', + customJwtEnabled: 'custom_jwt_enabled.name', + subjectTokenEnabled: 'impersonation_enabled.name', + bringYourUiEnabled: 'bring_your_ui_enabled.name', +}; + +export const skuQuotaItemUnlimitedPhrasesMap: Record< + keyof LogtoSkuQuota, + TFuncKey<'translation', 'admin_console.subscription.quota_item'> +> = { + mauLimit: 'mau_limit.unlimited', + tokenLimit: 'token_limit.unlimited', + applicationsLimit: 'applications_limit.unlimited', + machineToMachineLimit: 'machine_to_machine_limit.unlimited', + thirdPartyApplicationsLimit: 'third_party_applications_limit.unlimited', + resourcesLimit: 'resources_limit.unlimited', + scopesPerResourceLimit: 'scopes_per_resource_limit.unlimited', + socialConnectorsLimit: 'social_connectors_limit.unlimited', + userRolesLimit: 'roles_limit.unlimited', + machineToMachineRolesLimit: 'machine_to_machine_roles_limit.unlimited', + scopesPerRoleLimit: 'scopes_per_role_limit.unlimited', + hooksLimit: 'hooks_limit.unlimited', + auditLogsRetentionDays: 'audit_logs_retention_days.unlimited', + ticketSupportResponseTime: 'email_ticket_support.unlimited', + mfaEnabled: 'mfa_enabled.unlimited', + organizationsEnabled: 'organizations_enabled.unlimited', + enterpriseSsoLimit: 'sso_enabled.unlimited', + tenantMembersLimit: 'tenant_members_limit.unlimited', + customJwtEnabled: 'custom_jwt_enabled.unlimited', + subjectTokenEnabled: 'impersonation_enabled.unlimited', + bringYourUiEnabled: 'bring_your_ui_enabled.unlimited', +}; + +export const skuQuotaItemLimitedPhrasesMap: Record< + keyof LogtoSkuQuota, + TFuncKey<'translation', 'admin_console.subscription.quota_item'> +> = { + mauLimit: 'mau_limit.limited', + tokenLimit: 'token_limit.limited', + applicationsLimit: 'applications_limit.limited', + machineToMachineLimit: 'machine_to_machine_limit.limited', + thirdPartyApplicationsLimit: 'third_party_applications_limit.limited', + resourcesLimit: 'resources_limit.limited', + scopesPerResourceLimit: 'scopes_per_resource_limit.limited', + socialConnectorsLimit: 'social_connectors_limit.limited', + userRolesLimit: 'roles_limit.limited', + machineToMachineRolesLimit: 'machine_to_machine_roles_limit.limited', + scopesPerRoleLimit: 'scopes_per_role_limit.limited', + hooksLimit: 'hooks_limit.limited', + auditLogsRetentionDays: 'audit_logs_retention_days.limited', + ticketSupportResponseTime: 'email_ticket_support.limited', + mfaEnabled: 'mfa_enabled.limited', + organizationsEnabled: 'organizations_enabled.limited', + enterpriseSsoLimit: 'sso_enabled.limited', + tenantMembersLimit: 'tenant_members_limit.limited', + customJwtEnabled: 'custom_jwt_enabled.limited', + subjectTokenEnabled: 'impersonation_enabled.limited', + bringYourUiEnabled: 'bring_your_ui_enabled.limited', +}; + +export const skuQuotaItemNotEligiblePhrasesMap: Record< + keyof LogtoSkuQuota, + TFuncKey<'translation', 'admin_console.subscription.quota_item'> +> = { + mauLimit: 'mau_limit.not_eligible', + tokenLimit: 'token_limit.not_eligible', + applicationsLimit: 'applications_limit.not_eligible', + machineToMachineLimit: 'machine_to_machine_limit.not_eligible', + thirdPartyApplicationsLimit: 'third_party_applications_limit.not_eligible', + resourcesLimit: 'resources_limit.not_eligible', + scopesPerResourceLimit: 'scopes_per_resource_limit.not_eligible', + socialConnectorsLimit: 'social_connectors_limit.not_eligible', + userRolesLimit: 'roles_limit.not_eligible', + machineToMachineRolesLimit: 'machine_to_machine_roles_limit.not_eligible', + scopesPerRoleLimit: 'scopes_per_role_limit.not_eligible', + hooksLimit: 'hooks_limit.not_eligible', + auditLogsRetentionDays: 'audit_logs_retention_days.not_eligible', + ticketSupportResponseTime: 'email_ticket_support.not_eligible', + mfaEnabled: 'mfa_enabled.not_eligible', + organizationsEnabled: 'organizations_enabled.not_eligible', + enterpriseSsoLimit: 'sso_enabled.not_eligible', + tenantMembersLimit: 'tenant_members_limit.not_eligible', + customJwtEnabled: 'custom_jwt_enabled.not_eligible', + subjectTokenEnabled: 'impersonation_enabled.not_eligible', + bringYourUiEnabled: 'bring_your_ui_enabled.not_eligible', +}; +/* === for new pricing model === */ diff --git a/packages/console/src/consts/tenants.ts b/packages/console/src/consts/tenants.ts index 05bc17173..133aa531b 100644 --- a/packages/console/src/consts/tenants.ts +++ b/packages/console/src/consts/tenants.ts @@ -1,8 +1,14 @@ import { ReservedPlanId, TenantTag, defaultManagementApi } from '@logto/schemas'; import dayjs from 'dayjs'; -import { type TenantResponse } from '@/cloud/types/router'; +import { + type NewSubscriptionQuota, + type LogtoSkuResponse, + type TenantResponse, + type NewSubscriptionUsage, +} from '@/cloud/types/router'; import { RegionName } from '@/components/Region'; +import { LogtoSkuType } from '@/types/skus'; import { type SubscriptionPlan } from '@/types/subscriptions'; import { adminEndpoint, isCloud } from './env'; @@ -76,6 +82,88 @@ export const defaultSubscriptionPlan: SubscriptionPlan = { }, }; +/** + * - For cloud, the initial tenant's subscription plan will be fetched from the cloud API. + * - OSS has a fixed subscription plan with `development` id and no cloud API to dynamically fetch the subscription plan. + */ +export const defaultLogtoSku: LogtoSkuResponse = { + id: ReservedPlanId.Development, + name: 'Logto Development plan', + createdAt: new Date(), + updatedAt: new Date(), + type: LogtoSkuType.Basic, + unitPrice: 0, + quota: { + // A soft limit for abuse monitoring + mauLimit: 100, + tokenLimit: null, + applicationsLimit: null, + machineToMachineLimit: null, + resourcesLimit: null, + scopesPerResourceLimit: null, + socialConnectorsLimit: null, + userRolesLimit: null, + machineToMachineRolesLimit: null, + scopesPerRoleLimit: null, + hooksLimit: null, + auditLogsRetentionDays: 14, + mfaEnabled: true, + organizationsEnabled: true, + enterpriseSsoLimit: null, + thirdPartyApplicationsLimit: null, + tenantMembersLimit: 20, + customJwtEnabled: true, + subjectTokenEnabled: true, + bringYourUiEnabled: true, + }, +}; + +/** Quota for Free plan */ +export const defaultSubscriptionQuota: NewSubscriptionQuota = { + mauLimit: 50_000, + tokenLimit: 500_000, + applicationsLimit: 3, + machineToMachineLimit: 1, + resourcesLimit: 1, + scopesPerResourceLimit: 1, + socialConnectorsLimit: 3, + userRolesLimit: 1, + machineToMachineRolesLimit: 1, + scopesPerRoleLimit: 1, + hooksLimit: 1, + auditLogsRetentionDays: 3, + mfaEnabled: false, + organizationsEnabled: false, + enterpriseSsoLimit: 0, + thirdPartyApplicationsLimit: 0, + tenantMembersLimit: 1, + customJwtEnabled: false, + subjectTokenEnabled: false, + bringYourUiEnabled: false, +}; + +export const defaultSubscriptionUsage: NewSubscriptionUsage = { + mauLimit: 0, + tokenLimit: 0, + applicationsLimit: 0, + machineToMachineLimit: 0, + resourcesLimit: 0, + scopesPerResourceLimit: 0, + socialConnectorsLimit: 0, + userRolesLimit: 0, + machineToMachineRolesLimit: 0, + scopesPerRoleLimit: 0, + hooksLimit: 0, + mfaEnabled: false, + organizationsEnabled: false, + enterpriseSsoLimit: 0, + thirdPartyApplicationsLimit: 0, + tenantMembersLimit: 0, + customJwtEnabled: false, + subjectTokenEnabled: false, + bringYourUiEnabled: false, +}; + const getAdminTenantEndpoint = () => { // Allow endpoint override for dev or testing if (adminEndpoint) { diff --git a/packages/console/src/containers/AppContent/index.tsx b/packages/console/src/containers/AppContent/index.tsx index 8722f0381..a5c741748 100644 --- a/packages/console/src/containers/AppContent/index.tsx +++ b/packages/console/src/containers/AppContent/index.tsx @@ -6,6 +6,7 @@ import AppLoading from '@/components/AppLoading'; import Topbar from '@/components/Topbar'; import { isCloud } from '@/consts/env'; import SubscriptionDataProvider from '@/contexts/SubscriptionDataProvider'; +import useNewSubscriptionData from '@/contexts/SubscriptionDataProvider/use-new-subscription-data'; import useSubscriptionData from '@/contexts/SubscriptionDataProvider/use-subscription-data'; import { TenantsContext } from '@/contexts/TenantsProvider'; import useScroll from '@/hooks/use-scroll'; @@ -24,18 +25,38 @@ export default function AppContent() { const { currentTenant } = useContext(TenantsContext); const isTenantSuspended = isCloud && currentTenant?.isSuspended; const { isLoading: isLoadingSubscriptionData, ...subscriptionDta } = useSubscriptionData(); + const { + isLoading: isLoadingNewSubscriptionData, + logtoSkus, + currentSku, + currentSubscriptionQuota, + currentSubscriptionUsage, + currentSubscriptionScopeResourceUsage, + currentSubscriptionScopeRoleUsage, + } = useNewSubscriptionData(); const scrollableContent = useRef(null); const { scrollTop } = useScroll(scrollableContent.current); - const isLoading = isLoadingPreference || isLoadingSubscriptionData; + const isLoading = + isLoadingPreference || isLoadingSubscriptionData || isLoadingNewSubscriptionData; if (isLoading || !currentTenant) { return ; } return ( - +
{isTenantSuspended && } diff --git a/packages/console/src/contexts/SubscriptionDataProvider/index.tsx b/packages/console/src/contexts/SubscriptionDataProvider/index.tsx index 85b874af7..fea1c98e8 100644 --- a/packages/console/src/contexts/SubscriptionDataProvider/index.tsx +++ b/packages/console/src/contexts/SubscriptionDataProvider/index.tsx @@ -1,12 +1,18 @@ import { noop } from '@silverhand/essentials'; import { createContext, type ReactNode } from 'react'; -import { defaultSubscriptionPlan, defaultTenantResponse } from '@/consts'; +import { + defaultSubscriptionPlan, + defaultLogtoSku, + defaultTenantResponse, + defaultSubscriptionQuota, + defaultSubscriptionUsage, +} from '@/consts'; // Used in the docs // eslint-disable-next-line unused-imports/no-unused-imports import TenantAccess from '@/containers/TenantAccess'; -import { type Context } from './types'; +import { type FullContext } from './types'; const defaultSubscription = defaultTenantResponse.subscription; @@ -14,15 +20,23 @@ const defaultSubscription = defaultTenantResponse.subscription; * This context provides the subscription plans and subscription data of the current tenant. * CAUTION: You should only use this data context under the {@link TenantAccess} component */ -export const SubscriptionDataContext = createContext({ +export const SubscriptionDataContext = createContext({ subscriptionPlans: [], currentPlan: defaultSubscriptionPlan, currentSubscription: defaultSubscription, onCurrentSubscriptionUpdated: noop, + /* ==== For new pricing model ==== */ + logtoSkus: [], + currentSku: defaultLogtoSku, + currentSubscriptionQuota: defaultSubscriptionQuota, + currentSubscriptionUsage: defaultSubscriptionUsage, + currentSubscriptionScopeResourceUsage: {}, + currentSubscriptionScopeRoleUsage: {}, + /* ==== For new pricing model ==== */ }); type Props = { - readonly subscriptionData: Context; + readonly subscriptionData: FullContext; readonly children: ReactNode; }; diff --git a/packages/console/src/contexts/SubscriptionDataProvider/types.ts b/packages/console/src/contexts/SubscriptionDataProvider/types.ts index 65be35ce8..5bbc83528 100644 --- a/packages/console/src/contexts/SubscriptionDataProvider/types.ts +++ b/packages/console/src/contexts/SubscriptionDataProvider/types.ts @@ -1,9 +1,31 @@ -import { type Subscription } from '@/cloud/types/router'; +import { + type LogtoSkuResponse, + type Subscription, + type NewSubscriptionQuota, + type NewSubscriptionUsage, + type NewSubscriptionScopeUsage, +} from '@/cloud/types/router'; import { type SubscriptionPlan } from '@/types/subscriptions'; export type Context = { + /** @deprecated */ subscriptionPlans: SubscriptionPlan[]; + /** @deprecated */ currentPlan: SubscriptionPlan; currentSubscription: Subscription; onCurrentSubscriptionUpdated: (subscription?: Subscription) => void; }; + +type NewSubscriptionSupplementContext = { + logtoSkus: LogtoSkuResponse[]; + currentSku: LogtoSkuResponse; + currentSubscriptionQuota: NewSubscriptionQuota; + currentSubscriptionUsage: NewSubscriptionUsage; + currentSubscriptionScopeResourceUsage: NewSubscriptionScopeUsage; + currentSubscriptionScopeRoleUsage: NewSubscriptionScopeUsage; +}; + +export type NewSubscriptionContext = Omit & + NewSubscriptionSupplementContext; + +export type FullContext = Context & NewSubscriptionSupplementContext; diff --git a/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts b/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts new file mode 100644 index 000000000..5e7791007 --- /dev/null +++ b/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts @@ -0,0 +1,64 @@ +import { cond, condString } from '@silverhand/essentials'; +import { useContext, useMemo } from 'react'; + +import { + defaultLogtoSku, + defaultTenantResponse, + defaultSubscriptionQuota, + defaultSubscriptionUsage, +} from '@/consts'; +import { isCloud } from '@/consts/env'; +import { TenantsContext } from '@/contexts/TenantsProvider'; +import useLogtoSkus from '@/hooks/use-logto-skus'; +import useNewSubscriptionQuota from '@/hooks/use-new-subscription-quota'; +import useNewSubscriptionScopeUsage from '@/hooks/use-new-subscription-scopes-usage'; +import useNewSubscriptionUsage from '@/hooks/use-new-subscription-usage'; + +import useSubscription from '../../hooks/use-subscription'; + +import { type NewSubscriptionContext } from './types'; + +const useNewSubscriptionData: () => NewSubscriptionContext & { isLoading: boolean } = () => { + const { currentTenant } = useContext(TenantsContext); + const { isLoading: isLogtoSkusLoading, data: fetchedLogtoSkus } = useLogtoSkus(); + const { + data: currentSubscription, + isLoading: isSubscriptionLoading, + mutate: mutateSubscription, + } = useSubscription(condString(currentTenant?.id)); + const { data: currentSubscriptionQuota, isLoading: isSubscriptionQuotaLoading } = + useNewSubscriptionQuota(condString(currentTenant?.id)); + const { data: currentSubscriptionUsage, isLoading: isSubscriptionUsageLoading } = + useNewSubscriptionUsage(condString(currentTenant?.id)); + const { + scopeResourceUsage: { data: scopeResourceUsage, isLoading: isScopePerResourceUsageLoading }, + scopeRoleUsage: { data: scopeRoleUsage, isLoading: isScopePerRoleUsageLoading }, + } = useNewSubscriptionScopeUsage(condString(currentTenant?.id)); + + const logtoSkus = useMemo(() => cond(isCloud && fetchedLogtoSkus) ?? [], [fetchedLogtoSkus]); + + const currentSku = useMemo( + () => logtoSkus.find((logtoSku) => logtoSku.id === currentTenant?.planId) ?? defaultLogtoSku, + [currentTenant?.planId, logtoSkus] + ); + + return { + isLoading: + isSubscriptionLoading || + isLogtoSkusLoading || + isSubscriptionQuotaLoading || + isSubscriptionUsageLoading || + isScopePerResourceUsageLoading || + isScopePerRoleUsageLoading, + logtoSkus, + currentSku, + currentSubscription: currentSubscription ?? defaultTenantResponse.subscription, + onCurrentSubscriptionUpdated: mutateSubscription, + currentSubscriptionQuota: currentSubscriptionQuota ?? defaultSubscriptionQuota, + currentSubscriptionUsage: currentSubscriptionUsage ?? defaultSubscriptionUsage, + currentSubscriptionScopeResourceUsage: scopeResourceUsage ?? {}, + currentSubscriptionScopeRoleUsage: scopeRoleUsage ?? {}, + }; +}; + +export default useNewSubscriptionData; diff --git a/packages/console/src/hooks/use-api-resources-usage.ts b/packages/console/src/hooks/use-api-resources-usage.ts index 331f329b9..5adbc1fe3 100644 --- a/packages/console/src/hooks/use-api-resources-usage.ts +++ b/packages/console/src/hooks/use-api-resources-usage.ts @@ -3,12 +3,18 @@ import { useContext, useMemo } from 'react'; import useSWR from 'swr'; import { type ApiResource } from '@/consts'; -import { isCloud } from '@/consts/env'; +import { isCloud, isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; -import { hasReachedQuotaLimit, hasSurpassedQuotaLimit } from '@/utils/quota'; +import { + hasReachedQuotaLimit, + hasReachedSubscriptionQuotaLimit, + hasSurpassedQuotaLimit, + hasSurpassedSubscriptionQuotaLimit, +} from '@/utils/quota'; const useApiResourcesUsage = () => { - const { currentPlan } = useContext(SubscriptionDataContext); + const { currentPlan, currentSubscriptionQuota, currentSubscriptionUsage } = + useContext(SubscriptionDataContext); /** * Note: we only need to fetch all resources when the user is in cloud environment. @@ -17,28 +23,43 @@ const useApiResourcesUsage = () => { const { data: allResources } = useSWR(isCloud && 'api/resources'); const resourceCount = useMemo( - () => allResources?.filter(({ indicator }) => !isManagementApi(indicator)).length ?? 0, - [allResources] + () => + isDevFeaturesEnabled + ? currentSubscriptionUsage.resourcesLimit + : allResources?.filter(({ indicator }) => !isManagementApi(indicator)).length ?? 0, + [allResources, currentSubscriptionUsage.resourcesLimit] ); const hasReachedLimit = useMemo( () => - hasReachedQuotaLimit({ - quotaKey: 'resourcesLimit', - plan: currentPlan, - usage: resourceCount, - }), - [currentPlan, resourceCount] + isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'resourcesLimit', + usage: currentSubscriptionUsage.resourcesLimit, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'resourcesLimit', + plan: currentPlan, + usage: resourceCount, + }), + [currentPlan, resourceCount, currentSubscriptionQuota, currentSubscriptionUsage.resourcesLimit] ); const hasSurpassedLimit = useMemo( () => - hasSurpassedQuotaLimit({ - quotaKey: 'resourcesLimit', - plan: currentPlan, - usage: resourceCount, - }), - [currentPlan, resourceCount] + isDevFeaturesEnabled + ? hasSurpassedSubscriptionQuotaLimit({ + quotaKey: 'resourcesLimit', + usage: currentSubscriptionUsage.resourcesLimit, + quota: currentSubscriptionQuota, + }) + : hasSurpassedQuotaLimit({ + quotaKey: 'resourcesLimit', + plan: currentPlan, + usage: resourceCount, + }), + [currentPlan, resourceCount, currentSubscriptionQuota, currentSubscriptionUsage.resourcesLimit] ); return { diff --git a/packages/console/src/hooks/use-applications-usage.ts b/packages/console/src/hooks/use-applications-usage.ts index 99f42183d..37900c382 100644 --- a/packages/console/src/hooks/use-applications-usage.ts +++ b/packages/console/src/hooks/use-applications-usage.ts @@ -2,12 +2,18 @@ import { type Application, ApplicationType } from '@logto/schemas'; import { useContext, useMemo } from 'react'; import useSWR from 'swr'; -import { isCloud } from '@/consts/env'; +import { isCloud, isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; -import { hasReachedQuotaLimit, hasSurpassedQuotaLimit } from '@/utils/quota'; +import { + hasReachedQuotaLimit, + hasReachedSubscriptionQuotaLimit, + hasSurpassedQuotaLimit, + hasSurpassedSubscriptionQuotaLimit, +} from '@/utils/quota'; const useApplicationsUsage = () => { - const { currentPlan } = useContext(SubscriptionDataContext); + const { currentPlan, currentSubscriptionQuota, currentSubscriptionUsage } = + useContext(SubscriptionDataContext); /** * Note: we only need to fetch all applications when the user is in cloud environment. @@ -17,53 +23,103 @@ const useApplicationsUsage = () => { const m2mAppCount = useMemo( () => - allApplications?.filter(({ type }) => type === ApplicationType.MachineToMachine).length ?? 0, - [allApplications] + isDevFeaturesEnabled + ? currentSubscriptionUsage.machineToMachineLimit + : allApplications?.filter(({ type }) => type === ApplicationType.MachineToMachine).length ?? + 0, + [allApplications, currentSubscriptionUsage.machineToMachineLimit] ); const thirdPartyAppCount = useMemo( - () => allApplications?.filter(({ isThirdParty }) => isThirdParty).length ?? 0, - [allApplications] + () => + isDevFeaturesEnabled + ? currentSubscriptionUsage.thirdPartyApplicationsLimit + : allApplications?.filter(({ isThirdParty }) => isThirdParty).length ?? 0, + [allApplications, currentSubscriptionUsage.thirdPartyApplicationsLimit] ); const hasMachineToMachineAppsReachedLimit = useMemo( () => - hasReachedQuotaLimit({ - quotaKey: 'machineToMachineLimit', - plan: currentPlan, - usage: m2mAppCount, - }), - [currentPlan, m2mAppCount] + isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'machineToMachineLimit', + usage: currentSubscriptionUsage.machineToMachineLimit, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'machineToMachineLimit', + plan: currentPlan, + usage: m2mAppCount, + }), + [ + currentPlan, + m2mAppCount, + currentSubscriptionUsage.machineToMachineLimit, + currentSubscriptionQuota, + ] ); const hasMachineToMachineAppsSurpassedLimit = useMemo( () => - hasSurpassedQuotaLimit({ - quotaKey: 'machineToMachineLimit', - plan: currentPlan, - usage: m2mAppCount, - }), - [currentPlan, m2mAppCount] + isDevFeaturesEnabled + ? hasSurpassedSubscriptionQuotaLimit({ + quotaKey: 'machineToMachineLimit', + usage: currentSubscriptionUsage.machineToMachineLimit, + quota: currentSubscriptionQuota, + }) + : hasSurpassedQuotaLimit({ + quotaKey: 'machineToMachineLimit', + plan: currentPlan, + usage: m2mAppCount, + }), + [ + currentPlan, + m2mAppCount, + currentSubscriptionUsage.machineToMachineLimit, + currentSubscriptionQuota, + ] ); const hasThirdPartyAppsReachedLimit = useMemo( () => - hasReachedQuotaLimit({ - quotaKey: 'thirdPartyApplicationsLimit', - plan: currentPlan, - usage: thirdPartyAppCount, - }), - [currentPlan, thirdPartyAppCount] + isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'thirdPartyApplicationsLimit', + usage: currentSubscriptionUsage.thirdPartyApplicationsLimit, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'thirdPartyApplicationsLimit', + plan: currentPlan, + usage: thirdPartyAppCount, + }), + [ + currentPlan, + thirdPartyAppCount, + currentSubscriptionUsage.thirdPartyApplicationsLimit, + currentSubscriptionQuota, + ] ); const hasAppsReachedLimit = useMemo( () => - hasReachedQuotaLimit({ - quotaKey: 'applicationsLimit', - plan: currentPlan, - usage: allApplications?.length ?? 0, - }), - [allApplications?.length, currentPlan] + isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'applicationsLimit', + usage: currentSubscriptionUsage.applicationsLimit, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'applicationsLimit', + plan: currentPlan, + usage: allApplications?.length ?? 0, + }), + [ + allApplications?.length, + currentPlan, + currentSubscriptionUsage.applicationsLimit, + currentSubscriptionQuota, + ] ); return { diff --git a/packages/console/src/hooks/use-logto-skus.ts b/packages/console/src/hooks/use-logto-skus.ts new file mode 100644 index 000000000..211ce9b98 --- /dev/null +++ b/packages/console/src/hooks/use-logto-skus.ts @@ -0,0 +1,52 @@ +import { type Optional } from '@silverhand/essentials'; +import { useMemo } from 'react'; +import useSWRImmutable from 'swr/immutable'; + +import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { type LogtoSkuResponse } from '@/cloud/types/router'; +import { isCloud } from '@/consts/env'; +import { featuredPlanIdOrder } from '@/consts/subscriptions'; +// Used in the docs +// eslint-disable-next-line unused-imports/no-unused-imports +import TenantAccess from '@/containers/TenantAccess'; +import { LogtoSkuType } from '@/types/skus'; +import { sortBy } from '@/utils/sort'; +import { addSupportQuota } from '@/utils/subscription'; + +/** + * Fetch Logto SKUs from the cloud API. + * Note: If you want to retrieve Logto SKUs under the {@link TenantAccess} component, use `SubscriptionDataContext` instead. + */ +const useLogtoSkus = () => { + const cloudApi = useCloudApi(); + + const useSwrResponse = useSWRImmutable( + isCloud && '/api/skus', + async () => + cloudApi.get('/api/skus', { + search: { type: LogtoSkuType.Basic }, + }) + ); + + const { data: logtoSkuResponse } = useSwrResponse; + + const logtoSkus: Optional = useMemo(() => { + if (!logtoSkuResponse) { + return; + } + + return logtoSkuResponse + .map((logtoSku) => addSupportQuota(logtoSku)) + .slice() + .sort(({ id: previousId }, { id: nextId }) => + sortBy(featuredPlanIdOrder)(previousId, nextId) + ); + }, [logtoSkuResponse]); + + return { + ...useSwrResponse, + data: logtoSkus, + }; +}; + +export default useLogtoSkus; diff --git a/packages/console/src/hooks/use-new-subscription-quota.ts b/packages/console/src/hooks/use-new-subscription-quota.ts new file mode 100644 index 000000000..8e679983f --- /dev/null +++ b/packages/console/src/hooks/use-new-subscription-quota.ts @@ -0,0 +1,19 @@ +import useSWR from 'swr'; + +import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { type NewSubscriptionQuota } from '@/cloud/types/router'; +import { isCloud } from '@/consts/env'; + +const useNewSubscriptionQuota = (tenantId: string) => { + const cloudApi = useCloudApi(); + + return useSWR( + isCloud && `/api/tenants/${tenantId}/subscription/quota`, + async () => + cloudApi.get('/api/tenants/:tenantId/subscription/quota', { + params: { tenantId }, + }) + ); +}; + +export default useNewSubscriptionQuota; diff --git a/packages/console/src/hooks/use-new-subscription-scopes-usage.ts b/packages/console/src/hooks/use-new-subscription-scopes-usage.ts new file mode 100644 index 000000000..011f5cbd3 --- /dev/null +++ b/packages/console/src/hooks/use-new-subscription-scopes-usage.ts @@ -0,0 +1,33 @@ +import useSWR from 'swr'; + +import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { type NewSubscriptionScopeUsage } from '@/cloud/types/router'; +import { isCloud } from '@/consts/env'; + +const useNewSubscriptionScopeUsage = (tenantId: string) => { + const cloudApi = useCloudApi(); + + const resourceEntityName = 'resources'; + const roleEntityName = 'roles'; + + return { + scopeResourceUsage: useSWR( + isCloud && `/api/tenants/${tenantId}/subscription/usage/${resourceEntityName}/scopes`, + async () => + cloudApi.get('/api/tenants/:tenantId/subscription/usage/:entityName/scopes', { + params: { tenantId, entityName: resourceEntityName }, + search: {}, + }) + ), + scopeRoleUsage: useSWR( + isCloud && `/api/tenants/${tenantId}/subscription/usage/${roleEntityName}/scopes`, + async () => + cloudApi.get('/api/tenants/:tenantId/subscription/usage/:entityName/scopes', { + params: { tenantId, entityName: roleEntityName }, + search: {}, + }) + ), + }; +}; + +export default useNewSubscriptionScopeUsage; diff --git a/packages/console/src/hooks/use-new-subscription-usage.ts b/packages/console/src/hooks/use-new-subscription-usage.ts new file mode 100644 index 000000000..b0af93689 --- /dev/null +++ b/packages/console/src/hooks/use-new-subscription-usage.ts @@ -0,0 +1,19 @@ +import useSWR from 'swr'; + +import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { type NewSubscriptionUsage } from '@/cloud/types/router'; +import { isCloud } from '@/consts/env'; + +const useNewSubscriptionUsage = (tenantId: string) => { + const cloudApi = useCloudApi(); + + return useSWR( + isCloud && `/api/tenants/${tenantId}/subscription/usage`, + async () => + cloudApi.get('/api/tenants/:tenantId/subscription/usage', { + params: { tenantId }, + }) + ); +}; + +export default useNewSubscriptionUsage; diff --git a/packages/console/src/hooks/use-subscribe.ts b/packages/console/src/hooks/use-subscribe.ts index 6bb49a252..bf3332fab 100644 --- a/packages/console/src/hooks/use-subscribe.ts +++ b/packages/console/src/hooks/use-subscribe.ts @@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'; import { toastResponseError, useCloudApi } from '@/cloud/hooks/use-cloud-api'; import { type CreateTenantData } from '@/components/CreateTenantModal/types'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { checkoutStateQueryKey } from '@/consts/subscriptions'; import { GlobalRoute, TenantsContext } from '@/contexts/TenantsProvider'; import { createLocalCheckoutSession } from '@/utils/checkout'; @@ -15,6 +16,12 @@ import { dropLeadingSlash } from '@/utils/url'; import useTenantPathname from './use-tenant-pathname'; type SubscribeProps = { + /** + * @remarks + * Temporarily mark this as optional for backward compatibility, in new pricing model we should always provide `skuId`. + */ + skuId?: string; + /** @deprecated in new pricing model */ planId: string; callbackPage?: string; tenantId?: string; @@ -30,6 +37,7 @@ const useSubscribe = () => { const [isSubscribeLoading, setIsSubscribeLoading] = useState(false); const subscribe = async ({ + skuId, planId, callbackPage, tenantId, @@ -54,6 +62,7 @@ const useSubscribe = () => { try { const { redirectUri, sessionId } = await cloudApi.post('/api/checkout-session', { body: { + skuId, planId, successCallbackUrl, tenantId, @@ -88,6 +97,20 @@ const useSubscribe = () => { }, }); + // Should not use hard-coded plan update here, need to update the tenant's subscription data with response from corresponding API. + if (isDevFeaturesEnabled) { + const { id, ...rest } = await cloudApi.get('/api/tenants/:tenantId/subscription', { + params: { + tenantId, + }, + }); + updateTenant(tenantId, { + planId: rest.planId, + subscription: rest, + }); + return; + } + /** * Note: need to update the tenant's subscription cache data, * since the cancel subscription flow will not redirect to the stripe payment page. diff --git a/packages/console/src/hooks/use-subscription-plans.ts b/packages/console/src/hooks/use-subscription-plans.ts index eff34f682..1ae69bd16 100644 --- a/packages/console/src/hooks/use-subscription-plans.ts +++ b/packages/console/src/hooks/use-subscription-plans.ts @@ -14,6 +14,7 @@ import { sortBy } from '@/utils/sort'; import { addSupportQuotaToPlan } from '@/utils/subscription'; /** + * @deprecated * Fetch subscription plans from the cloud API. * Note: If you want to retrieve subscription plans under the {@link TenantAccess} component, use `SubscriptionDataContext` instead. */ diff --git a/packages/console/src/hooks/use-subscription-usage.ts b/packages/console/src/hooks/use-subscription-usage.ts index 0381ce6ae..728424f05 100644 --- a/packages/console/src/hooks/use-subscription-usage.ts +++ b/packages/console/src/hooks/use-subscription-usage.ts @@ -4,6 +4,7 @@ import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; import { type SubscriptionUsage } from '@/cloud/types/router'; import { isCloud } from '@/consts/env'; +/** @deprecated */ const useSubscriptionUsage = (tenantId: string) => { const cloudApi = useCloudApi(); 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 cdf79f74d..ee90978e2 100644 --- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx +++ b/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx @@ -8,6 +8,7 @@ import ReactModal from 'react-modal'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; @@ -16,10 +17,11 @@ import TextInput from '@/ds-components/TextInput'; import useApi from '@/hooks/use-api'; import modalStyles from '@/scss/modal.module.scss'; import { trySubmitSafe } from '@/utils/form'; -import { hasReachedQuotaLimit } from '@/utils/quota'; +import { hasReachedQuotaLimit, hasReachedSubscriptionQuotaLimit } from '@/utils/quota'; type Props = { readonly resourceId: string; + /** @deprecated get usage from cloud API after migrating to new pricing model */ readonly totalResourceCount: number; readonly onClose: (scope?: Scope) => void; }; @@ -27,7 +29,12 @@ type Props = { type CreatePermissionFormData = Pick; function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Props) { - const { currentPlan } = useContext(SubscriptionDataContext); + const { + currentPlan, + currentSku, + currentSubscriptionQuota, + currentSubscriptionScopeResourceUsage, + } = useContext(SubscriptionDataContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { @@ -52,11 +59,17 @@ function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Prop }) ); - const isScopesPerResourceReachLimit = hasReachedQuotaLimit({ - quotaKey: 'scopesPerResourceLimit', - plan: currentPlan, - usage: totalResourceCount, - }); + const isScopesPerResourceReachLimit = isDevFeaturesEnabled + ? hasReachedSubscriptionQuotaLimit({ + quotaKey: 'scopesPerResourceLimit', + usage: currentSubscriptionScopeResourceUsage[resourceId] ?? 0, + quota: currentSubscriptionQuota, + }) + : hasReachedQuotaLimit({ + quotaKey: 'scopesPerResourceLimit', + plan: currentPlan, + usage: totalResourceCount, + }); return ( , - planName: , + planName: , }} > {t('upsell.paywall.scopes_per_resource', { - count: currentPlan.quota.scopesPerResourceLimit ?? 0, + count: + (isDevFeaturesEnabled + ? currentSubscriptionQuota.scopesPerResourceLimit + : currentPlan.quota.scopesPerResourceLimit) ?? 0, })} diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx index 3ac6a3ea8..fcfdc4498 100644 --- a/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx +++ b/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx @@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button from '@/ds-components/Button'; import useApiResourcesUsage from '@/hooks/use-api-resources-usage'; @@ -16,7 +17,11 @@ type Props = { function Footer({ isCreationLoading, onClickCreate }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { currentPlan } = useContext(SubscriptionDataContext); + const { + currentPlan, + currentSubscriptionUsage: { resourcesLimit }, + currentSku, + } = useContext(SubscriptionDataContext); const { hasReachedLimit } = useApiResourcesUsage(); if ( @@ -24,18 +29,18 @@ function Footer({ isCreationLoading, onClickCreate }: Props) { /** * We don't guard API resources quota limit for paid plan, since it's an add-on feature */ - currentPlan.id === ReservedPlanId.Free + (isDevFeaturesEnabled ? currentSku.id : currentPlan.id) === ReservedPlanId.Free ) { return ( , - planName: , + planName: , }} > {t('upsell.paywall.resources', { - count: currentPlan.quota.resourcesLimit ?? 0, + count: (isDevFeaturesEnabled ? resourcesLimit : currentPlan.quota.resourcesLimit) ?? 0, })} diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx index 5a8fc4817..3d334c0b1 100644 --- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx +++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx @@ -13,7 +13,7 @@ import useSWRImmutable from 'swr/immutable'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; import PlanName from '@/components/PlanName'; import QuotaGuardFooter from '@/components/QuotaGuardFooter'; -import { isCloud } from '@/consts/env'; +import { isDevFeaturesEnabled, isCloud } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button, { type Props as ButtonProps } from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; @@ -36,6 +36,8 @@ type Props = { readonly onCreateSuccess?: (createdApp: Application) => void; }; +// TODO: refactor this component to reduce complexity +// eslint-disable-next-line complexity function ProtectedAppForm({ className, buttonAlignment = 'right', @@ -46,9 +48,12 @@ function ProtectedAppForm({ onCreateSuccess, }: Props) { const { data } = useSWRImmutable(isCloud && 'api/systems/application'); - const { currentPlan } = useContext(SubscriptionDataContext); + const { + currentPlan: { name: planName, quota }, + currentSku, + currentSubscriptionQuota, + } = useContext(SubscriptionDataContext); const { hasAppsReachedLimit } = useApplicationsUsage(); - const { name: planName, quota } = currentPlan; const defaultDomain = data?.protectedApps.defaultDomain ?? ''; const { navigate } = useTenantPathname(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -203,10 +208,15 @@ function ProtectedAppForm({ , - planName: , + planName: , }} > - {t('upsell.paywall.applications', { count: quota.applicationsLimit ?? 0 })} + {t('upsell.paywall.applications', { + count: + (isDevFeaturesEnabled + ? currentSubscriptionQuota.applicationsLimit + : quota.applicationsLimit) ?? 0, + })} ) : ( diff --git a/packages/console/src/pages/CustomizeJwt/CreateButton/index.tsx b/packages/console/src/pages/CustomizeJwt/CreateButton/index.tsx index fe95b0c5b..5c91a51ab 100644 --- a/packages/console/src/pages/CustomizeJwt/CreateButton/index.tsx +++ b/packages/console/src/pages/CustomizeJwt/CreateButton/index.tsx @@ -3,6 +3,7 @@ import { useCallback, useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import ContactUsPhraseLink from '@/components/ContactUsPhraseLink'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import Button from '@/ds-components/Button'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; @@ -19,13 +20,14 @@ function CreateButton({ tokenType }: Props) { const { show } = useConfirmModal(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { currentPlan } = useContext(SubscriptionDataContext); - const { - quota: { customJwtEnabled }, - } = currentPlan; + const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext); + + const isCustomJwtEnabled = isDevFeaturesEnabled + ? currentSubscriptionQuota.customJwtEnabled + : currentPlan.quota.customJwtEnabled; const onCreateButtonClick = useCallback(async () => { - if (customJwtEnabled) { + if (isCustomJwtEnabled) { navigate(link); return; } @@ -50,7 +52,7 @@ function CreateButton({ tokenType }: Props) { // Navigate to subscription page by default navigate('/tenant-settings/subscription'); } - }, [customJwtEnabled, link, navigate, show, t]); + }, [isCustomJwtEnabled, link, navigate, show, t]); return (
); } diff --git a/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/index.tsx index 4c374ef76..352c13799 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/index.tsx @@ -2,8 +2,10 @@ import { diff } from 'deep-object-diff'; import { useMemo } from 'react'; import { Trans, useTranslation } from 'react-i18next'; +import { type LogtoSkuResponse } from '@/cloud/types/router'; import PlanName from '@/components/PlanName'; -import { comingSoonQuotaKeys } from '@/consts/plan-quotas'; +import { comingSoonQuotaKeys, comingSoonSkuQuotaKeys } from '@/consts/plan-quotas'; +import { type LogtoSkuQuota, type LogtoSkuQuotaEntries } from '@/types/skus'; import { type SubscriptionPlanQuota, type SubscriptionPlan, @@ -16,6 +18,8 @@ import styles from './index.module.scss'; type Props = { readonly currentPlan: SubscriptionPlan; readonly targetPlan: SubscriptionPlan; + readonly currentSku: LogtoSkuResponse; + readonly targetSku: LogtoSkuResponse; }; const excludeComingSoonFeatures = ( @@ -26,7 +30,15 @@ const excludeComingSoonFeatures = ( return Object.fromEntries(entries.filter(([key]) => !comingSoonQuotaKeys.includes(key))); }; -function DowngradeConfirmModalContent({ currentPlan, targetPlan }: Props) { +const excludeSkuComingSoonFeatures = ( + quotaDiff: Partial +): Partial => { + // eslint-disable-next-line no-restricted-syntax + const entries = Object.entries(quotaDiff) as LogtoSkuQuotaEntries; + return Object.fromEntries(entries.filter(([key]) => !comingSoonSkuQuotaKeys.includes(key))); +}; + +function DowngradeConfirmModalContent({ currentPlan, targetPlan, currentSku, targetSku }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { quota: currentQuota, name: currentPlanName } = currentPlan; @@ -38,29 +50,44 @@ function DowngradeConfirmModalContent({ currentPlan, targetPlan }: Props) { [currentQuota, targetQuota] ); + const currentSkuQuotaDiff = useMemo( + () => excludeSkuComingSoonFeatures(diff(targetSku.quota, currentSku.quota)), + [targetSku.quota, currentSku.quota] + ); + const targetQuotaDiff = useMemo( () => excludeComingSoonFeatures(diff(currentQuota, targetQuota)), [currentQuota, targetQuota] ); + const targetSkuQuotaDiff = useMemo( + () => excludeSkuComingSoonFeatures(diff(currentSku.quota, targetSku.quota)), + [targetSku.quota, currentSku.quota] + ); + return (
, - currentName: , + targetName: , + currentName: , }} > {t('subscription.downgrade_modal.description')}
- +
diff --git a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx index 6a2f5c520..c49f47d07 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx @@ -4,17 +4,25 @@ import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; import { toastResponseError } from '@/cloud/hooks/use-cloud-api'; +import { type LogtoSkuResponse } from '@/cloud/types/router'; import PlanName from '@/components/PlanName'; import { contactEmailLink } from '@/consts'; +import { isDevFeaturesEnabled } from '@/consts/env'; import { subscriptionPage } from '@/consts/pages'; import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import Spacer from '@/ds-components/Spacer'; import { useConfirmModal } from '@/hooks/use-confirm-modal'; import useSubscribe from '@/hooks/use-subscribe'; -import NotEligibleSwitchPlanModalContent from '@/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent'; +import NotEligibleSwitchPlanModalContent, { + NotEligibleSwitchSkuModalContent, +} from '@/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent'; import { type SubscriptionPlan } from '@/types/subscriptions'; -import { isDowngradePlan, parseExceededQuotaLimitError } from '@/utils/subscription'; +import { + isDowngradePlan, + parseExceededQuotaLimitError, + parseExceededSkuQuotaLimitError, +} from '@/utils/subscription'; import DowngradeConfirmModalContent from '../DowngradeConfirmModalContent'; @@ -23,6 +31,8 @@ import styles from './index.module.scss'; type Props = { readonly currentSubscriptionPlanId: string; readonly subscriptionPlans: SubscriptionPlan[]; + readonly currentSkuId: string; + readonly logtoSkus: LogtoSkuResponse[]; readonly onSubscriptionUpdated: () => Promise; }; @@ -30,6 +40,8 @@ function SwitchPlanActionBar({ currentSubscriptionPlanId, subscriptionPlans, onSubscriptionUpdated, + currentSkuId, + logtoSkus, }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' }); const { currentTenantId } = useContext(TenantsContext); @@ -37,6 +49,7 @@ function SwitchPlanActionBar({ const { show } = useConfirmModal(); const [currentLoadingPlanId, setCurrentLoadingPlanId] = useState(); + // TODO: rename `targetPlanId` to be `targetSkuId` const handleSubscribe = async (targetPlanId: string, isDowngrade: boolean) => { if (currentLoadingPlanId) { return; @@ -44,14 +57,23 @@ function SwitchPlanActionBar({ const currentPlan = subscriptionPlans.find(({ id }) => id === currentSubscriptionPlanId); const targetPlan = subscriptionPlans.find(({ id }) => id === targetPlanId); - if (!currentPlan || !targetPlan) { + + const currentSku = logtoSkus.find(({ id }) => id === currentSkuId); + const targetSku = logtoSkus.find(({ id }) => id === targetPlanId); + + if (!currentPlan || !targetPlan || !currentSku || !targetSku) { return; } if (isDowngrade) { const [result] = await show({ ModalContent: () => ( - + ), title: 'subscription.downgrade_modal.title', confirmButtonText: 'subscription.downgrade_modal.downgrade', @@ -69,7 +91,7 @@ function SwitchPlanActionBar({ await cancelSubscription(currentTenantId); await onSubscriptionUpdated(); toast.success( - }}> + }}> {t('downgrade_success')} ); @@ -79,12 +101,37 @@ function SwitchPlanActionBar({ await subscribe({ tenantId: currentTenantId, + skuId: targetSku.id, planId: targetPlanId, isDowngrade, callbackPage: subscriptionPage, }); } catch (error: unknown) { setCurrentLoadingPlanId(undefined); + + if (isDevFeaturesEnabled) { + const [result, exceededSkuQuotaKeys] = await parseExceededSkuQuotaLimitError(error); + + if (result) { + await show({ + ModalContent: () => ( + + ), + title: isDowngrade + ? 'subscription.not_eligible_modal.downgrade_title' + : 'subscription.not_eligible_modal.upgrade_title', + confirmButtonText: 'general.got_it', + confirmButtonType: 'primary', + isCancelButtonVisible: false, + }); + return; + } + } + const [result, exceededQuotaKeys] = await parseExceededQuotaLimitError(error); if (result) { @@ -115,30 +162,56 @@ function SwitchPlanActionBar({ return (
- {subscriptionPlans.map(({ id: planId }) => { - const isCurrentPlan = currentSubscriptionPlanId === planId; - const isDowngrade = isDowngradePlan(currentSubscriptionPlanId, planId); + {isDevFeaturesEnabled + ? logtoSkus.map(({ id: skuId }) => { + const isCurrentSku = currentSkuId === skuId; + const isDowngrade = isDowngradePlan(currentSkuId, skuId); - return ( -
-
- ); - })} + return ( +
+
+ ); + }) + : // TODO remove this branch once new pricing model is ready. + subscriptionPlans.map(({ id: planId }) => { + const isCurrentPlan = currentSubscriptionPlanId === planId; + const isDowngrade = isDowngradePlan(currentSubscriptionPlanId, planId); + + return ( +
+
+ ); + })}