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/DeleteAccount.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 { useDeleteUserAccountMutation } from '~/generated/graphql';
 
-import { DeleteModal, StyledDeleteButton } from './DeleteModal';
-
 export function DeleteAccount() {
   const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
     useState(false);
 
   const [deleteUserAccount] = useDeleteUserAccountMutation();
+  const currentUser = useRecoilValue(currentUserState);
+  const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -34,13 +40,15 @@ export function DeleteAccount() {
         description="Delete account and all the associated data"
       />
 
-      <StyledDeleteButton
+      <StyledConfirmationButton
         onClick={() => setIsDeleteAccountModalOpen(true)}
         variant={ButtonVariant.Secondary}
         title="Delete account"
       />
 
-      <DeleteModal
+      <ConfirmationModal
+        confirmationValue={userEmail}
+        confirmationPlaceholder={userEmail ?? ''}
         isOpen={isDeleteAccountModalOpen}
         setIsOpen={setIsDeleteAccountModalOpen}
         title="Account Deletion"
@@ -50,7 +58,7 @@ export function DeleteAccount() {
             entire account. <br /> Please type in your email to confirm.
           </>
         }
-        handleConfirmDelete={deleteAccount}
+        onConfirmClick={deleteAccount}
         deleteButtonText="Delete account"
       />
     </>