From 9663852f1e640000c971495008a08d9181230ad5 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 30 Mar 2023 17:44:46 +0800
Subject: [PATCH] refactor(console): hide native preview when no social target
 supports native (#3626)

---
 packages/console/src/consts/connectors.ts     |  3 ++
 .../console/src/hooks/use-connector-groups.ts |  7 +++++
 .../components/Preview/index.tsx              | 29 +++++++++++--------
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 .../admin-console/sign-in-exp/index.ts        |  2 ++
 16 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts
index 2a347490b..653e53ed7 100644
--- a/packages/console/src/consts/connectors.ts
+++ b/packages/console/src/consts/connectors.ts
@@ -55,3 +55,6 @@ export const defaultEmailConnectorGroup: ConnectorGroup = {
   logoDark: null,
   target: '',
 };
+
+// Note: these connector targets will need a native connector to support the native platform
+export const supportNativePlatformTargets = ['wechat', 'alipay'];
diff --git a/packages/console/src/hooks/use-connector-groups.ts b/packages/console/src/hooks/use-connector-groups.ts
index 7e021133d..7df8ab288 100644
--- a/packages/console/src/hooks/use-connector-groups.ts
+++ b/packages/console/src/hooks/use-connector-groups.ts
@@ -2,6 +2,7 @@ import type { ConnectorResponse } from '@logto/schemas';
 import { useMemo } from 'react';
 import useSWR from 'swr';
 
+import { supportNativePlatformTargets } from '@/consts';
 import type { RequestError } from '@/hooks/use-api';
 import { getConnectorGroups } from '@/pages/Connectors/utils';
 
@@ -17,10 +18,16 @@ const useConnectorGroups = () => {
     return getConnectorGroups(data);
   }, [data]);
 
+  const hasSupportNativePlatformTarget = useMemo(
+    () => groups?.some(({ target }) => supportNativePlatformTargets.includes(target)) ?? false,
+    [groups]
+  );
+
   return {
     ...rest,
     data: groups,
     connectors: data,
+    hasSupportNativePlatformTarget,
   };
 };
 
diff --git a/packages/console/src/pages/SignInExperience/components/Preview/index.tsx b/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
index 06e1a3fc5..c3234e73a 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview/index.tsx
@@ -1,7 +1,6 @@
 import type { LanguageTag } from '@logto/language-kit';
 import { languages as uiLanguageNameMapping } from '@logto/language-kit';
-import type { SignInExperience } from '@logto/schemas';
-import { Theme } from '@logto/schemas';
+import { type SignInExperience, Theme } from '@logto/schemas';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +10,7 @@ import Select from '@/components/Select';
 import SignInExperiencePreview, { ToggleUiThemeButton } from '@/components/SignInExperiencePreview';
 import { PreviewPlatform } from '@/components/SignInExperiencePreview/types';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import useConnectorGroups from '@/hooks/use-connector-groups';
 import useUiLanguages from '@/hooks/use-ui-languages';
 
 import * as styles from './index.module.scss';
@@ -29,6 +29,7 @@ function Preview({
   className,
 }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { hasSupportNativePlatformTarget: isNativeTabEnabled } = useConnectorGroups();
   const [language, setLanguage] = useState<LanguageTag>('en');
   const [mode, setMode] = useState<Theme>(Theme.Light);
   const [platform, setPlatform] = useState<PreviewPlatform>(PreviewPlatform.DesktopWeb);
@@ -95,7 +96,9 @@ function Preview({
             setPlatform(PreviewPlatform.DesktopWeb);
           }}
         >
-          {t('sign_in_exp.preview.desktop_web')}
+          {t(
+            isNativeTabEnabled ? 'sign_in_exp.preview.desktop_web' : 'sign_in_exp.preview.desktop'
+          )}
         </TabNavItem>
         <TabNavItem
           isActive={platform === PreviewPlatform.MobileWeb}
@@ -103,16 +106,18 @@ function Preview({
             setPlatform(PreviewPlatform.MobileWeb);
           }}
         >
-          {t('sign_in_exp.preview.mobile_web')}
-        </TabNavItem>
-        <TabNavItem
-          isActive={platform === PreviewPlatform.Mobile}
-          onClick={() => {
-            setPlatform(PreviewPlatform.Mobile);
-          }}
-        >
-          {t('sign_in_exp.preview.native')}
+          {t(isNativeTabEnabled ? 'sign_in_exp.preview.mobile_web' : 'sign_in_exp.preview.mobile')}
         </TabNavItem>
+        {isNativeTabEnabled && (
+          <TabNavItem
+            isActive={platform === PreviewPlatform.Mobile}
+            onClick={() => {
+              setPlatform(PreviewPlatform.Mobile);
+            }}
+          >
+            {t('sign_in_exp.preview.native')}
+          </TabNavItem>
+        )}
       </TabNav>
       <SignInExperiencePreview
         platform={platform}
diff --git a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp/index.ts
index 924d71c70..aba724cd7 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp/index.ts
@@ -80,6 +80,8 @@ const sign_in_exp = {
     native: 'Native',
     desktop_web: 'Desktop-Web',
     mobile_web: 'Mobile-Web',
+    desktop: 'Desktop',
+    mobile: 'Mobilgerät',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
index 14bded268..d6fa4f5ae 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
@@ -79,6 +79,8 @@ const sign_in_exp = {
     native: 'Native',
     desktop_web: 'Desktop Web',
     mobile_web: 'Mobile Web',
+    desktop: 'Desktop',
+    mobile: 'Mobile',
   },
 };
 
diff --git a/packages/phrases/src/locales/es/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/es/translation/admin-console/sign-in-exp/index.ts
index 062336432..872ad7d61 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/sign-in-exp/index.ts
@@ -81,6 +81,8 @@ const sign_in_exp = {
     native: 'Nativo',
     desktop_web: 'Web de escritorio',
     mobile_web: 'Web móvil',
+    desktop: 'Escritorio',
+    mobile: 'Móvil',
   },
 };
 
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp/index.ts
index 05e211e17..533f2c904 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp/index.ts
@@ -79,6 +79,8 @@ const sign_in_exp = {
     native: 'Natif',
     desktop_web: 'Site web pour ordinateur de bureau',
     mobile_web: 'Site web mobile',
+    desktop: 'Bureau',
+    mobile: 'Mobile',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/ja/translation/admin-console/sign-in-exp/index.ts
index e75bf0e18..3f85cf984 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/sign-in-exp/index.ts
@@ -79,6 +79,8 @@ const sign_in_exp = {
     native: 'ネイティブ',
     desktop_web: 'デスクトップWeb',
     mobile_web: 'モバイルWeb',
+    desktop: 'デスクトップ',
+    mobile: 'モバイル',
   },
 };
 
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp/index.ts
index 6a628958c..df1864261 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp/index.ts
@@ -75,6 +75,8 @@ const sign_in_exp = {
     native: '네이티브',
     desktop_web: '데스크톱 웹',
     mobile_web: '모바일 웹',
+    desktop: '데스크톱',
+    mobile: '모바일',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp/index.ts
index a8cc4c7f4..d1d267991 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp/index.ts
@@ -78,6 +78,8 @@ const sign_in_exp = {
     native: 'Nativo',
     desktop_web: 'Web Desktop',
     mobile_web: 'Web Mobile',
+    desktop: 'Área de trabalho',
+    mobile: 'Móvel',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp/index.ts
index 63d6c0483..ce6b30fd5 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp/index.ts
@@ -77,6 +77,8 @@ const sign_in_exp = {
     native: 'App nativa',
     desktop_web: 'Web no computador',
     mobile_web: 'Web no telemóvel',
+    desktop: 'Ambiente de trabalho',
+    mobile: 'Móvel',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/ru/translation/admin-console/sign-in-exp/index.ts
index e2b2b547a..3409b44d8 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/sign-in-exp/index.ts
@@ -81,6 +81,8 @@ const sign_in_exp = {
     native: 'Нативный',
     desktop_web: 'Веб на рабочем столе',
     mobile_web: 'Мобильный веб',
+    desktop: 'Рабочий стол',
+    mobile: 'Мобильный',
   },
 };
 
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp/index.ts
index 6ec43cc98..8b6f1bafd 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp/index.ts
@@ -78,6 +78,8 @@ const sign_in_exp = {
     native: 'Doğal',
     desktop_web: 'Masaüstü Web',
     mobile_web: 'Mobil Web',
+    desktop: 'Masaüstü',
+    mobile: 'Mobil',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp/index.ts
index 42d5eb2aa..d86ec95e3 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp/index.ts
@@ -74,6 +74,8 @@ const sign_in_exp = {
     native: '移动原生',
     desktop_web: '桌面网页',
     mobile_web: '移动网页',
+    desktop: '桌面网页',
+    mobile: '移动设备',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/sign-in-exp/index.ts
index fcc576c65..40e7ec570 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/sign-in-exp/index.ts
@@ -74,6 +74,8 @@ const sign_in_exp = {
     native: '移動原生',
     desktop_web: '桌面網頁',
     mobile_web: '移動網頁',
+    desktop: '桌面網頁',
+    mobile: '移動設備',
   },
   others,
   sign_up_and_sign_in,
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/sign-in-exp/index.ts
index 8fb211835..98700db60 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/sign-in-exp/index.ts
@@ -74,6 +74,8 @@ const sign_in_exp = {
     native: '移動原生',
     desktop_web: '桌面網頁',
     mobile_web: '移動網頁',
+    desktop: '桌面網頁',
+    mobile: '行動裝置',
   },
   others,
   sign_up_and_sign_in,