Confirmation before deleting a member (#1074)

* feat: require confirmation before on memeber deletion

* fix: typo

* feat: ConfrimationModal moved to ui/modals/component - confirmation modal storybook

* fix: modal member deletion text

* fix: extra ! operator - remove deletemodal - using styledconfirmationbutton

* fix: story structer

* fix: imports

front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -1,19 +1,25 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 
 import { useAuth } from '@/auth/hooks/useAuth';
+import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
+import {
+  ConfirmationModal,
+  StyledConfirmationButton,
+} from '@/ui/modal/components/ConfirmationModal';
 import { H2Title } from '@/ui/typography/components/H2Title';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
 
-import { DeleteModal, StyledDeleteButton } from './DeleteModal';
-
 export function DeleteWorkspace() {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);
 
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
+  const currentUser = useRecoilValue(currentUserState);
+  const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -30,13 +36,15 @@ export function DeleteWorkspace() {
   return (
     <>
       <H2Title title="Danger zone" description="Delete your whole workspace" />
-      <StyledDeleteButton
+      <StyledConfirmationButton
         onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
         variant={ButtonVariant.Secondary}
         title="Delete workspace"
       />
 
-      <DeleteModal
+      <ConfirmationModal
+        confirmationPlaceholder={userEmail}
+        confirmationValue={userEmail}
         isOpen={isDeleteWorkSpaceModalOpen}
         setIsOpen={setIsDeleteWorkSpaceModalOpen}
         title="Workspace Deletion"
@@ -46,7 +54,7 @@ export function DeleteWorkspace() {
             entire workspace. <br /> Please type in your email to confirm.
           </>
         }
-        handleConfirmDelete={deleteWorkspace}
+        onConfirmClick={deleteWorkspace}
         deleteButtonText="Delete workspace"
       />
     </>