Merge pull request #404 from ReseauEntourage/feature/EN-7880-suspicio…

…us-usage-messaging Messaging - Limit and alert on suspicious usage
ReseauEntourage · Dec 17, 2024 · 18f49f3 · 18f49f3
2 parents 8734c4d + 6154f3b
commit 18f49f3
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 30 deletions.
diff --git a/src/api/axiosErrors.ts b/src/api/axiosErrors.ts
@@ -51,6 +51,15 @@ export function isEmailAlreadyVerifiedError(error: unknown) {
   );
 }
 
+export function isMessagingDailyConversationLimitReachedError(error: unknown) {
+  return (
+    isAxiosError(error) &&
+    error.response?.status === 429 &&
+    (error.response?.data as { message?: string })?.message ===
+      'DAILY_CONVERSATION_LIMIT_REACHED'
+  );
+}
+
 export function isTokenExpiredError(error: unknown) {
   return (
     isAxiosError(error) &&

diff --git a/src/components/utils/Notification/Notification.styles.tsx b/src/components/utils/Notification/Notification.styles.tsx
@@ -1,10 +1,15 @@
 import styled from 'styled-components';
-import { COLORS } from 'src/constants/styles';
+import { BREAKPOINTS, STATUS_COLORS } from 'src/constants/styles';
 
-export const NOTIF_WIDTH = '600px';
+export const NOTIF_WIDTH = '500px';
 
 export const StyledNotificationWrapper = styled.div``;
 
+const backgroundColor = {
+  success: STATUS_COLORS.success,
+  danger: STATUS_COLORS.error,
+};
+
 export const StyledNotificationsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -13,26 +18,37 @@ export const StyledNotificationsContainer = styled.div`
   position: fixed;
   right: 0;
   z-index: 100;
+  @media screen and (max-width: ${BREAKPOINTS.desktop}px) {
+    width: 100%;
+  }
 `;
 
-const StyledNotification = styled.div`
-  box-sizing: border-box;
+export const StyledNotification = styled.div`
+  background-color: ${(props) => {
+    return backgroundColor[props.type];
+  }};
+  display: flex;
   width: ${NOTIF_WIDTH};
   color: white;
-  height: 50px;
-  line-height: 50px;
-  padding-left: 20px;
   border-radius: 5px 0 0 5px;
-  svg {
-    margin-right: 20px;
-    height: 25px;
+  padding: 10px 10px 10px 0;
+
+  @media screen and (max-width: ${BREAKPOINTS.desktop}px) {
+    width: 100%;
   }
 `;
 
-export const StyledSuccessNotification = styled(StyledNotification)`
-  background-color: ${COLORS.green};
+export const StyledIconContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 5px 10px;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 25px;
 `;
 
-export const StyledFailedNotification = styled(StyledNotification)`
-  background-color: ${COLORS.red};
+export const StyledTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `;
diff --git a/src/components/utils/Notification/Notification.tsx b/src/components/utils/Notification/Notification.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { LucidIcon } from '../Icons/LucidIcon';
+import { Text } from '../Text';
 import {
-  StyledFailedNotification,
-  StyledSuccessNotification,
+  StyledIconContainer,
+  StyledNotification,
+  StyledTextContainer,
 } from './Notification.styles';
 
 interface NotificationProps {
@@ -11,18 +13,16 @@ interface NotificationProps {
 }
 export const Notification = ({ type, message }: NotificationProps) => {
   return (
-    <>
-      {type === 'success' ? (
-        <StyledSuccessNotification>
-          <LucidIcon name="Check" />
-          {message}
-        </StyledSuccessNotification>
-      ) : (
-        <StyledFailedNotification>
-          <LucidIcon name="X" />
+    <StyledNotification type={type}>
+      <StyledIconContainer>
+        <LucidIcon name="CircleCheck" size={100} />
+      </StyledIconContainer>
+
+      <StyledTextContainer>
+        <Text color="white" size="large">
           {message}
-        </StyledFailedNotification>
-      )}
-    </>
+        </Text>
+      </StyledTextContainer>
+    </StyledNotification>
   );
 };
diff --git a/src/components/utils/Notification/NotificationWrapper.tsx b/src/components/utils/Notification/NotificationWrapper.tsx
@@ -23,7 +23,7 @@ export const NotificationWrapper = ({
   const handleNotification = useCallback(async () => {
     await asyncTimeout(100);
     setInProp(true);
-    await asyncTimeout(3000);
+    await asyncTimeout(10000);
     setInProp(false);
     await asyncTimeout(500);
     dispatch(notificationsActions.removeNotification({ id }));

diff --git a/src/constants/styles.ts b/src/constants/styles.ts
@@ -72,6 +72,11 @@ export const COLORS = {
   darkGreen: '#1F4946',
 };
 
+export const STATUS_COLORS = {
+  success: COLORS.green,
+  error: COLORS.lightRed,
+};
+
 export const CV_STATUS_COLORS = {
   none: {
     border: COLORS.lightGray,

diff --git a/src/use-cases/messaging/messaging.saga.ts b/src/use-cases/messaging/messaging.saga.ts
@@ -1,5 +1,7 @@
 import { call, put, select, take, takeLatest } from 'typed-redux-saga';
+import { notificationsActions } from '../notifications';
 import { Api } from 'src/api';
+import { isMessagingDailyConversationLimitReachedError } from 'src/api/axiosErrors';
 import { ConversationParticipant } from 'src/api/types';
 import { slice } from './messaging.slice';
 
@@ -91,8 +93,16 @@ function* postMessageSagaRequested(
         isNewConversation: !action.payload.conversationId,
       })
     );
-  } catch {
+  } catch (error: unknown) {
     yield* put(postMessageFailed());
+    if (isMessagingDailyConversationLimitReachedError(error)) {
+      yield* put(
+        notificationsActions.addNotification({
+          type: 'danger',
+          message: `Nous sommes désolés, vous avez déjà contacté le maximum de membres aujourd’hui. Laissez le temps aux membres de vous répondre ! Si besoin, vous pourrez en contacter plus à partir de demain !`,
+        })
+      );
+    }
   }
 }