From bc989eca38494ece1ea125061705bda2cb2f6691 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 3 Nov 2022 10:52:34 +0800
Subject: [PATCH] feat(console): add setup sie notice for the connectors page
 (#2306)

---
 .../console/src/components/Alert/index.tsx    |  4 +-
 .../console/src/hooks/use-user-preferences.ts |  1 +
 .../index.module.scss                         | 12 +++++
 .../SignInExperienceSetupNotice/index.tsx     | 50 +++++++++++++++++++
 .../src/pages/Connectors/index.module.scss    |  1 +
 .../console/src/pages/Connectors/index.tsx    |  2 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../en/translation/admin-console/general.ts   |  1 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../fr/translation/admin-console/general.ts   |  1 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../ko/translation/admin-console/general.ts   |  1 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../translation/admin-console/general.ts      |  1 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../translation/admin-console/general.ts      |  1 +
 .../translation/admin-console/connectors.ts   |  2 +
 .../translation/admin-console/general.ts      |  1 +
 18 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
 create mode 100644 packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx

diff --git a/packages/console/src/components/Alert/index.tsx b/packages/console/src/components/Alert/index.tsx
index 6a8f0cdd7..7b2a4c465 100644
--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@@ -15,6 +15,7 @@ type Props = {
   href?: string;
   onClick?: () => void;
   variant?: 'plain' | 'shadow';
+  className?: string;
 };
 
 const Alert = ({
@@ -24,9 +25,10 @@ const Alert = ({
   onClick,
   severity = 'info',
   variant = 'plain',
+  className,
 }: Props) => {
   return (
-    <div className={classNames(styles.alert, styles[severity], styles[variant])}>
+    <div className={classNames(styles.alert, styles[severity], styles[variant], className)}>
       <div className={styles.icon}>
         <Info />
       </div>
diff --git a/packages/console/src/hooks/use-user-preferences.ts b/packages/console/src/hooks/use-user-preferences.ts
index 4b3495ab3..c2ab27d59 100644
--- a/packages/console/src/hooks/use-user-preferences.ts
+++ b/packages/console/src/hooks/use-user-preferences.ts
@@ -19,6 +19,7 @@ const userPreferencesGuard = z.object({
   appearanceMode: z.nativeEnum(AppearanceMode),
   experienceNoticeConfirmed: z.boolean().optional(),
   getStartedHidden: z.boolean().optional(),
+  connectorSieNoticeConfirmed: z.boolean().optional(),
 });
 
 export type UserPreferences = z.infer<typeof userPreferencesGuard>;
diff --git a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
new file mode 100644
index 000000000..a5984cc59
--- /dev/null
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
@@ -0,0 +1,12 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  .notice {
+    margin: _.unit(4) 0 0;
+  }
+
+  a {
+    color: var(--color-text-link);
+    text-decoration: none;
+  }
+}
diff --git a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
new file mode 100644
index 000000000..66be87a6b
--- /dev/null
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
@@ -0,0 +1,50 @@
+import type { ConnectorResponse } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Alert from '@/components/Alert';
+import useUserPreferences from '@/hooks/use-user-preferences';
+
+import * as styles from './index.module.scss';
+
+const SignInExperienceSetupNotice = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data: connectors } = useSWR<ConnectorResponse[]>('/api/connectors');
+  const {
+    data: { connectorSieNoticeConfirmed },
+    update,
+  } = useUserPreferences();
+
+  if (!connectors || connectorSieNoticeConfirmed) {
+    return null;
+  }
+
+  const hasSetupConnector = connectors.some(({ enabled }) => enabled);
+
+  if (!hasSetupConnector) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Alert
+        action="general.got_it"
+        className={styles.notice}
+        onClick={() => {
+          void update({ connectorSieNoticeConfirmed: true });
+        }}
+      >
+        <Trans
+          components={{
+            a: <Link to="/sign-in-experience/sign-up-and-sign-in" target="_blank" />,
+          }}
+        >
+          {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
+        </Trans>
+      </Alert>
+    </div>
+  );
+};
+
+export default SignInExperienceSetupNotice;
diff --git a/packages/console/src/pages/Connectors/index.module.scss b/packages/console/src/pages/Connectors/index.module.scss
index 29af73133..7a34d0ef7 100644
--- a/packages/console/src/pages/Connectors/index.module.scss
+++ b/packages/console/src/pages/Connectors/index.module.scss
@@ -7,6 +7,7 @@
 .headline {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .tabs {
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index eb4b97173..e87cfe0d4 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -20,6 +20,7 @@ import * as tableStyles from '@/scss/table.module.scss';
 
 import ConnectorRow from './components/ConnectorRow';
 import CreateForm from './components/CreateForm';
+import SignInExperienceSetupNotice from './components/SignInExperienceSetupNotice';
 import * as styles from './index.module.scss';
 
 const Connectors = () => {
@@ -73,6 +74,7 @@ const Connectors = () => {
             />
           )}
         </div>
+        <SignInExperienceSetupNotice />
         <TabNav className={styles.tabs}>
           <TabNavItem href="/connectors">{t('connectors.tab_email_sms')}</TabNavItem>
           <TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
diff --git a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts
index 29bc0c74c..075d02e24 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/connectors.ts
@@ -2,6 +2,8 @@ const connectors = {
   title: 'Connectors',
   subtitle: 'Set up connectors to enable passwordless and social sign in experience',
   create: 'Add Social Connector',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.',
+  config_sie_link_text: 'sign in experience',
   tab_email_sms: 'Email and SMS connectors',
   tab_social: 'Social connectors',
   connector_name: 'Connector name',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/general.ts b/packages/phrases/src/locales/en/translation/admin-console/general.ts
index 4abb76f90..3701119b3 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts
@@ -36,6 +36,7 @@ const general = {
   leave_page: 'Leave Page',
   stay_on_page: 'Stay on Page',
   type_to_search: 'Type to search',
+  got_it: 'Got it',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts
index b7a312775..88bb1ecf8 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/connectors.ts
@@ -3,6 +3,8 @@ const connectors = {
   subtitle:
     'Configurez des connecteurs pour permettre une expérience de connexion sans mot de passe et sociale.',
   create: 'Ajouter un connecteur social',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
+  config_sie_link_text: 'sign in experience', // UNTRANSLATED
   tab_email_sms: 'Connecteurs Email et SMS',
   tab_social: 'Connecteurs sociaux',
   connector_name: 'Nom du connecteur',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/general.ts b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
index 39cc45b8f..4686987d5 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
@@ -37,6 +37,7 @@ const general = {
   leave_page: 'Quittez la page',
   stay_on_page: 'Rester sur la page',
   type_to_search: 'Type to search', // UNTRANSLATED
+  got_it: 'Got it', // UNTRANSLATED
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts
index 7a80a7f0e..1e77ad925 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/connectors.ts
@@ -2,6 +2,8 @@ const connectors = {
   title: '연동',
   subtitle: '비밀번호 없이 또는 소셜 로그인을 제공하여 보다 나은 경험을 위해 연동해주세요.',
   create: '소셜 연동 추가',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
+  config_sie_link_text: 'sign in experience', // UNTRANSLATED
   tab_email_sms: '이메일/SMS 연동',
   tab_social: '소셜 연동',
   connector_name: '연동 이름',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/general.ts b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
index 49f4a91c9..3d88f40a1 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
@@ -36,6 +36,7 @@ const general = {
   leave_page: '페이지 나가기',
   stay_on_page: '페이지 유지하기',
   type_to_search: 'Type to search', // UNTRANSLATED
+  got_it: 'Got it', // UNTRANSLATED
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts
index 05a5efb9b..62a8b604d 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts
@@ -2,6 +2,8 @@ const connectors = {
   title: 'Conectores',
   subtitle: 'Configure conectores para habilitar a experiência de login social e sem senha',
   create: 'Adicionar conector social',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
+  config_sie_link_text: 'sign in experience', // UNTRANSLATED
   tab_email_sms: 'Conectores de Email e SMS',
   tab_social: 'Conectores sociais',
   connector_name: 'Nome do conector',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
index 1a916e550..1bae83b75 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
@@ -36,6 +36,7 @@ const general = {
   leave_page: 'Sair da página',
   stay_on_page: 'Ficar na página',
   type_to_search: 'Type to search', // UNTRANSLATED
+  got_it: 'Got it', // UNTRANSLATED
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts
index e3b3bbc25..4a3d3b155 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts
@@ -3,6 +3,8 @@ const connectors = {
   subtitle:
     'Şifresiz ve sosyal oturum açma deneyimini etkinleştirmek için connectorları ayarlayınız.',
   create: 'Social Connector ekle',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
+  config_sie_link_text: 'sign in experience', // UNTRANSLATED
   tab_email_sms: 'E-posta ve SMS connectorları',
   tab_social: 'Social connectorlar',
   connector_name: 'Connector adı',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
index 9f490afc3..23b3492c6 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
@@ -37,6 +37,7 @@ const general = {
   leave_page: 'Sayfayı terk et',
   stay_on_page: 'Bu sayfada kal',
   type_to_search: 'Type to search', // UNTRANSLATED
+  got_it: 'Got it', // UNTRANSLATED
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts
index 7ee82a04b..26b698bd3 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts
@@ -2,6 +2,8 @@ const connectors = {
   title: '连接器',
   subtitle: '设置连接器，开启无密码和社交登录',
   create: '添加社交连接器',
+  config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
+  config_sie_link_text: 'sign in experience', // UNTRANSLATED
   tab_email_sms: '短信和邮件连接器',
   tab_social: '社交连接器',
   connector_name: '连接器名称',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
index 9a9161558..3d4d1fa55 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
@@ -36,6 +36,7 @@ const general = {
   leave_page: '离开此页',
   stay_on_page: '留在此页',
   type_to_search: '输入搜索',
+  got_it: 'Got it', // UNTRANSLATED
 };
 
 export default general;