added banner

Clients/src/presentation/components/Modals/DeleteAccount/index.tsx

@@ -1,63 +1,129 @@
+import React, { useState } from "react";
 import {
   Button,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogContentText,
   DialogActions,
-  useTheme,
+  Box,
+  Paper,
+  Typography,
 } from "@mui/material";
+import { ReactComponent as CloseIcon } from "../../../assets/icons/close.svg";
 
 interface DeleteAccountConfirmationProps {
   open: boolean;
   onClose: () => void;
 }
 
-const index: React.FC<DeleteAccountConfirmationProps> = ({ open, onClose }) => {
-  const handleDelete = () => {
-    console.log("Account deleted");
-    onClose();
-  };
+/**
+ * A functional React component that renders a confirmation dialog for deleting an account.
+ * 
+ * The component displays a confirmation dialog when the `open` prop is true, allowing the user 
+ * to confirm or cancel the deletion of their account. When the delete button is clicked, the dialog closes
+ * and a banner shows up at the bottom-right corner of the page for 3 seconds, indicating the account has been removed.
+ * 
+ * @component
+ * @example
+ * const [isDialogOpen, setDialogOpen] = useState(false);
+ * const handleClose = () => setDialogOpen(false);
+ * return (
+ *   <DeleteAccountConfirmation open={isDialogOpen} onClose={handleClose} />
+ * );
+ * 
+ * @param {boolean} open - Boolean to control the visibility of the dialog.
+ * @param {function} onClose - Callback function to close the dialog when the user clicks cancel or delete.
+ * @returns {JSX.Element} The rendered DeleteAccountConfirmation component.
+ */
+const DeleteAccountConfirmation: React.FC<DeleteAccountConfirmationProps> = ({
+  open,
+  onClose,
+}) => {
+  const [isBannerOpen, setIsBannerOpen] = useState<boolean>(false);
 
-  const theme = useTheme();
+  /**
+   * Handles the account deletion process.
+   * 
+   * This function sets the banner to be visible for 3 seconds and closes the dialog.
+   * The banner informs the user that the account has been removed.
+   */
+  const handleDeleteAccount = () => {
+    setIsBannerOpen(true);  // Show banner
+    onClose();              // Close dialog
+    setTimeout(() => setIsBannerOpen(false), 3000);  // Auto close banner after 3 seconds
+  };
 
   return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title" sx={{font: 'bold'}}>
-        {"Are you sure you want to delete this account?"}
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText
-          id="alert-dialog-description"
-          sx={{ maxWidth: '439px'}}
-        >
-          If you delete your account, you will no longer be able to sign in, and
-          all of your data will be deleted. Deleting your account is permanent
-          and non-recoverable action.
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} sx={{color: 'black', fontSize: 13}}>Cancel</Button>
-        <Button
-          disableRipple
-          variant="contained"
+    <>
+      <Dialog
+        open={open}
+        onClose={onClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {"Are you sure you want to delete this account?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            If you delete your account, you will no longer be able to sign in,
+            and all of your data will be deleted. This action is permanent and
+            cannot be undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button
+            variant="contained"
+            onClick={handleDeleteAccount}
+            color="error"
+          >
+            Delete account
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Conditionally render banner when isBannerOpen is true */}
+      {isBannerOpen && (
+        <Box
           sx={{
-            width: theme.spacing(80),
-            mb: theme.spacing(4),
-            backgroundColor: "#DB504A",
-            color: "#fff",
+            position: "fixed",
+            bottom: 16,
+            right: 16,
+            zIndex: 1000,
           }}
         >
-          Delete account
-        </Button>
-      </DialogActions>
-    </Dialog>
+          <Paper
+            sx={{
+              width: "219px",
+              height: "52px",
+              display: "flex", // Flexbox layout
+              justifyContent: "space-between", // Space between text and CloseIcon
+              alignItems: "center", // Vertically center the content
+              padding: "0 16px", // Add some padding to the sides
+              color: "#475467",
+              overflow: "visible",
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "13px",
+                color: "#475467",
+                whiteSpace: "nowrap", // Prevent text from wrapping
+              }}
+            >
+              This account is removed.
+              <CloseIcon
+                onClick={onClose}
+                style={{ cursor: "pointer", marginLeft: 14}}
+              />
+            </Typography>
+          </Paper>
+        </Box>
+      )}
+    </>
   );
 };
 
-export default index;
+export default DeleteAccountConfirmation;