✨(app-desk) modal delete team

We can now delete a team.

src/frontend/apps/desk/cunningham.ts

@@ -191,6 +191,7 @@ const config = {
           'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
+          'primary-150': '#F4F4FD',
           'primary-200': '#ececfe',
           'primary-300': '#e3e3fd',
           'primary-400': '#cacafb',

src/frontend/apps/desk/src/cunningham/cunningham-tokens.css

@@ -334,6 +334,7 @@
   --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-text: #000091;
   --c--theme--colors--primary-100: #f5f5fe;
+  --c--theme--colors--primary-150: #f4f4fd;
   --c--theme--colors--primary-200: #ececfe;
   --c--theme--colors--primary-300: #e3e3fd;
   --c--theme--colors--primary-400: #cacafb;

src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts

@@ -335,6 +335,7 @@ export const tokens = {
           'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
+          'primary-150': '#F4F4FD',
           'primary-200': '#ececfe',
           'primary-300': '#e3e3fd',
           'primary-400': '#cacafb',

src/frontend/apps/desk/src/features/teams/assets/icon-trash.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 38C12 40.2 13.8 42 16 42H32C34.2 42 36 40.2 36 38V14H12V38ZM18.34 25.18C17.56 24.4 17.56 23.14 18.34 22.36C19.12 21.58 20.38 21.58 21.16 22.36L24 25.18L26.82 22.36C27.6 21.58 28.86 21.58 29.64 22.36C30.42 23.14 30.42 24.4 29.64 25.18L26.82 28L29.64 30.82C30.42 31.6 30.42 32.86 29.64 33.64C28.86 34.42 27.6 34.42 26.82 33.64L24 30.82L21.18 33.64C20.4 34.42 19.14 34.42 18.36 33.64C17.58 32.86 17.58 31.6 18.36 30.82L21.18 28L18.34 25.18ZM36 8H31L29.58 6.58C29.22 6.22 28.7 6 28.18 6H19.82C19.3 6 18.78 6.22 18.42 6.58L17 8H12C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12H36C37.1 12 38 11.1 38 10C38 8.9 37.1 8 36 8Z" fill="#000091"/>
+</svg>

src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx

@@ -0,0 +1,119 @@
+import {
+  Button,
+  Modal,
+  ModalSize,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { t } from 'i18next';
+import { useRouter } from 'next/navigation';
+
+import IconGroup from '@/assets/icons/icon-group.svg';
+import { Box, Text, TextErrors } from '@/components';
+import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
+
+import { useRemoveTeam } from '../api/useRemoveTeam';
+import IconRemove from '../assets/icon-trash.svg';
+import { Team } from '../types';
+
+interface ModalRemoveTeamProps {
+  onClose: () => void;
+  team: Team;
+}
+
+export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
+  const { colorsTokens } = useCunninghamTheme();
+  const { toast } = useToastProvider();
+  const router = useRouter();
+
+  const {
+    mutate: removeTeam,
+    isError,
+    error,
+  } = useRemoveTeam({
+    onSuccess: () => {
+      toast(t('The team has been removed.'), VariantType.SUCCESS, {
+        duration: 4000,
+      });
+      router.push('/');
+    },
+  });
+
+  return (
+    <Modal
+      isOpen
+      closeOnClickOutside
+      hideCloseButton
+      leftActions={
+        <Button
+          aria-label={t('Close the modal')}
+          color="secondary"
+          fullWidth
+          onClick={() => onClose()}
+        >
+          {t('Cancel')}
+        </Button>
+      }
+      onClose={() => onClose()}
+      rightActions={
+        <Button
+          aria-label={t('Confirm deletion')}
+          color="primary"
+          fullWidth
+          onClick={() =>
+            removeTeam({
+              teamId: team.id,
+            })
+          }
+        >
+          {t('Confirm deletion')}
+        </Button>
+      }
+      size={ModalSize.MEDIUM}
+      title={
+        <Box $align="center" $gap="1rem">
+          <IconRemove width={48} color={colorsTokens()['primary-text']} />
+          <Text $size="h3" className="m-0">
+            {t('Deleting the {{teamName}} team', { teamName: team.name })}
+          </Text>
+        </Box>
+      }
+    >
+      <Box className="mb-xl" aria-label={t('Content modal to delete the team')}>
+        <Text as="p" className="mb-b">
+          {t('Are you sure you want to delete {{teamName}} team?', {
+            teamName: team.name,
+          })}
+        </Text>
+
+        {isError && <TextErrors className="mb-s" causes={error.cause} />}
+
+        <Text
+          as="p"
+          className="p-s"
+          $direction="row"
+          $gap="0.5rem"
+          $background={colorsTokens()['primary-150']}
+          $theme="primary"
+          $align="center"
+          $radius="2px"
+        >
+          <IconGroup
+            className="p-t"
+            aria-label={t(`Teams icon`)}
+            color={colorsTokens()['primary-500']}
+            width={58}
+            style={{
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              border: `1px solid ${colorsTokens()['primary-300']}`,
+            }}
+          />
+          <Text $theme="primary" $weight="bold" $size="l">
+            {team.name}
+          </Text>
+        </Text>
+      </Box>
+    </Modal>
+  );
+};