add confirmation dialog and fix error toast message

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -1,31 +1,47 @@
-import { Container, DataGridInner } from '@/components';
+import { Alert, Container, DataGridInner } from '@/components';
 import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState ,useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { RefreshCw } from 'lucide-react';
 
 const TransactionDisbursement = () => {
-  const [form, setForm] = useState({
+  const initialForm: {
+    msisdn: string;
+    amount: string;
+    pin: string;
+  } = {
     msisdn: '',
     amount: '',
     pin: ''
-  });
+  };
+
+  const [form, setForm] = useState(initialForm);
   const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
   const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
-  const API_URL_WALLET = apiConfig.service_wallet
+  const API_URL_WALLET = apiConfig.service_wallet;
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
 
   useEffect(() => {
     const fetchWallets = async () => {
       try {
-        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        const response = await GetData(
+          `${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
+          {}
+        );
         if (response?.status === true) {
           setWallets(response.data || []);
         } else {
@@ -39,30 +55,50 @@ const TransactionDisbursement = () => {
     fetchWallets();
   }, []);
 
-  const handleSubmit = async (e: any) => {
+  const doPostData = async (form: typeof initialForm) => {
-    e.preventDefault();
+    setIsSubmitting(true);
-    console.log('Submitted Data:', form);
+
-    if (form.amount == '' || form.msisdn == '' || form.pin == '') {
-      toast.warning('Please fill in all required fields.')
-      return
-    }
     try {
-      let requestTopup = await PostData(`${API_URL}/transaction/topup-downline`, {
+      let response = await PostData(`${API_URL}/transaction/topup-downline`, {
         msisdn_destination: form.msisdn,
         amount: form.amount,
         pin: form.pin
-      })
+      });
-      if (requestTopup?.status == true) {
+      if (response?.status == true) {
-        toast.success('Success Request Topup')
+        toast.success('Success Request Topup');
       } else {
-        toast.warning(`${requestTopup?.message}`)
+        toast.error(`${response?.message?.message}`);
       }
-    } catch (error) {
+    } catch (error: any) {
-      toast.warning('Failed')
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+      setAlert({ show: true, message: errorMessage });
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
     }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (form.amount == '' || form.msisdn == '' || form.pin == '') {
+      setAlert({
+        show: true,
+        message: 'Please fill in all required fields.'
+      });
+      return;
+    }
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
     // TODO: Kirim ke backend atau proses lainnya
   };
 
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
   return (
     <>
       <Helmet>
@@ -70,7 +106,9 @@ const TransactionDisbursement = () => {
       </Helmet>
       <TransactionDisbursementProvider>
         <Container className="mb-7">
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            MANAGE TRANSACTION DISBURSEMENT SALDO
+          </h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -90,51 +128,97 @@ const TransactionDisbursement = () => {
                 <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
                   <p className="text-sm text-gray-500">{wallet.wallet}</p>
                   <p className="text-lg font-semibold text-green-600">
-                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      wallet.amount
+                    )}
                   </p>
                 </div>
               ))}
             </div>
           </div>
+
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">
+                {alert.show && (
+                  <Alert variant="danger">
+                    <h3>{alert.message}</h3>
+                  </Alert>
+                )}
                 {/* form */}
-                <form onSubmit={handleSubmit} className="space-y-6">
+                <form onSubmit={handleSubmit} className="space-y-6 mt-5">
-                <div>
+                  <div>
-                  <label htmlFor="msisdn">Destination MSISDN</label><span className="text-red-500">*</span>
+                    <label htmlFor="msisdn">Destination MSISDN</label>
-                  <Input
+                    <span className="text-red-500">*</span>
-                    id="msisdn"
+                    <Input
-                    type="number"
+                      id="msisdn"
-                    value={form.msisdn}
+                      type="number"
-                    onChange={(e) => setForm({ ...form, msisdn: e.target.value })}
+                      value={form.msisdn}
-                  />
+                      onChange={(e) => setForm({ ...form, msisdn: e.target.value })}
-                </div>
+                    />
-                <div>
+                  </div>
-                  <label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
+                  <div>
-                  <Input
+                    <label htmlFor="amount">Amount</label>
-                    id="amount"
+                    <span className="text-red-500">*</span>
-                    type="number"
+                    <Input
-                    value={form.amount}
+                      id="amount"
-                    onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                      type="number"
-                  />
+                      value={form.amount}
-                </div>
+                      onChange={(e) => setForm({ ...form, amount: e.target.value })}
-                <div>
+                    />
-                  <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
+                  </div>
-                  <Input
+                  <div>
-                    id="pin"
+                    <label htmlFor="pin">PIN</label>
-                    type="password"
+                    <span className="text-red-500">*</span>
-                    value={form.pin}
+                    <Input
-                    onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                      id="pin"
-                  />
+                      type="password"
-                </div>
+                      value={form.pin}
-                <div>
+                      onChange={(e) => setForm({ ...form, pin: e.target.value })}
-                  <Button type="submit">Submit</Button>
+                    />
-                </div>
+                  </div>
-              </form>
+                  <div>
+                    <Button type="button" onClick={handleSubmit}>
+                      Submit
+                    </Button>
+                  </div>
+                </form>
               </div>
             </div>
           </Container>
+
+          {showConfirmation && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+                <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+                <p className="mb-6">
+                  Are you sure you want to disbursement saldo of{' '}
+                  <span className="font-semibold">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      Number(form.amount)
+                    )}{' '}
+                  </span>
+                  ?
+                </p>
+                <div className="flex justify-end space-x-3">
+                  <Button
+                    variant="outline"
+                    onClick={handleCancelSubmit}
+                    className="border-gray-300 text-gray-700"
+                  >
+                    Cancel
+                  </Button>
+                  <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Confirm'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
         </Container>
       </TransactionDisbursementProvider>
     </>

src/pages/transaction/topup/TransactionTopup.tsx

@@ -1,31 +1,46 @@
-import { Container, DataGridInner } from '@/components';
+import { Alert, Container, DataGridInner } from '@/components';
 import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { RefreshCw } from 'lucide-react';
 
 const TransactionTopup = () => {
-  const [form, setForm] = useState({
+  const initialState: {
+    topupAmount: string;
+    pin: string;
+  } = {
     topupAmount: '',
     pin: ''
+  };
+
+  const [form, setForm] = useState(initialState);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
   });
 
   const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
   const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
-  const API_URL_WALLET = apiConfig.service_wallet
+  const API_URL_WALLET = apiConfig.service_wallet;
 
   useEffect(() => {
     const fetchWallets = async () => {
       try {
-        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        const response = await GetData(
+          `${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
+          {}
+        );
         if (response?.status === true) {
           setWallets(response.data || []);
         } else {
@@ -39,30 +54,49 @@ const TransactionTopup = () => {
     fetchWallets();
   }, []);
 
-  const handleSubmit = async (e: any) => {
+  const doPostData = async (form: typeof initialState) => {
-    e.preventDefault();
+    setIsSubmitting(true);
-    console.log('Submitted Data:', form);
 
-    if (form.pin == '' || form.topupAmount == '') {
-      toast.warning('Please fill in all required fields.')
-      return
-    }
     try {
-      let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
+      let response = await PostData(`${API_URL}/transaction/request-topup`, {
         amount: form.topupAmount,
         pin: form.pin
-      })
+      });
-      if (requestTopup?.status == true) {
+      console.log(response);
-        toast.success('Success Request Topup')
+      if (response?.status == true) {
+        toast.success('Success Request Topup');
       } else {
-        toast.warning(`${requestTopup?.message}`)
+        toast.warning(`${response?.message}`);
       }
-    } catch (error) {
+    } catch (error: any) {
-      toast.warning('Failed')
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
     }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // console.log('Submitted Data:', form);
+
+    if (form.pin == '' || form.topupAmount == '') {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
+
     // TODO: Kirim ke backend atau proses lainnya
   };
 
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
   return (
     <>
       <Helmet>
@@ -70,7 +104,9 @@ const TransactionTopup = () => {
       </Helmet>
       <TransactionTopupProvider>
         <Container className="mb-7">
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            MANAGE TRANSACTION TOPUP REQUEST
+          </h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -82,6 +118,7 @@ const TransactionTopup = () => {
               <span className="text-sm">Topup</span>
             </Link>
           </Breadcrumbs>
+
           {/* Wallet Section */}
           <div className="mb-6">
             <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
@@ -90,7 +127,9 @@ const TransactionTopup = () => {
                 <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
                   <p className="text-sm text-gray-500">{wallet.wallet}</p>
                   <p className="text-lg font-semibold text-green-600">
-                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      wallet.amount
+                    )}
                   </p>
                 </div>
               ))}
@@ -99,10 +138,16 @@ const TransactionTopup = () => {
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">
+                {alert.show && (
+                  <Alert variant="danger">
+                    <h3>{alert.message}</h3>
+                  </Alert>
+                )}
                 {/* form */}
-                <form onSubmit={handleSubmit} className="space-y-6">
+                <form onSubmit={handleSubmit} className="space-y-6 mt-5">
                   <div>
-                    <label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
+                    <label htmlFor="topupAmount">Topup Amount</label>
+                    <span className="text-red-500">*</span>
                     <Input
                       id="topupAmount"
                       type="number"
@@ -111,7 +156,8 @@ const TransactionTopup = () => {
                     />
                   </div>
                   <div>
-                    <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
+                    <label htmlFor="pin">PIN</label>
+                    <span className="text-red-500">*</span>
                     <Input
                       id="pin"
                       type="password"
@@ -120,12 +166,46 @@ const TransactionTopup = () => {
                     />
                   </div>
                   <div>
-                    <Button type="submit">Submit</Button>
+                    <Button type="button" onClick={handleSubmit}>
+                      Submit
+                    </Button>
                   </div>
                 </form>
               </div>
             </div>
           </Container>
+          {showConfirmation && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+                <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+                <p className="mb-6">
+                  Are you sure you want to request a topup of{' '}
+                  <span className="font-semibold">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      Number(form.topupAmount)
+                    )}{' '}
+                  </span>{' '}
+                  ?
+                </p>
+                <div className="flex justify-end space-x-3">
+                  <Button
+                    variant="outline"
+                    onClick={handleCancelSubmit}
+                    className="border-gray-300 text-gray-700"
+                  >
+                    Cancel
+                  </Button>
+                  <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Confirm'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
         </Container>
       </TransactionTopupProvider>
     </>