add ResendTransaction component and integrate into Transaction context

src/pages/transaction/history-transaction/Transaction.tsx

@@ -2,6 +2,7 @@ import { Container, DataGridInner } from '@/components';
 import { TransactionProvider } from './hooks/TransactionContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
+import ResendTransaction from './blocks/ResendTransaction';
 
 const Transaction = () => {
   return (
@@ -28,6 +29,7 @@ const Transaction = () => {
           <div className="grid gap-5 lg:gap-7.5">
             <DataGridInner />
           </div>
+          <ResendTransaction />
         </Container>
       </TransactionProvider>
     </>

src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx

@@ -1,7 +1,7 @@
 import { useTransactionContext } from '../hooks/useTransactionContext';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     Dialog,
     DialogBody,
@@ -12,14 +12,7 @@ import {
     DialogTitle
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import {
+import { Alert, useDataGrid } from '@/components';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from '@/components/ui/select';
-import { Alert, KeenIcon, useDataGrid } from '@/components';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
@@ -27,94 +20,158 @@ import { Input } from '@/components/ui/input';
 const API_URL = apiConfig.transaction;
 
 const ResendTransaction = () => {
+    const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
     const { GetData, PostData } = useCallApi();
-    // const { reload } = useDataGrid();
+    const { reload } = useDataGrid();
-    const {
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
-        showResendDialog,
-        setShowResendDialog,
-        selectedTransactionRowForResend
-    } = useTransactionContext();
-
-    // const [transactionDetails, setTransactionDetails] = useState<any>(null);
-
-    // const [formField, setFormField] = useState({
-    //     transaction_code: '',
-    //     status: ''
-    // });
-
-    console.log('selectedTransactionRowForResend', selectedTransactionRowForResend);
-
     const [alert, setAlert] = useState({
         show: false,
         message: ''
     });
+    const initialStatePin = {
+        pin: ''
+    };
+    const [formField, setFormField] = useState(initialStatePin);
 
-    // const doApproval = useCallback(
+    useEffect(() => {
-    //     async (e: React.FormEvent<HTMLFormElement>) => {
+        if (showResendDialog) {
-    //         e.preventDefault();
+            // Reset form fields when dialog opens
+            setFormField({
+                pin: ''
+            });
+            setAlert({ show: false, message: '' });
+            setTransactionDetails(null); // Optional reset
+        }
+    }, [showResendDialog]);
 
-    //         if (!transactionDetails || !transactionDetails.code) {
+    useEffect(() => {
-    //             toast.error('Transaction data not loaded yet.');
+        const fetchTransactionDetails = async () => {
-    //             return;
+            if (selectedTransactionForResend) {
-    //         }
+                try {
+                    const response = await GetData(
+                        `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
+                        {
+                            id: selectedTransactionForResend,
+                        }
+                    );
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
 
-    //         if (!formField.status) {
+        };
-    //             toast.error('Please select a status.');
-    //             return;
-    //         }
 
-    //         const response = await PostData(`${API_URL}/transaction/set-approval`, {
+        if (showResendDialog && selectedTransactionForResend) {
-    //             transaction_code: transactionDetails.code,
+            fetchTransactionDetails();
-    //             status: formField.status,
+        }
-    //         });
+    }, [showResendDialog, selectedTransactionForResend, GetData]);
 
-    //         if (response?.status) {
+    const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
-    //             setAlert((prev) => ({ ...prev, show: false, message: '' }));
-    //             toast.success('Success Update Position');
-    //             const createActivity = {
-    //                 module: 'Approval Transaction',
-    //                 description: `Change status approve for transaction => ${transactionDetails.code}`,
-    //                 action: 'U'
-    //             };
-    //             doSaveLogActivity(createActivity);
-    //             setShowApprovalDialog(false); // optionally close dialog
-    //         } else {
-    //             setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
-    //         }
-    //     },
-    //     [formField, transactionDetails]
-    // );
 
-    // useEffect(() => {
+        if (pintransactiion.trim() === '') {
-    //     const fetchTransactionDetails = async () => {
+            setAlert({ show: true, message: 'Please fill pin.' });
-    //         if (selectedTransactionIdForApproval) {
+            return;
-    //             try {
+        }
-    //                 const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
-    //                     id: selectedTransactionIdForApproval
-    //                 });
-    //                 // console.log(response?.data.code);
-    //                 // console.log(selectedTransactionIdForApproval);
-    //                 setTransactionDetails(response?.data);
-    //             } catch (error) {
-    //                 console.error('Error fetching transaction', error);
-    //             }
-    //         }
-    //     };
 
-    //     if (showApprovalDialog && selectedTransactionIdForApproval) {
+        if (pintransactiion.length < 6) {
-    //         fetchTransactionDetails();
+            setAlert({ show: true, message: 'Pin length must be 6 characters long.' });
-    //     }
+            return;
-    // }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
+        }
+
+        if (!data) {
+            toast.error('No Transaction selected');
+            return;
+        }
+
+        if (!data.type) {
+            toast.error('No Transaction Type selected');
+            return;
+        }
+
+        let apiEndpoint: string | null | undefined = null;
+        let apiJsonData: any | null | undefined = null;
+
+        switch (data.kind) {
+            case 'T':
+                apiEndpoint = `${API_URL}/transaction/transfer`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    msisdn_destination: data.transfer.destination_customer.msisdn,
+                    id_transaction_type: data.type.id,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion,
+                    type: data.transfer.type
+                }
+                break;
+            case 'U':
+                apiEndpoint = `${API_URL}/transaction/topup`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    id_transaction_type: data.type.id,
+                    pin_p24: data.transfer.pin_p24,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion
+                }
+                break;
+            case 'W':
+                apiEndpoint = `${API_URL}/transaction/withdraw`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    id_transaction_type: data.type.id,
+                    destination_iban: data.transfer.destination_iban,
+                    amount: String(data.transfer.amount),
+                    pin: pintransactiion
+                }
+                break;
+            case 'P':
+                apiEndpoint = `${API_URL}/transaction/purchase`;
+                apiJsonData = {
+                    id_origin_customer: data.origin_customer.id,
+                    code_product: "object purchase : masih null",
+                    wallet: "emoney or point",
+                    destination_number: "parameter number",
+                    destination_amount: "parameter amount",
+                    pin: pintransactiion
+                }
+                break;
+        }
+
+        if (!apiEndpoint || !apiJsonData) {
+            toast.error('Invalid transaction');
+            return;
+        }
+
+        const response = await PostData(apiEndpoint, apiJsonData);
+
+        if (response?.status) {
+            setAlert({ show: false, message: '' });
+            handleResendDialog(false, null);
+            toast.success('Success Retry Transaction');
+            reload();
+
+            const createActivity = {
+                module: 'History Transaction',
+                description: `Retry Transaction => ${selectedTransactionForResend}`,
+                action: 'U'
+            };
+
+            doSaveLogActivity(createActivity);
+        } else {
+            setAlert({ show: true, message: response?.message });
+            toast.error('Failed Retry Transaction');
+        }
+    }, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
 
     return (
-        <Dialog open={showResendDialog} onOpenChange={(open) => setShowResendDialog(open)}>
+        <Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(open, null)}>
             <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
                 <DialogHeader className="p-0 border-0 block">
                     <DialogTitle></DialogTitle>
                     <DialogDescription></DialogDescription>
                     <Alert variant="warning">
                         <h3 className="text-lg">Are you sure?</h3>
-                        <span className="text-sm">You will resend this failed transaction!</span>
+                        <span className="text-sm">You will retry this failed transaction!</span>
                     </Alert>
                     {alert.show && (
                         <Alert variant="danger">
@@ -122,62 +179,27 @@ const ResendTransaction = () => {
                         </Alert>
                     )}
                 </DialogHeader>
+                <DialogBody>
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                        Pin<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                        className="input"
+                        type="password"
+                        value={formField.pin}
+                        onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
+                    /></DialogBody>
                 <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-                    <Button variant="outline" onClick={() => setShowResendDialog(false)}>
+                    <Button variant="outline" onClick={() => handleResendDialog(false, null)}>
                         Cancel
                     </Button>
-                    <Button variant="default">
+                    <Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
-                        Resend
+                        Retry
                     </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
     );
-
-    // return (
-    //     <Dialog open={showResendDialog} onOpenChange={setShowResendDialog}>
-    //         <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
-    //             <DialogHeader>
-    //                 <DialogTitle>Resend Transaction</DialogTitle>
-    //             </DialogHeader>
-    //             <DialogBody>
-    //                 <p>tes dialog</p>
-    //                 {/* <form action="" onSubmit={doApproval}>
-    //                     <div className="card-body grid gap-5 p-0">
-    //                         <div className="w-full">
-    //                             <div className="flex items-center flex-wrap gap-2.5">
-    //                                 <label className="form-label max-w-56">Status</label>
-
-    //                                 <div className="grow">
-    //                                     <Select
-    //                                         value={formField.status}
-    //                                         onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
-    //                                     >
-    //                                         <SelectTrigger>
-    //                                             <SelectValue placeholder="Select" />
-    //                                         </SelectTrigger>
-    //                                         <SelectContent>
-    //                                             <SelectItem value="Y">APPROVE</SelectItem>
-    //                                             <SelectItem value="N">REJECTED</SelectItem>
-    //                                         </SelectContent>
-    //                                     </Select>
-    //                                 </div>
-    //                             </div>
-    //                         </div>
-
-
-    //                         <hr />
-    //                         <div className="flex justify-end">
-    //                             <Button className="btn btn-primary" type="submit">
-    //                                 Save Changes
-    //                             </Button>
-    //                         </div>
-    //                     </div>
-    //                 </form> */}
-    //             </DialogBody>
-    //         </DialogContent>
-    //     </Dialog>
-    // );
 };
 
 export default ResendTransaction;

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -11,6 +11,7 @@ import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
 import { log } from 'console';
 import ResendTransaction from '../blocks/ResendTransaction';
+import { comment } from 'stylis';
 
 interface TransactionProps {
   id: number;
@@ -31,9 +32,8 @@ interface ContextProps {
   selectedTransactionId: number | null;
   setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
   showResendDialog: boolean;
-  setShowResendDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
-  selectedTransactionRowForResend: any | null;
+  selectedTransactionForResend: string | null;
-  setTransactionRowForResend: React.Dispatch<React.SetStateAction<any | null>>;
 }
 
 const initialProps: ContextProps = {
@@ -43,9 +43,8 @@ const initialProps: ContextProps = {
   selectedTransactionId: null,
   setSelectedTransactionId: () => { },
   showResendDialog: false,
-  setShowResendDialog: () => { },
+  handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
-  selectedTransactionRowForResend: null,
+  selectedTransactionForResend: null
-  setTransactionRowForResend: () => { }
 };
 
 const ManageTransactionContext = createContext<ContextProps>(initialProps);
@@ -61,7 +60,13 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
     const url = navigate(`${API_URL}/transaction/history/${path}`);
   };
   const [showResendDialog, setShowResendDialog] = useState(false);
-  const [selectedTransactionRowForResend, setTransactionRowForResend] = useState<any | null>(null);
+  const [selectedTransactionForResend, setSelectedTransactionForResend] = useState<string | null>(null);
+
+  const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => {
+    setSelectedTransactionForResend(show ? selected_transaction : null);
+    setShowResendDialog(show);
+  }, []);
+
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
@@ -216,10 +221,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
               {isVisible &&
                 <button
                   className="btn btn-sm btn-icon btn-clear btn-light"
-                  title="Resend Transaction"
+                  title="Retry Transaction"
                   onClick={() => {
-                    setTransactionRowForResend(row);
+                    handleResendDialog(true, row.id);
-                    setShowResendDialog(true);
                   }}
                 >
                   <KeenIcon icon="abstract-37" />
@@ -234,7 +238,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         }
       }
     ],
-    []);
+    [handleResendDialog]);
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
@@ -287,14 +291,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         selectedTransactionId,
         setSelectedTransactionId,
         showResendDialog,
-        setShowResendDialog,
+        handleResendDialog,
-        selectedTransactionRowForResend,
+        selectedTransactionForResend
-        setTransactionRowForResend
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
       <DetailTransaction />
-      <ResendTransaction />
 
       <DataGridProvider
         columns={columns}