From 8f34523a74b409e73d9c884fb95a2d87d1ce0069 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Mon, 19 Aug 2024 18:41:58 +0800
Subject: [PATCH] chore(console): fix add-on issues

---
 .../ApplicationCreation/CreateForm/index.tsx           |  8 ++++++--
 packages/console/src/components/BillInfo/index.tsx     |  4 ++--
 .../src/components/ChargeNotification/index.tsx        |  4 ++--
 packages/console/src/components/PlanUsage/index.tsx    | 10 +++++-----
 packages/console/src/consts/external-links.ts          |  1 -
 .../pages/ApiResources/components/CreateForm/index.tsx |  4 +++-
 .../TenantSettings/Subscription/CurrentPlan/index.tsx  |  2 +-
 .../TenantMembers/InviteMemberModal/index.tsx          |  2 +-
 8 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx b/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx
index f71a5ed378a2..0a0370e643d8 100644
--- a/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx
+++ b/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx
@@ -25,6 +25,7 @@ import { trySubmitSafe } from '@/utils/form';
 
 import Footer from './Footer';
 import styles from './index.module.scss';
+import useApplicationsUsage from '@/hooks/use-applications-usage';
 
 type FormData = {
   type: ApplicationType;
@@ -56,7 +57,7 @@ function CreateForm({
     defaultValues: { type: defaultCreateType, isThirdParty: isDefaultCreateThirdParty },
   });
   const {
-    currentSubscription: { isAddOnAvailable },
+    currentSubscription: { isAddOnAvailable, planId },
   } = useContext(SubscriptionDataContext);
   const { user } = useCurrentUser();
   const { mutate: mutateGlobal } = useSWRConfig();
@@ -72,6 +73,8 @@ function CreateForm({
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const api = useApi();
 
+  const { hasMachineToMachineAppsReachedLimit } = useApplicationsUsage();
+
   const onSubmit = handleSubmit(
     trySubmitSafe(async (data) => {
       if (isSubmitting) {
@@ -124,9 +127,10 @@ function CreateForm({
         paywall={conditional(
           isAddOnAvailable &&
             watch('type') === ApplicationType.MachineToMachine &&
+            planId !== ReservedPlanId.Pro &&
             ReservedPlanId.Pro
         )}
-        hasAddOnTag={isAddOnAvailable && watch('type') === ApplicationType.MachineToMachine}
+        hasAddOnTag={isAddOnAvailable && watch('type') === ApplicationType.MachineToMachine && hasMachineToMachineAppsReachedLimit}
         size={defaultCreateType ? 'medium' : 'large'}
         footer={
           <Footer
diff --git a/packages/console/src/components/BillInfo/index.tsx b/packages/console/src/components/BillInfo/index.tsx
index 85ec6946fed9..de2a7242cfa5 100644
--- a/packages/console/src/components/BillInfo/index.tsx
+++ b/packages/console/src/components/BillInfo/index.tsx
@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import Tip from '@/assets/icons/tip.svg?react';
-import { newPlansBlogLink } from '@/consts';
+import { addOnPricingExplanationLink } from '@/consts';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
@@ -44,7 +44,7 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
               a: (
                 <TextLink
                   className={styles.articleLink}
-                  href={newPlansBlogLink}
+                  href={addOnPricingExplanationLink}
                   targetBlank="noopener"
                 />
               ),
diff --git a/packages/console/src/components/ChargeNotification/index.tsx b/packages/console/src/components/ChargeNotification/index.tsx
index c4f3b5c8ca09..144f342ee9ce 100644
--- a/packages/console/src/components/ChargeNotification/index.tsx
+++ b/packages/console/src/components/ChargeNotification/index.tsx
@@ -4,7 +4,7 @@ import { type TFuncKey } from 'i18next';
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { newPlansBlogLink } from '@/consts';
+import { addOnPricingExplanationLink } from '@/consts';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import InlineNotification from '@/ds-components/InlineNotification';
 import TextLink from '@/ds-components/TextLink';
@@ -70,7 +70,7 @@ function ChargeNotification({
         });
       }}
     >
-      <Trans components={{ a: <TextLink href={newPlansBlogLink} targetBlank="noopener" /> }}>
+      <Trans components={{ a: <TextLink href={addOnPricingExplanationLink} targetBlank="noopener" /> }}>
         {t('charge_notification_for_quota_limit', {
           item: t(`add_on_quota_item.${quotaItemPhraseKey}`, {
             ...cond(
diff --git a/packages/console/src/components/PlanUsage/index.tsx b/packages/console/src/components/PlanUsage/index.tsx
index 61ac7c966ece..e151f8904c5e 100644
--- a/packages/console/src/components/PlanUsage/index.tsx
+++ b/packages/console/src/components/PlanUsage/index.tsx
@@ -26,7 +26,7 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
   } = useContext(SubscriptionDataContext);
   const { currentTenant } = useContext(TenantsContext);
 
-  const { currentPeriodStart, currentPeriodEnd } = currentSubscriptionFromNewPricingModel;
+  const { currentPeriodStart, currentPeriodEnd, planId, isAddOnAvailable } = currentSubscriptionFromNewPricingModel;
 
   const periodicUsage = useMemo(
     () =>
@@ -48,8 +48,8 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
     // Show all usages for Pro plan and only show MAU and token usage for Free plan
     .filter(
       (key) =>
-        currentSubscriptionFromNewPricingModel.planId === ReservedPlanId.Pro ||
-        (currentSubscriptionFromNewPricingModel.planId === ReservedPlanId.Free &&
+        isAddOnAvailable ||
+        ((planId === ReservedPlanId.Free || !isAddOnAvailable) &&
           (key === 'mauLimit' || key === 'tokenLimit'))
     )
     .map((key) => ({
@@ -61,7 +61,7 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
       titleKey: `subscription.usage.${titleKeyMap[key]}`,
       unitPrice: usageKeyPriceMap[key],
       ...conditional(
-        currentSubscriptionFromNewPricingModel.planId === ReservedPlanId.Pro && {
+        planId === ReservedPlanId.Pro && {
           tooltipKey: `subscription.usage.${tooltipKeyMap[key]}`,
         }
       ),
@@ -91,7 +91,7 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
             key={index}
             className={classNames(
               styles.cardItem,
-              currentSubscriptionFromNewPricingModel.planId === ReservedPlanId.Free &&
+              planId === ReservedPlanId.Free &&
                 styles.freeUser
             )}
             {...props}
diff --git a/packages/console/src/consts/external-links.ts b/packages/console/src/consts/external-links.ts
index ec94e87fb9c9..c0e03c7d315a 100644
--- a/packages/console/src/consts/external-links.ts
+++ b/packages/console/src/consts/external-links.ts
@@ -8,7 +8,6 @@ export const contactEmailLink = `mailto:${contactEmail}`;
 export const reservationLink = 'https://cal.com/logto/30min';
 export const trustAndSecurityLink = 'https://logto.io/trust-and-security';
 export const pricingLink = 'https://logto.io/pricing';
-export const newPlansBlogLink = 'https://blog.logto.io/logto-pricing-v2';
 
 /** Docs link */
 export const envTagsFeatureLink = '/docs/references/tenants/#tenant-type';
diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
index 58214660ea4e..bf16034d2b33 100644
--- a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
@@ -15,6 +15,7 @@ import TextLink from '@/ds-components/TextLink';
 import useApi from '@/hooks/use-api';
 import modalStyles from '@/scss/modal.module.scss';
 import { trySubmitSafe } from '@/utils/form';
+import useApiResourcesUsage from '@/hooks/use-api-resources-usage';
 
 import Footer from './Footer';
 
@@ -40,6 +41,7 @@ function CreateForm({ onClose }: Props) {
   } = useForm<FormData>();
 
   const api = useApi();
+  const { hasReachedLimit }  = useApiResourcesUsage();
 
   const onSubmit = handleSubmit(
     trySubmitSafe(async (data) => {
@@ -67,7 +69,7 @@ function CreateForm({ onClose }: Props) {
         title="api_resources.create"
         subtitle="api_resources.subtitle"
         paywall={conditional(planId !== ReservedPlanId.Pro && ReservedPlanId.Pro)}
-        hasAddOnTag={isAddOnAvailable}
+        hasAddOnTag={isAddOnAvailable && hasReachedLimit}
         footer={<Footer isCreationLoading={isSubmitting} onClickCreate={onSubmit} />}
         onClose={onClose}
       >
diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
index e7dbdb4d44e8..8b1b87188287 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
@@ -74,7 +74,7 @@ function CurrentPlan({ periodicUsage: rawPeriodicUsage }: Props) {
       <FormField title="subscription.next_bill">
         <BillInfo cost={upcomingCost} isManagePaymentVisible={Boolean(upcomingCost)} />
       </FormField>
-      <AddOnUsageChangesNotification className={styles.notification} />
+      {currentSubscription.isAddOnAvailable && <AddOnUsageChangesNotification className={styles.notification} />}
       <MauLimitExceedNotification
         periodicUsage={rawPeriodicUsage}
         className={styles.notification}
diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
index b831e037856c..2fbf99b8fdee 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
@@ -130,7 +130,7 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
         size="large"
         title="tenant_members.invite_modal.title"
         paywall={conditional(planId !== ReservedPlanId.Pro && ReservedPlanId.Pro)}
-        hasAddOnTag={isAddOnAvailable}
+        hasAddOnTag={isAddOnAvailable && hasTenantMembersReachedLimit}
         subtitle="tenant_members.invite_modal.subtitle"
         footer={
           conditional(