From 73e58e274c1462ff3fc337f7549948751e3dccea Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 25 Mar 2024 16:05:52 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20modal=20delete=20team?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We can now delete a team.
---
 src/frontend/apps/desk/cunningham.ts          |   1 +
 .../desk/src/cunningham/cunningham-tokens.css |   1 +
 .../desk/src/cunningham/cunningham-tokens.ts  |   1 +
 .../src/features/teams/assets/icon-trash.svg  |   3 +
 .../teams/components/ModalRemoveTeam.tsx      | 119 ++++++++++++++++++
 5 files changed, 125 insertions(+)
 create mode 100644 src/frontend/apps/desk/src/features/teams/assets/icon-trash.svg
 create mode 100644 src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx

diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts
index c27c164..a179392 100644
--- a/src/frontend/apps/desk/cunningham.ts
+++ b/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',
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
index 9b4cabe..0653c76 100644
--- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
+++ b/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;
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
index a10a26d..18a7942 100644
--- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
+++ b/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',
diff --git a/src/frontend/apps/desk/src/features/teams/assets/icon-trash.svg b/src/frontend/apps/desk/src/features/teams/assets/icon-trash.svg
new file mode 100644
index 0000000..caa4e96
--- /dev/null
+++ b/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>
diff --git a/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx
new file mode 100644
index 0000000..04d2d82
--- /dev/null
+++ b/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>
+  );
+};