mirror of
https://github.com/logto-io/logto.git
synced 2025-03-31 22:51:25 -05:00
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
This commit is contained in:
Darcy Ye
GitHub
parent
b322b9a037
commit
ac40ef17d7
58 changed files with 1843 additions and 282 deletions
|
|
@ -11,10 +11,30 @@ export type SubscriptionPlanResponse = GuardedResponse<
|
|||
GetRoutes['/api/subscription-plans']
|
||||
>[number];
|
||||
|
||||
export type LogtoSkuResponse = GetArrayElementType<GuardedResponse<GetRoutes['/api/skus']>>;
|
||||
|
||||
export type Subscription = GuardedResponse<GetRoutes['/api/tenants/:tenantId/subscription']>;
|
||||
|
||||
/** @deprecated */
|
||||
export type SubscriptionUsage = GuardedResponse<GetRoutes['/api/tenants/:tenantId/usage']>;
|
||||
|
||||
/* ===== 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<GetRoutes['/api/tenants/:tenantId/invoices']>;
|
||||
|
||||
export type InvitationResponse = GuardedResponse<GetRoutes['/api/invitations/:invitationId']>;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<QuotaGuardFooter>
|
||||
|
|
@ -68,7 +69,7 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props)
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={planName} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={planName} />,
|
||||
}}
|
||||
>
|
||||
{t('applications', { count: quota.applicationsLimit ?? 0 })}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={planName} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={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({
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={planName} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={planName} />,
|
||||
}}
|
||||
>
|
||||
{t('social_connectors', {
|
||||
count: quota.socialConnectorsLimit ?? 0,
|
||||
count:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.socialConnectorsLimit
|
||||
: quota.socialConnectorsLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ul className={styles.list}>
|
||||
{contentData.map(({ title, isAvailable }) => {
|
||||
return (
|
||||
<li key={title}>
|
||||
{isAvailable ? (
|
||||
<Success className={classNames(styles.icon, styles.success)} />
|
||||
) : (
|
||||
<Failed className={classNames(styles.icon, styles.failed)} />
|
||||
)}
|
||||
{title}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeaturedSkuContent;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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<ButtonProps>;
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.planInfo}>
|
||||
<div className={styles.title}>
|
||||
<PlanName skuId={skuId} name={skuId} />
|
||||
</div>
|
||||
<div className={styles.priceInfo}>
|
||||
<div className={styles.priceLabel}>{t('base_price')}</div>
|
||||
<div className={styles.price}>
|
||||
${t('monthly_price', { value: (basePrice ?? 0) / 100 })}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
<PlanDescription skuId={skuId} planId={skuId} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<FeaturedSkuContent skuId={skuId} />
|
||||
{isFreeSku && isFreeTenantExceeded && (
|
||||
<div className={classNames(styles.tip, styles.exceedFreeTenantsTip)}>
|
||||
{t('free_tenants_limit', { count: maxFreeTenantLimit })}
|
||||
</div>
|
||||
)}
|
||||
{!isFreeSku && (
|
||||
<div className={styles.tip}>
|
||||
<TextLink
|
||||
isTrailingIcon
|
||||
href={pricingLink}
|
||||
targetBlank="noopener"
|
||||
icon={<ArrowRight className={styles.linkIcon} />}
|
||||
className={styles.link}
|
||||
>
|
||||
<DynamicT forKey="upsell.create_tenant.view_all_features" />
|
||||
</TextLink>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
title={
|
||||
<DangerousRaw>
|
||||
<Trans components={{ name: <PlanName skuId={skuId} name={skuId} /> }}>
|
||||
{t('select_plan')}
|
||||
</Trans>
|
||||
</DangerousRaw>
|
||||
}
|
||||
type={isFreeSku ? 'outline' : 'primary'}
|
||||
size="large"
|
||||
onClick={onSelect}
|
||||
{...buttonProps}
|
||||
disabled={(isFreeSku && isFreeTenantExceeded) || buttonProps?.disabled}
|
||||
/>
|
||||
</div>
|
||||
{skuId === ReservedPlanId.Pro && (
|
||||
<div className={styles.mostPopularTag}>{t('most_popular')}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkuCardItem;
|
||||
|
|
@ -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<string>();
|
||||
const [processingPlanId, setProcessingPlanId] = useState<string>();
|
||||
const [processingSkuId, setProcessingSkuId] = useState<string>();
|
||||
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}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
{reservedPlans.map((plan) => (
|
||||
<PlanCardItem
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
buttonProps={{
|
||||
isLoading: isSubmitting === plan.id,
|
||||
disabled: Boolean(isSubmitting),
|
||||
}}
|
||||
onSelect={() => {
|
||||
void handleSelectPlan(plan);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{isDevFeaturesEnabled
|
||||
? reservedBasicLogtoSkus.map((logtoSku) => (
|
||||
<SkuCardItem
|
||||
key={logtoSku.id}
|
||||
sku={logtoSku}
|
||||
buttonProps={{
|
||||
isLoading: processingSkuId === logtoSku.id,
|
||||
disabled: Boolean(processingSkuId),
|
||||
}}
|
||||
onSelect={() => {
|
||||
void handleSelectSku(logtoSku);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
: reservedPlans.map((plan) => (
|
||||
<PlanCardItem
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
buttonProps={{
|
||||
isLoading: processingPlanId === plan.id,
|
||||
disabled: Boolean(processingPlanId),
|
||||
}}
|
||||
onSelect={() => {
|
||||
void handleSelectPlan(plan);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ModalLayout>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<InlineNotification severity="error">
|
||||
<Trans
|
||||
components={{
|
||||
planName: <PlanName name={planName} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={planName} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.mau_exceeded_modal.notification')}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
<TenantEnvTag tag={tag} />
|
||||
<TenantStatusTag
|
||||
tenantData={tenantData}
|
||||
tenantPlan={tenantPlan}
|
||||
tenantStatus={{ usage, quota }}
|
||||
tenantSubscriptionPlan={tenantSubscriptionPlan}
|
||||
className={styles.statusTag}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -52,7 +58,7 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
|
|||
{tag === TenantTag.Development ? (
|
||||
<DynamicT forKey="subscription.no_subscription" />
|
||||
) : (
|
||||
<PlanName name={tenantPlan.name} />
|
||||
<PlanName skuId={currentSku.id} name={tenantSubscriptionPlan.name} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<keyof SubscriptionPlanQuota> = [
|
|||
'ticketSupportResponseTime',
|
||||
];
|
||||
|
||||
/**
|
||||
* Define the order of quota items in the downgrade plan notification modal and not eligible for downgrade plan modal.
|
||||
*/
|
||||
export const skuQuotaItemOrder: Array<keyof LogtoSkuQuota> = [
|
||||
'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<keyof SubscriptionPlanQuota> = [];
|
||||
|
||||
export const comingSoonSkuQuotaKeys: Array<keyof LogtoSkuQuota> = [];
|
||||
|
|
|
|||
|
|
@ -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 === */
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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<HTMLDivElement>(null);
|
||||
const { scrollTop } = useScroll(scrollableContent.current);
|
||||
|
||||
const isLoading = isLoadingPreference || isLoadingSubscriptionData;
|
||||
const isLoading =
|
||||
isLoadingPreference || isLoadingSubscriptionData || isLoadingNewSubscriptionData;
|
||||
|
||||
if (isLoading || !currentTenant) {
|
||||
return <AppLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SubscriptionDataProvider subscriptionData={subscriptionDta}>
|
||||
<SubscriptionDataProvider
|
||||
subscriptionData={{
|
||||
...subscriptionDta,
|
||||
logtoSkus,
|
||||
currentSku,
|
||||
currentSubscriptionQuota,
|
||||
currentSubscriptionUsage,
|
||||
currentSubscriptionScopeResourceUsage,
|
||||
currentSubscriptionScopeRoleUsage,
|
||||
}}
|
||||
>
|
||||
<div className={styles.app}>
|
||||
<Topbar className={conditional(scrollTop && styles.topbarShadow)} />
|
||||
{isTenantSuspended && <TenantSuspendedPage />}
|
||||
|
|
|
|||
|
|
@ -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<Context>({
|
||||
export const SubscriptionDataContext = createContext<FullContext>({
|
||||
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;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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<Context, 'subscriptionPlans' | 'currentPlan'> &
|
||||
NewSubscriptionSupplementContext;
|
||||
|
||||
export type FullContext = Context & NewSubscriptionSupplementContext;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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<ApiResource[]>(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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
52
packages/console/src/hooks/use-logto-skus.ts
Normal file
52
packages/console/src/hooks/use-logto-skus.ts
Normal file
|
|
@ -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<LogtoSkuResponse[], Error>(
|
||||
isCloud && '/api/skus',
|
||||
async () =>
|
||||
cloudApi.get('/api/skus', {
|
||||
search: { type: LogtoSkuType.Basic },
|
||||
})
|
||||
);
|
||||
|
||||
const { data: logtoSkuResponse } = useSwrResponse;
|
||||
|
||||
const logtoSkus: Optional<LogtoSkuResponse[]> = 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;
|
||||
19
packages/console/src/hooks/use-new-subscription-quota.ts
Normal file
19
packages/console/src/hooks/use-new-subscription-quota.ts
Normal file
|
|
@ -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<NewSubscriptionQuota, Error>(
|
||||
isCloud && `/api/tenants/${tenantId}/subscription/quota`,
|
||||
async () =>
|
||||
cloudApi.get('/api/tenants/:tenantId/subscription/quota', {
|
||||
params: { tenantId },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export default useNewSubscriptionQuota;
|
||||
|
|
@ -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<NewSubscriptionScopeUsage, Error>(
|
||||
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<NewSubscriptionScopeUsage, Error>(
|
||||
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;
|
||||
19
packages/console/src/hooks/use-new-subscription-usage.ts
Normal file
19
packages/console/src/hooks/use-new-subscription-usage.ts
Normal file
|
|
@ -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<NewSubscriptionUsage, Error>(
|
||||
isCloud && `/api/tenants/${tenantId}/subscription/usage`,
|
||||
async () =>
|
||||
cloudApi.get('/api/tenants/:tenantId/subscription/usage', {
|
||||
params: { tenantId },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export default useNewSubscriptionUsage;
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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<CreateScope, 'name' | 'description'>;
|
||||
|
||||
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 (
|
||||
<ReactModal
|
||||
|
|
@ -81,11 +94,14 @@ function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Prop
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={currentPlan.name} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={currentPlan.name} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.paywall.scopes_per_resource', {
|
||||
count: currentPlan.quota.scopesPerResourceLimit ?? 0,
|
||||
count:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.scopesPerResourceLimit
|
||||
: currentPlan.quota.scopesPerResourceLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<QuotaGuardFooter>
|
||||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={currentPlan.name} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={currentPlan.name} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.paywall.resources', {
|
||||
count: currentPlan.quota.resourcesLimit ?? 0,
|
||||
count: (isDevFeaturesEnabled ? resourcesLimit : currentPlan.quota.resourcesLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
|
|
|
|||
|
|
@ -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<ProtectedAppsDomainConfig>(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({
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={planName} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={planName} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.paywall.applications', { count: quota.applicationsLimit ?? 0 })}
|
||||
{t('upsell.paywall.applications', {
|
||||
count:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.applicationsLimit
|
||||
: quota.applicationsLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
|||
import Skeleton from '@/components/CreateConnectorForm/Skeleton';
|
||||
import { getConnectorRadioGroupSize } from '@/components/CreateConnectorForm/utils';
|
||||
import QuotaGuardFooter from '@/components/QuotaGuardFooter';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import Button from '@/ds-components/Button';
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
|
|
@ -42,10 +42,15 @@ const duplicateConnectorNameErrorCode = 'single_sign_on.duplicate_connector_name
|
|||
|
||||
function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
|
||||
const [selectedProviderName, setSelectedProviderName] = useState<string>();
|
||||
|
||||
const isSsoEnabled = !isCloud || currentPlan.quota.ssoEnabled;
|
||||
const isSsoEnabled =
|
||||
!isCloud ||
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.enterpriseSsoLimit === null ||
|
||||
currentSubscriptionQuota.enterpriseSsoLimit > 0
|
||||
: currentPlan.quota.ssoEnabled);
|
||||
|
||||
const { data, error } = useSWR<SsoConnectorProvidersResponse, RequestError>(
|
||||
'api/sso-connector-providers'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import DetailsForm from '@/components/DetailsForm';
|
|||
import FormCard from '@/components/FormCard';
|
||||
import InlineUpsell from '@/components/InlineUpsell';
|
||||
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
import FormField from '@/ds-components/FormField';
|
||||
|
|
@ -32,8 +32,10 @@ type Props = {
|
|||
};
|
||||
|
||||
function MfaForm({ data, onMfaUpdated }: Props) {
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const isMfaDisabled = isCloud && !currentPlan.quota.mfaEnabled;
|
||||
const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
|
||||
const isMfaDisabled =
|
||||
isCloud &&
|
||||
!(isDevFeaturesEnabled ? currentSubscriptionQuota.mfaEnabled : currentPlan.quota.mfaEnabled);
|
||||
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { getDocumentationUrl } = useDocumentationUrl();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import OrganizationEmpty from '@/assets/images/organization-empty.svg?react';
|
|||
import Drawer from '@/components/Drawer';
|
||||
import PageMeta from '@/components/PageMeta';
|
||||
import { OrganizationTemplateTabs, organizationTemplateLink } from '@/consts';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { subscriptionPage } from '@/consts/pages';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||
|
|
@ -32,9 +32,13 @@ const basePathname = '/organization-template';
|
|||
function OrganizationTemplate() {
|
||||
const { getDocumentationUrl } = useDocumentationUrl();
|
||||
const [isGuideDrawerOpen, setIsGuideDrawerOpen] = useState(false);
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
|
||||
const { isDevTenant } = useContext(TenantsContext);
|
||||
const isOrganizationsDisabled = isCloud && !currentPlan.quota.organizationsEnabled;
|
||||
const isOrganizationsDisabled =
|
||||
isCloud &&
|
||||
!(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.organizationsEnabled
|
||||
: currentPlan.quota.organizationsEnabled);
|
||||
const { navigate } = useTenantPathname();
|
||||
|
||||
const handleUpgradePlan = useCallback(() => {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import ReactModal from 'react-modal';
|
|||
|
||||
import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
||||
import QuotaGuardFooter from '@/components/QuotaGuardFooter';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import Button from '@/ds-components/Button';
|
||||
import FormField from '@/ds-components/FormField';
|
||||
|
|
@ -24,8 +24,12 @@ type Props = {
|
|||
function CreateOrganizationModal({ isOpen, onClose }: Props) {
|
||||
const api = useApi();
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const isOrganizationsDisabled = isCloud && !currentPlan.quota.organizationsEnabled;
|
||||
const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
|
||||
const isOrganizationsDisabled =
|
||||
isCloud &&
|
||||
!(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.organizationsEnabled
|
||||
: currentPlan.quota.organizationsEnabled);
|
||||
|
||||
const {
|
||||
reset,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useCallback, useContext, useState } from 'react';
|
|||
import Plus from '@/assets/icons/plus.svg?react';
|
||||
import PageMeta from '@/components/PageMeta';
|
||||
import { organizationsFeatureLink } from '@/consts';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { subscriptionPage } from '@/consts/pages';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||
|
|
@ -25,13 +25,17 @@ const organizationsPathname = '/organizations';
|
|||
|
||||
function Organizations() {
|
||||
const { getDocumentationUrl } = useDocumentationUrl();
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
|
||||
const { isDevTenant } = useContext(TenantsContext);
|
||||
|
||||
const { navigate } = useTenantPathname();
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
const isOrganizationsDisabled = isCloud && !currentPlan.quota.organizationsEnabled;
|
||||
const isOrganizationsDisabled =
|
||||
isCloud &&
|
||||
!(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.organizationsEnabled
|
||||
: currentPlan.quota.organizationsEnabled);
|
||||
|
||||
const upgradePlan = useCallback(() => {
|
||||
navigate(subscriptionPage);
|
||||
|
|
|
|||
|
|
@ -8,24 +8,27 @@ import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
|||
import PlanName from '@/components/PlanName';
|
||||
import QuotaGuardFooter from '@/components/QuotaGuardFooter';
|
||||
import RoleScopesTransfer from '@/components/RoleScopesTransfer';
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
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 modalStyles from '@/scss/modal.module.scss';
|
||||
import { hasSurpassedQuotaLimit } from '@/utils/quota';
|
||||
import { hasSurpassedQuotaLimit, hasSurpassedSubscriptionQuotaLimit } from '@/utils/quota';
|
||||
|
||||
type Props = {
|
||||
readonly roleId: string;
|
||||
readonly roleType: RoleType;
|
||||
/** @deprecated get usage from cloud API after migrating to new pricing model */
|
||||
readonly totalRoleScopeCount: number;
|
||||
readonly onClose: (success?: boolean) => void;
|
||||
};
|
||||
|
||||
function AssignPermissionsModal({ roleId, roleType, totalRoleScopeCount, onClose }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSku, currentSubscriptionScopeRoleUsage, currentSubscriptionQuota } =
|
||||
useContext(SubscriptionDataContext);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [scopes, setScopes] = useState<ScopeResponse[]>([]);
|
||||
|
||||
|
|
@ -49,11 +52,17 @@ function AssignPermissionsModal({ roleId, roleType, totalRoleScopeCount, onClose
|
|||
}
|
||||
};
|
||||
|
||||
const shouldBlockScopeAssignment = hasSurpassedQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
plan: currentPlan,
|
||||
usage: totalRoleScopeCount + scopes.length,
|
||||
});
|
||||
const shouldBlockScopeAssignment = isDevFeaturesEnabled
|
||||
? hasSurpassedSubscriptionQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
usage: (currentSubscriptionScopeRoleUsage[roleId] ?? 0) + scopes.length,
|
||||
quota: currentSubscriptionQuota,
|
||||
})
|
||||
: hasSurpassedQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
plan: currentPlan,
|
||||
usage: totalRoleScopeCount + scopes.length,
|
||||
});
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
|
|
@ -79,11 +88,14 @@ function AssignPermissionsModal({ roleId, roleType, totalRoleScopeCount, onClose
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={currentPlan.name} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={currentPlan.name} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.paywall.scopes_per_role', {
|
||||
count: currentPlan.quota.scopesPerRoleLimit ?? 0,
|
||||
count:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.scopesPerRoleLimit
|
||||
: currentPlan.quota.scopesPerRoleLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,15 @@ import useSWR from 'swr';
|
|||
import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
||||
import PlanName from '@/components/PlanName';
|
||||
import QuotaGuardFooter from '@/components/QuotaGuardFooter';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import Button from '@/ds-components/Button';
|
||||
import { hasReachedQuotaLimit, hasSurpassedQuotaLimit } from '@/utils/quota';
|
||||
import {
|
||||
hasReachedQuotaLimit,
|
||||
hasReachedSubscriptionQuotaLimit,
|
||||
hasSurpassedQuotaLimit,
|
||||
hasSurpassedSubscriptionQuotaLimit,
|
||||
} from '@/utils/quota';
|
||||
import { buildUrl } from '@/utils/url';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -21,7 +26,8 @@ type Props = {
|
|||
|
||||
function Footer({ roleType, selectedScopesCount, isCreating, onClickCreate }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
|
||||
useContext(SubscriptionDataContext);
|
||||
|
||||
const { data: [, roleCount] = [] } = useSWR<[RoleResponse[], number]>(
|
||||
isCloud &&
|
||||
|
|
@ -32,17 +38,32 @@ function Footer({ roleType, selectedScopesCount, isCreating, onClickCreate }: Pr
|
|||
})
|
||||
);
|
||||
|
||||
const hasRoleReachedLimit = hasReachedQuotaLimit({
|
||||
quotaKey: roleType === RoleType.User ? 'rolesLimit' : 'machineToMachineRolesLimit',
|
||||
plan: currentPlan,
|
||||
usage: roleCount ?? 0,
|
||||
});
|
||||
const hasRoleReachedLimit = isDevFeaturesEnabled
|
||||
? hasReachedSubscriptionQuotaLimit({
|
||||
quotaKey: roleType === RoleType.User ? 'userRolesLimit' : 'machineToMachineRolesLimit',
|
||||
usage:
|
||||
roleType === RoleType.User
|
||||
? currentSubscriptionUsage.userRolesLimit
|
||||
: currentSubscriptionUsage.machineToMachineRolesLimit,
|
||||
quota: currentSubscriptionQuota,
|
||||
})
|
||||
: hasReachedQuotaLimit({
|
||||
quotaKey: roleType === RoleType.User ? 'rolesLimit' : 'machineToMachineRolesLimit',
|
||||
plan: currentPlan,
|
||||
usage: roleCount ?? 0,
|
||||
});
|
||||
|
||||
const hasScopesPerRoleSurpassedLimit = hasSurpassedQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
plan: currentPlan,
|
||||
usage: selectedScopesCount,
|
||||
});
|
||||
const hasScopesPerRoleSurpassedLimit = isDevFeaturesEnabled
|
||||
? hasSurpassedSubscriptionQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
usage: currentSubscriptionUsage.scopesPerRoleLimit,
|
||||
quota: currentSubscriptionQuota,
|
||||
})
|
||||
: hasSurpassedQuotaLimit({
|
||||
quotaKey: 'scopesPerRoleLimit',
|
||||
plan: currentPlan,
|
||||
usage: selectedScopesCount,
|
||||
});
|
||||
|
||||
if (hasRoleReachedLimit || hasScopesPerRoleSurpassedLimit) {
|
||||
return (
|
||||
|
|
@ -50,7 +71,7 @@ function Footer({ roleType, selectedScopesCount, isCreating, onClickCreate }: Pr
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={currentPlan.name} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={currentPlan.name} />,
|
||||
}}
|
||||
>
|
||||
{/* User roles limit paywall */}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { ReservedPlanId } from '@logto/schemas';
|
|||
import { useContext, useMemo, useState } from 'react';
|
||||
|
||||
import { toastResponseError } from '@/cloud/hooks/use-cloud-api';
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { subscriptionPage } from '@/consts/pages';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||
|
|
@ -9,12 +10,19 @@ import DynamicT from '@/ds-components/DynamicT';
|
|||
import InlineNotification from '@/ds-components/InlineNotification';
|
||||
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 { parseExceededQuotaLimitError } from '@/utils/subscription';
|
||||
import {
|
||||
parseExceededQuotaLimitError,
|
||||
parseExceededSkuQuotaLimitError,
|
||||
} from '@/utils/subscription';
|
||||
|
||||
type Props = {
|
||||
/** @deprecated No need to pass in this argument in new pricing model */
|
||||
readonly activeUsers: number;
|
||||
/** @deprecated No need to pass in this argument in new pricing model */
|
||||
readonly currentPlan: SubscriptionPlan;
|
||||
readonly className?: string;
|
||||
};
|
||||
|
|
@ -23,22 +31,30 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
|
|||
const { currentTenantId } = useContext(TenantsContext);
|
||||
const { subscribe } = useSubscribe();
|
||||
const { show } = useConfirmModal();
|
||||
const { subscriptionPlans } = useContext(SubscriptionDataContext);
|
||||
const { subscriptionPlans, logtoSkus, currentSubscriptionQuota, currentSubscriptionUsage } =
|
||||
useContext(SubscriptionDataContext);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const proPlan = useMemo(
|
||||
() => subscriptionPlans.find(({ id }) => id === ReservedPlanId.Pro),
|
||||
[subscriptionPlans]
|
||||
);
|
||||
const proSku = useMemo(() => logtoSkus.find(({ id }) => id === ReservedPlanId.Pro), [logtoSkus]);
|
||||
|
||||
const {
|
||||
quota: { mauLimit },
|
||||
quota: { mauLimit: oldPricingModelMauLimit },
|
||||
} = currentPlan;
|
||||
|
||||
// Should be safe to access `mauLimit` here since we have excluded the case where `isDevFeaturesEnabled` is `true` but `currentSubscriptionQuota` is `null` in the above condition.
|
||||
const mauLimit = isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.mauLimit
|
||||
: oldPricingModelMauLimit;
|
||||
|
||||
if (
|
||||
mauLimit === null || // Unlimited
|
||||
activeUsers < mauLimit ||
|
||||
!proPlan
|
||||
(isDevFeaturesEnabled ? currentSubscriptionUsage.mauLimit : activeUsers) < mauLimit ||
|
||||
!proPlan ||
|
||||
!proSku
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -53,6 +69,7 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
|
|||
try {
|
||||
setIsLoading(true);
|
||||
await subscribe({
|
||||
skuId: proSku.id,
|
||||
planId: proPlan.id,
|
||||
tenantId: currentTenantId,
|
||||
callbackPage: subscriptionPage,
|
||||
|
|
@ -60,6 +77,27 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
|
|||
setIsLoading(false);
|
||||
} catch (error: unknown) {
|
||||
setIsLoading(false);
|
||||
|
||||
if (isDevFeaturesEnabled) {
|
||||
const [result, exceededSkuQuotaKeys] = await parseExceededSkuQuotaLimitError(error);
|
||||
|
||||
if (result) {
|
||||
await show({
|
||||
ModalContent: () => (
|
||||
<NotEligibleSwitchSkuModalContent
|
||||
targetSku={proSku}
|
||||
exceededSkuQuotaKeys={exceededSkuQuotaKeys}
|
||||
/>
|
||||
),
|
||||
title: 'subscription.not_eligible_modal.upgrade_title',
|
||||
confirmButtonText: 'general.got_it',
|
||||
confirmButtonType: 'primary',
|
||||
isCancelButtonVisible: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const [result, exceededQuotaKeys] = await parseExceededQuotaLimitError(error);
|
||||
|
||||
if (result) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { cond } from '@silverhand/essentials';
|
||||
import { useContext } from 'react';
|
||||
|
||||
import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router';
|
||||
import BillInfo from '@/components/BillInfo';
|
||||
|
|
@ -7,41 +8,54 @@ import FormCard from '@/components/FormCard';
|
|||
import PlanDescription from '@/components/PlanDescription';
|
||||
import PlanName from '@/components/PlanName';
|
||||
import PlanUsage from '@/components/PlanUsage';
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import FormField from '@/ds-components/FormField';
|
||||
import { type SubscriptionPlan } from '@/types/subscriptions';
|
||||
import { hasSurpassedQuotaLimit } from '@/utils/quota';
|
||||
import { hasSurpassedQuotaLimit, hasSurpassedSubscriptionQuotaLimit } from '@/utils/quota';
|
||||
|
||||
import MauLimitExceedNotification from './MauLimitExceededNotification';
|
||||
import PaymentOverdueNotification from './PaymentOverdueNotification';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
/** @deprecated */
|
||||
readonly subscription: Subscription;
|
||||
/** @deprecated */
|
||||
readonly subscriptionPlan: SubscriptionPlan;
|
||||
/** @deprecated */
|
||||
readonly subscriptionUsage: SubscriptionUsage;
|
||||
};
|
||||
|
||||
function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) {
|
||||
const { currentSku, currentSubscriptionUsage, currentSubscriptionQuota } =
|
||||
useContext(SubscriptionDataContext);
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
quota: { tokenLimit },
|
||||
} = subscriptionPlan;
|
||||
|
||||
const hasTokenSurpassedLimit = hasSurpassedQuotaLimit({
|
||||
quotaKey: 'tokenLimit',
|
||||
usage: subscriptionUsage.tokenUsage,
|
||||
plan: subscriptionPlan,
|
||||
});
|
||||
const hasTokenSurpassedLimit = isDevFeaturesEnabled
|
||||
? hasSurpassedSubscriptionQuotaLimit({
|
||||
quotaKey: 'tokenLimit',
|
||||
usage: currentSubscriptionUsage.tokenLimit,
|
||||
quota: currentSubscriptionQuota,
|
||||
})
|
||||
: hasSurpassedQuotaLimit({
|
||||
quotaKey: 'tokenLimit',
|
||||
usage: subscriptionUsage.tokenUsage,
|
||||
plan: subscriptionPlan,
|
||||
});
|
||||
|
||||
return (
|
||||
<FormCard title="subscription.current_plan" description="subscription.current_plan_description">
|
||||
<div className={styles.planInfo}>
|
||||
<div className={styles.name}>
|
||||
<PlanName name={name} />
|
||||
<PlanName skuId={currentSku.id} name={name} />
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
<PlanDescription planId={id} />
|
||||
<PlanDescription skuId={currentSku.id} planId={id} />
|
||||
</div>
|
||||
</div>
|
||||
<FormField title="subscription.plan_usage">
|
||||
|
|
@ -52,6 +66,7 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
|
|||
/>
|
||||
</FormField>
|
||||
<FormField title="subscription.next_bill">
|
||||
{/* TODO: update the value once https://github.com/logto-io/cloud/pull/830 is merged. */}
|
||||
<BillInfo
|
||||
cost={subscriptionUsage.cost}
|
||||
isManagePaymentVisible={Boolean(subscriptionUsage.cost)}
|
||||
|
|
@ -67,7 +82,13 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
|
|||
quotaItemPhraseKey="tokens"
|
||||
checkedFlagKey="token"
|
||||
className={styles.notification}
|
||||
quotaLimit={cond(typeof tokenLimit === 'number' && tokenLimit)}
|
||||
quotaLimit={
|
||||
cond(
|
||||
isDevFeaturesEnabled &&
|
||||
typeof currentSubscriptionQuota.tokenLimit === 'number' &&
|
||||
currentSubscriptionQuota.tokenLimit
|
||||
) ?? cond(typeof tokenLimit === 'number' && tokenLimit)
|
||||
}
|
||||
/>
|
||||
<PaymentOverdueNotification className={styles.notification} />
|
||||
</FormCard>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { cond } from '@silverhand/essentials';
|
||||
|
||||
import {
|
||||
skuQuotaItemUnlimitedPhrasesMap,
|
||||
skuQuotaItemPhrasesMap,
|
||||
skuQuotaItemLimitedPhrasesMap,
|
||||
} from '@/consts/quota-item-phrases';
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
import { type LogtoSkuQuota } from '@/types/skus';
|
||||
|
||||
const quotaItemPhraseKeyPrefix = 'subscription.quota_item';
|
||||
|
||||
type Props = {
|
||||
readonly skuQuotaKey: keyof LogtoSkuQuota;
|
||||
readonly skuQuotaValue: LogtoSkuQuota[keyof LogtoSkuQuota];
|
||||
};
|
||||
|
||||
function SkuQuotaItemPhrase({ skuQuotaKey, skuQuotaValue }: Props) {
|
||||
const isUnlimited = skuQuotaValue === null;
|
||||
const isNotCapable = skuQuotaValue === 0 || skuQuotaValue === false;
|
||||
const isLimited = Boolean(skuQuotaValue);
|
||||
|
||||
const phraseKey =
|
||||
cond(isUnlimited && skuQuotaItemUnlimitedPhrasesMap[skuQuotaKey]) ??
|
||||
cond(isNotCapable && skuQuotaItemPhrasesMap[skuQuotaKey]) ??
|
||||
cond(isLimited && skuQuotaItemLimitedPhrasesMap[skuQuotaKey]);
|
||||
|
||||
if (!phraseKey) {
|
||||
// Should not happen
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<DynamicT
|
||||
forKey={`${quotaItemPhraseKeyPrefix}.${phraseKey}`}
|
||||
interpolation={cond(
|
||||
isLimited && typeof skuQuotaValue === 'number' && { count: skuQuotaValue }
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkuQuotaItemPhrase;
|
||||
|
|
@ -3,9 +3,11 @@ import classNames from 'classnames';
|
|||
|
||||
import DescendArrow from '@/assets/icons/descend-arrow.svg?react';
|
||||
import Failed from '@/assets/icons/failed.svg?react';
|
||||
import { type LogtoSkuQuota } from '@/types/skus';
|
||||
import { type SubscriptionPlanQuota } from '@/types/subscriptions';
|
||||
|
||||
import QuotaItemPhrase from './QuotaItemPhrase';
|
||||
import SkuQuotaItemPhrase from './SkuQuotaItemPhrase';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -14,6 +16,7 @@ type Props = {
|
|||
readonly hasStatusIcon?: boolean;
|
||||
};
|
||||
|
||||
/** @deprecated */
|
||||
function DiffQuotaItem({ quotaKey, quotaValue, hasStatusIcon }: Props) {
|
||||
const isNotCapable = quotaValue === 0 || quotaValue === false;
|
||||
const DowngradeStatusIcon = isNotCapable ? Failed : DescendArrow;
|
||||
|
|
@ -40,4 +43,40 @@ function DiffQuotaItem({ quotaKey, quotaValue, hasStatusIcon }: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
type DiffSkuQuotaItemProps = {
|
||||
readonly quotaKey: keyof LogtoSkuQuota;
|
||||
readonly quotaValue: LogtoSkuQuota[keyof LogtoSkuQuota];
|
||||
readonly hasStatusIcon?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Almost copy/paste from the implementation above, but with different types and constants to fit the use cases of new pricing model.
|
||||
* Old one will be deprecated soon.
|
||||
*/
|
||||
export function DiffSkuQuotaItem({ quotaKey, quotaValue, hasStatusIcon }: DiffSkuQuotaItemProps) {
|
||||
const isNotCapable = quotaValue === 0 || quotaValue === false;
|
||||
const DowngradeStatusIcon = isNotCapable ? Failed : DescendArrow;
|
||||
|
||||
return (
|
||||
<li className={classNames(styles.quotaListItem, hasStatusIcon && styles.withIcon)}>
|
||||
{/**
|
||||
* Add a `span` as a wrapper to apply the flex layout to the content.
|
||||
* If we apply the flex layout to the `li` directly, the `li` circle bullet will disappear.
|
||||
*/}
|
||||
<span className={styles.content}>
|
||||
{cond(
|
||||
hasStatusIcon && (
|
||||
<DowngradeStatusIcon
|
||||
className={classNames(styles.icon, isNotCapable && styles.notCapable)}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<span className={cond(isNotCapable && styles.lineThrough)}>
|
||||
<SkuQuotaItemPhrase skuQuotaKey={quotaKey} skuQuotaValue={quotaValue} />
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default DiffQuotaItem;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,39 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { type LogtoSkuQuotaEntries } from '@/types/skus';
|
||||
import { type SubscriptionPlanQuotaEntries } from '@/types/subscriptions';
|
||||
|
||||
import DiffQuotaItem from './DiffQuotaItem';
|
||||
import DiffQuotaItem, { DiffSkuQuotaItem } from './DiffQuotaItem';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
readonly entries: SubscriptionPlanQuotaEntries;
|
||||
readonly skuQuotaEntries: LogtoSkuQuotaEntries;
|
||||
readonly isDowngradeTargetPlan: boolean;
|
||||
readonly className?: string;
|
||||
};
|
||||
|
||||
function PlanQuotaList({ entries, isDowngradeTargetPlan, className }: Props) {
|
||||
function PlanQuotaList({ entries, skuQuotaEntries, isDowngradeTargetPlan, className }: Props) {
|
||||
return (
|
||||
<ul className={classNames(styles.planQuotaList, className)}>
|
||||
{entries.map(([quotaKey, quotaValue]) => (
|
||||
<DiffQuotaItem
|
||||
key={quotaKey}
|
||||
quotaKey={quotaKey}
|
||||
quotaValue={quotaValue}
|
||||
hasStatusIcon={isDowngradeTargetPlan}
|
||||
/>
|
||||
))}
|
||||
{isDevFeaturesEnabled
|
||||
? skuQuotaEntries.map(([quotaKey, quotaValue]) => (
|
||||
<DiffSkuQuotaItem
|
||||
key={quotaKey}
|
||||
quotaKey={quotaKey}
|
||||
quotaValue={quotaValue}
|
||||
hasStatusIcon={isDowngradeTargetPlan}
|
||||
/>
|
||||
))
|
||||
: entries.map(([quotaKey, quotaValue]) => (
|
||||
<DiffQuotaItem
|
||||
key={quotaKey}
|
||||
quotaKey={quotaKey}
|
||||
quotaValue={quotaValue}
|
||||
hasStatusIcon={isDowngradeTargetPlan}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@ import { useMemo } from 'react';
|
|||
import { Trans } from 'react-i18next';
|
||||
|
||||
import PlanName from '@/components/PlanName';
|
||||
import { planQuotaItemOrder } from '@/consts/plan-quotas';
|
||||
import { planQuotaItemOrder, skuQuotaItemOrder } from '@/consts/plan-quotas';
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
import { type LogtoSkuQuota, type LogtoSkuQuotaEntries } from '@/types/skus';
|
||||
import {
|
||||
type SubscriptionPlanQuotaEntries,
|
||||
type SubscriptionPlanQuota,
|
||||
|
|
@ -16,10 +17,16 @@ import styles from './index.module.scss';
|
|||
type Props = {
|
||||
readonly planName: string;
|
||||
readonly quotaDiff: Partial<SubscriptionPlanQuota>;
|
||||
readonly skuQuotaDiff: Partial<LogtoSkuQuota>;
|
||||
readonly isDowngradeTargetPlan?: boolean;
|
||||
};
|
||||
|
||||
function PlanQuotaDiffCard({ planName, quotaDiff, isDowngradeTargetPlan = false }: Props) {
|
||||
function PlanQuotaDiffCard({
|
||||
planName,
|
||||
quotaDiff,
|
||||
skuQuotaDiff,
|
||||
isDowngradeTargetPlan = false,
|
||||
}: Props) {
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
const sortedEntries = useMemo(
|
||||
() =>
|
||||
|
|
@ -30,6 +37,16 @@ function PlanQuotaDiffCard({ planName, quotaDiff, isDowngradeTargetPlan = false
|
|||
),
|
||||
[quotaDiff]
|
||||
) as SubscriptionPlanQuotaEntries;
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
const sortedSkuQuotaEntries = useMemo(
|
||||
() =>
|
||||
Object.entries(skuQuotaDiff)
|
||||
.slice()
|
||||
.sort(([preQuotaKey], [nextQuotaKey]) =>
|
||||
sortBy(skuQuotaItemOrder)(preQuotaKey, nextQuotaKey)
|
||||
),
|
||||
[skuQuotaDiff]
|
||||
) as LogtoSkuQuotaEntries;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
|
|
@ -44,7 +61,11 @@ function PlanQuotaDiffCard({ planName, quotaDiff, isDowngradeTargetPlan = false
|
|||
/>
|
||||
</Trans>
|
||||
</div>
|
||||
<PlanQuotaList entries={sortedEntries} isDowngradeTargetPlan={isDowngradeTargetPlan} />
|
||||
<PlanQuotaList
|
||||
entries={sortedEntries}
|
||||
skuQuotaEntries={sortedSkuQuotaEntries}
|
||||
isDowngradeTargetPlan={isDowngradeTargetPlan}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<LogtoSkuQuota>
|
||||
): Partial<LogtoSkuQuota> => {
|
||||
// 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 (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.description}>
|
||||
<Trans
|
||||
components={{
|
||||
targetName: <PlanName name={targetPlanName} />,
|
||||
currentName: <PlanName name={currentPlanName} />,
|
||||
targetName: <PlanName skuId={targetSku.id} name={targetPlanName} />,
|
||||
currentName: <PlanName skuId={currentSku.id} name={currentPlanName} />,
|
||||
}}
|
||||
>
|
||||
{t('subscription.downgrade_modal.description')}
|
||||
</Trans>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<PlanQuotaDiffCard planName={currentPlanName} quotaDiff={currentQuotaDiff} />
|
||||
<PlanQuotaDiffCard
|
||||
planName={currentPlanName}
|
||||
quotaDiff={currentQuotaDiff}
|
||||
skuQuotaDiff={currentSkuQuotaDiff}
|
||||
/>
|
||||
<PlanQuotaDiffCard
|
||||
isDowngradeTargetPlan
|
||||
planName={targetPlanName}
|
||||
quotaDiff={targetQuotaDiff}
|
||||
skuQuotaDiff={targetSkuQuotaDiff}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<void>;
|
||||
};
|
||||
|
||||
|
|
@ -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<string>();
|
||||
|
||||
// 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: () => (
|
||||
<DowngradeConfirmModalContent currentPlan={currentPlan} targetPlan={targetPlan} />
|
||||
<DowngradeConfirmModalContent
|
||||
currentPlan={currentPlan}
|
||||
targetPlan={targetPlan}
|
||||
currentSku={currentSku}
|
||||
targetSku={targetSku}
|
||||
/>
|
||||
),
|
||||
title: 'subscription.downgrade_modal.title',
|
||||
confirmButtonText: 'subscription.downgrade_modal.downgrade',
|
||||
|
|
@ -69,7 +91,7 @@ function SwitchPlanActionBar({
|
|||
await cancelSubscription(currentTenantId);
|
||||
await onSubscriptionUpdated();
|
||||
toast.success(
|
||||
<Trans components={{ name: <PlanName name={targetPlan.name} /> }}>
|
||||
<Trans components={{ name: <PlanName skuId={targetSku.id} name={targetPlan.name} /> }}>
|
||||
{t('downgrade_success')}
|
||||
</Trans>
|
||||
);
|
||||
|
|
@ -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: () => (
|
||||
<NotEligibleSwitchSkuModalContent
|
||||
targetSku={targetSku}
|
||||
isDowngrade={isDowngrade}
|
||||
exceededSkuQuotaKeys={exceededSkuQuotaKeys}
|
||||
/>
|
||||
),
|
||||
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 (
|
||||
<div className={styles.container}>
|
||||
<Spacer />
|
||||
{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 (
|
||||
<div key={planId}>
|
||||
<Button
|
||||
title={
|
||||
isCurrentPlan
|
||||
? 'subscription.current'
|
||||
: isDowngrade
|
||||
? 'subscription.downgrade'
|
||||
: 'subscription.upgrade'
|
||||
}
|
||||
type={isDowngrade ? 'default' : 'primary'}
|
||||
disabled={isCurrentPlan}
|
||||
isLoading={!isCurrentPlan && currentLoadingPlanId === planId}
|
||||
onClick={() => {
|
||||
void handleSubscribe(planId, isDowngrade);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<div key={skuId}>
|
||||
<Button
|
||||
title={
|
||||
isCurrentSku
|
||||
? 'subscription.current'
|
||||
: isDowngrade
|
||||
? 'subscription.downgrade'
|
||||
: 'subscription.upgrade'
|
||||
}
|
||||
type={isDowngrade ? 'default' : 'primary'}
|
||||
disabled={isCurrentSku}
|
||||
isLoading={!isCurrentSku && currentLoadingPlanId === skuId}
|
||||
onClick={() => {
|
||||
void handleSubscribe(skuId, isDowngrade);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: // TODO remove this branch once new pricing model is ready.
|
||||
subscriptionPlans.map(({ id: planId }) => {
|
||||
const isCurrentPlan = currentSubscriptionPlanId === planId;
|
||||
const isDowngrade = isDowngradePlan(currentSubscriptionPlanId, planId);
|
||||
|
||||
return (
|
||||
<div key={planId}>
|
||||
<Button
|
||||
title={
|
||||
isCurrentPlan
|
||||
? 'subscription.current'
|
||||
: isDowngrade
|
||||
? 'subscription.downgrade'
|
||||
: 'subscription.upgrade'
|
||||
}
|
||||
type={isDowngrade ? 'default' : 'primary'}
|
||||
disabled={isCurrentPlan}
|
||||
isLoading={!isCurrentPlan && currentLoadingPlanId === planId}
|
||||
onClick={() => {
|
||||
void handleSubscribe(planId, isDowngrade);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div>
|
||||
<a href={contactEmailLink} className={styles.buttonLink} rel="noopener">
|
||||
<Button title="general.contact_us_action" type="primary" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import PageMeta from '@/components/PageMeta';
|
|||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||
import useSubscriptionUsage from '@/hooks/use-subscription-usage';
|
||||
import { pickupFeaturedPlans } from '@/utils/subscription';
|
||||
import { pickupFeaturedLogtoSkus, pickupFeaturedPlans } from '@/utils/subscription';
|
||||
|
||||
import Skeleton from '../components/Skeleton';
|
||||
|
||||
|
|
@ -15,8 +15,14 @@ import styles from './index.module.scss';
|
|||
|
||||
function Subscription() {
|
||||
const { currentTenantId } = useContext(TenantsContext);
|
||||
const { subscriptionPlans, currentPlan, currentSubscription, onCurrentSubscriptionUpdated } =
|
||||
useContext(SubscriptionDataContext);
|
||||
const {
|
||||
subscriptionPlans,
|
||||
currentPlan,
|
||||
logtoSkus,
|
||||
currentSku,
|
||||
currentSubscription,
|
||||
onCurrentSubscriptionUpdated,
|
||||
} = useContext(SubscriptionDataContext);
|
||||
|
||||
const {
|
||||
data: subscriptionUsage,
|
||||
|
|
@ -25,6 +31,7 @@ function Subscription() {
|
|||
} = useSubscriptionUsage(currentTenantId);
|
||||
|
||||
const reservedPlans = pickupFeaturedPlans(subscriptionPlans);
|
||||
const reservedSkus = pickupFeaturedLogtoSkus(logtoSkus);
|
||||
|
||||
if (isLoading) {
|
||||
return <Skeleton />;
|
||||
|
|
@ -46,6 +53,8 @@ function Subscription() {
|
|||
<SwitchPlanActionBar
|
||||
currentSubscriptionPlanId={currentSubscription.planId}
|
||||
subscriptionPlans={reservedPlans}
|
||||
currentSkuId={currentSku.id}
|
||||
logtoSkus={reservedSkus}
|
||||
onSubscriptionUpdated={async () => {
|
||||
/**
|
||||
* The upcoming billing info is calculated based on the current subscription usage,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
|
|||
import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
||||
import QuotaGuardFooter from '@/components/QuotaGuardFooter';
|
||||
import { contactEmailLink } from '@/consts';
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import Button, { LinkButton } from '@/ds-components/Button';
|
||||
|
||||
|
|
@ -21,12 +22,15 @@ type Props = {
|
|||
function Footer({ newInvitationCount = 0, isLoading, onSubmit }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' });
|
||||
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSku } = useContext(SubscriptionDataContext);
|
||||
const { id: planId, quota } = currentPlan;
|
||||
|
||||
const { hasTenantMembersReachedLimit, limit, usage } = useTenantMembersUsage();
|
||||
|
||||
if (planId === ReservedPlanId.Free && hasTenantMembersReachedLimit) {
|
||||
if (
|
||||
(isDevFeaturesEnabled ? currentSku.id : planId) === ReservedPlanId.Free &&
|
||||
hasTenantMembersReachedLimit
|
||||
) {
|
||||
return (
|
||||
<QuotaGuardFooter>
|
||||
<Trans
|
||||
|
|
@ -41,7 +45,7 @@ function Footer({ newInvitationCount = 0, isLoading, onSubmit }: Props) {
|
|||
}
|
||||
|
||||
if (
|
||||
planId === ReservedPlanId.Development &&
|
||||
(isDevFeaturesEnabled ? currentSku.id : planId) === ReservedPlanId.Development &&
|
||||
(hasTenantMembersReachedLimit || usage + newInvitationCount > limit)
|
||||
) {
|
||||
// Display a custom "Contact us" footer instead of asking for upgrade
|
||||
|
|
|
|||
|
|
@ -4,14 +4,21 @@ import useSWR from 'swr';
|
|||
|
||||
import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
|
||||
import { type TenantInvitationResponse, type TenantMemberResponse } from '@/cloud/types/router';
|
||||
import { isDevFeaturesEnabled } from '@/consts/env';
|
||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||
import { type RequestError } from '@/hooks/use-api';
|
||||
import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
|
||||
import { hasReachedQuotaLimit, hasSurpassedQuotaLimit } from '@/utils/quota';
|
||||
import {
|
||||
hasReachedQuotaLimit,
|
||||
hasReachedSubscriptionQuotaLimit,
|
||||
hasSurpassedQuotaLimit,
|
||||
hasSurpassedSubscriptionQuotaLimit,
|
||||
} from '@/utils/quota';
|
||||
|
||||
const useTenantMembersUsage = () => {
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSubscriptionUsage, currentSubscriptionQuota } =
|
||||
useContext(SubscriptionDataContext);
|
||||
const { currentTenantId } = useContext(TenantsContext);
|
||||
const {
|
||||
access: { canInviteMember },
|
||||
|
|
@ -36,34 +43,52 @@ const useTenantMembersUsage = () => {
|
|||
);
|
||||
|
||||
const usage = useMemo(() => {
|
||||
if (isDevFeaturesEnabled) {
|
||||
return currentSubscriptionUsage.tenantMembersLimit;
|
||||
}
|
||||
return (members?.length ?? 0) + (pendingInvitations?.length ?? 0);
|
||||
}, [members?.length, pendingInvitations?.length]);
|
||||
}, [members?.length, pendingInvitations?.length, currentSubscriptionUsage.tenantMembersLimit]);
|
||||
|
||||
const hasTenantMembersReachedLimit = useMemo(
|
||||
() =>
|
||||
hasReachedQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
plan: currentPlan,
|
||||
usage,
|
||||
}),
|
||||
[currentPlan, usage]
|
||||
isDevFeaturesEnabled
|
||||
? hasReachedSubscriptionQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
quota: currentSubscriptionQuota,
|
||||
usage: currentSubscriptionUsage.tenantMembersLimit,
|
||||
})
|
||||
: hasReachedQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
plan: currentPlan,
|
||||
usage,
|
||||
}),
|
||||
[currentPlan, usage, currentSubscriptionQuota, currentSubscriptionUsage.tenantMembersLimit]
|
||||
);
|
||||
|
||||
const hasTenantMembersSurpassedLimit = useMemo(
|
||||
() =>
|
||||
hasSurpassedQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
plan: currentPlan,
|
||||
usage,
|
||||
}),
|
||||
[currentPlan, usage]
|
||||
isDevFeaturesEnabled
|
||||
? hasSurpassedSubscriptionQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
quota: currentSubscriptionQuota,
|
||||
usage: currentSubscriptionUsage.tenantMembersLimit,
|
||||
})
|
||||
: hasSurpassedQuotaLimit({
|
||||
quotaKey: 'tenantMembersLimit',
|
||||
plan: currentPlan,
|
||||
usage,
|
||||
}),
|
||||
[currentPlan, usage, currentSubscriptionQuota, currentSubscriptionUsage.tenantMembersLimit]
|
||||
);
|
||||
|
||||
return {
|
||||
hasTenantMembersReachedLimit,
|
||||
hasTenantMembersSurpassedLimit,
|
||||
usage,
|
||||
limit: currentPlan.quota.tenantMembersLimit ?? Number.POSITIVE_INFINITY,
|
||||
limit:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionQuota.tenantMembersLimit
|
||||
: currentPlan.quota.tenantMembersLimit) ?? Number.POSITIVE_INFINITY,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,18 @@ import { conditional } from '@silverhand/essentials';
|
|||
import { useMemo } from 'react';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { type LogtoSkuResponse } from '@/cloud/types/router';
|
||||
import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
|
||||
import PlanName from '@/components/PlanName';
|
||||
import { planQuotaItemOrder } from '@/consts/plan-quotas';
|
||||
import { planQuotaItemOrder, skuQuotaItemOrder } from '@/consts/plan-quotas';
|
||||
import {
|
||||
quotaItemLimitedPhrasesMap,
|
||||
quotaItemNotEligiblePhrasesMap,
|
||||
skuQuotaItemLimitedPhrasesMap,
|
||||
skuQuotaItemNotEligiblePhrasesMap,
|
||||
} from '@/consts/quota-item-phrases';
|
||||
import DynamicT from '@/ds-components/DynamicT';
|
||||
import { type LogtoSkuQuota, type LogtoSkuQuotaEntries } from '@/types/skus';
|
||||
import {
|
||||
type SubscriptionPlanQuotaEntries,
|
||||
type SubscriptionPlan,
|
||||
|
|
@ -25,12 +29,18 @@ const excludedQuotaKeys = new Set<keyof SubscriptionPlanQuota>([
|
|||
'ticketSupportResponseTime',
|
||||
]);
|
||||
|
||||
const excludedSkuQuotaKeys = new Set<keyof LogtoSkuQuota>([
|
||||
'auditLogsRetentionDays',
|
||||
'ticketSupportResponseTime',
|
||||
]);
|
||||
|
||||
type Props = {
|
||||
readonly targetPlan: SubscriptionPlan;
|
||||
readonly exceededQuotaKeys: Array<keyof SubscriptionPlanQuota>;
|
||||
readonly isDowngrade?: boolean;
|
||||
};
|
||||
|
||||
/** @deprecated */
|
||||
function NotEligibleSwitchPlanModalContent({
|
||||
targetPlan,
|
||||
exceededQuotaKeys,
|
||||
|
|
@ -112,4 +122,95 @@ function NotEligibleSwitchPlanModalContent({
|
|||
);
|
||||
}
|
||||
|
||||
type SkuProps = {
|
||||
readonly targetSku: LogtoSkuResponse;
|
||||
readonly exceededSkuQuotaKeys: Array<keyof LogtoSkuQuota>;
|
||||
readonly isDowngrade?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Almost copy/paste from the implementation above, but with different types and constants to fit the use cases of new pricing model.
|
||||
* Old one will be deprecated soon.
|
||||
*/
|
||||
export function NotEligibleSwitchSkuModalContent({
|
||||
targetSku,
|
||||
exceededSkuQuotaKeys,
|
||||
isDowngrade = false,
|
||||
}: SkuProps) {
|
||||
const { t } = useTranslation(undefined, {
|
||||
keyPrefix: 'admin_console.subscription.not_eligible_modal',
|
||||
});
|
||||
|
||||
const { id, name, quota } = targetSku;
|
||||
|
||||
const orderedEntries = useMemo(() => {
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
const entries = Object.entries(quota) as LogtoSkuQuotaEntries;
|
||||
return entries
|
||||
.filter(([quotaKey]) => exceededSkuQuotaKeys.includes(quotaKey))
|
||||
.slice()
|
||||
.sort(([preQuotaKey], [nextQuotaKey]) =>
|
||||
sortBy(skuQuotaItemOrder)(preQuotaKey, nextQuotaKey)
|
||||
);
|
||||
}, [quota, exceededSkuQuotaKeys]);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.description}>
|
||||
<Trans
|
||||
components={{
|
||||
name: <PlanName skuId={id} name={name ?? id} />,
|
||||
}}
|
||||
>
|
||||
{t(isDowngrade ? 'downgrade_description' : 'upgrade_description')}
|
||||
</Trans>
|
||||
{!isDowngrade && id === ReservedPlanId.Pro && t('upgrade_pro_tip')}
|
||||
</div>
|
||||
<ul className={styles.list}>
|
||||
{orderedEntries.map(([quotaKey, quotaValue]) => {
|
||||
if (
|
||||
excludedSkuQuotaKeys.has(quotaKey) ||
|
||||
quotaValue === null || // Unlimited items
|
||||
quotaValue === true // Eligible items
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={quotaKey}>
|
||||
{quotaValue ? (
|
||||
<Trans
|
||||
components={{
|
||||
item: (
|
||||
<DynamicT
|
||||
forKey={`subscription.quota_item.${skuQuotaItemLimitedPhrasesMap[quotaKey]}`}
|
||||
interpolation={conditional(
|
||||
typeof quotaValue === 'number' && { count: quotaValue }
|
||||
)}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{t('a_maximum_of')}
|
||||
</Trans>
|
||||
) : (
|
||||
<DynamicT
|
||||
forKey={`subscription.quota_item.${skuQuotaItemNotEligiblePhrasesMap[quotaKey]}`}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
}}
|
||||
>
|
||||
{t(isDowngrade ? 'downgrade_help_tip' : 'upgrade_help_tip')}
|
||||
</Trans>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotEligibleSwitchPlanModalContent;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,13 @@ import BasicWebhookForm, { type BasicWebhookFormType } from '@/components/BasicW
|
|||
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 ModalLayout from '@/ds-components/ModalLayout';
|
||||
import useApi from '@/hooks/use-api';
|
||||
import { trySubmitSafe } from '@/utils/form';
|
||||
import { hasReachedQuotaLimit } from '@/utils/quota';
|
||||
import { hasReachedQuotaLimit, hasReachedSubscriptionQuotaLimit } from '@/utils/quota';
|
||||
|
||||
type Props = {
|
||||
readonly totalWebhookCount: number;
|
||||
|
|
@ -27,14 +28,21 @@ type CreateHookPayload = Pick<CreateHook, 'name'> & {
|
|||
};
|
||||
|
||||
function CreateForm({ totalWebhookCount, onClose }: Props) {
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { currentPlan, currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
|
||||
useContext(SubscriptionDataContext);
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
||||
const shouldBlockCreation = hasReachedQuotaLimit({
|
||||
quotaKey: 'hooksLimit',
|
||||
usage: totalWebhookCount,
|
||||
plan: currentPlan,
|
||||
});
|
||||
const shouldBlockCreation = isDevFeaturesEnabled
|
||||
? hasReachedSubscriptionQuotaLimit({
|
||||
quotaKey: 'hooksLimit',
|
||||
usage: currentSubscriptionUsage.hooksLimit,
|
||||
quota: currentSubscriptionQuota,
|
||||
})
|
||||
: hasReachedQuotaLimit({
|
||||
quotaKey: 'hooksLimit',
|
||||
usage: totalWebhookCount,
|
||||
plan: currentPlan,
|
||||
});
|
||||
|
||||
const formMethods = useForm<BasicWebhookFormType>();
|
||||
const {
|
||||
|
|
@ -70,10 +78,15 @@ function CreateForm({ totalWebhookCount, onClose }: Props) {
|
|||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
planName: <PlanName name={currentPlan.name} />,
|
||||
planName: <PlanName skuId={currentSku.id} name={currentPlan.name} />,
|
||||
}}
|
||||
>
|
||||
{t('upsell.paywall.hooks', { count: currentPlan.quota.hooksLimit ?? 0 })}
|
||||
{t('upsell.paywall.hooks', {
|
||||
count:
|
||||
(isDevFeaturesEnabled
|
||||
? currentSubscriptionUsage.hooksLimit
|
||||
: currentPlan.quota.hooksLimit) ?? 0,
|
||||
})}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
) : (
|
||||
|
|
|
|||
14
packages/console/src/types/skus.ts
Normal file
14
packages/console/src/types/skus.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { type NewSubscriptionQuota } from '@/cloud/types/router';
|
||||
|
||||
// TODO: This is a copy from `@logto/cloud-models`, make a SSoT for this later
|
||||
export enum LogtoSkuType {
|
||||
Basic = 'Basic',
|
||||
AddOn = 'AddOn',
|
||||
}
|
||||
|
||||
export type LogtoSkuQuota = NewSubscriptionQuota & {
|
||||
// Add ticket support quota item to the plan since it will be compared in the downgrade plan notification modal.
|
||||
ticketSupportResponseTime: number;
|
||||
};
|
||||
|
||||
export type LogtoSkuQuotaEntries = Array<[keyof LogtoSkuQuota, LogtoSkuQuota[keyof LogtoSkuQuota]]>;
|
||||
|
|
@ -4,6 +4,7 @@ import { type InvoicesResponse, type SubscriptionPlanResponse } from '@/cloud/ty
|
|||
|
||||
export enum ReservedPlanName {
|
||||
Free = 'Free',
|
||||
/** @deprecated */
|
||||
Hobby = 'Hobby',
|
||||
Pro = 'Pro',
|
||||
Enterprise = 'Enterprise',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { type NewSubscriptionQuota } from '@/cloud/types/router';
|
||||
import { isCloud } from '@/consts/env';
|
||||
import { type SubscriptionPlan, type SubscriptionPlanQuota } from '@/types/subscriptions';
|
||||
|
||||
/** @deprecated */
|
||||
type UsageOptions = {
|
||||
quotaKey: keyof SubscriptionPlanQuota;
|
||||
usage: number;
|
||||
plan: SubscriptionPlan;
|
||||
};
|
||||
|
||||
/** @deprecated */
|
||||
const isUsageWithInLimit = ({ quotaKey, usage, plan }: UsageOptions, inclusive = true) => {
|
||||
// No limitations for OSS version
|
||||
if (!isCloud) {
|
||||
|
|
@ -27,6 +30,45 @@ const isUsageWithInLimit = ({ quotaKey, usage, plan }: UsageOptions, inclusive =
|
|||
return inclusive ? usage <= quotaValue : usage < quotaValue;
|
||||
};
|
||||
|
||||
/** @deprecated */
|
||||
export const hasSurpassedQuotaLimit = (options: UsageOptions) => !isUsageWithInLimit(options);
|
||||
|
||||
/** @deprecated */
|
||||
export const hasReachedQuotaLimit = (options: UsageOptions) => !isUsageWithInLimit(options, false);
|
||||
|
||||
/* === For new pricing model === */
|
||||
type SubscriptionUsageOptions = {
|
||||
quotaKey: keyof NewSubscriptionQuota;
|
||||
usage: number;
|
||||
quota: NewSubscriptionQuota;
|
||||
};
|
||||
|
||||
const isSubscriptionUsageWithInLimit = (
|
||||
{ quotaKey, usage, quota }: SubscriptionUsageOptions,
|
||||
inclusive = true
|
||||
) => {
|
||||
// No limitations for OSS version
|
||||
if (!isCloud) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const quotaValue = quota[quotaKey];
|
||||
|
||||
// Unlimited
|
||||
if (quotaValue === null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof quotaValue === 'boolean') {
|
||||
return quotaValue;
|
||||
}
|
||||
|
||||
return inclusive ? usage <= quotaValue : usage < quotaValue;
|
||||
};
|
||||
|
||||
export const hasSurpassedSubscriptionQuotaLimit = (options: SubscriptionUsageOptions) =>
|
||||
!isSubscriptionUsageWithInLimit(options);
|
||||
|
||||
export const hasReachedSubscriptionQuotaLimit = (options: SubscriptionUsageOptions) =>
|
||||
!isSubscriptionUsageWithInLimit(options, false);
|
||||
/* === For new pricing model === */
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ import { ResponseError } from '@withtyped/client';
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
import { tryReadResponseErrorBody } from '@/cloud/hooks/use-cloud-api';
|
||||
import { type SubscriptionPlanResponse } from '@/cloud/types/router';
|
||||
import { type LogtoSkuResponse, type SubscriptionPlanResponse } from '@/cloud/types/router';
|
||||
import { ticketSupportResponseTimeMap } from '@/consts/plan-quotas';
|
||||
import { featuredPlanIdOrder, featuredPlanIds } from '@/consts/subscriptions';
|
||||
import { type LogtoSkuQuota } from '@/types/skus';
|
||||
import { type SubscriptionPlanQuota, type SubscriptionPlan } from '@/types/subscriptions';
|
||||
|
||||
export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlanResponse) => {
|
||||
|
|
@ -23,6 +24,21 @@ export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlan
|
|||
};
|
||||
};
|
||||
|
||||
export const addSupportQuota = (logtoSkuResponse: LogtoSkuResponse) => {
|
||||
const { id, quota } = logtoSkuResponse;
|
||||
|
||||
return {
|
||||
...logtoSkuResponse,
|
||||
quota: {
|
||||
...quota,
|
||||
/**
|
||||
* Manually add this support quota item to the plan since it will be compared in the downgrade plan notification modal.
|
||||
*/
|
||||
ticketSupportResponseTime: ticketSupportResponseTimeMap[id] ?? 0, // Fallback to not supported
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const getSubscriptionPlanOrderById = (id: string) => {
|
||||
const index = featuredPlanIdOrder.indexOf(id);
|
||||
|
||||
|
|
@ -47,6 +63,8 @@ export const formatPeriod = ({ periodStart, periodEnd, displayYear }: FormatPeri
|
|||
};
|
||||
|
||||
/**
|
||||
* @deprecated Use `parseExceededSkuQuotaLimitError` instead in the future.
|
||||
*
|
||||
* Parse the error data from the server if the error is caused by exceeding the quota limit.
|
||||
* This is used to handle cases where users attempt to switch subscription plans, but the quota limit is exceeded.
|
||||
*
|
||||
|
|
@ -89,5 +107,39 @@ export const parseExceededQuotaLimitError = async (
|
|||
return [true, Object.keys(exceededQuota) as Array<keyof SubscriptionPlanQuota>];
|
||||
};
|
||||
|
||||
// Duplication of `parseExceededQuotaLimitError` with different keys.
|
||||
// `parseExceededQuotaLimitError` will be removed soon.
|
||||
export const parseExceededSkuQuotaLimitError = async (
|
||||
error: unknown
|
||||
): Promise<[false] | [true, Array<keyof LogtoSkuQuota>]> => {
|
||||
if (!(error instanceof ResponseError)) {
|
||||
return [false];
|
||||
}
|
||||
|
||||
const { message } = (await tryReadResponseErrorBody(error)) ?? {};
|
||||
|
||||
const match = message?.match(/Status exception: Exceeded quota limit\. (.+)$/);
|
||||
|
||||
if (!match) {
|
||||
return [false];
|
||||
}
|
||||
|
||||
const data = match[1];
|
||||
const exceededQuota = conditional(
|
||||
// eslint-disable-next-line no-restricted-syntax -- trust the type from the server if error message matches
|
||||
data && trySafe(() => JSON.parse(data) as Partial<LogtoSkuQuota>)
|
||||
);
|
||||
|
||||
if (!exceededQuota) {
|
||||
return [false];
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
return [true, Object.keys(exceededQuota) as Array<keyof LogtoSkuQuota>];
|
||||
};
|
||||
|
||||
export const pickupFeaturedPlans = (plans: SubscriptionPlan[]): SubscriptionPlan[] =>
|
||||
plans.filter(({ id }) => featuredPlanIds.includes(id));
|
||||
|
||||
export const pickupFeaturedLogtoSkus = (logtoSkus: LogtoSkuResponse[]): LogtoSkuResponse[] =>
|
||||
logtoSkus.filter(({ id }) => featuredPlanIds.includes(id));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue