refactor(console): hide pro tag when related features are available (#4229)

packages/console/src/components/CreateConnectorForm/index.tsx

@@ -3,13 +3,15 @@ import {
   type ConnectorFactoryResponse,
   type ConnectorResponse,
 } from '@logto/schemas';
-import { useMemo, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import Modal from 'react-modal';
 import useSWR from 'swr';
 
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import DynamicT from '@/ds-components/DynamicT';
 import ModalLayout from '@/ds-components/ModalLayout';
 import type { RequestError } from '@/hooks/use-api';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import { getConnectorGroups } from '../../pages/Connectors/utils';
@@ -41,6 +43,9 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
   const [activeGroupId, setActiveGroupId] = useState<string>();
   const [activeFactoryId, setActiveFactoryId] = useState<string>();
   const isCreatingSocialConnector = type === ConnectorType.Social;
+  const { currentTenantId } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+  const isStandardConnectorDisabled = !currentPlan?.quota.standardConnectorsLimit;
 
   const groups = useMemo(() => {
     if (!factories || !existingConnectors) {
@@ -143,7 +148,7 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
           <>
             <div className={styles.standardLabel}>
               <DynamicT forKey="connectors.standard_connectors" />
-              <ProTag />
+              {isStandardConnectorDisabled && <ProTag />}
             </div>
             <ConnectorRadioGroup
               name="group"

packages/console/src/components/ProTag/index.module.scss

@@ -3,9 +3,9 @@
 .tag {
   @include _.section-head-2;
   display: inline-block;
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-50);
   border-radius: 10px;
-  padding: 0 _.unit(1);
+  padding: 0 _.unit(1) 0 _.unit(1.5);
   color: var(--color-white);
   margin: 0 _.unit(1);
 }

packages/console/src/pages/Applications/components/ApplicationsPlaceholder/index.tsx

@@ -1,7 +1,10 @@
 import { ApplicationType } from '@logto/schemas';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import { applicationTypeI18nKey } from '@/types/applications';
 
 import TypeDescription from '../TypeDescription';
@@ -14,6 +17,9 @@ type Props = {
 
 function ApplicationsPlaceholder({ onSelect }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { currentTenantId } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+  const isMachineToMachineDisabled = !currentPlan?.quota.machineToMachineLimit;
 
   return (
     <div className={styles.placeholder}>
@@ -28,7 +34,7 @@ function ApplicationsPlaceholder({ onSelect }: Props) {
               title={t(`${applicationTypeI18nKey[type]}.title`)}
               subtitle={t(`${applicationTypeI18nKey[type]}.subtitle`)}
               description={t(`${applicationTypeI18nKey[type]}.description`)}
-              hasProTag={type === ApplicationType.MachineToMachine}
+              hasProTag={type === ApplicationType.MachineToMachine && isMachineToMachineDisabled}
             />
             <Button
               className={styles.createButton}

packages/console/src/pages/Applications/components/CreateForm/index.tsx

@@ -1,17 +1,19 @@
 import type { Application } from '@logto/schemas';
 import { ApplicationType } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { useController, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
 
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import TextInput from '@/ds-components/TextInput';
 import useApi from '@/hooks/use-api';
 import useConfigs from '@/hooks/use-configs';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { trySubmitSafe } from '@/utils/form';
@@ -34,6 +36,9 @@ type Props = {
 };
 
 function CreateForm({ isOpen, defaultCreateType, onClose }: Props) {
+  const { currentTenantId } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+  const isMachineToMachineDisabled = !currentPlan?.quota.machineToMachineLimit;
   const { updateConfigs } = useConfigs();
   const {
     handleSubmit,
@@ -119,7 +124,9 @@ function CreateForm({ isOpen, defaultCreateType, onClose }: Props) {
                     title={t(`${applicationTypeI18nKey[type]}.title`)}
                     subtitle={t(`${applicationTypeI18nKey[type]}.subtitle`)}
                     description={t(`${applicationTypeI18nKey[type]}.description`)}
-                    hasProTag={type === ApplicationType.MachineToMachine}
+                    hasProTag={
+                      type === ApplicationType.MachineToMachine && isMachineToMachineDisabled
+                    }
                   />
                 </Radio>
               ))}

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx

@@ -47,7 +47,7 @@ function TenantDomainSettings() {
       <PageMeta titleKey={['tenants.tabs.domains', 'tenants.title']} />
       <FormCard
         title="domain.custom.custom_domain"
-        tag={<ProTag />}
+        tag={!customDomainEnabled && <ProTag />}
         description="domain.custom.custom_domain_description"
         learnMoreLink={getDocumentationUrl('docs/recipes/custom-domain')}
       >