feat: complete confirmation dialog of cart page

Author: pooriaset

src/app/[locale]/(main)/(container)/cart/components/Header.tsx

@@ -1,3 +1,5 @@
+import Dialog, { DialogProps } from '@/components/Dialog/Dialog';
+import useNewDialog from '@/components/Dialog/hooks/useNewDialog';
 import useEmptyCart from '@/hooks/useEmptyCart';
 import { cartAtom } from '@/store/atoms';
 import { DeleteOutline, MoreVert } from '@mui/icons-material';
@@ -10,7 +12,6 @@ import {
   MenuItem,
 } from '@mui/material';
 import { useAtomValue } from 'jotai';
-import { useConfirm } from 'material-ui-confirm';
 import { useTranslations } from 'next-intl';
 import React, { useState } from 'react';
 
@@ -29,19 +30,47 @@ const Header = () => {
 
   const { emptyCartLoading, emptyCartMutate } = useEmptyCart();
 
-  const confirm = useConfirm();
-  const handleClickOnRemoveAll = () => {
-    confirm({
-      title: t('pages.cart.confirm.removeAllTitle'),
-      description: t('pages.cart.confirm.removeAllDescription'),
-      confirmationText: t('buttons.removeAll'),
-    }).then(async () => {
-      await emptyCartMutate();
-    });
+  const { open, handleCloseDialog, handleOpenDialog, returnButton } =
+    useNewDialog();
+
+  const handleClickOnConfirm = async () => {
+    await emptyCartMutate();
+  };
+
+  const onCloseDialog: DialogProps['onClose'] = (event, reason) => {
+    if (!emptyCartLoading) {
+      handleCloseDialog();
+    }
   };
 
   return (
     <>
+      <Dialog
+        title={t('pages.cart.confirm.removeAllTitle')}
+        open={open}
+        closeButtonDisabled={emptyCartLoading}
+        onClose={onCloseDialog}
+        PaperProps={{
+          sx: {
+            width: 500,
+          },
+        }}
+        dialogContentProps={{
+          dividers: true,
+        }}
+        buttons={[
+          returnButton,
+          {
+            children: t('buttons.removeAll'),
+            onClick: handleClickOnConfirm,
+            isLoading: emptyCartLoading,
+            variant: 'contained',
+            color: 'primary',
+          },
+        ]}
+      >
+        {t('pages.cart.confirm.removeAllDescription')}
+      </Dialog>
       <Menu
         id="basic-menu"
         anchorEl={anchorEl}
@@ -51,7 +80,7 @@ const Header = () => {
           'aria-labelledby': 'basic-button',
         }}
       >
-        <MenuItem onClick={handleClickOnRemoveAll}>
+        <MenuItem onClick={handleOpenDialog}>
           <ListItemIcon>
             <DeleteOutline fontSize="small" />
           </ListItemIcon>

src/components/Dialog/Dialog.tsx

@@ -14,9 +14,15 @@ import DialogTransition from '../common/DialogTransition';
 export interface DialogProps extends MuiDialogProps {
   dialogContentProps?: DialogContentProps;
   buttons?: ButtonWithLoadingProps[];
+  closeButtonDisabled?: boolean;
 }
 
-const Dialog: FC<DialogProps> = ({ title, buttons = [], ...props }) => {
+const Dialog: FC<DialogProps> = ({
+  title,
+  buttons = [],
+  closeButtonDisabled = false,
+  ...props
+}) => {
   return (
     <MuiDialog TransitionComponent={DialogTransition} {...props}>
       <DialogTitle
@@ -27,14 +33,16 @@ const Dialog: FC<DialogProps> = ({ title, buttons = [], ...props }) => {
         }}
       >
         {title}
-        <IconButton
-          aria-label="close-dialog"
-          onClick={() => {
-            props.onClose?.({}, 'escapeKeyDown');
-          }}
-        >
-          <Close />
-        </IconButton>
+        {!closeButtonDisabled && (
+          <IconButton
+            aria-label="close-dialog"
+            onClick={() => {
+              props.onClose?.({}, 'escapeKeyDown');
+            }}
+          >
+            <Close />
+          </IconButton>
+        )}
       </DialogTitle>
       <DialogContent {...props.dialogContentProps}>
         <Box mt={1}>{props.children}</Box>

src/components/Dialog/hooks/useNewDialog.ts

@@ -1,10 +1,13 @@
+import { ButtonWithLoadingProps } from '@/components/common/ButtonWithLoading';
+import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
 export interface IUseNewDialog {
   (): {
     open: boolean;
     handleOpenDialog: () => void;
     handleCloseDialog: () => void;
+    returnButton: ButtonWithLoadingProps;
   };
 }
 const useNewDialog: IUseNewDialog = () => {
@@ -17,7 +20,17 @@ const useNewDialog: IUseNewDialog = () => {
   const handleCloseDialog = () => {
     setOpen(false);
   };
-  return { open, handleOpenDialog, handleCloseDialog };
+
+  const t = useTranslations();
+
+  const returnButton: ButtonWithLoadingProps = {
+    children: t('buttons.return'),
+    variant: 'outlined',
+    color: 'inherit',
+    onClick: handleCloseDialog,
+  };
+
+  return { open, handleOpenDialog, handleCloseDialog, returnButton };
 };
 
 export default useNewDialog;

src/providers/ConfirmAlertProvider.tsx

@@ -11,7 +11,7 @@ const ConfirmAlertProvider: FC<PropsWithChildren> = ({ children }) => {
     const defaultOptions: ConfirmProviderProps['defaultOptions'] = {
       confirmationButtonProps: {
         variant: 'contained',
-        color: 'error',
+        color: 'primary',
       },
       cancellationButtonProps: {
         variant: 'outlined',