use message on mobile & notification on desktop

apps/web/@types/errors.ts

@@ -0,0 +1,19 @@
+import elementsToValues from '@/Components/Calculation/config/map/values';
+
+export const ERR_ELT_KASKO = 'ERR_ELT_KASKO';
+export const ERR_ELT_OSAGO = 'ERR_ELT_OSAGO';
+export const ERR_FINGAP_TABLE = 'ERR_FINGAP_TABLE';
+export const ERR_INSURANCE_TABLE = 'ERR_INSURANCE_TABLE';
+export const ERR_PAYMENTS_TABLE = 'ERR_PAYMENTS_TABLE';
+
+export const ERROR_TABLE_KEYS = [
+  ERR_ELT_KASKO,
+  ERR_ELT_OSAGO,
+  ERR_FINGAP_TABLE,
+  ERR_INSURANCE_TABLE,
+  ERR_PAYMENTS_TABLE,
+];
+
+export const ERROR_ELEMENTS_KEYS = Object.keys(elementsToValues);
+
+export const ERROR_KEYS = [...ERROR_ELEMENTS_KEYS, ...ERROR_TABLE_KEYS];

apps/web/Components/Common/Notification.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable import/no-mutable-exports */
+import { ERROR_KEYS } from '@/@types/errors';
 import { Media } from '@/styles/media';
+import { getDevice } from '@/utils/device';
 import type { MessageInstance } from 'antd/es/message/interface';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { ReactNode } from 'react';
@@ -8,9 +10,44 @@ import { message as antdMessage, notification as antdNotification } from 'ui/ele
 export let message: Readonly<MessageInstance>;
 export let notification: Readonly<NotificationInstance>;
 
+function createWrapper<T extends NotificationInstance, M extends MessageInstance>(
+  notificationObj: T,
+  messageObj: M
+): T {
+  const handler: ProxyHandler<T> = {
+    get(target, prop, receiver) {
+      const notificationMethod = target[prop as keyof T];
+      const messageMethod = messageObj[prop as keyof M];
+
+      if (typeof notificationMethod === 'function' && typeof messageMethod === 'function') {
+        return function (...args: any[]) {
+          const device = getDevice();
+
+          if (device?.isMobile) {
+            if (typeof args[0] === 'object') {
+              if (ERROR_KEYS.includes(args[0].key)) return;
+              args[0].content = args[0].description || args[0].message;
+            }
+
+            messageMethod.apply(messageObj, args);
+          }
+
+          notificationMethod.apply(target, args);
+        };
+      }
+
+      return Reflect.get(target, prop, receiver);
+    },
+  };
+
+  return new Proxy(notificationObj, handler);
+}
+
 export function Notification({ children }: { readonly children?: ReactNode }) {
+  const device = getDevice();
+
   const [messageApi, messageContextHolder] = antdMessage.useMessage({
-    duration: 1.2,
+    duration: device?.isMobile ? 1.5 : 1.2,
     maxCount: 3,
     top: 70,
   });
@@ -22,7 +59,7 @@ export function Notification({ children }: { readonly children?: ReactNode }) {
   });
 
   message = messageApi;
-  notification = notificationApi;
+  notification = createWrapper(notificationApi, messageApi);
 
   return (
     <>

apps/web/utils/device.ts

@@ -0,0 +1,11 @@
+import { screens } from '@/config/ui';
+
+export function getDevice() {
+  if (typeof window === 'undefined') return null;
+
+  const isMobile = window.innerWidth < screens.tablet;
+
+  return {
+    isMobile,
+  };
+}