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"> <div className="grid gap-5 lg:gap-7.5">
<DataGridInner /> <DataGridInner />
</div> </div>
<ResendTransaction /> {/* <ResendTransaction /> */}
</Container> </Container>
</TransactionProvider> </TransactionProvider>
</> </>

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

@ -1,12 +1,14 @@
import { useTransactionContext } from '../hooks/useTransactionContext'; import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import ResendTransaction from './ResendTransaction';
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle DialogTitle
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
@ -23,6 +25,16 @@ const DetailTransaction = () => {
const [transactionDetails, setTransactionDetails] = useState<any>(null); const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [showResend, setResend] = useState(false);
const handleResendOpen = () => {
setResend(true);
};
const handleResendClose = () => {
setResend(false);
};
useEffect(() => { useEffect(() => {
const fetchTransactionDetails = async () => { const fetchTransactionDetails = async () => {
if (selectedTransactionId) { if (selectedTransactionId) {
@ -622,6 +634,16 @@ const DetailTransaction = () => {
)} )}
</div> </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> </DialogBody>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

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 API_URL = apiConfig.transaction;
const ResendTransaction = () => { interface ResendTransactionProps {
const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext(); 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 { GetData, PostData } = useCallApi();
const { reload } = useDataGrid(); // const { reload } = useDataGrid();
const [transactionDetails, setTransactionDetails] = useState<any>(null); const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
@ -34,38 +42,42 @@ const ResendTransaction = () => {
const [formField, setFormField] = useState(initialStatePin); const [formField, setFormField] = useState(initialStatePin);
useEffect(() => { useEffect(() => {
if (showResendDialog) { // if (showResendDialog) {
if (isOpen) {
// Reset form fields when dialog opens // Reset form fields when dialog opens
setFormField({ setFormField({
pin: '' pin: ''
}); });
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
setTransactionDetails(null); // Optional reset // setTransactionDetails(null); // Optional reset
} }
}, [showResendDialog]); }, [isOpen]);
useEffect(() => { // useEffect(() => {
const fetchTransactionDetails = async () => { // const fetchTransactionDetails = async () => {
if (selectedTransactionForResend) { // if (selectedTransactionForResend) {
try { // try {
const response = await GetData( // const response = await GetData(
`${API_URL}/transaction/history/detail/${selectedTransactionForResend}`, // `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
{ // {
id: selectedTransactionForResend, // id: selectedTransactionForResend,
} // }
); // );
setTransactionDetails(response?.data); // setTransactionDetails(response?.data);
} catch (error) { // } catch (error) {
console.error('Error fetching transaction', 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) => { const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {
@ -146,9 +158,9 @@ const ResendTransaction = () => {
if (response?.status) { if (response?.status) {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
handleResendDialog(false, null); // handleResendDialog(false, null);
toast.success('Success Retry Transaction'); toast.success('Success Retry Transaction');
reload(); // reload();
const createActivity = { const createActivity = {
module: 'History Transaction', module: 'History Transaction',
@ -161,17 +173,20 @@ const ResendTransaction = () => {
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
toast.error('Failed Retry Transaction'); toast.error('Failed Retry Transaction');
} }
}, [selectedTransactionForResend, PostData, handleResendDialog, reload]); }, [selectedTransactionForResend, PostData]);
if (!isOpen) return null;
return ( 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"> <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block"> <DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle> <DialogTitle></DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
<Alert variant="warning"> <Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3> <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>
{alert.show && ( {alert.show && (
<Alert variant="danger"> <Alert variant="danger">
@ -188,14 +203,16 @@ const ResendTransaction = () => {
type="password" type="password"
value={formField.pin} value={formField.pin}
onChange={(e) => setFormField({ ...formField, pin: e.target.value })} onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
/></DialogBody> />
</DialogBody>
<DialogFooter className="flex justify-end items-center gap-4 mt-3"> <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 Cancel
</Button> </Button> */}
<Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}> <button className="btn btn-primary" onClick={() => doResendTransaction(selectedTransactionForResend, formField.pin)}>
Retry Retry
</Button> </button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </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 { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table'; import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios'; import React, { createContext, useCallback, useMemo, useState } from 'react';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar'; import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import DetailTransaction from '../blocks/DetailTransaction'; import DetailTransaction from '../blocks/DetailTransaction';
import { log } from 'console';
import ResendTransaction from '../blocks/ResendTransaction';
import { comment } from 'stylis';
interface TransactionProps { interface TransactionProps {
id: number; id: number;
@ -31,9 +26,6 @@ interface ContextProps {
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>; setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null; selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<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 = { const initialProps: ContextProps = {
@ -41,10 +33,7 @@ const initialProps: ContextProps = {
showDetailDialog: false, showDetailDialog: false,
setShowDetailDialog: () => { }, setShowDetailDialog: () => { },
selectedTransactionId: null, selectedTransactionId: null,
setSelectedTransactionId: () => { }, setSelectedTransactionId: () => { }
showResendDialog: false,
handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
selectedTransactionForResend: null
}; };
const ManageTransactionContext = createContext<ContextProps>(initialProps); const ManageTransactionContext = createContext<ContextProps>(initialProps);
@ -59,13 +48,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const handleNavigate = (path: string) => { const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`); 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>[]>( const columns = useMemo<ColumnDef<any>[]>(
@ -217,18 +199,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
> >
<KeenIcon icon="eye" /> <KeenIcon icon="eye" />
</button> </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> </div>
); );
}, },
@ -238,7 +208,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
} }
} }
], ],
[handleResendDialog]); []);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => { const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try { try {
@ -314,10 +284,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
showDetailDialog, showDetailDialog,
setShowDetailDialog, setShowDetailDialog,
selectedTransactionId, selectedTransactionId,
setSelectedTransactionId, setSelectedTransactionId
showResendDialog,
handleResendDialog,
selectedTransactionForResend
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} /> <Toaster expand visibleToasts={9} duration={3000} />