chore(FE-195): adjust ConfirmationModal primaryButton and secondaryButton props

src/components/modal/ConfirmationModal.tsx

@@ -1,30 +1,23 @@
 'use client';
 
-import { RefObject } from 'react';
+import { MouseEventHandler, RefObject, useState } from 'react';
 
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
-import Button from '@/components/Button';
+import Button, { ButtonProps } from '@/components/Button';
 
 import { cn } from '@/lib/helper';
-import { Color } from '@/types/theme';
 
 interface ConfirmationModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   type?: 'info' | 'success' | 'error';
   text?: string;
   closeOnBackdrop?: boolean;
-  primaryButton?: {
+  primaryButton?: ButtonProps & {
     text?: string;
-    color?: Color;
-    isLoading?: boolean;
-    onClick?: () => void;
   };
-  secondaryButton?: {
+  secondaryButton?: ButtonProps & {
     text?: string;
-    color?: Color;
-    isLoading?: boolean;
-    onClick?: () => void;
   };
   className?: {
     modal?: string;
@@ -41,10 +34,22 @@ const ConfirmationModal = ({
   secondaryButton,
   className,
 }: ConfirmationModalProps) => {
+  const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
+
   const closeModalHandler = () => {
     ref.current?.close();
   };
 
+  const primaryButtonClickHandler: MouseEventHandler<
+    HTMLButtonElement
+  > = async (event) => {
+    setIsPrimaryButtonLoading(true);
+
+    await primaryButton?.onClick?.(event);
+
+    setIsPrimaryButtonLoading(false);
+  };
+
   return (
     <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
       <div className='w-full flex flex-col gap-4'>
@@ -93,10 +98,15 @@ const ConfirmationModal = ({
         <div className='w-full flex flex-row gap-2'>
           {secondaryButton && secondaryButton.text && (
             <Button
+              {...secondaryButton}
               variant='ghost'
-              color={secondaryButton?.color ?? 'none'}
+              color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
-              disabled={secondaryButton?.isLoading}
+              disabled={
+                secondaryButton?.isLoading !== undefined
+                  ? secondaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
               onClick={closeModalHandler}
               className='grow'
             >
@@ -106,10 +116,19 @@ const ConfirmationModal = ({
 
           {primaryButton && primaryButton.text && (
             <Button
+              {...primaryButton}
               color={primaryButton?.color ?? 'info'}
-              onClick={primaryButton?.onClick}
-              isLoading={primaryButton?.isLoading}
-              disabled={primaryButton?.isLoading}
+              onClick={primaryButtonClickHandler}
+              isLoading={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              disabled={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
               className='grow'
             >
               {primaryButton?.text ?? 'Ya'}