refactor(console): hide native preview when no social target supports native (#3626)

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'];

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,
   };
 };
 

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}

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,

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',
   },
 };
 

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',
   },
 };
 

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,

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: 'モバイル',
   },
 };
 

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,

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,

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,

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: 'Мобильный',
   },
 };
 

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,

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,

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,

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,