chore(console): fix add-on issues

logto-io · Aug 19, 2024 · 8f34523 · 8f34523
1 parent f205aa7
commit 8f34523
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(