feat(console): add dev tenant nofication on the get-started page (#4804)

packages/console/src/contexts/TenantsProvider.tsx

@@ -49,6 +49,7 @@ type Tenants = {
   /** The current tenant ID parsed from the URL. */
   currentTenantId: string;
   currentTenant?: TenantResponse;
+  isDevTenant: boolean;
   /**
    * Indicates if the Access Token has been validated for use. Will be reset to `pending` when the current tenant changes.
    *
@@ -69,7 +70,7 @@ const { tenantId, indicator } = defaultManagementApi.resource;
 const defaultTenantResponse: TenantResponse = {
   id: tenantId,
   name: `tenant_${tenantId}`,
-  tag: TenantTag.Development,
+  tag: TenantTag.Production,
   indicator,
   subscription: {
     status: 'active',
@@ -96,6 +97,7 @@ export const TenantsContext = createContext<Tenants>({
   removeTenant: noop,
   updateTenant: noop,
   currentTenantId: '',
+  isDevTenant: false,
   currentTenantStatus: 'pending',
   setCurrentTenantStatus: noop,
   navigateTenant: noop,
@@ -169,6 +171,7 @@ function TenantsProvider({ children }: Props) {
       },
       isInitComplete,
       currentTenantId,
+      isDevTenant: currentTenant?.tag === TenantTag.Development,
       currentTenant,
       currentTenantStatus,
       setCurrentTenantStatus,

packages/console/src/pages/GetStarted/DevelopmentTenantNotification/index.module.scss

@@ -0,0 +1,40 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  padding: _.unit(3) _.unit(8);
+  background-color: var(--color-surface-5);
+  border-radius: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: _.unit(6);
+
+  .image {
+    flex-shrink: 0;
+    width: 80px;
+    height: 80px;
+  }
+
+  .content {
+    flex: 1;
+
+    .title {
+      font: var(--font-title-2);
+
+      .highlight {
+        color: var(--color-text-link);
+      }
+    }
+
+    .description {
+      font: var(--font-body-2);
+      color: var(--color-text-secondary);
+      margin-top: _.unit(1);
+    }
+  }
+
+  .button {
+    flex-shrink: 0;
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Theme } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
+
+import CongratsDark from '@/assets/images/congrats-dark.svg';
+import Congrats from '@/assets/images/congrats.svg';
+import Button from '@/ds-components/Button';
+import DynamicT from '@/ds-components/DynamicT';
+import useTheme from '@/hooks/use-theme';
+
+import * as styles from './index.module.scss';
+
+function DevelopmentTenantNotification() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const theme = useTheme();
+  const Image = theme === Theme.Light ? Congrats : CongratsDark;
+
+  return (
+    <div className={styles.container}>
+      <Image className={styles.image} />
+      <div className={styles.content}>
+        <div className={styles.title}>
+          <Trans components={{ span: <span className={styles.highlight} /> }}>
+            {t('tenants.notification.allow_pro_features_title')}
+          </Trans>
+        </div>
+        <div className={styles.description}>
+          <DynamicT forKey="tenants.notification.allow_pro_features_description" />
+        </div>
+      </div>
+      <Button
+        title="general.learn_more"
+        type="outline"
+        className={styles.button}
+        size="large"
+        onClick={() => {
+          // Todo - PRD-591 @xiaoyijun navigate to related posts
+        }}
+      />
+    </div>
+  );
+}
+
+export default DevelopmentTenantNotification;

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

@@ -15,7 +15,9 @@ 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 { AppDataContext } from '@/contexts/AppDataProvider';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import { LinkButton } from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 import Spacer from '@/ds-components/Spacer';
@@ -27,6 +29,7 @@ import useWindowResize from '@/hooks/use-window-resize';
 import CreateApiForm from '../ApiResources/components/CreateForm';
 import CreateAppForm from '../Applications/components/CreateForm';
 
+import DevelopmentTenantNotification from './DevelopmentTenantNotification';
 import * as styles from './index.module.scss';
 
 const icons = {
@@ -38,6 +41,7 @@ function GetStarted() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { navigate } = useTenantPathname();
   const { tenantEndpoint } = useContext(AppDataContext);
+  const { isDevTenant } = useContext(TenantsContext);
   const [selectedGuide, setSelectedGuide] = useState<SelectedGuide>();
   const { getStructuredAppGuideMetadata } = useAppGuideMetadata();
   const apiGuideMetadata = useApiGuideMetadata();
@@ -106,6 +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 />}
       <Card className={styles.card}>
         <div className={styles.title}>{t('get_started.develop.title')}</div>
         <GuideCardGroup