refactor(console): userAccountInformation (#3045)

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

@@ -17,10 +17,20 @@ type Props = {
   password: string;
   title: AdminConsoleKey;
   onClose: () => void;
+  onConfirm?: () => void;
   passwordLabel?: string;
+  confirmButtonTitle?: AdminConsoleKey;
 };
 
-const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Props) => {
+const UserAccountInformation = ({
+  username,
+  password,
+  title,
+  onClose,
+  onConfirm,
+  passwordLabel,
+  confirmButtonTitle,
+}: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
@@ -52,7 +62,7 @@ const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Pr
         title={title}
         footer={
           <>
-            <Button title="general.done" onClick={onClose} />
+            <Button title={confirmButtonTitle ?? 'general.done'} onClick={onConfirm ?? onClose} />
             <Button type="primary" title="general.copy" onClick={handleCopy} />
           </>
         }
@@ -86,4 +96,4 @@ const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Pr
   );
 };
 
-export default CreateSuccess;
+export default UserAccountInformation;

packages/console/src/pages/UserDetails/index.tsx

@@ -25,7 +25,7 @@ import useApi from '@/hooks/use-api';
 import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import CreateSuccess from './components/CreateSuccess';
+import UserAccountInformation from '../../components/UserAccountInformation';
 import ResetPasswordForm from './components/ResetPasswordForm';
 import * as styles from './index.module.scss';
 import { UserDetailsOutletContext } from './types';
@@ -173,7 +173,7 @@ const UserDetails = () => {
             }
           />
           {resetResult && (
-            <CreateSuccess
+            <UserAccountInformation
               title="user_details.reset_password.congratulations"
               username={data.username ?? '-'}
               password={resetResult}

packages/console/src/pages/Users/components/CreateForm/index.tsx

@@ -5,14 +5,14 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import Button from '@/components/Button';
 import FormField from '@/components/FormField';
 import ModalLayout from '@/components/ModalLayout';
 import TextInput from '@/components/TextInput';
+import UserAccountInformation from '@/components/UserAccountInformation';
 import useApi from '@/hooks/use-api';
-import CreateSuccess from '@/pages/UserDetails/components/CreateSuccess';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 type FormData = {
@@ -27,10 +27,12 @@ type CreatedUserInfo = {
 
 type Props = {
   onClose: () => void;
+  onCreate: () => void;
 };
 
-const CreateForm = ({ onClose }: Props) => {
+const CreateForm = ({ onClose, onCreate }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { search } = useLocation();
   const navigate = useNavigate();
   const [createdUserInfo, setCreatedUserInfo] = useState<CreatedUserInfo>();
 
@@ -55,14 +57,20 @@ const CreateForm = ({ onClose }: Props) => {
       user: createdUser,
       password,
     });
+
+    onCreate();
   });
 
   return createdUserInfo ? (
-    <CreateSuccess
+    <UserAccountInformation
       title="user_details.created_title"
       username={createdUserInfo.user.username ?? '-'}
       password={createdUserInfo.password}
+      confirmButtonTitle="users.check_user_detail"
       onClose={() => {
+        navigate({ pathname: '/users', search });
+      }}
+      onConfirm={() => {
         navigate(`/users/${createdUserInfo.user.id}`, { replace: true });
       }}
     />

packages/console/src/pages/Users/index.tsx

@@ -74,6 +74,9 @@ const Users = () => {
                 search,
               });
             }}
+            onCreate={() => {
+              void mutate();
+            }}
           />
         )}
       </div>

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Name',
   unnamed: 'Unbenannt',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Full name',
   unnamed: 'Unnamed',
   search: 'Search by name, email, phone or username',
+  check_user_detail: 'Check user detail',
 };
 
 export default users;

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Nom complet',
   unnamed: 'Sans nom',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -10,6 +10,7 @@ const users = {
   create_form_name: '이름',
   unnamed: '이름없음',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Nome completo',
   unnamed: 'Sem nome',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Nome completo',
   unnamed: 'Sem nome',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -11,6 +11,7 @@ const users = {
   create_form_name: 'Ad Soyad',
   unnamed: 'İsimsiz',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: 'Check user detail', // UNTRANSLATED
 };
 
 export default users;

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

@@ -10,6 +10,7 @@ const users = {
   create_form_name: '姓名',
   unnamed: '未命名',
   search: 'Search by name, email, phone or username', // UNTRANSLATED
+  check_user_detail: '查看用户详情',
 };
 
 export default users;