chore: updated design ConfirmationDialog

src/entities/confirmation-dialog/index.tsx

@@ -1,53 +1,92 @@
 import {
-    AlertDialog,
-    AlertDialogBody,
-    AlertDialogContent,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogOverlay,
-    Button
+    Button,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text
 } from '@chakra-ui/react';
-import { FC, useRef } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
 
 export const ConfirmationDialog: FC<{
     isOpen: boolean;
     onClose: () => void;
     onConfirm: () => void;
-    title: string;
-    description?: string;
-    cancelText?: string;
-    confirmText?: string;
+    title: ((confirmValue: string) => string) | string;
+    confirmValue?: string;
+    description?: ((confirmValue: string) => ReactNode) | ReactNode;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
+    isLoading?: boolean;
 }> = ({
     isOpen,
     onClose,
     onConfirm,
     title,
     description,
-    cancelText = 'Cancel',
-    confirmText = 'Confirm'
+    confirmValue,
+    cancelButtonText = 'Cancel',
+    confirmButtonText = 'Confirm',
+    isLoading = false
 }) => {
-    const cancelRef = useRef(null);
+    const [inputValue, setInputValue] = useState('');
 
-    return (
-        <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
-            <AlertDialogOverlay>
-                <AlertDialogContent>
-                    <AlertDialogHeader fontSize="lg" fontWeight="bold">
-                        {title}
-                    </AlertDialogHeader>
+    useEffect(() => {
+        if (!isOpen) {
+            setInputValue('');
+        }
+    }, [isOpen]);
+
+    const titleString = typeof title === 'function' ? confirmValue && title(confirmValue) : title;
+    const descriptionString =
+        typeof description === 'function' ? confirmValue && description(confirmValue) : description;
 
-                    {description && <AlertDialogBody paddingY={0}>{description}</AlertDialogBody>}
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="md">
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader textAlign="center">{titleString}</ModalHeader>
+                <ModalCloseButton />
+                {descriptionString && (
+                    <ModalBody pb="0">
+                        <Text
+                            textStyle="text.body2"
+                            mb="6"
+                            color="text.secondary"
+                            textAlign="center"
+                        >
+                            {descriptionString}
+                        </Text>
+                        {confirmValue && (
+                            <Input
+                                onChange={e => setInputValue(e.target.value)}
+                                placeholder="Name"
+                                value={inputValue}
+                            />
+                        )}
+                    </ModalBody>
+                )}
 
-                    <AlertDialogFooter>
-                        <Button ref={cancelRef} onClick={onClose} variant="outline">
-                            {cancelText}
-                        </Button>
-                        <Button ml={3} onClick={onConfirm}>
-                            {confirmText}
-                        </Button>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialogOverlay>
-        </AlertDialog>
+                <ModalFooter gap="3">
+                    <Button flex={1} onClick={onClose} variant="secondary">
+                        {cancelButtonText}
+                    </Button>
+                    <Button
+                        flex={1}
+                        isDisabled={!!confirmValue && inputValue !== confirmValue}
+                        isLoading={isLoading}
+                        onClick={onConfirm}
+                        type="submit"
+                        variant="primary"
+                    >
+                        {confirmButtonText}
+                    </Button>
+                </ModalFooter>
+            </ModalContent>
+        </Modal>
     );
 };

src/entities/project/ui/EditProjectParticipan.tsx

@@ -6,7 +6,8 @@ import {
     Divider,
     Flex,
     FlexProps,
-    useDisclosure
+    useDisclosure,
+    Text
 } from '@chakra-ui/react';
 import { FC } from 'react';
 import { PlusIcon16, IconButton, DTOParticipant, Span } from 'src/shared';
@@ -15,13 +16,17 @@ import { projectsStore } from '../model';
 import { observer } from 'mobx-react-lite';
 import { ConfirmationDialog } from 'src/entities';
 
+const getParticipantName = (participant: DTOParticipant) => {
+    return [participant.first_name, participant.last_name].join(' ');
+};
+
 const DeleteConfirmationModal: FC<{
     isOpen: boolean;
     onClose: () => void;
-    participantId: number;
-}> = ({ isOpen, onClose, participantId }) => {
+    participant: DTOParticipant;
+}> = ({ isOpen, onClose, participant }) => {
     const handleDelete = () => {
-        projectsStore.deleteProjectParticipant(participantId);
+        projectsStore.deleteProjectParticipant(participant.id);
         onClose();
     };
 
@@ -30,8 +35,14 @@ const DeleteConfirmationModal: FC<{
             isOpen={isOpen}
             onClose={onClose}
             onConfirm={handleDelete}
-            title="Delete user"
-            description="Are you sure?"
+            title="Confirm you want to remove this user?"
+            description={
+                <Text>
+                    Once removed, <b>{getParticipantName(participant)}</b> will no longer have
+                    direct access to this project.
+                </Text>
+            }
+            confirmButtonText="Remove"
         />
     );
 };
@@ -67,11 +78,7 @@ const Participant: FC<FlexProps & { participant: DTOParticipant }> = ({ particip
                 p={3}
             />
 
-            <DeleteConfirmationModal
-                isOpen={isOpen}
-                onClose={onClose}
-                participantId={participant.id}
-            />
+            <DeleteConfirmationModal isOpen={isOpen} onClose={onClose} participant={participant} />
         </Flex>
     );
 };