chore(console,phrases): add logto email service doc links (#4177)

* refactor(console): add logto email service doc links

* refactor(phrases): update logto email service phrases

* chore: adopt review suggestion

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

@@ -1,6 +1,5 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import type { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import DynamicT from '@/ds-components/DynamicT';
 import TextLink from '@/ds-components/TextLink';
@@ -13,12 +12,11 @@ type Props = {
   tag?: ReactNode;
   description?: AdminConsoleKey;
   learnMoreLink?: string;
+  learnMoreLinkText?: AdminConsoleKey;
   children: ReactNode;
 };
 
-function FormCard({ title, tag, description, learnMoreLink, children }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
+function FormCard({ title, tag, description, learnMoreLink, learnMoreLinkText, children }: Props) {
   return (
     <FormCardLayout
       introduction={
@@ -34,7 +32,7 @@ function FormCard({ title, tag, description, learnMoreLink, children }: Props) {
                 <>
                   {' '}
                   <TextLink href={learnMoreLink} target="_blank" rel="noopener">
-                    {t('general.learn_more')}
+                    <DynamicT forKey={learnMoreLinkText ?? 'general.learn_more'} />
                   </TextLink>
                 </>
               )}

packages/console/src/pages/ConnectorDetails/ConnectorContent/EmailServiceConnectorForm/index.tsx

@@ -9,6 +9,7 @@ import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
 import TextInput from '@/ds-components/TextInput';
 import ImageUploaderField from '@/ds-components/Uploader/ImageUploaderField';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserAssetsService from '@/hooks/use-user-assets-service';
 import { type ConnectorFormType } from '@/types/connector';
 import { uriValidator } from '@/utils/validator';
@@ -33,6 +34,7 @@ function EmailServiceConnectorForm({ extraInfo }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { isReady: isUserAssetsServiceReady } = useUserAssetsService();
   const parsedExtraInfo = extraInfoGuard.safeParse(extraInfo ?? {});
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   const {
     control,
@@ -51,6 +53,10 @@ function EmailServiceConnectorForm({ extraInfo }: Props) {
     <FormCard
       title="connector_details.logto_email.email_template_title"
       description="connector_details.logto_email.template_description"
+      learnMoreLink={getDocumentationUrl(
+        '/docs/recipes/configure-connectors/email-connector/configure-logto-email-service/#unified-email-templates'
+      )}
+      learnMoreLinkText="connector_details.logto_email.template_description_link_text"
     >
       <FormField title="connector_details.logto_email.from_email_field">
         <TextInput

packages/console/src/pages/ConnectorDetails/EmailUsage/index.tsx

@@ -1,11 +1,14 @@
 import { Theme } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
 
 import EmailSentIconDark from '@/assets/icons/email-sent-dark.svg';
 import EmailSentIconLight from '@/assets/icons/email-sent.svg';
 import Tip from '@/assets/icons/tip.svg';
 import DynamicT from '@/ds-components/DynamicT';
 import IconButton from '@/ds-components/IconButton';
+import TextLink from '@/ds-components/TextLink';
 import { ToggleTip } from '@/ds-components/Tip';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
@@ -15,6 +18,8 @@ type Props = {
 };
 function EmailUsage({ usage }: Props) {
   const theme = useTheme();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { getDocumentationUrl } = useDocumentationUrl();
   return (
     <div className={styles.container}>
       {theme === Theme.Light ? <EmailSentIconLight /> : <EmailSentIconDark />}
@@ -22,7 +27,25 @@ function EmailUsage({ usage }: Props) {
         forKey="connector_details.logto_email.total_email_sent"
         interpolation={{ value: usage }}
       />
-      <ToggleTip content={<DynamicT forKey="connector_details.logto_email.total_email_sent_tip" />}>
+      <ToggleTip
+        content={(closeTipHandler) => (
+          <Trans
+            components={{
+              a: (
+                <TextLink
+                  href={getDocumentationUrl(
+                    'docs/recipes/configure-connectors/email-connector/configure-logto-email-service'
+                  )}
+                  target="_blank"
+                  onClick={closeTipHandler}
+                />
+              ),
+            }}
+          >
+            {t('connector_details.logto_email.total_email_sent_tip')}
+          </Trans>
+        )}
+      >
         <IconButton size="small">
           <Tip />
         </IconButton>

packages/phrases/src/locales/de/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Gesamtanzahl gesendeter E-Mails: {{value, number}}',
     total_email_sent_tip:
-      'Logto nutzt SendGrid für sicheren und stabilen E-Mail-Versand. Es ist komplett kostenlos zu nutzen.',
+      'Logto verwendet SendGrid für sicheren und stabilen integrierten E-Mail-Versand. Es ist komplett kostenlos. <a>Weitere Informationen</a>',
     email_template_title: 'E-Mail-Vorlage',
     template_description:
       'Der integrierte E-Mail-Versand verwendet Standardvorlagen für eine nahtlose Zustellung von Verifizierungs-E-Mails. Es ist keine Konfiguration erforderlich, und Sie können grundlegende Markeninformationen anpassen.',
+    template_description_link_text: 'Vorlagen anzeigen',
     description_action_text: 'Vorlagen anzeigen',
     from_email_field: 'Absender-E-Mail',
     sender_name_field: 'Sender name',

packages/phrases/src/locales/en/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Total email sent: {{value, number}}',
     total_email_sent_tip:
-      'Logto utilizes SendGrid for secure and stable built-in email. It’s completely free to use.',
+      'Logto utilizes SendGrid for secure and stable built-in email. It’s completely free to use. <a>Learn more</a>',
     email_template_title: 'Email Template',
     template_description:
       'Built-in email uses default templates for seamless delivery of verification emails. No configuration is required, and you can customize basic brand information.',
+    template_description_link_text: 'View templates',
     description_action_text: 'View templates',
     from_email_field: 'From email',
     sender_name_field: 'Sender name',

packages/phrases/src/locales/es/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Total de correos electrónicos enviados: {{value, number}}',
     total_email_sent_tip:
-      'Logto utiliza SendGrid para el correo electrónico integrado seguro y estable. Es completamente gratuito de usar.',
+      'Logto utiliza SendGrid para correo electrónico integrado seguro y estable. Es completamente gratuito de usar. <a>Más información</a>',
     email_template_title: 'Plantilla de correo electrónico',
     template_description:
       'El correo electrónico integrado utiliza plantillas predeterminadas para la entrega sin problemas de correos electrónicos de verificación. No se requiere configuración, y puede personalizar la información básica de la marca.',
+    template_description_link_text: 'Ver plantillas',
     description_action_text: 'Ver plantillas',
     from_email_field: 'Correo electrónico de origen',
     sender_name_field: 'Nombre del remitente',

packages/phrases/src/locales/fr/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Total email envoyé: {{value, number}}',
     total_email_sent_tip:
-      'Logto utilise SendGrid pour l’envoi d’emails intégré, sécurisé et stable. C’est entièrement gratuit à utiliser.',
+      "Logto utilise SendGrid pour une livraison sécurisée et stable des emails intégrés. C'est totalement gratuit. <a>En savoir plus</a>",
     email_template_title: 'Modèle d’email',
     template_description:
       'L’email intégré utilise des modèles par défaut pour une livraison transparente des emails de vérification. Aucune configuration n’est requise et vous pouvez personnaliser les informations de base de la marque.',
+    template_description_link_text: 'Voir les modèles',
     description_action_text: 'Voir les modèles',
     from_email_field: 'Email de l’expéditeur',
     sender_name_field: "Nom de l'expéditeur",

packages/phrases/src/locales/it/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Totale email inviate: {{value, number}}',
     total_email_sent_tip:
-      "Logto utilizza SendGrid per l'invio di email sicure e stabili. È completamente gratuito da utilizzare.",
+      "Logto utilizza SendGrid per l'invio sicuro ed affidabile delle email integrate. È completamente gratuito da utilizzare. <a>Scopri di più</a>",
     email_template_title: 'Modello email',
     template_description:
       "L'email integrata utilizza modelli predefiniti per la consegna senza soluzione di continuità delle email di verifica. Non è richiesta alcuna configurazione e puoi personalizzare le informazioni di base del marchio.",
+    template_description_link_text: 'Visualizza modelli',
     description_action_text: 'Visualizza i modelli',
     from_email_field: 'Email mittente',
     sender_name_field: 'Nome mittente',

packages/phrases/src/locales/ja/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: '総送信数: {{value, number}}',
     total_email_sent_tip:
-      'Logtoは、安全で安定した組み込みのメールにSendGridを利用しています。完全に無料で使用できます。',
+      'Logto はセキュアかつ安定した組み込みメールのために SendGrid を利用しています。完全に無料です。<a>詳細を見る</a>',
     email_template_title: 'メールテンプレート',
     template_description:
       '組み込みのメールは、シームレスな認証メールの配信のためにデフォルトのテンプレートを使用します。設定は必要ありません。基本的なブランド情報をカスタマイズできます。',
+    template_description_link_text: 'テンプレートを表示',
     description_action_text: 'テンプレートを表示',
     from_email_field: '送信元メールアドレス',
     sender_name_field: '送信元名',

packages/phrases/src/locales/ko/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: '전체 이메일 발송: {{value, number}}',
     total_email_sent_tip:
-      'Logto는 안전하고 안정적인 내장형 이메일에 SendGrid를 사용합니다. 완전히 무료로 사용할 수 있습니다.',
+      'Logto 에서 안전하고 안정적인 내장형 이메일을 위해 SendGrid 를 사용합니다. 완전 무료로 사용할 수 있습니다. <a>자세히 알아보기</a>',
     email_template_title: '이메일 템플릿',
     template_description:
       '내장형 이메일은 기본 템플릿을 사용하여 검증 이메일을 원활하게 전달합니다. 구성이 필요하지 않으며, 기본 브랜드 정보를 사용자 정의할 수 있습니다.',
+    template_description_link_text: '템플릿 보기',
     description_action_text: '템플릿 보기',
     from_email_field: '보내는 이메일',
     sender_name_field: '보내는 사람 이름',

packages/phrases/src/locales/pl-pl/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Wysłano łącznie emaili: {{value, number}}',
     total_email_sent_tip:
-      'Logto wykorzystuje SendGrid do bezpiecznego i stabilnego wbudowanego e-maila. Jest to całkowicie darmowe w użyciu.',
+      'Logto wykorzystuje SendGrid do bezpiecznej i stabilnej wysyłki wbudowanych wiadomości e-mail. Jest to całkowicie darmowe do użytku. <a>Więcej informacji</a>',
     email_template_title: 'Szablon e-maila',
     template_description:
       'Wbudowany e-mail używa domyślnych szablonów dla bezproblemowej dostawy wiadomości weryfikacyjnych. Nie wymaga to konfiguracji, a podstawowe informacje o marce można dostosować.',
+    template_description_link_text: 'Wyświetl szablony',
     description_action_text: 'Wyświetl szablony',
     from_email_field: 'Adres e-mail nadawcy',
     sender_name_field: 'Nazwa nadawcy',

packages/phrases/src/locales/pt-br/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Total de e-mails enviados: {{value, number}}',
     total_email_sent_tip:
-      'O Logto utiliza o SendGrid para e-mails integrados seguros e estáveis. É completamente gratuito para usar.',
+      'Logto utiliza SendGrid para envio seguro e estável de e-mails integrados. É completamente gratuito para uso. <a>Saiba mais</a>',
     email_template_title: 'Modelo de e-mail',
     template_description:
       'O e-mail integrado usa modelos padrão para entrega perfeita de e-mails de verificação. Nenhuma configuração é necessária e você pode personalizar informações básicas da marca.',
+    template_description_link_text: 'Visualizar modelos',
     description_action_text: 'Ver modelos',
     from_email_field: 'E-mail do remetente',
     sender_name_field: 'Nome do remetente',

packages/phrases/src/locales/pt-pt/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Total de emails enviados: {{value, number}}',
     total_email_sent_tip:
-      'O Logto utiliza o SendGrid para e-mails integrados seguros e estáveis. É completamente gratuito para usar.',
+      'Logto utiliza o SendGrid para e-mail interno seguro e estável. É completamente gratuito para usar. <a>Saiba mais</a>',
     email_template_title: 'Modelo de e-mail',
     template_description:
       'O e-mail integrado usa modelos padrão para entrega perfeita de e-mails de verificação. Nenhuma configuração é necessária e você pode personalizar informações básicas da marca.',
+    template_description_link_text: 'Ver modelos',
     description_action_text: 'Ver modelos',
     from_email_field: 'De e-mail',
     sender_name_field: 'Nome do remetente',

packages/phrases/src/locales/ru/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Всего отправлено электронных писем: {{value, number}}',
     total_email_sent_tip:
-      'Logto использует SendGrid для безопасной и стабильной встроенной электронной почты. Это полностью бесплатно в использовании.',
+      'Logto использует SendGrid для безопасной и стабильной встроенной электронной почты. Полностью бесплатно. <a>Узнать больше</a>',
     email_template_title: 'Шаблон электронной почты',
     template_description:
       'Встроенная электронная почта использует шаблоны по умолчанию для безшовной доставки писем с подтверждением. Никакой дополнительной настройки не требуется, и вы можете настроить базовую информацию о бренде.',
+    template_description_link_text: 'Просмотреть шаблоны',
     description_action_text: 'Просмотреть шаблоны',
     from_email_field: 'Отправитель',
     sender_name_field: 'Имя отправителя',

packages/phrases/src/locales/tr-tr/translation/admin-console/connector-details.ts

@@ -33,10 +33,11 @@ const connector_details = {
   logto_email: {
     total_email_sent: 'Toplam e-posta gönderildi: {{value, number}}',
     total_email_sent_tip:
-      'Logto, güvenli ve stabil yerleşik e-posta için SendGrid kullanır. Tamamen ücretsizdir.',
+      'Logto dahili e-posta için güvenli ve stabil SendGrid kullanır. Tamamen ücretsizdir. <a>Daha fazla bilgi edinin</a>',
     email_template_title: 'E-posta Şablonu',
     template_description:
       'Yerleşik e-posta, doğrulama e-postalarının sorunsuz teslimi için varsayılan şablonları kullanır. Herhangi bir yapılandırma gerektirmez ve temel marka bilgilerini özelleştirebilirsiniz.',
+    template_description_link_text: 'Şablonları görüntüle',
     description_action_text: 'Şablonları görüntüle',
     from_email_field: 'Kimden e-posta',
     sender_name_field: 'Gönderen adı',

packages/phrases/src/locales/zh-cn/translation/admin-console/connector-details.ts

@@ -31,10 +31,12 @@ const connector_details = {
   deletion_description: '你将删除此连接器。此操作不可撤销，再次添加需重新配置。',
   logto_email: {
     total_email_sent: '已发送邮件总数: {{value, number}}',
-    total_email_sent_tip: 'Logto 使用 SendGrid 提供安全稳定的内置电子邮件服务，完全免费。',
+    total_email_sent_tip:
+      'Logto 使用 SendGrid 进行安全稳定的内置电子邮件功能。此功能完全免费使用。<a>了解更多</a>',
     email_template_title: '电子邮件模板',
     template_description:
       '内置电子邮件使用默认模板，无需配置即可无缝发送验证电子邮件。您可以自定义基本品牌信息。',
+    template_description_link_text: '查看模板',
     description_action_text: '查看模板',
     from_email_field: '发件人电子邮件',
     sender_name_field: '发件人姓名',

packages/phrases/src/locales/zh-hk/translation/admin-console/connector-details.ts

@@ -31,10 +31,12 @@ const connector_details = {
   deletion_description: '你將刪除此連接器。此操作不可撤銷，再次添加需重新配置。',
   logto_email: {
     total_email_sent: '總發送郵件數：{{value, number}}',
-    total_email_sent_tip: 'Logto 使用 SendGrid 進行安全穩定的內置郵件。完全免費使用。',
+    total_email_sent_tip:
+      'Logto 使用 SendGrid 進行安全穩定的內建電子郵件。完全免費使用。<a>了解更多</a>',
     email_template_title: '郵件模板',
     template_description:
-      '內置郵件使用默認模板實現無縫交付驗證郵件。無需配置，您可以自定義基本品牌信息。',
+      '內建郵件使用默認模板實現無縫交付驗證郵件。無需配置，您可以自定義基本品牌信息。',
+    template_description_link_text: '查看模板',
     description_action_text: '查看模板',
     from_email_field: '發件人郵箱',
     sender_name_field: '發件人姓名',

packages/phrases/src/locales/zh-tw/translation/admin-console/connector-details.ts

@@ -31,10 +31,12 @@ const connector_details = {
   deletion_description: '您將刪除此連結器。此操作不可撤銷，再次添加需重新配置。',
   logto_email: {
     total_email_sent: '總發送郵件數：{{value, number}}',
-    total_email_sent_tip: 'Logto 使用 SendGrid 進行安全穩定的內置郵件。完全免費使用。',
+    total_email_sent_tip:
+      '在 Logto 中，使用 SendGrid 進行安全、穩定的內建郵件發送。完全免費使用。<a>了解更多</a>',
     email_template_title: '郵件模板',
     template_description:
       '內置郵件使用默認模板實現無縫交付驗證郵件。無需配置，您可以自定義基本品牌信息。',
+    template_description_link_text: '查看模板',
     description_action_text: '查看模板',
     from_email_field: '發件人郵箱',
     sender_name_field: '寄件人姓名',