force show update notification modal & fix login page text (#3512)

* fix login page English text

* update notification modal

projects/app/src/components/Layout/index.tsx

@@ -19,6 +19,9 @@ const UpdateInviteModal = dynamic(() => import('@/components/support/user/team/U
 const NotSufficientModal = dynamic(() => import('@/components/support/wallet/NotSufficientModal'));
 const SystemMsgModal = dynamic(() => import('@/components/support/user/inform/SystemMsgModal'));
 const ImportantInform = dynamic(() => import('@/components/support/user/inform/ImportantInform'));
+const UpdateNotification = dynamic(
+  () => import('@/components/support/user/inform/UpdateNotificationModal')
+);
 
 const pcUnShowLayoutRoute: Record<string, boolean> = {
   '/': true,
@@ -50,7 +53,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
   const { Loading } = useLoading();
   const { loading, feConfigs, isNotSufficientModal } = useSystemStore();
   const { isPc } = useSystem();
-  const { userInfo } = useUserStore();
+  const { userInfo, isUpdateNotification, setIsUpdateNotification } = useUserStore();
   const { setUserDefaultLng } = useI18nLng();
 
   const isChatPage = useMemo(
@@ -68,6 +71,11 @@ const Layout = ({ children }: { children: JSX.Element }) => {
 
   const isHideNavbar = !!pcUnShowLayoutRoute[router.pathname];
 
+  const showUpdateNotification =
+    isUpdateNotification &&
+    !userInfo?.team.notificationAccount &&
+    !!userInfo?.team.permission.isOwner;
+
   useMount(() => {
     setUserDefaultLng();
   });
@@ -115,6 +123,9 @@ const Layout = ({ children }: { children: JSX.Element }) => {
           {!!userInfo && <UpdateInviteModal />}
           {isNotSufficientModal && <NotSufficientModal />}
           {!!userInfo && <SystemMsgModal />}
+          {showUpdateNotification && (
+            <UpdateNotification onClose={() => setIsUpdateNotification(false)} />
+          )}
           {!!userInfo && importantInforms.length > 0 && (
             <ImportantInform informs={importantInforms} refetch={refetchUnRead} />
           )}

projects/app/src/components/support/user/inform/UpdateNotificationModal.tsx

@@ -38,8 +38,8 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
         initUserInfo();
         onClose();
       },
-      successToast: t('account_info:bind_notification_success'),
-      errorToast: t('account_info:bind_notification_error')
+      successToast: t('common:support.user.info.bind_notification_success'),
+      errorToast: t('common:support.user.info.bind_notification_error')
     }
   );
 
@@ -49,9 +49,9 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
     ?.map((item) => {
       switch (item) {
         case 'email':
-          return t('account_info:email_label');
+          return t('common:support.user.login.Email');
         case 'phone':
-          return t('account_info:phone_label');
+          return t('common:support.user.login.Phone number');
       }
     })
     .join('/');
@@ -62,16 +62,16 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
         isOpen
         iconSrc="common/settingLight"
         w={'32rem'}
-        title={t('account_info:notification_receiving_hint')}
+        title={t('common:support.user.info.notification_receiving_hint')}
       >
         <ModalBody px={10}>
           <Flex flexDirection="column">
             <HStack px="6" py="3" color="primary.600" bgColor="primary.50" borderRadius="md">
               <Icon name="common/info" w="1rem" />
-              <Box fontSize={'sm'}>{t('account_info:bind_notification_hint')}</Box>
+              <Box fontSize={'sm'}>{t('common:support.user.info.bind_notification_hint')}</Box>
             </HStack>
             <Flex mt="4" alignItems="center">
-              <Box flex={'0 0 70px'}>{t('account_info:user_account')}</Box>
+              <Box flex={'0 0 70px'}>{t('common:user.Account')}</Box>
               <Input
                 flex={1}
                 bg={'myGray.50'}
@@ -80,12 +80,12 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
               ></Input>
             </Flex>
             <Flex mt="6" alignItems="center" position={'relative'}>
-              <Box flex={'0 0 70px'}>{t('account_info:verification_code')}</Box>
+              <Box flex={'0 0 70px'}>{t('common:support.user.info.verification_code')}</Box>
               <Input
                 flex={1}
                 bg={'myGray.50'}
                 {...register('verifyCode', { required: true })}
-                placeholder={t('account_info:code_required')}
+                placeholder={t('common:support.user.info.code_required')}
               ></Input>
               <SendCodeBox username={account} />
             </Flex>
@@ -93,14 +93,14 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
         </ModalBody>
         <ModalFooter>
           <Button mr={3} variant={'whiteBase'} onClick={onClose}>
-            {t('account_info:cancel')}
+            {t('common:common.Cancel')}
           </Button>
           <Button
             isLoading={isLoading}
             isDisabled={!account || !verifyCode}
             onClick={handleSubmit((data) => onSubmit(data))}
           >
-            {t('account_info:confirm')}
+            {t('common:common.Confirm')}
           </Button>
         </ModalFooter>
       </MyModal>

projects/app/src/pages/account/info/index.tsx

@@ -47,7 +47,9 @@ import TeamSelector from '../components/TeamSelector';
 const StandDetailModal = dynamic(() => import('./components/standardDetailModal'), { ssr: false });
 const ConversionModal = dynamic(() => import('./components/ConversionModal'));
 const UpdatePswModal = dynamic(() => import('./components/UpdatePswModal'));
-const UpdateNotification = dynamic(() => import('./components/UpdateNotificationModal'));
+const UpdateNotification = dynamic(
+  () => import('@/components/support/user/inform/UpdateNotificationModal')
+);
 const CommunityModal = dynamic(() => import('@/components/CommunityModal'));
 
 const ModelPriceModal = dynamic(() =>

projects/app/src/web/support/user/useUserStore.ts

@@ -18,6 +18,9 @@ type State = {
   systemMsgReadId: string;
   setSysMsgReadId: (id: string) => void;
 
+  isUpdateNotification: boolean;
+  setIsUpdateNotification: (val: boolean) => void;
+
   userInfo: UserType | null;
   isTeamAdmin: boolean;
   initUserInfo: () => Promise<UserType>;
@@ -50,6 +53,13 @@ export const useUserStore = create<State>()(
           });
         },
 
+        isUpdateNotification: true,
+        setIsUpdateNotification(val: boolean) {
+          set((state) => {
+            state.isUpdateNotification = val;
+          });
+        },
+
         userInfo: null,
         isTeamAdmin: false,
         async initUserInfo() {
@@ -156,7 +166,8 @@ export const useUserStore = create<State>()(
       {
         name: 'userStore',
         partialize: (state) => ({
-          systemMsgReadId: state.systemMsgReadId
+          systemMsgReadId: state.systemMsgReadId,
+          isUpdateNotification: state.isUpdateNotification
         })
       }
     )