feat(notifications): add accepted and refused membership request

components/Notifications/MembershipAccepted.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="p-3 flex gap-3 relative hover:bg-gray-some">
+    <div class="flex-none">
+      <RiCheckboxCircleLine class="size-4" />
+    </div>
+    <div class="flex-1 truncate">
+      <p class="m-0 text-xs font-bold">
+        {{ $t('Votre adhésion a été acceptée') }}
+      </p>
+      <p class="m-0 text-xs flex items-center gap-1 truncate">
+        {{ $t(`pour rejoindre`) }}
+        <OrganizationOwner
+          :organization="notification.details.organization as OrganizationReference"
+          logo-size-class="size-3"
+          :logo-no-border="true"
+          name-size="xs"
+          name-color="text-gray-plain"
+          :with-link="false"
+        />
+      </p>
+    </div>
+    <div class="flex-none flex m-0 gap-1.5">
+      <p class="m-0 text-xs">
+        {{ formatDate(notification.created_at) }}
+      </p>
+      <AnimatedLoader
+        v-if="loading"
+        class="size-2"
+      />
+      <div
+        v-else-if="!notification.handled_at"
+        class="size-2 rounded-full bg-new-primary mt-0.5"
+      />
+    </div>
+    <button
+      v-if="!notification.handled_at"
+      class="after:absolute after:inset-0 bg-none"
+      :title="$t('Marquer la notification comme lue')"
+      @click="markAsRead(notification)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AnimatedLoader, useFormatDate, type OrganizationReference } from '@datagouv/components-next'
+import { RiCheckboxCircleLine } from '@remixicon/vue'
+import type { MembershipAcceptedNotification } from '~/types/notifications'
+
+defineProps<{
+  notification: MembershipAcceptedNotification
+}>()
+
+const { formatDate } = useFormatDate()
+const { loading, markAsRead } = useMarkAsRead()
+</script>

components/Notifications/MembershipRefused.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="p-3 flex gap-3 relative hover:bg-gray-some">
+    <div class="flex-none">
+      <RiCloseCircleLine class="size-4" />
+    </div>
+    <div class="flex-1 truncate">
+      <p class="m-0 text-xs font-bold">
+        {{ $t('Votre adhésion a été refusée') }}
+      </p>
+      <p class="m-0 text-xs flex items-center gap-1 truncate">
+        {{ $t('pour rejoindre') }}
+        <OrganizationOwner
+          :organization="notification.details.organization as OrganizationReference"
+          logo-size-class="size-3"
+          :logo-no-border="true"
+          name-size="xs"
+          name-color="text-gray-plain"
+          :with-link="false"
+        />
+      </p>
+    </div>
+    <div class="flex-none flex m-0 gap-1.5">
+      <p class="m-0 text-xs">
+        {{ formatDate(notification.created_at) }}
+      </p>
+      <AnimatedLoader
+        v-if="loading"
+        class="size-2"
+      />
+      <div
+        v-else-if="!notification.handled_at"
+        class="size-2 rounded-full bg-new-primary mt-0.5"
+      />
+    </div>
+    <button
+      v-if="!notification.handled_at"
+      class="after:absolute after:inset-0 bg-none"
+      :title="$t('Marquer la notification comme lue')"
+      @click="markAsRead(notification)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AnimatedLoader, useFormatDate, type OrganizationReference } from '@datagouv/components-next'
+import { RiCloseCircleLine } from '@remixicon/vue'
+import type { MembershipRefusedNotification } from '~/types/notifications'
+
+defineProps<{
+  notification: MembershipRefusedNotification
+}>()
+
+const { formatDate } = useFormatDate()
+const { loading, markAsRead } = useMarkAsRead()
+</script>

components/Notifications/NotificationsList.vue

@@ -9,7 +9,7 @@
         :notification="notification as MembershipRequestNotification"
       />
       <NotificationsTransferRequest
-        v-if="notification.details.class === 'TransferRequestNotificationDetails'"
+        v-else-if="notification.details.class === 'TransferRequestNotificationDetails'"
         :notification="notification as TransferRequestNotification"
       />
       <NotificationsNewBadge
@@ -21,6 +21,14 @@
         :notification="notification as DiscussionNotification"
         :subject="subjects[notification.details.discussion.subject.id]"
       />
+      <NotificationsMembershipAccepted
+        v-else-if="notification.details.class === 'MembershipAcceptedNotificationDetails'"
+        :notification="notification as MembershipAcceptedNotification"
+      />
+      <NotificationsMembershipRefused
+        v-else-if="notification.details.class === 'MembershipRefusedNotificationDetails'"
+        :notification="notification as MembershipRefusedNotification"
+      />
       <NotificationsValidateHarvester
         v-else-if="notification.details.class === 'ValidateHarvesterNotificationDetails'"
         :notification="notification as ValidateHarvesterNotification"
@@ -32,7 +40,7 @@
 <script setup lang="ts">
 import type { DeepReadonly } from 'vue'
 import type { DiscussionSubjectTypes } from '~/types/discussions'
-import type { DiscussionNotification, MembershipRequestNotification, NewBadgeNotification, TransferRequestNotification, UserNotification, ValidateHarvesterNotification } from '~/types/notifications'
+import type { DiscussionNotification, MembershipAcceptedNotification, MembershipRefusedNotification, MembershipRequestNotification, NewBadgeNotification, TransferRequestNotification, UserNotification, ValidateHarvesterNotification } from '~/types/notifications'
 
 const props = defineProps<{
   notifications: DeepReadonly<Array<UserNotification>>

components/OrganizationOwner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center space-x-2">
+  <div class="flex items-center space-x-2 truncate">
     <div :class="logoNoBorder ? '': 'shrink-0 p-1.5 border'">
       <OrganizationLogo
         :organization

types/notifications.ts

@@ -47,6 +47,20 @@ export type DiscussionNotification = CommonNotification & {
   }
 }
 
+export type MembershipAcceptedNotification = CommonNotification & {
+  details: {
+    class: 'MembershipAcceptedNotificationDetails'
+    organization: OrganizationReference
+  }
+}
+
+export type MembershipRefusedNotification = CommonNotification & {
+  details: {
+    class: 'MembershipRefusedNotificationDetails'
+    organization: OrganizationReference
+  }
+}
+
 export type ValidateHarvesterNotification = CommonNotification & {
   details: {
     class: 'ValidateHarvesterNotificationDetails'
@@ -55,4 +69,4 @@ export type ValidateHarvesterNotification = CommonNotification & {
   }
 }
 
-export type UserNotification = MembershipRequestNotification | TransferRequestNotification | NewBadgeNotification | DiscussionNotification | ValidateHarvesterNotification
+export type UserNotification = MembershipRequestNotification | TransferRequestNotification | NewBadgeNotification | DiscussionNotification | MembershipAcceptedNotification | MembershipRefusedNotification | ValidateHarvesterNotification