From 3b45b6f1e45e8547905ffd859c9c86d2a5fe8136 Mon Sep 17 00:00:00 2001 From: ardiola Date: Tue, 15 Apr 2025 22:03:45 +0700 Subject: [PATCH] add ResendTransaction component and integrate into Transaction context --- .../history-transaction/Transaction.tsx | 2 + .../blocks/ResendTransaction.tsx | 272 ++++++++++-------- .../hooks/TransactionContext.tsx | 34 +-- 3 files changed, 167 insertions(+), 141 deletions(-) diff --git a/src/pages/transaction/history-transaction/Transaction.tsx b/src/pages/transaction/history-transaction/Transaction.tsx index e0bc691..ca2dbf8 100644 --- a/src/pages/transaction/history-transaction/Transaction.tsx +++ b/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 = () => {
+ diff --git a/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx b/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx index 3e68622..c1fe663 100644 --- a/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx +++ b/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 { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue -} from '@/components/ui/select'; -import { Alert, KeenIcon, useDataGrid } from '@/components'; +import { Alert, 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 { - showResendDialog, - setShowResendDialog, - selectedTransactionRowForResend - } = useTransactionContext(); - - // const [transactionDetails, setTransactionDetails] = useState(null); - - // const [formField, setFormField] = useState({ - // transaction_code: '', - // status: '' - // }); - - console.log('selectedTransactionRowForResend', selectedTransactionRowForResend); - + const { reload } = useDataGrid(); + const [transactionDetails, setTransactionDetails] = useState(null); const [alert, setAlert] = useState({ show: false, message: '' }); + const initialStatePin = { + pin: '' + }; + const [formField, setFormField] = useState(initialStatePin); - // const doApproval = useCallback( - // async (e: React.FormEvent) => { - // e.preventDefault(); + useEffect(() => { + if (showResendDialog) { + // Reset form fields when dialog opens + setFormField({ + pin: '' + }); + setAlert({ show: false, message: '' }); + setTransactionDetails(null); // Optional reset + } + }, [showResendDialog]); - // if (!transactionDetails || !transactionDetails.code) { - // toast.error('Transaction data not loaded yet.'); - // return; - // } + 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 (!formField.status) { - // toast.error('Please select a status.'); - // return; - // } + }; - // const response = await PostData(`${API_URL}/transaction/set-approval`, { - // transaction_code: transactionDetails.code, - // status: formField.status, - // }); + if (showResendDialog && selectedTransactionForResend) { + fetchTransactionDetails(); + } + }, [showResendDialog, selectedTransactionForResend, GetData]); - // if (response?.status) { - // 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] - // ); + const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => { - // useEffect(() => { - // const fetchTransactionDetails = async () => { - // if (selectedTransactionIdForApproval) { - // 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 (pintransactiion.trim() === '') { + setAlert({ show: true, message: 'Please fill pin.' }); + return; + } - // if (showApprovalDialog && selectedTransactionIdForApproval) { - // fetchTransactionDetails(); - // } - // }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]); + if (pintransactiion.length < 6) { + setAlert({ show: true, message: 'Pin length must be 6 characters long.' }); + return; + } + + 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 ( - setShowResendDialog(open)}> + handleResendDialog(open, null)}>

Are you sure?

- You will resend this failed transaction! + You will retry this failed transaction! {alert.show && ( @@ -122,62 +179,27 @@ const ResendTransaction = () => { )} + + + setFormField({ ...formField, pin: e.target.value })} + /> - - ); - - // return ( - // - // - // - // Resend Transaction - // - // - //

tes dialog

- // {/*
- //
- //
- //
- // - - //
- // - //
- //
- //
- - - //
- //
- // - //
- //
- //
*/} - // - // - // - // ); }; export default ResendTransaction; diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx index 42bcd1b..00bbdf0 100644 --- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx +++ b/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>; showResendDialog: boolean; - setShowResendDialog: React.Dispatch>; - selectedTransactionRowForResend: any | null; - setTransactionRowForResend: React.Dispatch>; + handleResendDialog: (show: boolean, selected_transaction: string | null) => void; + selectedTransactionForResend: string | null; } const initialProps: ContextProps = { @@ -43,9 +43,8 @@ const initialProps: ContextProps = { selectedTransactionId: null, setSelectedTransactionId: () => { }, showResendDialog: false, - setShowResendDialog: () => { }, - selectedTransactionRowForResend: null, - setTransactionRowForResend: () => { } + handleResendDialog: (show: boolean, selected_transaction: string | null) => { }, + selectedTransactionForResend: null }; const ManageTransactionContext = createContext(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(null); + const [selectedTransactionForResend, setSelectedTransactionForResend] = useState(null); + + const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => { + setSelectedTransactionForResend(show ? selected_transaction : null); + setShowResendDialog(show); + }, []); + const columns = useMemo[]>( () => [ @@ -174,7 +179,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { ); }, - }, + }, { accessorKey: 'description', header: ({ column }) => , @@ -216,10 +221,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { {isVisible &&