From 30ed0da4163f39552c2bcfb7f01960e63b461171 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 11 Feb 2025 18:14:29 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20a=20new=20not?=
 =?UTF-8?q?ification=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This notification alert the user when her was muted by another one.
Simple copywritting.
---
 .../notifications/components/ToastMuted.tsx   | 26 +++++++++++++++++++
 .../notifications/components/ToastRegion.tsx  |  6 ++++-
 .../src/locales/de/notifications.json         |  3 ++-
 .../src/locales/en/notifications.json         |  3 ++-
 .../src/locales/fr/notifications.json         |  3 ++-
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/src/features/notifications/components/ToastMuted.tsx

diff --git a/src/frontend/src/features/notifications/components/ToastMuted.tsx b/src/frontend/src/features/notifications/components/ToastMuted.tsx
new file mode 100644
index 00000000..86ce3247
--- /dev/null
+++ b/src/frontend/src/features/notifications/components/ToastMuted.tsx
@@ -0,0 +1,26 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+
+export function ToastMuted({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t('muted', { name: participant.name })}
+      </HStack>
+    </StyledToastContainer>
+  )
+}
diff --git a/src/frontend/src/features/notifications/components/ToastRegion.tsx b/src/frontend/src/features/notifications/components/ToastRegion.tsx
index 14561095..c80d5864 100644
--- a/src/frontend/src/features/notifications/components/ToastRegion.tsx
+++ b/src/frontend/src/features/notifications/components/ToastRegion.tsx
@@ -5,7 +5,8 @@ import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
+import { ToastRaised } from './ToastRaised'
+import { ToastMuted } from './ToastMuted'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -23,6 +24,9 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
         if (toast.content?.type === NotificationType.HandRaised) {
           return <ToastRaised key={toast.key} toast={toast} state={state} />
         }
+        if (toast.content?.type === NotificationType.ParticipantMuted) {
+          return <ToastMuted key={toast.key} toast={toast} state={state} />
+        }
         return <Toast key={toast.key} toast={toast} state={state} />
       })}
     </div>
diff --git a/src/frontend/src/locales/de/notifications.json b/src/frontend/src/locales/de/notifications.json
index 788b95c8..56caf4e6 100644
--- a/src/frontend/src/locales/de/notifications.json
+++ b/src/frontend/src/locales/de/notifications.json
@@ -6,5 +6,6 @@
   "raised": {
     "description": "",
     "cta": ""
-  }
+  },
+  "muted": ""
 }
diff --git a/src/frontend/src/locales/en/notifications.json b/src/frontend/src/locales/en/notifications.json
index 4956f5c9..23a7af21 100644
--- a/src/frontend/src/locales/en/notifications.json
+++ b/src/frontend/src/locales/en/notifications.json
@@ -6,5 +6,6 @@
   "raised": {
     "description": "{{name}} has raised their hand.",
     "cta": "Open waiting list"
-  }
+  },
+  "muted": "{{name}} has muted your microphone. No participant can hear you."
 }
diff --git a/src/frontend/src/locales/fr/notifications.json b/src/frontend/src/locales/fr/notifications.json
index 9405a191..a807b7c8 100644
--- a/src/frontend/src/locales/fr/notifications.json
+++ b/src/frontend/src/locales/fr/notifications.json
@@ -6,5 +6,6 @@
   "raised": {
     "description": "{{name}} a levé la main.",
     "cta": "Ouvrir la file d'attente"
-  }
+  },
+  "muted": "{{name}} a coupé votre micro. Aucun participant ne peut l'entendre."
 }