TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update ResendTransaction component and remove unused dialog handling

Browse Source
This commit is contained in:
ardiola
2025-04-22 01:15:39 +07:00
parent dc4f33ffcd
commit 31a6d3d795
4 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/transaction/history-transaction/Transaction.tsx
View File

@ -29,7 +29,7 @@ const Transaction = () => {
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<ResendTransaction />
{/* <ResendTransaction /> */}
</Container>
</TransactionProvider>
</>

26
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -1,12 +1,14 @@
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import ResendTransaction from './ResendTransaction';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
@ -23,6 +25,16 @@ const DetailTransaction = () => {
const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [showResend, setResend] = useState(false);
const handleResendOpen = () => {
setResend(true);
};
const handleResendClose = () => {
setResend(false);
};
useEffect(() => {
const fetchTransactionDetails = async () => {
if (selectedTransactionId) {
@ -622,10 +634,20 @@ const DetailTransaction = () => {
)}
</div>
{/* {showResendDialog} */}
{(transactionDetails?.status === 'F' || transactionDetails?.status === 'P') && transactionDetails?.status_approve !== 'W' && (
<div className="flex justify-end mt-4">
<button className="btn btn-primary" onClick={handleResendOpen}>Retry Transaction</button>
<ResendTransaction isOpen={showResend} onClose={handleResendClose} selectedTransactionForResend={transactionDetails} />
</div>
)}
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailTransaction;
export default DetailTransaction;

89
src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx
View File

@ -19,10 +19,18 @@ import { Input } from '@/components/ui/input';
const API_URL = apiConfig.transaction;
const ResendTransaction = () => {
const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
interface ResendTransactionProps {
isOpen: boolean | null;
onClose: () => void | null;
selectedTransactionForResend: any | null; // Adjust the type as per your requirements
}
const ResendTransaction = ({ isOpen, onClose, selectedTransactionForResend }: ResendTransactionProps) => {
// const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
const { GetData, PostData } = useCallApi();
const { reload } = useDataGrid();
// const { reload } = useDataGrid();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [alert, setAlert] = useState({
show: false,
@ -34,38 +42,42 @@ const ResendTransaction = () => {
const [formField, setFormField] = useState(initialStatePin);
useEffect(() => {
if (showResendDialog) {
// if (showResendDialog) {
if (isOpen) {
// Reset form fields when dialog opens
setFormField({
pin: ''
});
setAlert({ show: false, message: '' });
setTransactionDetails(null); // Optional reset
// setTransactionDetails(null); // Optional reset
}
}, [showResendDialog]);
}, [isOpen]);
useEffect(() => {
const fetchTransactionDetails = async () => {
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);
}
}
// useEffect(() => {
// const fetchTransactionDetails = async () => {
// 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 (isOpen && selectedTransactionForResend) {
// fetchTransactionDetails();
// }
// }, [isOpen, selectedTransactionForResend, GetData]);
// console.log(selectedTransactionForResend);
if (showResendDialog && selectedTransactionForResend) {
fetchTransactionDetails();
}
}, [showResendDialog, selectedTransactionForResend, GetData]);
const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
@ -146,9 +158,9 @@ const ResendTransaction = () => {
if (response?.status) {
setAlert({ show: false, message: '' });
handleResendDialog(false, null);
// handleResendDialog(false, null);
toast.success('Success Retry Transaction');
reload();
// reload();
const createActivity = {
module: 'History Transaction',
@ -161,17 +173,20 @@ const ResendTransaction = () => {
setAlert({ show: true, message: response?.message });
toast.error('Failed Retry Transaction');
}
}, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
}, [selectedTransactionForResend, PostData]);
if (!isOpen) return null;
return (
<Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(open, null)}>
<Dialog open={isOpen} onOpenChange={onClose}>
<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 retry this transaction!</span>
<p className="text-sm">You will retry this transaction!</p>
</Alert>
{alert.show && (
<Alert variant="danger">
@ -188,14 +203,16 @@ const ResendTransaction = () => {
type="password"
value={formField.pin}
onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
/></DialogBody>
/>
</DialogBody>
<DialogFooter className="flex justify-end items-center gap-4 mt-3">
<Button variant="outline" onClick={() => handleResendDialog(false, null)}>
<button onClick={onClose}>Close</button>
{/* <Button variant="outline" onClick={() => handleResendDialog(false, null)}>
Cancel
</Button>
<Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
</Button> */}
<button className="btn btn-primary" onClick={() => doResendTransaction(selectedTransactionForResend, formField.pin)}>
Retry
</Button>
</button>
</DialogFooter>
</DialogContent>
</Dialog>

41
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -2,16 +2,11 @@ import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import React, { createContext, useCallback, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
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 +26,6 @@ interface ContextProps {
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
showResendDialog: boolean;
handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
selectedTransactionForResend: string | null;
}
const initialProps: ContextProps = {
@ -41,10 +33,7 @@ const initialProps: ContextProps = {
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { },
showResendDialog: false,
handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
selectedTransactionForResend: null
setSelectedTransactionId: () => { }
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
@ -59,13 +48,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
const [showResendDialog, setShowResendDialog] = useState(false);
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>[]>(
@ -217,18 +199,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
>
<KeenIcon icon="eye" />
</button>
{/* add new button for resend transaction failed */}
{isVisible &&
<button
className="btn btn-sm btn-icon btn-clear btn-light"
title="Retry Transaction"
onClick={() => {
handleResendDialog(true, row.id);
}}
>
<KeenIcon icon="abstract-37" />
</button>
}
</div>
);
},
@ -238,7 +208,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
}
],
[handleResendDialog]);
[]);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
@ -314,10 +284,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId,
showResendDialog,
handleResendDialog,
selectedTransactionForResend
setSelectedTransactionId
}}
>
<Toaster expand visibleToasts={9} duration={3000} />