refactor(console): update pro and beta tags (#4852)

* refactor(console): update pro and beta tags

* refactor(console): update feature tag for dev tenants

* refactor: apply code review suggestions

.vscode/settings.json

@@ -53,5 +53,6 @@
     "withtyped",
     "sendgrid",
     "mailgun",
+    "upsell",
   ]
 }

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

@@ -3,4 +3,6 @@
 .standardLabel {
   font: var(--font-label-2);
   margin: _.unit(6) 0 _.unit(4);
+  display: flex;
+  gap: _.unit(2);
 }

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

@@ -15,7 +15,7 @@ import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import { getConnectorGroups } from '../../pages/Connectors/utils';
-import ProTag from '../ProTag';
+import FeatureTag from '../FeatureTag';
 
 import ConnectorRadioGroup from './ConnectorRadioGroup';
 import Footer from './Footer';
@@ -155,7 +155,7 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
           <>
             <div className={styles.standardLabel}>
               <DynamicT forKey="connectors.standard_connectors" />
-              <ProTag isVisibleInProdTenant={isStandardConnectorDisabled} />
+              <FeatureTag isVisible={isStandardConnectorDisabled} for="upsell" plan="hobby" />
             </div>
             <ConnectorRadioGroup
               name="group"

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

@@ -0,0 +1,16 @@
+@use '@/scss/underscore' as _;
+
+.tag {
+  font: var(--font-label-3);
+  letter-spacing: normal;
+  display: inline-block;
+  background-color: var(--color-specific-tag-upsell);
+  border-radius: 10px;
+  padding: _.unit(0.5) _.unit(2);
+  color: var(--color-white);
+  text-transform: capitalize;
+
+  &.beta {
+    background-color: var(--color-specific-tag-test);
+  }
+}

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

@@ -0,0 +1,89 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
+
+import { TenantsContext } from '@/contexts/TenantsProvider';
+
+import * as styles from './index.module.scss';
+
+type BaseProps = {
+  className?: string;
+};
+
+type Props =
+  | (BaseProps & {
+      /** What the tag is for. */
+      for: 'upsell';
+      /**
+       * Whether the tag should be visible. It should be `true` if the tenant's subscription
+       * plan has NO access to the feature (paywall), but it will always be visible for dev
+       * tenants.
+       */
+      isVisible: boolean;
+      /** The minimum plan required to use the feature. */
+      plan: 'pro' | 'hobby';
+    })
+  | (BaseProps & {
+      /** What the tag is for. */
+      for: 'beta';
+    });
+
+/**
+ * A tag that indicates whether a feature is in beta or requires a paid plan.
+ *
+ * - **For beta tags**: The tag will always be visible.
+ * - **For paid plan tags**: The tag will be visible if `isVisible` is `true`, which means that
+ * the tenant's subscription plan has no access to the feature (paywall). However, it will always
+ * be visible for dev tenants since they have access to almost all features, and it's useful for
+ * developers to know which features need to be paid for in production.
+ *
+ * CAUTION: You should only render this component when the feature has a paywall.
+ *
+ * @example
+ * Use as a beta tag:
+ *
+ * ```tsx
+ * <FeatureTag for="beta" />
+ * ```
+ *
+ * Use as a paid plan tag:
+ *
+ * ```tsx
+ * // In a production tenant, the tag will be visible when there's no access to the feature
+ * <FeatureTag for="upsell" isVisible={noAccessToFeature} plan="pro" />
+ *
+ * // In a dev tenant, the tag will always be visible even if `isVisible` is `false`
+ * <FeatureTag for="upsell" isVisible={false} plan="pro" />
+ *
+ * // For conditionally rendering the tag, usually in an iteration on a list which contains
+ * // both free and paid features
+ * {features.map((feature) => (
+ *   hasPaywall(feature) &&
+ *     <FeatureTag for="upsell" isVisible={hasAccess(feature)} plan="hobby" />
+ * ))}
+ * ```
+ */
+function FeatureTag(props: Props) {
+  const { className, for: forType } = props;
+  const { isDevTenant } = useContext(TenantsContext);
+
+  // Beta tag should always be visible.
+  if (forType === 'beta') {
+    return (
+      <div className={classNames(styles.tag, styles.beta, className)}>
+        <span>Beta</span>
+      </div>
+    );
+  }
+
+  const { isVisible, plan } = props;
+
+  // Dev tenant should always see the tag since they have access to almost all features, and it's
+  // useful for developers to know which features need to be paid for in production.
+  if (!isDevTenant && !isVisible) {
+    return null;
+  }
+
+  return <div className={classNames(styles.tag, className)}>{plan}</div>;
+}
+
+export default FeatureTag;

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

@@ -5,6 +5,7 @@
   color: var(--color-neutral-variant-60);
   display: flex;
   align-items: center;
+  gap: _.unit(2);
 }
 
 .description {

packages/console/src/components/Guide/GuideCard/index.module.scss

@@ -45,7 +45,7 @@
 
   .flexRow {
     display: flex;
-    align-items: center;
+    align-items: flex-start; // align name and the feature tag to the top
     justify-content: space-between;
   }
 

packages/console/src/components/Guide/GuideCard/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Suspense, useCallback, useContext } from 'react';
 
 import { type Guide, type GuideMetadata } from '@/assets/docs/guides/types';
-import ProTag from '@/components/ProTag';
+import FeatureTag from '@/components/FeatureTag';
 import { isCloud } from '@/consts/env';
 import { subscriptionPage } from '@/consts/pages';
 import { TenantsContext } from '@/contexts/TenantsProvider';
@@ -39,6 +39,7 @@ function GuideCard({ data, onClick, hasBorder, hasButton }: Props) {
     metadata: { target, name, description },
   } = data;
 
+  const hasPaywall = isCloud && target === ApplicationType.MachineToMachine;
   const isSubscriptionRequired = isM2mDisabled && target === ApplicationType.MachineToMachine;
   const buttonText = isSubscriptionRequired
     ? 'upsell.upgrade_plan'
@@ -75,9 +76,7 @@ function GuideCard({ data, onClick, hasBorder, hasButton }: Props) {
         <div className={styles.infoWrapper}>
           <div className={styles.flexRow}>
             <div className={styles.name}>{name}</div>
-            {target === ApplicationType.MachineToMachine && (
-              <ProTag isVisibleInProdTenant={isSubscriptionRequired} />
-            )}
+            {hasPaywall && <FeatureTag isVisible={isM2mDisabled} for="upsell" plan="hobby" />}
           </div>
           <div className={styles.description} title={description}>
             {description}

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

@@ -0,0 +1,5 @@
+@use '@/scss/underscore' as _;
+
+.notification {
+  padding: _.unit(6);
+}

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

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { type TFuncKey } from 'i18next';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { contactEmailLink } from '@/consts';
+import InlineNotification from '@/ds-components/InlineNotification';
+import TextLink from '@/ds-components/TextLink';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  className?: string;
+  for: TFuncKey<'translation', 'admin_console.upsell.paywall'>;
+};
+
+/** Displays an inline notification that explains the paywall and links to the subscription page. */
+function InlineUpsell({ className, for: forFeature }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' });
+  const { navigate } = useTenantPathname();
+
+  return (
+    <InlineNotification
+      hasIcon={false}
+      severity="info"
+      action="upsell.compare_plans"
+      className={classNames(styles.notification, className)}
+      onClick={() => {
+        navigate('/tenant-settings/subscription');
+      }}
+    >
+      <Trans
+        components={{
+          a: <TextLink href={contactEmailLink} target="_blank" />,
+        }}
+      >
+        {t(forFeature)}
+      </Trans>
+    </InlineNotification>
+  );
+}
+
+export default InlineUpsell;

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

@@ -1,11 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.tag {
-  @include _.section-head-2;
-  display: inline-block;
-  background-color: var(--color-specific-tag-upsell);
-  border-radius: 10px;
-  padding: 0 _.unit(1) 0 _.unit(1.5);
-  color: var(--color-white);
-  margin: 0 _.unit(1);
-}

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

@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-import { useContext } from 'react';
-
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
-import { TenantsContext } from '@/contexts/TenantsProvider';
-import DynamicT from '@/ds-components/DynamicT';
-
-import * as styles from './index.module.scss';
-
-type Props = {
-  isVisibleInProdTenant: boolean;
-  className?: string;
-};
-
-function ProTag({ isVisibleInProdTenant, className }: Props) {
-  const { isDevTenant } = useContext(TenantsContext);
-
-  return isCloud && ((isDevFeaturesEnabled && isDevTenant) || isVisibleInProdTenant) ? (
-    <div className={classNames(styles.tag, className)}>
-      <DynamicT forKey="upsell.pro_tag" />
-    </div>
-  ) : null;
-}
-
-export default ProTag;

packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import MauExceededModal from '@/components/MauExceededModal';
 import PaymentOverdueModal from '@/components/PaymentOverdueModal';
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { isCloud } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 
 function TenantNotificationContainer() {
@@ -11,7 +11,7 @@ function TenantNotificationContainer() {
 
   // Todo @xiaoyijun remove isDevFeaturesEnabled when the dev tenant feature is ready
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  if (!isCloud || isTenantSuspended || (isDevFeaturesEnabled && isDevTenant)) {
+  if (!isCloud || isTenantSuspended || isDevTenant) {
     return null;
   }
 

packages/console/src/containers/ConsoleContent/index.tsx

@@ -187,7 +187,7 @@ function ConsoleContent() {
                 <Route index element={<Navigate replace to={TenantSettingsTabs.Settings} />} />
                 <Route path={TenantSettingsTabs.Settings} element={<TenantBasicSettings />} />
                 <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
-                {(!isDevFeaturesEnabled || !isDevTenant) && (
+                {!isDevTenant && (
                   <>
                     <Route path={TenantSettingsTabs.Subscription} element={<Subscription />} />
                     <Route path={TenantSettingsTabs.BillingHistory} element={<BillingHistory />} />

packages/console/src/contexts/TenantsProvider.tsx

@@ -7,7 +7,7 @@ import { useCallback, useMemo, createContext, useState } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
 
 import { type TenantResponse } from '@/cloud/types/router';
-import { isCloud } from '@/consts/env';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import { ReservedPlanId } from '@/consts/subscriptions';
 
 /**
@@ -181,7 +181,7 @@ function TenantsProvider({ children }: Props) {
       },
       isInitComplete,
       currentTenantId,
-      isDevTenant: currentTenant?.tag === TenantTag.Development,
+      isDevTenant: isDevFeaturesEnabled && currentTenant?.tag === TenantTag.Development,
       currentTenant,
       currentTenantStatus,
       setCurrentTenantStatus,

packages/console/src/ds-components/CardTitle/index.tsx

@@ -1,8 +1,10 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import FeatureTag from '@/components/FeatureTag';
+
 import type DangerousRaw from '../DangerousRaw';
 import DynamicT from '../DynamicT';
 import TextLink from '../TextLink';
@@ -12,11 +14,12 @@ import * as styles from './index.module.scss';
 export type Props = {
   title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
   subtitle?: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
-  titleTag?: ReactNode;
   size?: 'small' | 'medium' | 'large';
   learnMoreLink?: string;
   isWordWrapEnabled?: boolean;
   className?: string;
+  /** If a beta tag should be shown next to the title. */
+  isBeta?: boolean;
 };
 
 /**
@@ -25,11 +28,11 @@ export type Props = {
 function CardTitle({
   title,
   subtitle,
-  titleTag,
   size = 'large',
   isWordWrapEnabled = false,
   learnMoreLink,
   className,
+  isBeta,
 }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -37,7 +40,7 @@ function CardTitle({
     <div className={classNames(styles.container, styles[size], className)}>
       <div className={classNames(styles.title, !isWordWrapEnabled && styles.titleEllipsis)}>
         {typeof title === 'string' ? <DynamicT forKey={title} /> : title}
-        {titleTag}
+        {isBeta && <FeatureTag for="beta" />}
       </div>
       {Boolean(subtitle ?? learnMoreLink) && (
         <div className={styles.subtitle}>

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

@@ -118,9 +118,6 @@ function CreateForm({ defaultCreateType, defaultCreateFrameworkName, onClose }:
                       title={t(`${applicationTypeI18nKey[type]}.title`)}
                       subtitle={t(`${applicationTypeI18nKey[type]}.subtitle`)}
                       description={t(`${applicationTypeI18nKey[type]}.description`)}
-                      hasProTag={
-                        type === ApplicationType.MachineToMachine && isMachineToMachineDisabled
-                      }
                     />
                   </Radio>
                 ))}

packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss

@@ -53,8 +53,8 @@
 
   .proTag {
     position: absolute;
-    right: 0;
-    bottom: 2px;
+    right: -2px;
+    bottom: 0;
     z-index: 1;
   }
 }

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

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 
 import SearchIcon from '@/assets/icons/search.svg';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
+import FeatureTag from '@/components/FeatureTag';
 import { type SelectedGuide } from '@/components/Guide/GuideCard';
 import GuideCardGroup from '@/components/Guide/GuideCardGroup';
 import { useAppGuideMetadata } from '@/components/Guide/hooks';
-import ProTag from '@/components/ProTag';
 import { isCloud } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import { CheckboxGroup } from '@/ds-components/Checkbox';
@@ -40,7 +40,7 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton, hasFilters }: P
 
   const { currentTenantId } = useContext(TenantsContext);
   const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
-  const isM2mDisabledForCurrentPlan = isCloud && currentPlan?.quota.machineToMachineLimit === 0;
+  const isM2mDisabledForCurrentPlan = isCloud && !currentPlan?.quota.machineToMachineLimit;
 
   const structuredMetadata = useMemo(
     () => getStructuredAppGuideMetadata({ categories: filterCategories }),
@@ -101,9 +101,12 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton, hasFilters }: P
                       setFilterCategories(sortedValue);
                     }}
                   />
-                  <ProTag
+                  {/* TODO: must be refactored since there's no way to see the tag's intention */}
+                  <FeatureTag
+                    isVisible={isM2mDisabledForCurrentPlan}
+                    for="upsell"
+                    plan="hobby"
                     className={styles.proTag}
-                    isVisibleInProdTenant={isM2mDisabledForCurrentPlan}
                   />
                 </div>
               </div>

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

@@ -1,8 +1,12 @@
-import type { ApplicationType } from '@logto/schemas';
+import { ApplicationType } from '@logto/schemas';
 import classNames from 'classnames';
+import { useContext } from 'react';
 
 import ApplicationIcon from '@/components/ApplicationIcon';
-import ProTag from '@/components/ProTag';
+import FeatureTag from '@/components/FeatureTag';
+import { isCloud } from '@/consts/env';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 
 import * as styles from './index.module.scss';
 
@@ -12,26 +16,26 @@ type Props = {
   description: string;
   type: ApplicationType;
   size?: 'large' | 'small';
-  hasProTag?: boolean;
 };
 
-function TypeDescription({
-  title,
-  subtitle,
-  description,
-  type,
-  size = 'large',
-  hasProTag = false,
-}: Props) {
+function TypeDescription({ title, subtitle, description, type, size = 'large' }: Props) {
+  const { currentTenantId } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+  const hasPaywall = isCloud && type === ApplicationType.MachineToMachine;
+
   return (
     <div className={classNames(styles.container, styles[size])}>
       <ApplicationIcon type={type} />
       <div className={styles.title}>{title}</div>
       <div className={styles.subtitle}>{subtitle}</div>
       <div className={styles.description}>{description}</div>
-      {hasProTag && (
+      {hasPaywall && (
         <div className={styles.proTag}>
-          <ProTag isVisibleInProdTenant />
+          <FeatureTag
+            isVisible={!currentPlan?.quota.machineToMachineLimit}
+            for="upsell"
+            plan="hobby"
+          />
         </div>
       )}
     </div>

packages/console/src/pages/GetStarted/index.tsx

@@ -15,7 +15,7 @@ import GuideCardGroup from '@/components/Guide/GuideCardGroup';
 import { useApiGuideMetadata, useAppGuideMetadata } from '@/components/Guide/hooks';
 import PageMeta from '@/components/PageMeta';
 import { ConnectorsTabs } from '@/consts';
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { isCloud } from '@/consts/env';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import { LinkButton } from '@/ds-components/Button';
@@ -110,7 +110,7 @@ function GetStarted() {
         <div className={styles.title}>{t('get_started.title')}</div>
         <div className={styles.subtitle}>{t('get_started.subtitle')}</div>
       </div>
-      {isDevFeaturesEnabled && isCloud && isDevTenant && <DevelopmentTenantNotification />}
+      {isCloud && isDevTenant && <DevelopmentTenantNotification />}
       <Card className={styles.card}>
         <div className={styles.title}>{t('get_started.develop.title')}</div>
         <GuideCardGroup

packages/console/src/pages/Mfa/PageWrapper/index.tsx

@@ -1,7 +1,6 @@
 import { useContext, type ReactNode } from 'react';
 
 import PageMeta from '@/components/PageMeta';
-import ProTag from '@/components/ProTag';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import CardTitle from '@/ds-components/CardTitle';
 import useSubscriptionPlan from '@/hooks/use-subscription-plan';
@@ -21,12 +20,7 @@ function PageWrapper({ children }: Props) {
   return (
     <div className={styles.container}>
       <PageMeta titleKey="mfa.title" />
-      <CardTitle
-        title="mfa.title"
-        titleTag={<ProTag isVisibleInProdTenant={!isMfaEnabled} />}
-        subtitle="mfa.description"
-        className={styles.cardTitle}
-      />
+      <CardTitle isBeta title="mfa.title" subtitle="mfa.description" className={styles.cardTitle} />
       {children}
     </div>
   );

packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx

@@ -9,11 +9,10 @@ import { Trans, useTranslation } from 'react-i18next';
 import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
 import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
 import ContactUsPhraseLink from '@/components/ContactUsPhraseLink';
+import FeatureTag from '@/components/FeatureTag';
 import PlanName from '@/components/PlanName';
-import ProTag from '@/components/ProTag';
 import QuotaGuardFooter from '@/components/QuotaGuardFooter';
 import RoleScopesTransfer from '@/components/RoleScopesTransfer';
-import { isCloud } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
@@ -29,9 +28,11 @@ import { hasReachedQuotaLimit } from '@/utils/quota';
 
 import * as styles from './index.module.scss';
 
-const radioOptions: Array<{ key: AdminConsoleKey; value: RoleType; proTagCheck: boolean }> = [
-  { key: 'roles.type_user', value: RoleType.User, proTagCheck: false },
-  { key: 'roles.type_machine_to_machine', value: RoleType.MachineToMachine, proTagCheck: true },
+type RadioOption = { key: AdminConsoleKey; value: RoleType; hasPaywall: boolean };
+
+const radioOptions: RadioOption[] = [
+  { key: 'roles.type_user', value: RoleType.User, hasPaywall: false },
+  { key: 'roles.type_machine_to_machine', value: RoleType.MachineToMachine, hasPaywall: true },
 ];
 
 export type Props = {
@@ -52,7 +53,6 @@ function CreateRoleForm({ totalRoleCount, onClose }: Props) {
   const [isTypeSelectorVisible, setIsTypeSelectorVisible] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
-  const isM2mDisabledForCurrentPlan = isCloud && currentPlan?.quota.machineToMachineLimit === 0;
   const {
     control,
     handleSubmit,
@@ -216,15 +216,17 @@ function CreateRoleForm({ totalRoleCount, onClose }: Props) {
                     onChange(value);
                   }}
                 >
-                  {radioOptions.map(({ key, value, proTagCheck }) => (
+                  {radioOptions.map(({ key, value, hasPaywall }) => (
                     <Radio
                       key={value}
                       title={<DynamicT forKey={key} />}
                       value={value}
                       trailingIcon={
-                        proTagCheck && (
-                          <ProTag
-                            isVisibleInProdTenant={isM2mDisabledForCurrentPlan}
+                        hasPaywall && (
+                          <FeatureTag
+                            isVisible={!currentPlan?.quota.machineToMachineLimit}
+                            for="upsell"
+                            plan="hobby"
                             className={styles.proTag}
                           />
                         )

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

@@ -1,19 +1,15 @@
 import { withAppInsights } from '@logto/app-insights/react';
 import { useContext } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 
+import FeatureTag from '@/components/FeatureTag';
 import FormCard from '@/components/FormCard';
+import InlineUpsell from '@/components/InlineUpsell';
 import PageMeta from '@/components/PageMeta';
-import ProTag from '@/components/ProTag';
-import { contactEmailLink } from '@/consts';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import FormField from '@/ds-components/FormField';
-import InlineNotification from '@/ds-components/InlineNotification';
-import TextLink from '@/ds-components/TextLink';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useSubscriptionPlan from '@/hooks/use-subscription-plan';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
 
 import Skeleton from '../components/Skeleton';
 
@@ -28,8 +24,6 @@ function TenantDomainSettings() {
   const { data: currentPlan, error: fetchCurrentPlanError } = useSubscriptionPlan(currentTenantId);
   const isLoadingCurrentPlan = !currentPlan && !fetchCurrentPlanError;
   const { getDocumentationUrl } = useDocumentationUrl();
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { navigate } = useTenantPathname();
 
   if (isLoadingCustomDomain || isLoadingCurrentPlan) {
     return <Skeleton />;
@@ -47,7 +41,7 @@ function TenantDomainSettings() {
       <PageMeta titleKey={['tenants.tabs.domains', 'tenants.title']} />
       <FormCard
         title="domain.custom.custom_domain"
-        tag={<ProTag isVisibleInProdTenant={!customDomainEnabled} />}
+        tag={<FeatureTag isVisible={!customDomainEnabled} for="upsell" plan="hobby" />}
         description="domain.custom.custom_domain_description"
         learnMoreLink={getDocumentationUrl('docs/recipes/custom-domain')}
       >
@@ -61,23 +55,7 @@ function TenantDomainSettings() {
             />
           )}
           {!customDomain && !customDomainEnabled && (
-            <InlineNotification
-              hasIcon={false}
-              severity="info"
-              action="upsell.compare_plans"
-              className={styles.upsellNotification}
-              onClick={() => {
-                navigate('/tenant-settings/subscription');
-              }}
-            >
-              <Trans
-                components={{
-                  a: <TextLink href={contactEmailLink} target="_blank" />,
-                }}
-              >
-                {t('upsell.paywall.custom_domain')}
-              </Trans>
-            </InlineNotification>
+            <InlineUpsell for="custom_domain" className={styles.upsellNotification} />
           )}
         </FormField>
       </FormCard>

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

@@ -2,7 +2,6 @@ import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { TenantSettingsTabs } from '@/consts';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import CardTitle from '@/ds-components/CardTitle';
 import DynamicT from '@/ds-components/DynamicT';
@@ -26,7 +25,7 @@ function TenantSettings() {
         <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
           <DynamicT forKey="tenants.tabs.domains" />
         </TabNavItem>
-        {(!isDevFeaturesEnabled || !isDevTenant) && (
+        {!isDevTenant && (
           <>
             <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Subscription}`}>
               <DynamicT forKey="tenants.tabs.subscription" />

packages/phrases/src/locales/de/translation/admin-console/upsell/index.ts

@@ -1,8 +1,7 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
-  upgrade_plan: 'Upgrade Plan',
+  upgrade_plan: 'Upgrade plan',
   compare_plans: 'Pläne vergleichen',
   create_tenant: {
     title: 'Wählen Sie Ihren Tenant-Plan aus',

packages/phrases/src/locales/de/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '{{count, number}} Anwendung von <planName/> erreicht. Plan upgraden, um den Bedürfnissen Ihres Teams gerecht zu werden. Für Unterstützung können Sie uns gerne <a>kontaktieren</a>.',
   applications_other:
     '{{count, number}} Anwendungen von <planName/> erreicht. Plan upgraden, um den Bedürfnissen Ihres Teams gerecht zu werden. Für Unterstützung können Sie uns gerne <a>kontaktieren</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Upgraden Sie auf einen kostenpflichtigen Tarif, um eine Maschinen-zu-Maschinen-Anwendung zu erstellen und Zugriff auf alle Premium-Funktionen zu erhalten. Für Unterstützung können Sie uns gerne <a>kontaktieren</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '{{count, number}} Maschine-zu-Maschine-Anwendung von <planName/> erreicht. Plan upgraden, um den Bedürfnissen Ihres Teams gerecht zu werden. Für Unterstützung können Sie uns gerne <a>kontaktieren</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Sie haben das Limit von {{count, number}} Berechtigungen pro API-Ressource von <planName/> erreicht. Upgraden Sie jetzt, um zu erweitern. <a>Kontaktieren Sie uns</a> bei Bedarf.',
   scopes_per_resource_other:
     'Sie haben das Limit von {{count, number}} Berechtigungen pro API-Ressource von <planName/> erreicht. Upgraden Sie jetzt, um zu erweitern. <a>Kontaktieren Sie uns</a> bei Bedarf.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Schalten Sie die Funktion für individuelle Domains frei und profitieren Sie von einer Reihe von Premium-Vorteilen, indem Sie auf einen kostenpflichtigen Plan upgraden. Zögern Sie nicht, <a>Kontaktieren Sie uns</a>, wenn Sie Hilfe benötigen.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Sie haben das Limit von {{count, number}} <planName/>-Sozialconnectoren erreicht. Upgraden Sie Ihren Plan, um zusätzliche Sozialconnectoren und die Möglichkeit zur Erstellung eigener Connectoren mit OIDC, OAuth 2.0 und SAML-Protokollen zu erhalten. Zögern Sie nicht, <a>Kontaktieren Sie uns</a>, wenn Sie Hilfe benötigen.',
   social_connectors_other:
     'Sie haben das Limit von {{count, number}} <planName/>-Sozialconnectoren erreicht. Upgraden Sie Ihren Plan, um zusätzliche Sozialconnectoren und die Möglichkeit zur Erstellung eigener Connectoren mit OIDC, OAuth 2.0 und SAML-Protokollen zu erhalten. Zögern Sie nicht, <a>Kontaktieren Sie uns</a>, wenn Sie Hilfe benötigen.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Upgraden Sie auf einen kostenpflichtigen Plan, um eigene Connectoren mit OIDC, OAuth 2.0 und SAML-Protokollen zu erstellen, sowie unbegrenzte Sozialconnectoren und alle Premium-Funktionen zu erhalten. Zögern Sie nicht, <a>Kontaktieren Sie uns</a>, wenn Sie Hilfe benötigen.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Sie haben das Limit von {{count, number}} <planName/>-Sozialconnectoren erreicht. Upgraden Sie Ihren Plan, um zusätzliche Sozialconnectoren und die Möglichkeit zur Erstellung eigener Connectoren mit OIDC, OAuth 2.0 und SAML-Protokollen zu erhalten. Zögern Sie nicht, <a>Kontaktieren Sie uns</a>, wenn Sie Hilfe benötigen.',
   standard_connectors_other:

packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts

@@ -1,8 +1,7 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
-  upgrade_plan: 'Upgrade Plan',
+  upgrade_plan: 'Upgrade plan',
   compare_plans: 'Compare plans',
   create_tenant: {
     title: 'Select your tenant plan',

packages/phrases/src/locales/en/translation/admin-console/upsell/paywall.ts

@@ -4,7 +4,7 @@ const paywall = {
   applications_other:
     '{{count, number}} applications of <planName/> limit reached. Upgrade plan to meet your team’s needs. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine_feature:
-    'Upgrade to a paid plan to create machine-to-machine application, along with access to all the premium features. For any assistance, feel free to <a>contact us</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '{{count, number}} machine-to-machine application of <planName/> limit reached. Upgrade plan to meet your team’s needs. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine_other:
@@ -18,13 +18,13 @@ const paywall = {
   scopes_per_resource_other:
     '{{count, number}} permissions per API resource of <planName/> limit reached. Upgrade now to expand. <a>Contact us</a> for any assistant.',
   custom_domain:
-    'Unlock custom domain functionality and a range of premium benefits by upgrading to a paid plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '{{count, number}} social connector of <planName/> limit reached. To meet your team’s needs, upgrade plan for additional social connectors and the ability to create your own connectors using OIDC, OAuth 2.0, and SAML protocols. Feel free to <a>contact us</a> if you need any assistance.',
   social_connectors_other:
     '{{count, number}} social connectors of <planName/> limit reached. To meet your team’s needs, upgrade plan for additional social connectors and the ability to create your own connectors using OIDC, OAuth 2.0, and SAML protocols. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors_feature:
-    'Upgrade to a paid plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '{{count, number}} social connector of <planName/> limit reached. To meet your team’s needs, upgrade plan for additional social connectors and the ability to create your own connectors using OIDC, OAuth 2.0, and SAML protocols. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors_other:

packages/phrases/src/locales/es/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Plan de actualización',
   compare_plans: 'Comparar planes',
   create_tenant: {

packages/phrases/src/locales/es/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Se ha alcanzado el límite de {{count, number}} aplicación de <planName/>. Actualiza el plan para satisfacer las necesidades de tu equipo. Para cualquier ayuda, no dudes en <a>contactarnos</a>.',
   applications_other:
     'Se ha alcanzado el límite de {{count, number}} aplicaciones de <planName/>. Actualiza el plan para satisfacer las necesidades de tu equipo. Para cualquier ayuda, no dudes en <a>contactarnos</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Actualiza a un plan de pago para crear aplicaciones de máquina a máquina, junto con acceso a todas las funciones premium. Para cualquier ayuda, no dudes en <a>contactarnos</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Se ha alcanzado el límite de {{count, number}} aplicación de máquina a máquina de <planName/>. Actualiza el plan para satisfacer las necesidades de tu equipo. Para cualquier ayuda, no dudes en <a>contactarnos</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Has alcanzado el límite de {{count, number}} permisos por recurso de API de <planName/>. Actualiza ahora para expandirlo. <a>Contáctanos</a> si necesitas asistencia.',
   scopes_per_resource_other:
     'Has alcanzado el límite de {{count, number}} permisos por recurso de API de <planName/>. Actualiza ahora para expandirlo. <a>Contáctanos</a> si necesitas asistencia.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Desbloquea la funcionalidad de dominio personalizado y una variedad de beneficios premium al actualizar a un plan de pago. No dudes en <a>contactarnos</a> si necesitas ayuda.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Has alcanzado el límite de {{count, number}} conectores sociales de <planName/>. Actualiza el plan para obtener conectores sociales adicionales y la capacidad de crear tus propios conectores usando los protocolos OIDC, OAuth 2.0 y SAML. Si necesitas ayuda, no dudes en <a>contactarnos</a>.',
   social_connectors_other:
     'Has alcanzado el límite de {{count, number}} conectores sociales de <planName/>. Actualiza el plan para obtener conectores sociales adicionales y la capacidad de crear tus propios conectores usando los protocolos OIDC, OAuth 2.0 y SAML. Si necesitas ayuda, no dudes en <a>contactarnos</a>.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Actualiza a un plan de pago para crear tus propios conectores usando los protocolos OIDC, OAuth 2.0 y SAML, además de obtener conectores sociales ilimitados y todas las funciones premium. Si necesitas ayuda, no dudes en <a>contactarnos</a>.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Has alcanzado el límite de {{count, number}} conectores sociales de <planName/>. Actualiza el plan para obtener conectores sociales adicionales y la capacidad de crear tus propios conectores usando los protocolos OIDC, OAuth 2.0 y SAML. Si necesitas ayuda, no dudes en <a>contactarnos</a>.',
   standard_connectors_other:

packages/phrases/src/locales/fr/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Mettre à niveau le plan',
   compare_plans: 'Comparer les plans',
   create_tenant: {

packages/phrases/src/locales/fr/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     "Limite de {{count, number}} application de <planName/> atteinte. Mettez à niveau le plan pour répondre aux besoins de votre équipe. Pour toute assistance, n'hésitez pas à <a>nous contacter</a>.",
   applications_other:
     "Limite de {{count, number}} applications de <planName/> atteinte. Mettez à niveau le plan pour répondre aux besoins de votre équipe. Pour toute assistance, n'hésitez pas à <a>nous contacter</a>.",
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    "Passez à un abonnement payant pour créer des applications de machine à machine, ainsi que pour accéder à toutes les fonctionnalités premium. Pour toute assistance, n'hésitez pas à <a>nous contacter</a>.",
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     "Limite de {{count, number}} application de machine à machine de <planName/> atteinte. Mettez à niveau le plan pour répondre aux besoins de votre équipe. Pour toute assistance, n'hésitez pas à <a>nous contacter</a>.",
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Vous avez atteint la limite de {{count, number}} permission par ressource API de <planName/>. Mettez à niveau maintenant pour étendre. <a>Contactez-nous</a> pour toute assistance.',
   scopes_per_resource_other:
     'Vous avez atteint la limite de {{count, number}} permissions par ressource API de <planName/>. Mettez à niveau maintenant pour étendre. <a>Contactez-nous</a> pour toute assistance.',
+  /** UNTRANSLATED */
   custom_domain:
-    "Déverrouillez la fonctionnalité de domaine personnalisé et une gamme d'avantages premium en passant à un plan payant. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     "Vous avez atteint la limite de {{count, number}} connecteur social de <planName/>. Pour répondre aux besoins de votre équipe, passez à un plan supérieur pour obtenir des connecteurs sociaux supplémentaires et la possibilité de créer vos propres connecteurs en utilisant les protocoles OIDC, OAuth 2.0 et SAML. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
   social_connectors_other:
     "Vous avez atteint la limite de {{count, number}} connecteurs sociaux de <planName/>. Pour répondre aux besoins de votre équipe, passez à un plan supérieur pour obtenir des connecteurs sociaux supplémentaires et la possibilité de créer vos propres connecteurs en utilisant les protocoles OIDC, OAuth 2.0 et SAML. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    "Mettez à niveau vers un plan payant pour créer vos propres connecteurs en utilisant les protocoles OIDC, OAuth 2.0 et SAML, ainsi qu'un accès illimité aux connecteurs sociaux et à toutes les fonctionnalités premium. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     "Vous avez atteint la limite de {{count, number}} connecteur social de <planName/>. Pour répondre aux besoins de votre équipe, passez à un plan supérieur pour obtenir des connecteurs sociaux supplémentaires et la possibilité de créer vos propres connecteurs en utilisant les protocoles OIDC, OAuth 2.0 et SAML. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
   standard_connectors_other:

packages/phrases/src/locales/it/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Aggiorna piano',
   compare_plans: 'Confronta i piani',
   create_tenant: {

packages/phrases/src/locales/it/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Limite di {{count, number}} applicazione di <planName/> raggiunto. Aggiorna il piano per soddisfare le esigenze del tuo team. Per qualsiasi assistenza, non esitare a <a>contattarci</a>.',
   applications_other:
     'Limite di {{count, number}} applicazioni di <planName/> raggiunto. Aggiorna il piano per soddisfare le esigenze del tuo team. Per qualsiasi assistenza, non esitare a <a>contattarci</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Aggiorna a un piano a pagamento per creare applicazioni machine-to-machine e accedere a tutte le funzionalità premium. Per qualsiasi assistenza, non esitare a <a>contattarci</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Limite di {{count, number}} applicazione machine-to-machine di <planName/> raggiunto. Aggiorna il piano per soddisfare le esigenze del tuo team. Per qualsiasi assistenza, non esitare a <a>contattarci</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Hai raggiunto il limite di {{count, number}} autorizzazioni per risorsa API di <planName/>. Aggiorna ora per espanderlo. <a>Contattaci</a> per qualsiasi assistenza.',
   scopes_per_resource_other:
     'Hai raggiunto il limite di {{count, number}} autorizzazioni per risorsa API di <planName/>. Aggiorna ora per espanderlo. <a>Contattaci</a> per qualsiasi assistenza.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Sblocca la funzionalità di dominio personalizzato e una serie di vantaggi premium passando a un piano a pagamento. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Hai raggiunto il limite di {{count, number}} connettori sociali di <planName/>. Passa al piano per ottenere connettori sociali aggiuntivi e la possibilità di creare i tuoi connettori utilizzando i protocolli OIDC, OAuth 2.0 e SAML. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
   social_connectors_other:
     'Hai raggiunto il limite di {{count, number}} connettori sociali di <planName/>. Passa al piano per ottenere connettori sociali aggiuntivi e la possibilità di creare i tuoi connettori utilizzando i protocolli OIDC, OAuth 2.0 e SAML. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Aggiorna a un piano a pagamento per creare i tuoi connettori utilizzando i protocolli OIDC, OAuth 2.0 e SAML, oltre a ottenere connettori sociali illimitati e tutte le funzionalità premium. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Hai raggiunto il limite di {{count, number}} connettori sociali di <planName/>. Passa al piano per ottenere connettori sociali aggiuntivi e la possibilità di creare i tuoi connettori utilizzando i protocolli OIDC, OAuth 2.0 e SAML. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
   standard_connectors_other:

packages/phrases/src/locales/ja/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'プロ',
   upgrade_plan: 'プランをアップグレード',
   compare_plans: 'プラン比較',
   create_tenant: {

packages/phrases/src/locales/ja/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '{{count, number}}個の<planName/>アプリケーション制限に達しました。チームのニーズに対応するため、プランをアップグレードしてください。サポートが必要な場合は、お気軽に<a>お問い合わせ</a>ください。',
   applications_other:
     '{{count, number}}個の<planName/>アプリケーション制限に達しました。チームのニーズに対応するため、プランをアップグレードしてください。サポートが必要な場合は、お気軽に<a>お問い合わせ</a>ください。',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    '有料プランにアップグレードして、マシン間アプリケーションを作成し、すべてのプレミアム機能にアクセスしてください。サポートが必要な場合は、お気軽に<a>お問い合わせ</a>ください。',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '{{count, number}}個の<planName/>マシン間アプリケーション制限に達しました。チームのニーズに対応するため、プランをアップグレードしてください。サポートが必要な場合は、お気軽に<a>お問い合わせ</a>ください。',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '{{count, number}}の<planName/> APIリソースあたりの許可制限に達しました。拡張するには今すぐアップグレードしてください。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
   scopes_per_resource_other:
     '{{count, number}}の<planName/> APIリソースあたりの許可制限に達しました。拡張するには今すぐアップグレードしてください。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
+  /** UNTRANSLATED */
   custom_domain:
-    'カスタムドメインの機能を利用するには、有料プランにアップグレードしてください。お手伝いが必要な場合は、<a>お問い合わせ</a>ください。',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '{{count, number}}の<planName/>ソーシャルコネクタ制限に達しました。チームのニーズに合わせて有料プランにアップグレードして、OIDC、OAuth 2.0、およびSAMLプロトコルを使用して独自のコネクタを作成できるようにしましょう。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
   social_connectors_other:
     '{{count, number}}の<planName/>ソーシャルコネクタ制限に達しました。チームのニーズに合わせて有料プランにアップグレードして、OIDC、OAuth 2.0、およびSAMLプロトコルを使用して独自のコネクタを作成できるようにしましょう。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'OIDC、OAuth 2.0、およびSAMLプロトコルを使用して独自のコネクタを作成するには有料プランにアップグレードし、無制限のソーシャルコネクタとすべてのプレミアム機能にアクセスしましょう。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '{{count, number}}の<planName/>ソーシャルコネクタ制限に達しました。チームのニーズに合わせて有料プランにアップグレードして、OIDC、OAuth 2.0、およびSAMLプロトコルを使用して独自のコネクタを作成できるようにしましょう。<a>お問い合わせ</a>は何かお手伝いが必要な場合はお気軽にどうぞ。',
   standard_connectors_other:

packages/phrases/src/locales/ko/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: '플랜 업그레이드',
   compare_plans: '플랜 비교',
   create_tenant: {

packages/phrases/src/locales/ko/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '<planName/>의 {{count, number}}개 애플리케이션 제한에 도달했습니다. 팀의 요구를 충족하기 위해 플랜을 업그레이드하십시오. 도움이 필요하면 <a>문의</a>해 주시기 바랍니다.',
   applications_other:
     '<planName/>의 {{count, number}}개 애플리케이션 제한에 도달했습니다. 팀의 요구를 충족하기 위해 플랜을 업그레이드하십시오. 도움이 필요하면 <a>문의</a>해 주시기 바랍니다.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    '유료 플랜으로 업그레이드하여 기계 간 애플리케이션을 생성하고 모든 프리미엄 기능에 액세스하세요. 도움이 필요하면 <a>문의</a>해 주시기 바랍니다.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '<planName/>의 {{count, number}}개 기계 간 애플리케이션 제한에 도달했습니다. 팀의 요구를 충족하기 위해 플랜을 업그레이드하십시오. 도움이 필요하면 <a>문의</a>해 주시기 바랍니다.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '<planName/>의 {{count, number}}개 API 리소스 당 권한 한도에 도달했습니다. 확장을 위해 지금 업그레이드하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
   scopes_per_resource_other:
     '<planName/>의 {{count, number}}개 API 리소스 당 권한 한도에 도달했습니다. 확장을 위해 지금 업그레이드하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
+  /** UNTRANSLATED */
   custom_domain:
-    '유료 플랜으로 업그레이드하여 사용자 정의 도메인 기능과 다양한 프리미엄 혜택을 해제하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '<planName/>의 {{count, number}}개 소셜 커넥터 한도에 도달했습니다. 팀의 요구를 충족시키기 위해 플랜을 업그레이드하고 OIDC, OAuth 2.0, SAML 프로토콜을 사용하여 고유한 커넥터를 생성할 수 있도록 하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
   social_connectors_other:
     '<planName/>의 {{count, number}}개 소셜 커넥터 한도에 도달했습니다. 팀의 요구를 충족시키기 위해 플랜을 업그레이드하고 OIDC, OAuth 2.0, SAML 프로토콜을 사용하여 고유한 커넥터를 생성할 수 있도록 하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    '유료 플랜으로 업그레이드하여 OIDC, OAuth 2.0, SAML 프로토콜을 사용하여 고유한 커넥터를 생성할 수 있으며, 무제한 소셜 커넥터 및 모든 프리미엄 기능에 액세스할 수 있습니다. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '<planName/>의 {{count, number}}개 소셜 커넥터 한도에 도달했습니다. 팀의 요구를 충족시키기 위해 플랜을 업그레이드하고 OIDC, OAuth 2.0, SAML 프로토콜을 사용하여 고유한 커넥터를 생성할 수 있도록 하세요. 도움이 필요하면 <a>문의하기</a>로 연락 주세요.',
   standard_connectors_other:

packages/phrases/src/locales/pl-pl/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Ulepsz plan',
   compare_plans: 'Porównaj plany',
   create_tenant: {

packages/phrases/src/locales/pl-pl/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Osiągnięto limit {{count, number}} aplikacji dla <planName/>. Zaktualizuj plan, aby sprostać potrzebom zespołu. W razie potrzeby pomocy, proszę <a>skontaktuj się z nami</a>.',
   applications_other:
     'Osiągnięto limit {{count, number}} aplikacji dla <planName/>. Zaktualizuj plan, aby sprostać potrzebom zespołu. W razie potrzeby pomocy, proszę <a>skontaktuj się z nami</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Zaktualizuj plan na płatny, aby tworzyć aplikacje maszynowe i uzyskać dostęp do wszystkich funkcji premium. W razie potrzeby pomocy, proszę <a>skontaktuj się z nami</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Osiągnięto limit {{count, number}} aplikacji maszynowych dla <planName/>. Zaktualizuj plan, aby sprostać potrzebom zespołu. W razie potrzeby pomocy, proszę <a>skontaktuj się z nami</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Osiągnięto limit {{count, number}} uprawnień na zasób API w planie <planName/>. Zaktualizuj plan, aby rozszerzyć. Skontaktuj się z nami <a>tutaj</a>, jeśli potrzebujesz pomocy.',
   scopes_per_resource_other:
     'Osiągnięto limit {{count, number}} uprawnień na zasób API w planie <planName/>. Zaktualizuj plan, aby rozszerzyć. Skontaktuj się z nami <a>tutaj</a>, jeśli potrzebujesz pomocy.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Odblokuj funkcję niestandardowego domeny i szereg korzyści premium, ulepszając do płatnego planu. Jeśli potrzebujesz pomocy, nie wahaj się <a>skontaktować z nami</a>.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Osiągnięto limit {{count, number}} konektorów społecznościowych w planie <planName/>. Aby sprostać potrzebom twojego zespołu, ulepsz plan, aby uzyskać dodatkowe konektory społecznościowe oraz możliwość tworzenia własnych konektorów za pomocą protokołów OIDC, OAuth 2.0 i SAML. Jeśli potrzebujesz pomocy, nie wahaj się <a>skontaktować z nami</a>.',
   social_connectors_other:
     'Osiągnięto limit {{count, number}} konektorów społecznościowych w planie <planName/>. Aby sprostać potrzebom twojego zespołu, ulepsz plan, aby uzyskać dodatkowe konektory społecznościowe oraz możliwość tworzenia własnych konektorów za pomocą protokołów OIDC, OAuth 2.0 i SAML. Jeśli potrzebujesz pomocy, nie wahaj się <a>skontaktować z nami</a>.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Ulepsz do płatnego planu, aby tworzyć własne konektory za pomocą protokołów OIDC, OAuth 2.0 i SAML, oraz uzyskać nieograniczoną liczbę konektorów społecznościowych i wszystkie funkcje premium. Jeśli potrzebujesz pomocy, nie wahaj się <a>skontaktować z nami</a>.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Osiągnięto limit {{count, number}} konektorów społecznościowych w planie <planName/>. Aby sprostać potrzebom twojego zespołu, ulepsz plan, aby uzyskać dodatkowe konektory społecznościowe oraz możliwość tworzenia własnych konektorów za pomocą protokołów OIDC, OAuth 2.0 i SAML. Jeśli potrzebujesz pomocy, nie wahaj się <a>skontaktować z nami</a>.',
   standard_connectors_other:

packages/phrases/src/locales/pt-br/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Atualizar plano',
   compare_plans: 'Comparar planos',
   create_tenant: {

packages/phrases/src/locales/pt-br/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Limite de {{count, number}} aplicação do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
   applications_other:
     'Limite de {{count, number}} aplicações do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Faça upgrade para um plano pago para criar aplicativos de máquina para máquina, junto com acesso a todos os recursos premium. Para qualquer assistência, fique à vontade para <a>entrar em contato conosco</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Limite de {{count, number}} aplicação de máquina para máquina do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Atingiu o limite de {{count, number}} permissões por recurso de API de <planName/>. Atualize agora para expandir. <a>Contacte-nos</a> se precisar de assistência.',
   scopes_per_resource_other:
     'Atingiu o limite de {{count, number}} permissões por recurso de API de <planName/>. Atualize agora para expandir. <a>Contacte-nos</a> se precisar de assistência.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Desbloqueie a funcionalidade de domínio personalizado e uma série de benefícios premium ao atualizar para um plano pago. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
   social_connectors_other:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Atualize para um plano pago para criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML, além de obter conectores sociais ilimitados e todas as funcionalidades premium. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
   standard_connectors_other:

packages/phrases/src/locales/pt-pt/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Atualizar plano',
   compare_plans: 'Comparar planos',
   create_tenant: {

packages/phrases/src/locales/pt-pt/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Limite de {{count, number}} aplicação do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
   applications_other:
     'Limite de {{count, number}} aplicações do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Atualize para um plano pago para criar aplicação de máquina a máquina, juntamente com acesso a todos os recursos premium. Para qualquer assistência, fique à vontade para <a>entrar em contato conosco</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Limite de {{count, number}} aplicação de máquina a máquina do <planName/> atingido. Atualize o plano para atender às necessidades da sua equipe. Para obter qualquer ajuda, sinta-se à vontade para <a>entrar em contato conosco</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Atingiu o limite de {{count, number}} permissões por recurso de API de <planName/>. Atualize agora para expandir. <a>Contacte-nos</a> se precisar de assistência.',
   scopes_per_resource_other:
     'Atingiu o limite de {{count, number}} permissões por recurso de API de <planName/>. Atualize agora para expandir. <a>Contacte-nos</a> se precisar de assistência.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Desbloqueie a funcionalidade de domínio personalizado e uma série de benefícios premium ao atualizar para um plano pago. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
   social_connectors_other:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Atualize para um plano pago para criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML, além de obter conectores sociais ilimitados e todas as funcionalidades premium. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Atingiu o limite de {{count, number}} conectores sociais de <planName/>. Atualize o plano para obter conectores sociais adicionais e a capacidade de criar os seus próprios conectores usando os protocolos OIDC, OAuth 2.0 e SAML. Não hesite em <a>Contacte-nos</a> se precisar de ajuda.',
   standard_connectors_other:

packages/phrases/src/locales/ru/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Повысить план',
   compare_plans: 'Сравнить планы',
   create_tenant: {

packages/phrases/src/locales/ru/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     'Достигнут лимит {{count, number}} приложения(й) для <planName/>. Обновите план, чтобы удовлетворить потребности вашей команды. При необходимости помощи, не стесняйтесь <a>связаться с нами</a>.',
   applications_other:
     'Достигнут лимит {{count, number}} приложений для <planName/>. Обновите план, чтобы удовлетворить потребности вашей команды. При необходимости помощи, не стесняйтесь <a>связаться с нами</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Перейдите на платный план, чтобы создать машинное приложение и получить доступ ко всем премиум-функциям. При необходимости помощи, не стесняйтесь <a>связаться с нами</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     'Достигнут лимит {{count, number}} машинных приложений для <planName/>. Обновите план, чтобы удовлетворить потребности вашей команды. При необходимости помощи, не стесняйтесь <a>связаться с нами</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     'Достигнут лимит {{count, number}} разрешений на ресурс API в плане <planName/>. Повысьте план, чтобы увеличить количество разрешений. <a>Свяжитесь с нами</a> для получения помощи.',
   scopes_per_resource_other:
     'Достигнут лимит {{count, number}} разрешений на ресурс API в плане <planName/>. Повысьте план, чтобы увеличить количество разрешений. <a>Свяжитесь с нами</a> для получения помощи.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Разблокируйте функциональность настраиваемого домена и ряд премиум-преимуществ, повысив до платного плана. Если вам нужна помощь, не стесняйтесь <a>связаться с нами</a>.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     'Достигнут лимит {{count, number}} социальных коннекторов в плане <planName/>. Для удовлетворения потребностей вашей команды повысьте план, чтобы получить дополнительные социальные коннекторы и возможность создания собственных коннекторов с использованием протоколов OIDC, OAuth 2.0 и SAML. Если вам нужна помощь, не стесняйтесь <a>связаться с нами</a>.',
   social_connectors_other:
     'Достигнут лимит {{count, number}} социальных коннекторов в плане <planName/>. Для удовлетворения потребностей вашей команды повысьте план, чтобы получить дополнительные социальные коннекторы и возможность создания собственных коннекторов с использованием протоколов OIDC, OAuth 2.0 и SAML. Если вам нужна помощь, не стесняйтесь <a>связаться с нами</a>.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'Повысьте до платного плана, чтобы создавать свои собственные коннекторы с использованием протоколов OIDC, OAuth 2.0 и SAML, а также получить неограниченное количество социальных коннекторов и все премиум-функции. Если вам нужна помощь, не стесняйтесь <a>связаться с нами</a>.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     'Достигнут лимит {{count, number}} социальных коннекторов в плане <planName/>. Для удовлетворения потребностей вашей команды повысьте план, чтобы получить дополнительные социальные коннекторы и возможность создания собственных коннекторов с использованием протоколов OIDC, OAuth 2.0 и SAML. Если вам нужна помощь, не стесняйтесь <a>связаться с нами</a>.',
   standard_connectors_other:

packages/phrases/src/locales/tr-tr/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: 'Planı Yükselt',
   compare_plans: 'Planları Karşılaştır',
   create_tenant: {

packages/phrases/src/locales/tr-tr/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '<planName/> limitine ulaşılan {{count, number}} başvuru. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin. Yardım için lütfen <a>bizimle iletişime geçin</a>.',
   applications_other:
     '<planName/> limitine ulaşılan {{count, number}} başvurular. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin. Yardım için lütfen <a>bizimle iletişime geçin</a>.',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    'Makine-makine uygulaması oluşturmak ve tüm premium özelliklere erişim sağlamak için ücretli bir plana yükseltin. Yardım için lütfen <a>bizimle iletişime geçin</a>.',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '<planName/> limitine ulaşılan {{count, number}} makine-makine başvurusu. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin. Yardım için lütfen <a>bizimle iletişime geçin</a>.',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '{{count, number}} <planName/> API kaynağı başına izin sınırına ulaşıldı. Genişletmek için şimdi yükseltin. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
   scopes_per_resource_other:
     '{{count, number}} <planName/> API kaynağı başına izin sınırına ulaşıldı. Genişletmek için şimdi yükseltin. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
+  /** UNTRANSLATED */
   custom_domain:
-    'Özel etki alanı işlevselliğini açığa çıkarın ve ücretli bir plana geçerek bir dizi premium avantajdan yararlanın. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '{{count, number}} <planName/> sosyal bağlayıcı sınırına ulaşıldı. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin ve OIDC, OAuth 2.0 ve SAML protokolleri kullanarak kendi bağlayıcılarınızı oluşturma yeteneğine sahip olun. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
   social_connectors_other:
     '{{count, number}} <planName/> sosyal bağlayıcı sınırına ulaşıldı. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin ve OIDC, OAuth 2.0 ve SAML protokolleri kullanarak kendi bağlayıcılarınızı oluşturma yeteneğine sahip olun. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    'OIDC, OAuth 2.0 ve SAML protokollerini kullanarak kendi bağlayıcılarınızı oluşturmak, sınırsız sosyal bağlayıcılar ve tüm premium özelliklere erişim sağlamak için ücretli bir plana geçin. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '{{count, number}} <planName/> sosyal bağlayıcı sınırına ulaşıldı. Ekibinizin ihtiyaçlarını karşılamak için planı yükseltin ve OIDC, OAuth 2.0 ve SAML protokolleri kullanarak kendi bağlayıcılarınızı oluşturma yeteneğine sahip olun. Yardıma ihtiyacınız olursa, <a>iletişime geçin</a>.',
   standard_connectors_other:

packages/phrases/src/locales/zh-cn/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: '升级计划',
   compare_plans: '比较计划',
   create_tenant: {

packages/phrases/src/locales/zh-cn/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '已达到 <planName/> 的{{count, number}}个应用限制。升级计划以满足团队需求。如需帮助，请随时<a>联系我们</a>。',
   applications_other:
     '已达到 <planName/> 的{{count, number}}个应用限制。升级计划以满足团队需求。如需帮助，请随时<a>联系我们</a>。',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    '升级到付费计划以创建机器对机器应用，并获得所有高级功能的访问权限。如需帮助，请随时<a>联系我们</a>。',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '已达到 <planName/> 的{{count, number}}个机器对机器应用限制。升级计划以满足团队需求。如需帮助，请随时<a>联系我们</a>。',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '已达到<planName/>的{{count, number}}个 API 资源每个权限限制。立即升级以扩展。如需任何帮助，请<a>联系我们</a>。',
   scopes_per_resource_other:
     '已达到<planName/>的{{count, number}}个 API 资源每个权限限制。立即升级以扩展。如需任何帮助，请<a>联系我们</a>。',
+  /** UNTRANSLATED */
   custom_domain:
-    '通过升级到付费计划解锁自定义域功能和一系列高级福利。如需任何帮助，请<a>联系我们</a>。',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '已达到<planName/>的{{count, number}}个社交连接器限制。为满足您团队的需求，请升级计划以获取额外的社交连接器，并可以使用 OIDC、OAuth 2.0 和 SAML 协议创建您自己的连接器。如需任何帮助，请<a>联系我们</a>。',
   social_connectors_other:
     '已达到<planName/>的{{count, number}}个社交连接器限制。为满足您团队的需求，请升级计划以获取额外的社交连接器，并可以使用 OIDC、OAuth 2.0 和 SAML 协议创建您自己的连接器。如需任何帮助，请<a>联系我们</a>。',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    '升级到付费计划以使用 OIDC、OAuth 2.0 和 SAML 协议创建您自己的连接器，并获得无限社交连接器和所有高级功能。如需任何帮助，请<a>联系我们</a>。',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '已达到<planName/>的{{count, number}}个社交连接器限制。为满足您团队的需求，请升级计划以获取额外的社交连接器，并可以使用 OIDC、OAuth 2.0 和 SAML 协议创建您自己的连接器。如需任何帮助，请<a>联系我们</a>。',
   standard_connectors_other:

packages/phrases/src/locales/zh-hk/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: '升級計劃',
   compare_plans: '比較計劃',
   create_tenant: {

packages/phrases/src/locales/zh-hk/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '已達到 <planName/> 的{{count, number}}個應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
   applications_other:
     '已達到 <planName/> 的{{count, number}}個應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    '升級到付費計劃以創建機器對機器應用，並獲得所有高級功能的訪問權限。如需協助，歡迎<a>聯絡我們</a>。',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '已達到 <planName/> 的{{count, number}}個機器對機器應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '已達到<planName/>的{{count, number}}個 API 資源每個權限限制。立即升級以擴展。如需任何幫助，請<a>聯繫我們</a>。',
   scopes_per_resource_other:
     '已達到<planName/>的{{count, number}}個 API 資源每個權限限制。立即升級以擴展。如需任何幫助，請<a>聯繫我們</a>。',
+  /** UNTRANSLATED */
   custom_domain:
-    '通過升級到付費計劃解鎖自定義域功能和一系列高級福利。如需任何幫助，請<a>聯繫我們</a>。',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
   social_connectors_other:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    '升級到付費計劃以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器，並獲得無限社交連接器和所有高級功能。如需任何幫助，請<a>聯繫我們</a>。',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
   standard_connectors_other:

packages/phrases/src/locales/zh-tw/translation/admin-console/upsell/index.ts

@@ -1,7 +1,6 @@
 import paywall from './paywall.js';
 
 const upsell = {
-  pro_tag: 'PRO',
   upgrade_plan: '升級計劃',
   compare_plans: '比較計劃',
   create_tenant: {

packages/phrases/src/locales/zh-tw/translation/admin-console/upsell/paywall.ts

@@ -3,8 +3,9 @@ const paywall = {
     '已達到 <planName/> 的{{count, number}}個應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
   applications_other:
     '已達到 <planName/> 的{{count, number}}個應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
+  /** UNTRANSLATED */
   machine_to_machine_feature:
-    '升級到付費計劃以創建機器對機器應用，並獲得所有高級功能的訪問權限。如需協助，歡迎<a>聯絡我們</a>。',
+    'Upgrade to the <strong>Hobby</strong> plan to unlock 1 machine-to-machine application, or choose the <strong>Pro</strong> plan for unlimited usage. For any assistance, feel free to <a>contact us</a>.',
   machine_to_machine:
     '已達到 <planName/> 的{{count, number}}個機器對機器應用程式限制。升級計劃以滿足團隊需求。如需任何協助，歡迎<a>聯絡我們</a>。',
   machine_to_machine_other:
@@ -17,14 +18,16 @@ const paywall = {
     '已達到<planName/>的{{count, number}}個 API 資源每個權限限制。立即升級以擴展。如需任何幫助，請<a>聯繫我們</a>。',
   scopes_per_resource_other:
     '已達到<planName/>的{{count, number}}個 API 資源每個權限限制。立即升級以擴展。如需任何幫助，請<a>聯繫我們</a>。',
+  /** UNTRANSLATED */
   custom_domain:
-    '通過升級到付費計劃解鎖自定義域功能和一系列高級福利。如需任何幫助，請<a>聯繫我們</a>。',
+    'Unlock custom domain functionality by upgrading to <strong>Hobby</strong> or <strong>Pro</strong> plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
   social_connectors:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
   social_connectors_other:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
+  /** UNTRANSLATED */
   standard_connectors_feature:
-    '升級到付費計劃以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器，並獲得無限社交連接器和所有高級功能。如需任何幫助，請<a>聯繫我們</a>。',
+    'Upgrade to the <strong>Hobby</strong> or <strong>Pro</strong> plan to create your own connectors using OIDC, OAuth 2.0, and SAML protocols, plus unlimited social connectors and all the premium features. Feel free to <a>contact us</a> if you need any assistance.',
   standard_connectors:
     '已達到<planName/>的{{count, number}}個社交連接器限制。為滿足您團隊的需求，請升級計劃以獲取額外的社交連接器，並可以使用 OIDC、OAuth 2.0 和 SAML 協議創建您自己的連接器。如需任何幫助，請<a>聯繫我們</a>。',
   standard_connectors_other:

packages/toolkit/core-kit/scss/_console-themes.scss

@@ -181,6 +181,7 @@
   --color-guide-dropdown-border: var(--color-border);
   --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
   --color-specific-tag-upsell: var(--color-primary-50);
+  --color-specific-tag-test: var(--color-tertiary-50);
   --color-specific-toggle-thumb-disabled: #ffffffb3;
 
   // Background
@@ -382,6 +383,7 @@
   --color-guide-dropdown-border: var(--color-neutral-variant-70);
   --color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
   --color-specific-tag-upsell: var(--color-primary-70);
+  --color-specific-tag-test: var(--color-tertiary-80);
   --color-specific-toggle-thumb-disabled: #ffffff4d;
 
   // Background