feat(console): add pricing link for dev tenant notification (#4908)

packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx

@@ -7,6 +7,7 @@ import ArrowRight from '@/assets/icons/arrow-right.svg';
 import PlanDescription from '@/components/PlanDescription';
 import PlanName from '@/components/PlanName';
 import PlanQuotaList from '@/components/PlanQuotaList';
+import { pricingLink } from '@/consts';
 import { comingSoonQuotaKeys } from '@/consts/plan-quotas';
 import { ReservedPlanId } from '@/consts/subscriptions';
 import { TenantsContext } from '@/contexts/TenantsProvider';
@@ -102,9 +103,10 @@ function PlanCardItem({ plan, onSelect }: Props) {
           <div className={styles.tip}>
             <TextLink
               isTrailingIcon
-              href="https://logto.io/pricing"
+              href={pricingLink}
               icon={<ArrowRight className={styles.linkIcon} />}
               target="_blank"
+              rel="noopener"
               className={styles.link}
             >
               <DynamicT forKey="upsell.create_tenant.view_all_features" />

packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx

@@ -4,6 +4,7 @@ import Modal from 'react-modal';
 
 import { useCloudApi, toastResponseError } from '@/cloud/hooks/use-cloud-api';
 import { type TenantResponse } from '@/cloud/types/router';
+import { pricingLink } from '@/consts';
 import { ReservedPlanId } from '@/consts/subscriptions';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import ModalLayout from '@/ds-components/ModalLayout';
@@ -67,9 +68,7 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) {
         subtitle={
           <DangerousRaw>
             <Trans
-              components={{
-                a: <TextLink href="https://logto.io/pricing" target="_blank" />,
-              }}
+              components={{ a: <TextLink href={pricingLink} target="_blank" rel="noopener" /> }}
             >
               {t('upsell.create_tenant.description')}
             </Trans>

packages/console/src/consts/external-links.ts

@@ -11,6 +11,7 @@ export const reservationLink = buildUrl('https://calendly.com/logto/30min', {
   month: new Date().toISOString().slice(0, 7),
 });
 export const trustAndSecurityLink = 'https://logto.io/trust-and-security';
+export const pricingLink = 'https://logto.io/pricing';
 
 /** Docs link */
 export const envTagsFeatureLink = '/docs/recipes/environment-tags';

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

@@ -16,28 +16,21 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> &
 function TextLink({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) {
   const { getTo } = useTenantPathname();
 
+  const styleClassNames = classNames(styles.link, isTrailingIcon && styles.trailingIcon, className);
+
   if (to) {
     return (
-      <Link
-        to={getTo(to)}
-        className={classNames(styles.link, isTrailingIcon && styles.trailingIcon, className)}
-        {...rest}
-      >
+      <Link to={getTo(to)} className={styleClassNames} {...rest}>
         {icon}
-        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-        <>{children}</>
+        {children}
       </Link>
     );
   }
 
   return (
-    <a
-      className={classNames(styles.link, isTrailingIcon && styles.trailingIcon, className)}
-      {...rest}
-    >
+    <a className={styleClassNames} {...rest}>
       {icon}
-      {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-      <>{children}</>
+      {children}
     </a>
   );
 }

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

@@ -21,8 +21,8 @@
     .title {
       font: var(--font-title-2);
 
-      .highlight {
-        color: var(--color-text-link);
+      .link {
+        font: var(--font-title-2);
       }
     }
 

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

@@ -3,9 +3,10 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import CongratsDark from '@/assets/images/congrats-dark.svg';
 import Congrats from '@/assets/images/congrats.svg';
-import { envTagsFeatureLink } from '@/consts';
+import { envTagsFeatureLink, pricingLink } from '@/consts';
 import { LinkButton } from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
+import TextLink from '@/ds-components/TextLink';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTheme from '@/hooks/use-theme';
 
@@ -22,7 +23,18 @@ function DevelopmentTenantNotification() {
       <Image className={styles.image} />
       <div className={styles.content}>
         <div className={styles.title}>
-          <Trans components={{ a: <span className={styles.highlight} /> }}>
+          <Trans
+            components={{
+              a: (
+                <TextLink
+                  href={pricingLink}
+                  target="_blank"
+                  rel="noopener"
+                  className={styles.link}
+                />
+              ),
+            }}
+          >
             {t('tenants.dev_tenant_notification.title')}
           </Trans>
         </div>