Repository: logto-io/logto
File: packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.tsx (TypeScript)

Code before:
import { type AdminConsoleKey } from '@logto/phrases';
import { TenantTag } from '@logto/schemas';

import TenantEnvTag from '@/components/TenantEnvTag';
import Divider from '@/ds-components/Divider';
import DynamicT from '@/ds-components/DynamicT';
import Tag from '@/ds-components/Tag';
import { ReservedPlanName } from '@/types/subscriptions';

import styles from './index.module.scss';

type Props = {
  readonly tag: TenantTag;
  readonly isAvailableProductionPlanHidden: boolean;
};

const descriptionMap: Record<TenantTag, AdminConsoleKey> = {
  [TenantTag.Development]: 'tenants.create_modal.development_description',
  [TenantTag.Production]: 'tenants.create_modal.production_description',
};

const availableProductionPlanNames = [ReservedPlanName.Free, ReservedPlanName.Pro];

/**
 *
 */
function EnvTagOptionContent({ tag, isAvailableProductionPlanHidden = false }: Props) {
  return (
    <div className={styles.container}>
      <TenantEnvTag isAbbreviated={false} tag={tag} size="large" className={styles.tag} />
      <div className={styles.description}>
        <DynamicT forKey={descriptionMap[tag]} />
      </div>
      {(tag === TenantTag.Development || !isAvailableProductionPlanHidden) && <Divider />}
      <div className={styles.hint}>
        {tag === TenantTag.Development && (
          <DynamicT forKey="tenants.create_modal.development_hint" />
        )}
        {tag === TenantTag.Production && !isAvailableProductionPlanHidden && (

Review comment (suggestion):
nit: This variable name is a bit confusing to me. How about just`isPrivateInstance`, just my 2 cents.

Code after:
import { type AdminConsoleKey } from '@logto/phrases';
import { TenantTag } from '@logto/schemas';

import TenantEnvTag from '@/components/TenantEnvTag';
import Divider from '@/ds-components/Divider';
import DynamicT from '@/ds-components/DynamicT';
import Tag from '@/ds-components/Tag';
import { ReservedPlanName } from '@/types/subscriptions';

import styles from './index.module.scss';

type Props = {
  readonly tag: TenantTag;
  /**
   * Whether to hide the available production plan information.
   * Set to true when the available production plans should not be displayed,
   * for example, in contexts where this information is not relevant or should be hidden from the user.
   */
  readonly isAvailableProductionPlanInvisible: boolean;
};

const descriptionMap: Record<TenantTag, AdminConsoleKey> = {
  [TenantTag.Development]: 'tenants.create_modal.development_description',
  [TenantTag.Production]: 'tenants.create_modal.production_description',
};

const availableProductionPlanNames = [ReservedPlanName.Free, ReservedPlanName.Pro];

function EnvTagOptionContent({ tag, isAvailableProductionPlanInvisible = false }: Props) {
  return (
    <div className={styles.container}>
      <TenantEnvTag isAbbreviated={false} tag={tag} size="large" className={styles.tag} />
      <div className={styles.description}>
        <DynamicT forKey={descriptionMap[tag]} />
      </div>
      {(tag === TenantTag.Development || !isAvailableProductionPlanInvisible) && <Divider />}
      <div className={styles.hint}>
        {tag === TenantTag.Development && (
          <DynamicT forKey="tenants.create_modal.development_hint" />