UI: use antd theme for message & notification

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -1,8 +1,9 @@
 import type { columns } from '../lib/config';
 import type { Row, StoreSelector } from '../types';
+import { message } from '@/Components/Common/Notification';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { message, Table } from 'ui/elements';
+import { Table } from 'ui/elements';
 
 export const PolicyTable = observer(
   ({

apps/web/Components/Common/Notification.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-mutable-exports */
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import type { ReactNode } from 'react';
+import { message as antdMessage, notification as antdNotification } from 'ui/elements';
+
+export let message: Readonly<MessageInstance>;
+export let notification: Readonly<NotificationInstance>;
+
+export function Notification({ children }: { children: ReactNode }) {
+  const [messageApi, messageContextHolder] = antdMessage.useMessage({
+    maxCount: 3,
+    top: 70,
+  });
+
+  const [notificationApi, notificationContextHolder] = antdNotification.useNotification({
+    placement: 'bottomRight',
+  });
+
+  message = messageApi;
+  notification = notificationApi;
+
+  return (
+    <>
+      {messageContextHolder}
+      {notificationContextHolder}
+      {children}
+    </>
+  );
+}

apps/web/pages/_app.jsx

@@ -3,6 +3,7 @@ import '../styles/fonts.css';
 import '../styles/globals.css';
 import initializeQueryClient from '@/api/client';
 import initializeApollo from '@/apollo/client';
+import { Notification } from '@/Components/Common/Notification';
 import Layout from '@/Components/Layout';
 import { theme } from '@/config/ui';
 import StoreProvider from '@/stores/Provider';
@@ -14,7 +15,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import Head from 'next/head';
 import { useMemo } from 'react';
 import { ThemeProvider } from 'styled-components';
-import AntdConfig from 'ui/elements/Config';
+import { Config as AntdConfig } from 'ui/elements';
 
 // eslint-disable-next-line turbo/no-undeclared-env-vars
 if (process.env.NODE_ENV === 'development') {
@@ -50,9 +51,11 @@ function App({ Component, pageProps }) {
                 },
               }}
             >
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
+              <Notification>
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </Notification>
             </AntdConfig>
           </QueryClientProvider>
         </ApolloProvider>

apps/web/process/calculate/action.ts

@@ -1,6 +1,6 @@
 import type { ProcessContext } from '../types';
+import { notification } from '@/Components/Common/Notification';
 import { toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 const key = 'ACTION_CALCULATE';
 const errorMessage = 'Ошибка во время расчета графика!';
@@ -36,6 +36,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
           description: res.error,
           key,
           message: errorMessage,
+          placement: 'bottomRight',
         });
       } else {
         $results.setPayments(res.data.resultPayments);
@@ -45,6 +46,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
         notification.success({
           key,
           message: successMessage,
+          placement: 'bottomRight',
         });
       }
     })
@@ -53,6 +55,7 @@ export async function action({ store, trpcClient }: ProcessContext) {
         description: JSON.stringify(error),
         key,
         message: errorMessage,
+        placement: 'bottomRight',
       });
     })
     .finally(() => {

apps/web/process/create-kp/action.ts

@@ -1,8 +1,8 @@
 import type { ProcessContext } from '../types';
+import { notification } from '@/Components/Common/Notification';
 import * as CRMTypes from '@/graphql/crm.types';
 import { normalizeOptions } from '@/utils/entity';
 import { toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 const key = 'ACTION_CREATEKP';
 const errorMessage = 'Ошибка во время создания КП!';
@@ -47,6 +47,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
           description: res.error,
           key,
           message: errorMessage,
+          placement: 'bottomRight',
         });
       } else {
         $results.setPayments(res.data.resultPayments);
@@ -56,6 +57,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
         notification.success({
           key,
           message: successMessage,
+          placement: 'bottomRight',
         });
 
         const leadid = $calculation.element('selectLead').getValue();
@@ -83,6 +85,7 @@ export function action({ store, trpcClient, apolloClient }: ProcessContext) {
         description: JSON.stringify(error),
         key,
         message: errorMessage,
+        placement: 'bottomRight',
       });
     })
     .finally(() => {

apps/web/process/leasing-without-kasko/reactions.ts

@@ -1,5 +1,6 @@
 /* eslint-disable canonical/sort-keys */
 
+import { notification } from '@/Components/Common/Notification';
 import * as CRMTypes from '@/graphql/crm.types';
 import type { ProcessContext } from '@/process/types';
 import { normalizeOptions } from '@/utils/entity';
@@ -7,7 +8,6 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { reaction } from 'mobx';
 import { uid } from 'radash';
-import { notification } from 'ui/elements';
 
 dayjs.extend(utc);
 
@@ -24,6 +24,7 @@ export function common({ store, apolloClient }: ProcessContext) {
           key: NOTIFICATION_KEY,
           message: 'Внимание',
           description: 'Лизинг без КАСКО был сброшен',
+          placement: 'bottomRight',
         });
       }
     }

apps/web/process/load-kp/reactions.ts

@@ -1,9 +1,9 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import eltHelper from '../elt/lib/helper';
+import { message } from '@/Components/Common/Notification';
 import type { ProcessContext } from '@/process/types';
 import { reaction } from 'mobx';
 import { omit } from 'radash';
-import { message } from 'ui/elements';
 
 const key = 'KP_LOADING_INFO';
 

apps/web/stores/results/index.ts

@@ -1,9 +1,9 @@
 import { defaultResultsValues } from './default-values';
 import type { ResultPayment, ResultValues } from './types';
+import { notification } from '@/Components/Common/Notification';
 import type RootStore from '@/stores/root';
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable } from 'mobx';
-import { notification } from 'ui/elements';
 
 export default class Results {
   private root: RootStore;
@@ -40,6 +40,7 @@ export default class Results {
       description: 'Результаты расчета были сброшены',
       key: 'ACTION_CALCULATE',
       message: 'Внимание',
+      placement: 'bottomRight',
       type: 'warning',
     });
   };

apps/web/stores/tables/elt/policy.ts

@@ -2,9 +2,9 @@ import type RootStore from '../../root';
 import Validation from '../../validation';
 import type { ValidationConfig } from '../../validation/types';
 import type * as ELT from '@/Components/Calculation/Form/ELT/types';
+import { notification } from '@/Components/Common/Notification';
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable, reaction, toJS } from 'mobx';
-import { notification } from 'ui/elements';
 
 type ConstructorInput = {
   rootStore: RootStore;
@@ -38,6 +38,7 @@ export default class PolicyStore {
             description: 'Выбранный расчет ЭЛТ был сброшен',
             key: validationConfig.err_key,
             message: validationConfig.err_title,
+            placement: 'bottomRight',
             type: 'warning',
           });
         }

apps/web/stores/validation/index.ts

@@ -1,8 +1,8 @@
 import type RootStore from '../root';
 import type { RemoveError, ValidationConfig, ValidationError, ValidationParams } from './types';
+import { notification } from '@/Components/Common/Notification';
 import { makeAutoObservable } from 'mobx';
 import { isServer } from 'tools';
-import { notification } from 'ui/elements';
 
 export default class Validation {
   private root: RootStore;
@@ -41,6 +41,7 @@ export default class Validation {
         description: message,
         key: this.params.err_key,
         message: this.params.err_title,
+        placement: 'bottomRight',
         type: this.root.$process.has('Unlimited') ? 'warning' : 'error',
       });
 

packages/ui/elements/Config.tsx

@@ -3,12 +3,10 @@ import type { ConfigProviderProps } from 'antd/es/config-provider';
 import ru_RU from 'antd/lib/locale/ru_RU';
 import type { ReactNode } from 'react';
 
-function AntdConfig({ children, ...config }: ConfigProviderProps & { children: ReactNode }) {
+export function Config({ children, ...config }: ConfigProviderProps & { children: ReactNode }) {
   return (
     <ConfigProvider {...config} locale={ru_RU}>
       {children}
     </ConfigProvider>
   );
 }
-
-export default AntdConfig;

packages/ui/elements/index.ts

@@ -1,14 +1,3 @@
-import { message, notification } from 'antd';
-
-message.config({
-  maxCount: 3,
-  top: 70,
-});
-
-notification.config({
-  placement: 'bottomRight',
-});
-
 export * from './Button';
 export * from './Checkbox';
 export * from './Config';