feat(console): add onboarding banner for integrate prebuilt UI section

Add a dismissible notification in the "Integrate Prebuilt UI" section
to inform users they need to set Account API permissions to "Edit"
before using the prebuilt flows.

- Add InlineNotification with "Got It" button
- Store acknowledged state in user preferences
- Add translations for all 16 supported languages

Author: wangsijie

packages/console/src/hooks/use-user-preferences.ts

@@ -30,6 +30,7 @@ const userPreferencesGuard = z.object({
   thirdPartyAppsUpsellNoticeAcknowledged: z.boolean().optional(),
   rbacUpsellNoticeAcknowledged: z.boolean().optional(),
   /* === Add on feature related fields === */
+  prebuiltUiPermissionNoticeAcknowledged: z.boolean().optional(),
 });
 
 type UserPreferences = z.infer<typeof userPreferencesGuard>;

packages/console/src/pages/SignInExperience/PageContent/AccountCenter/IntegratePrebuiltUi/index.module.scss

@@ -12,6 +12,10 @@
   margin-bottom: _.unit(3);
 }
 
+.notice {
+  margin-bottom: _.unit(3);
+}
+
 .urlGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

packages/console/src/pages/SignInExperience/PageContent/AccountCenter/IntegratePrebuiltUi/index.tsx

@@ -1,12 +1,14 @@
 import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import FormCard from '@/components/FormCard';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
+import InlineNotification from '@/ds-components/InlineNotification';
 import TextLink from '@/ds-components/TextLink';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
+import useUserPreferences from '@/hooks/use-user-preferences';
 
 import PrebuiltUiUrlItem from './PrebuiltUiUrlItem';
 import styles from './index.module.scss';
@@ -48,6 +50,10 @@ function IntegratePrebuiltUi() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { tenantEndpoint } = useContext(AppDataContext);
   const { getDocumentationUrl } = useDocumentationUrl();
+  const {
+    data: { prebuiltUiPermissionNoticeAcknowledged },
+    update,
+  } = useUserPreferences();
 
   return (
     <FormCard
@@ -63,6 +69,23 @@ function IntegratePrebuiltUi() {
           <div className={styles.description}>
             <DynamicT forKey="sign_in_exp.account_center.prebuilt_ui.flows_description" />
           </div>
+          {!prebuiltUiPermissionNoticeAcknowledged && (
+            <InlineNotification
+              className={styles.notice}
+              action="general.got_it"
+              onClick={() => {
+                void update({ prebuiltUiPermissionNoticeAcknowledged: true });
+              }}
+            >
+              <Trans
+                components={{
+                  strong: <strong />,
+                }}
+              >
+                {t('sign_in_exp.account_center.prebuilt_ui.permission_notice')}
+              </Trans>
+            </InlineNotification>
+          )}
           <div className={styles.urlGrid}>
             {prebuiltRoutes.map(({ path, tooltipKey }) => (
               <PrebuiltUiUrlItem

packages/phrases/src/locales/ar/translation/admin-console/sign-in-exp/index.ts

@@ -166,6 +166,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        'لدمج هذه التدفقات المُعدة مسبقًا، قم بتعيين أذونات Account API ذات الصلة إلى <strong>تحرير</strong> في الإعدادات أدناه.',
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */

packages/phrases/src/locales/de/translation/admin-console/sign-in-exp/index.ts

@@ -169,6 +169,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        'Um diese vorgefertigten Flows zu integrieren, setzen Sie die entsprechenden Account-API-Berechtigungen in den Einstellungen unten auf <strong>Bearbeiten</strong>.',
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */

packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts

@@ -167,6 +167,8 @@ const sign_in_exp = {
       title: 'INTEGRATE PREBUILT UI',
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        'To integrate these prebuilt flows, set the related Account API permissions to <strong>Edit</strong> in the settings below.',
       flows_title: 'Integrate out-of-the-box security setting flows',
       flows_description:
         'Combine your domain with the route to form your account setting URL (e.g., https://auth.foo.com/account/email). Optionally add a `redirect=` URL parameter to return users to your app after successfully updating.',

packages/phrases/src/locales/es/translation/admin-console/sign-in-exp/index.ts

@@ -171,6 +171,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        'Para integrar estos flujos prediseñados, establezca los permisos de la API de cuenta relacionados en <strong>Editar</strong> en la configuración a continuación.',
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */

packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp/index.ts

@@ -171,6 +171,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        "Pour intégrer ces flux préconstruits, définissez les autorisations de l'API de compte associées sur <strong>Modifier</strong> dans les paramètres ci-dessous.",
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */

packages/phrases/src/locales/it/translation/admin-console/sign-in-exp/index.ts

@@ -169,6 +169,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        "Per integrare questi flussi predefiniti, imposta i permessi dell'API account correlati su <strong>Modifica</strong> nelle impostazioni sottostanti.",
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */

packages/phrases/src/locales/ja/translation/admin-console/sign-in-exp/index.ts

@@ -169,6 +169,8 @@ const sign_in_exp = {
       /** UNTRANSLATED */
       description:
         'Quickly integrate out-of-the-box verification and security setting flows with prebuilt UI.',
+      permission_notice:
+        'これらのプリビルトフローを統合するには、以下の設定で関連するアカウント API の権限を<strong>編集</strong>に設定してください。',
       /** UNTRANSLATED */
       flows_title: 'Integrate out-of-the-box security setting flows',
       /** UNTRANSLATED */