System inform (#2263)

* feat: Bind Notification Pipe (#2229)

* chore: account page add bind notification modal

* feat: timerlock schema and type

* feat(fe): bind notification method modal

* chore: fe adjust

* feat: clean useless code

* fix: cron lock

* chore: adjust the code

* chore: rename api

* chore: remove unused code

* chore: fe adjust

* perf: bind inform ux

* fix: time ts

* chore: notification (#2251)

* perf: send message code

* perf: sub schema index

* fix: timezone plugin

* fix: format

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>

projects/app/src/pages/account/components/Info.tsx

@@ -50,6 +50,7 @@ const StandDetailModal = dynamic(() => import('./standardDetailModal'));
 const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
 const PayModal = dynamic(() => import('./PayModal'));
 const UpdatePswModal = dynamic(() => import('./UpdatePswModal'));
+const UpdateNotification = dynamic(() => import('./UpdateNotificationModal'));
 const OpenAIAccountModal = dynamic(() => import('./OpenAIAccountModal'));
 const LafAccountModal = dynamic(() => import('@/components/support/laf/LafAccountModal'));
 const CommunityModal = dynamic(() => import('@/components/CommunityModal'));
@@ -113,6 +114,11 @@ const MyInfo = () => {
     onClose: onCloseUpdatePsw,
     onOpen: onOpenUpdatePsw
   } = useDisclosure();
+  const {
+    isOpen: isOpenUpdateNotification,
+    onClose: onCloseUpdateNotification,
+    onOpen: onOpenUpdateNotification
+  } = useDisclosure();
   const { File, onOpen: onOpenSelectFile } = useSelectFile({
     fileType: '.jpg,.png',
     multiple: false
@@ -225,7 +231,7 @@ const MyInfo = () => {
             </Flex>
           </Flex>
         )}
-        {feConfigs.isPlus && (
+        {feConfigs?.isPlus && (
           <Flex mt={[0, 4]} alignItems={'center'}>
             <Box {...labelStyles}>{t('common:user.Member Name')}:&nbsp;</Box>
             <Input
@@ -249,7 +255,7 @@ const MyInfo = () => {
           <Box {...labelStyles}>{t('common:user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
-        {feConfigs.isPlus && (
+        {feConfigs?.isPlus && (
           <Flex mt={6} alignItems={'center'}>
             <Box {...labelStyles}>{t('common:user.Password')}:&nbsp;</Box>
             <Box flex={1}>*****</Box>
@@ -258,13 +264,27 @@ const MyInfo = () => {
             </Button>
           </Flex>
         )}
+        {feConfigs?.isPlus && (
+          <Flex mt={6} alignItems={'center'}>
+            <Box {...labelStyles}>{t('common:user.Notification Receive')}:&nbsp;</Box>
+            <Box flex={1} {...(userInfo?.team.notificationAccount ? {} : { color: 'red.600' })}>
+              {userInfo?.team.notificationAccount || t('common:user.Notification Receive Bind')}
+            </Box>
+
+            {userInfo?.permission.isOwner && (
+              <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdateNotification}>
+                {t('common:user.Change')}
+              </Button>
+            )}
+          </Flex>
+        )}
         <Flex mt={6} alignItems={'center'}>
           <Box {...labelStyles}>{t('common:user.Team')}:&nbsp;</Box>
           <Box flex={1}>
             <TeamMenu />
           </Box>
         </Flex>
-        {feConfigs.isPlus && (
+        {feConfigs?.isPlus && (
           <Box mt={6} whiteSpace={'nowrap'}>
             <Flex alignItems={'center'}>
               <Box {...labelStyles}>{t('common:user.team.Balance')}:&nbsp;</Box>
@@ -282,6 +302,7 @@ const MyInfo = () => {
       </Box>
       {isOpenPayModal && <PayModal onClose={onClosePayModal} />}
       {isOpenUpdatePsw && <UpdatePswModal onClose={onCloseUpdatePsw} />}
+      {isOpenUpdateNotification && <UpdateNotification onClose={onCloseUpdateNotification} />}
       <File onSelect={onSelectFile} />
     </Box>
   );
@@ -579,7 +600,7 @@ const Other = () => {
         )}
         {feConfigs?.chatbotUrl && (
           <Link
-            href={feConfigs.chatbotUrl}
+            href={feConfigs?.chatbotUrl}
             target="_blank"
             display={'flex'}
             py={3}

projects/app/src/pages/account/components/UpdateNotificationModal.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { ModalBody, Box, Flex, Input, ModalFooter, Button, HStack } from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useTranslation } from 'next-i18next';
+import { useForm } from 'react-hook-form';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { updateNotificationAccount } from '@/web/support/user/api';
+import Icon from '@fastgpt/web/components/common/Icon';
+import { useSendCode } from '@/web/support/user/hooks/useSendCode';
+import { useUserStore } from '@/web/support/user/useUserStore';
+
+type FormType = {
+  account: string;
+  verifyCode: string;
+};
+
+const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation();
+  const { initUserInfo } = useUserStore();
+  const { register, handleSubmit, trigger, getValues, watch } = useForm<FormType>({
+    defaultValues: {
+      account: '',
+      verifyCode: ''
+    }
+  });
+  const account = watch('account');
+  const verifyCode = watch('verifyCode');
+
+  const { runAsync: onSubmit, loading: isLoading } = useRequest2(
+    (data: FormType) => {
+      return updateNotificationAccount(data);
+    },
+    {
+      onSuccess() {
+        initUserInfo();
+        onClose();
+      },
+      successToast: t('user:bind_inform_account_success'),
+      errorToast: t('user:bind_inform_account_error')
+    }
+  );
+
+  const { sendCodeText, sendCode, codeCountDown } = useSendCode();
+
+  const onclickSendCode = useCallback(async () => {
+    const check = await trigger('account');
+    if (!check) return;
+    sendCode({
+      username: getValues('account'),
+      type: 'bindNotification'
+    });
+  }, [getValues, sendCode, trigger]);
+
+  return (
+    <MyModal
+      isOpen
+      iconSrc="common/settingLight"
+      w={'32rem'}
+      title={t('common:user.Notification Receive')}
+    >
+      <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('user:notification.Bind Notification Pipe Hint')}</Box>
+          </HStack>
+          <Flex mt="4" alignItems="center">
+            <Box flex={'0 0 70px'}>{t('common:user.Account')}</Box>
+            <Input
+              flex={1}
+              bg={'myGray.50'}
+              {...register('account', { required: true })}
+              placeholder={t('common:support.user.Email Or Phone')}
+            ></Input>
+          </Flex>
+          <Flex mt="6" alignItems="center" position={'relative'}>
+            <Box flex={'0 0 70px'}>{t('common:support.user.Verify Code')}</Box>
+            <Input
+              flex={1}
+              bg={'myGray.50'}
+              {...register('verifyCode', { required: true })}
+              placeholder={t('common:support.user.Verify Code')}
+            ></Input>
+            <Box
+              position={'absolute'}
+              right={2}
+              zIndex={1}
+              fontSize={'sm'}
+              {...(codeCountDown > 0
+                ? {
+                    color: 'myGray.500'
+                  }
+                : {
+                    color: 'primary.700',
+                    cursor: 'pointer',
+                    onClick: onclickSendCode
+                  })}
+            >
+              {sendCodeText}
+            </Box>
+          </Flex>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <Button mr={3} variant={'whiteBase'} onClick={onClose}>
+          {t('common:common.Cancel')}
+        </Button>
+        <Button
+          isLoading={isLoading}
+          isDisabled={!account || !verifyCode}
+          onClick={handleSubmit((data) => onSubmit(data))}
+        >
+          {t('common:common.Confirm')}
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+};
+
+export default UpdateNotificationModal;