diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx
index 52c538e6e..3a5713270 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
import { toastResponseError } from '@/cloud/hooks/use-cloud-api';
import { subscriptionPage } from '@/consts/pages';
@@ -6,8 +6,12 @@ import { ReservedPlanId } from '@/consts/subscriptions';
import { TenantsContext } from '@/contexts/TenantsProvider';
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 useSubscriptionPlans from '@/hooks/use-subscription-plans';
+import NotEligibleSwitchPlanModalContent from '@/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent';
import { type SubscriptionPlan } from '@/types/subscriptions';
+import { isExceededQuotaLimitError } from '@/utils/subscription';
type Props = {
activeUsers: number;
@@ -18,12 +22,21 @@ type Props = {
function MauLimitExceededNotification({ activeUsers, currentPlan, className }: Props) {
const { currentTenantId } = useContext(TenantsContext);
const { subscribe } = useSubscribe();
+ const { show } = useConfirmModal();
+ const { data: subscriptionPlans } = useSubscriptionPlans();
+ const proPlan = useMemo(
+ () => subscriptionPlans?.find(({ id }) => id === ReservedPlanId.pro),
+ [subscriptionPlans]
+ );
+
const {
quota: { mauLimit },
} = currentPlan;
+
if (
mauLimit === null || // Unlimited
- activeUsers < mauLimit
+ activeUsers < mauLimit ||
+ !proPlan
) {
return null;
}
@@ -36,11 +49,21 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
onClick={async () => {
try {
await subscribe({
- planId: ReservedPlanId.pro,
+ planId: proPlan.id,
tenantId: currentTenantId,
callbackPage: subscriptionPage,
});
} catch (error: unknown) {
+ if (await isExceededQuotaLimitError(error)) {
+ await show({
+ ModalContent: () => ,
+ title: 'subscription.not_eligible_modal.upgrade_title',
+ confirmButtonText: 'general.got_it',
+ confirmButtonType: 'primary',
+ });
+ return;
+ }
+
void toastResponseError(error);
}
}}
diff --git a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
index 8a62ae6b1..bf5f58144 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
@@ -1,9 +1,8 @@
-import { ResponseError } from '@withtyped/client';
import { useContext } from 'react';
import { toast } from 'react-hot-toast';
import { Trans, useTranslation } from 'react-i18next';
-import { responseErrorBodyGuard, toastResponseError } from '@/cloud/hooks/use-cloud-api';
+import { toastResponseError } from '@/cloud/hooks/use-cloud-api';
import PlanName from '@/components/PlanName';
import { contactEmailLink } from '@/consts';
import { subscriptionPage } from '@/consts/pages';
@@ -13,11 +12,11 @@ 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 { type SubscriptionPlan } from '@/types/subscriptions';
-import { isDowngradePlan } from '@/utils/subscription';
+import { isDowngradePlan, isExceededQuotaLimitError } from '@/utils/subscription';
import DowngradeConfirmModalContent from '../DowngradeConfirmModalContent';
-import NotEligibleDowngradeModalContent from '../NotEligibleDowngradeModalContent';
import * as styles from './index.module.scss';
@@ -37,64 +36,62 @@ function SwitchPlanActionBar({
const { subscribe, cancelSubscription } = useSubscribe();
const { show } = useConfirmModal();
- const handleDownGrade = async (targetPlan: SubscriptionPlan) => {
- const { id: planId, name } = targetPlan;
- try {
- if (planId === ReservedPlanId.free) {
- await cancelSubscription(currentTenantId);
- onSubscriptionUpdated();
- toast.success(
- }}>{t('downgrade_success')}
- );
- return;
- }
-
- await subscribe({
- tenantId: currentTenantId,
- planId,
- isDowngrade: true,
- callbackPage: subscriptionPage,
- });
- } catch (error: unknown) {
- /**
- * Note: this is a temporary solution to handle the case when the user tries to downgrade but the quota limit is exceeded.
- * Need a better solution to handle this case by sharing the error type between the console and cloud. - LOG-6608
- */
- if (error instanceof ResponseError) {
- const parsed = responseErrorBodyGuard.safeParse(await error.response.json());
- if (parsed.success && parsed.data.message.includes('Exceeded quota limit')) {
- await show({
- ModalContent: () => ,
- title: 'subscription.downgrade_modal.not_eligible',
- confirmButtonText: 'general.got_it',
- confirmButtonType: 'primary',
- });
- }
- return;
- }
-
- void toastResponseError(error);
- }
- };
-
- const onDowngradeClick = async (targetPlanId: string) => {
+ const handleSubscribe = async (targetPlanId: string, isDowngrade: boolean) => {
const currentPlan = subscriptionPlans.find(({ id }) => id === currentSubscriptionPlanId);
const targetPlan = subscriptionPlans.find(({ id }) => id === targetPlanId);
if (!currentPlan || !targetPlan) {
return;
}
- const [result] = await show({
- ModalContent: () => (
-
- ),
- title: 'subscription.downgrade_modal.title',
- confirmButtonText: 'subscription.downgrade_modal.downgrade',
- size: 'large',
- });
+ if (isDowngrade) {
+ const [result] = await show({
+ ModalContent: () => (
+
+ ),
+ title: 'subscription.downgrade_modal.title',
+ confirmButtonText: 'subscription.downgrade_modal.downgrade',
+ size: 'large',
+ });
- if (result) {
- await handleDownGrade(targetPlan);
+ if (!result) {
+ return;
+ }
+ }
+
+ try {
+ if (targetPlanId === ReservedPlanId.free) {
+ await cancelSubscription(currentTenantId);
+ onSubscriptionUpdated();
+ toast.success(
+ }}>
+ {t('downgrade_success')}
+
+ );
+ return;
+ }
+
+ await subscribe({
+ tenantId: currentTenantId,
+ planId: targetPlanId,
+ isDowngrade,
+ callbackPage: subscriptionPage,
+ });
+ } catch (error: unknown) {
+ if (await isExceededQuotaLimitError(error)) {
+ await show({
+ ModalContent: () => (
+
+ ),
+ title: isDowngrade
+ ? 'subscription.not_eligible_modal.downgrade_title'
+ : 'subscription.not_eligible_modal.upgrade_title',
+ confirmButtonText: 'general.got_it',
+ confirmButtonType: 'primary',
+ });
+ return;
+ }
+
+ void toastResponseError(error);
}
};
@@ -117,22 +114,8 @@ function SwitchPlanActionBar({
}
type={isDowngrade ? 'default' : 'primary'}
disabled={isCurrentPlan}
- onClick={async () => {
- if (isDowngrade) {
- await onDowngradeClick(planId);
-
- return;
- }
-
- try {
- await subscribe({
- tenantId: currentTenantId,
- planId,
- callbackPage: subscriptionPage,
- });
- } catch (error: unknown) {
- void toastResponseError(error);
- }
+ onClick={() => {
+ void handleSubscribe(planId, isDowngrade);
}}
/>
diff --git a/packages/console/src/pages/TenantSettings/Subscription/NotEligibleDowngradeModalContent/index.module.scss b/packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.module.scss
similarity index 100%
rename from packages/console/src/pages/TenantSettings/Subscription/NotEligibleDowngradeModalContent/index.module.scss
rename to packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.module.scss
diff --git a/packages/console/src/pages/TenantSettings/Subscription/NotEligibleDowngradeModalContent/index.tsx b/packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.tsx
similarity index 84%
rename from packages/console/src/pages/TenantSettings/Subscription/NotEligibleDowngradeModalContent/index.tsx
rename to packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.tsx
index f1b10d95f..4a0764c66 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/NotEligibleDowngradeModalContent/index.tsx
+++ b/packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.tsx
@@ -20,10 +20,13 @@ const excludedQuotaKeys = new Set([
type Props = {
targetPlan: SubscriptionPlan;
+ isDowngrade?: boolean;
};
-function NotEligibleDowngradeModalContent({ targetPlan }: Props) {
- const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+function NotEligibleSwitchPlanModalContent({ targetPlan, isDowngrade = false }: Props) {
+ const { t } = useTranslation(undefined, {
+ keyPrefix: 'admin_console.subscription.not_eligible_modal',
+ });
const { name, quota } = targetPlan;
@@ -40,7 +43,7 @@ function NotEligibleDowngradeModalContent({ targetPlan }: Props) {
name: ,
}}
>
- {t('subscription.downgrade_modal.not_eligible_description')}
+ {t(isDowngrade ? 'downgrade_description' : 'upgrade_description')}
@@ -68,7 +71,7 @@ function NotEligibleDowngradeModalContent({ targetPlan }: Props) {
),
}}
>
- {t('subscription.downgrade_modal.a_maximum_of')}
+ {t('a_maximum_of')}
) : (
,
}}
>
- {t('subscription.downgrade_modal.help_tip')}
+ {t(isDowngrade ? 'downgrade_help_tip' : 'upgrade_help_tip')}
);
}
-export default NotEligibleDowngradeModalContent;
+export default NotEligibleSwitchPlanModalContent;
diff --git a/packages/console/src/utils/subscription.ts b/packages/console/src/utils/subscription.ts
index 9e46a953e..7a21841e6 100644
--- a/packages/console/src/utils/subscription.ts
+++ b/packages/console/src/utils/subscription.ts
@@ -1,5 +1,7 @@
+import { ResponseError } from '@withtyped/client';
import dayjs from 'dayjs';
+import { responseErrorBodyGuard } from '@/cloud/hooks/use-cloud-api';
import { type SubscriptionPlanResponse } from '@/cloud/types/router';
import {
communitySupportEnabledMap,
@@ -52,3 +54,21 @@ export const getLatestUnpaidInvoice = (invoices: Invoice[]) =>
new Date(invoiceB.createdAt).getTime() - new Date(invoiceA.createdAt).getTime()
)
.find(({ status }) => status === 'uncollectible');
+
+/**
+ * Note: this is a temporary solution to handle the case when the user tries to downgrade but the quota limit is exceeded.
+ * Need a better solution to handle this case by sharing the error type between the console and cloud. - LOG-6608
+ */
+export const isExceededQuotaLimitError = async (error: unknown) => {
+ if (!(error instanceof ResponseError)) {
+ return false;
+ }
+
+ try {
+ const responseBody = await error.response.json();
+ const { message } = responseErrorBodyGuard.parse(responseBody);
+ return message.includes('Exceeded quota limit');
+ } catch {
+ return false;
+ }
+};
diff --git a/packages/phrases/src/locales/de/translation/admin-console/subscription/index.ts b/packages/phrases/src/locales/de/translation/admin-console/subscription/index.ts
index 867955dc3..96f9008c9 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/subscription/index.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/subscription/index.ts
@@ -51,11 +51,17 @@ const subscription = {
before: 'Vorher: ',
after: 'Nachher: ',
downgrade: 'Herabstufen',
- not_eligible: 'Sie sind nicht berechtigt für eine Herabstufung',
- not_eligible_description:
- 'Stellen Sie sicher, dass Sie die folgenden Kriterien erfüllen, bevor Sie auf herabstufen.',
+ },
+ not_eligible_modal: {
+ downgrade_title: 'Downgrade nicht möglich',
+ downgrade_description:
+ 'Stellen Sie sicher, dass Sie die folgenden Kriterien erfüllen, bevor Sie auf downgraden.',
+ downgrade_help_tip: 'Hilfe beim Downgrade benötigt? Kontaktieren Sie uns.',
+ upgrade_title: 'Upgrade nicht möglich',
+ upgrade_description:
+ 'Sie verwenden derzeit mehr als das von zugelassene Kontingent. Stellen Sie sicher, dass Sie die folgenden Kriterien erfüllen, bevor Sie auf upgraden.',
+ upgrade_help_tip: 'Hilfe beim Upgrade benötigt? Kontaktieren Sie uns.',
a_maximum_of: 'Maximal