feat(wallet-admin): see payout audit details from external provider

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx

@@ -489,6 +489,8 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
             </div>
             {confirmFlow && (
                 <ConfirmModal
+                    maxWidth='800px'
+                    size='lg'
                     showButtons={confirmFlow.showButtons}
                     title={confirmFlow.title}
                     action={confirmFlow.action}

src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.module.scss

@@ -13,6 +13,7 @@
 .infoItem {
     display: flex;
     flex-direction: column;
+    gap: 2px;
 }
 
 .label {

src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable unicorn/no-null */
 /* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
@@ -8,7 +9,8 @@ import { TOPCODER_URL } from '~/config/environments/default.env'
 
 import { WinningsAudit } from '../../models/WinningsAudit'
 import { Winning } from '../../models/WinningDetail'
-import { fetchAuditLogs, getMemberHandle } from '../../services/wallet'
+import { PayoutAudit } from '../../models/PayoutAudit'
+import { fetchAuditLogs, fetchPayoutAuditLogs, getMemberHandle } from '../../services/wallet'
 
 import styles from './PaymentView.module.scss'
 
@@ -17,11 +19,12 @@ interface PaymentViewProps {
 }
 
 const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
-    const [view, setView] = React.useState<'details' | 'audit'>('details')
+    const [view, setView] = React.useState<'details' | 'audit' | 'external_transaction'>('details')
     const [auditLines, setAuditLines] = React.useState<WinningsAudit[]>([])
+    const [externalTransactionAudit, setExternalTransactionAudit] = React.useState<PayoutAudit[]>([])
 
-    const handleToggleView = (): void => {
-        setView(view === 'details' ? 'audit' : 'details')
+    const handleToggleView = (newView: 'audit' | 'details' | 'external_transaction'): void => {
+        setView(newView)
     }
 
     React.useEffect(() => {
@@ -45,6 +48,11 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                 .catch(() => {
                     setAuditLines([])
                 })
+        } else if (view === 'external_transaction') {
+            fetchPayoutAuditLogs(props.payment.id)
+                .then(payoutAudit => {
+                    setExternalTransactionAudit(payoutAudit)
+                })
         }
     }, [props.payment.id, view])
 
@@ -125,9 +133,15 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
 
                         <div className={styles.infoItem}>
                             <Button
-                                onClick={handleToggleView}
+                                onClick={() => handleToggleView('audit')}
                                 label='View Audit'
                             />
+                            {props.payment.status.toUpperCase() === 'PAID' && (
+                                <Button
+                                    onClick={() => handleToggleView('external_transaction')}
+                                    label='External Transaction Details'
+                                />
+                            )}
                         </div>
                     </>
                 )}
@@ -179,12 +193,83 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                         </div>
                         <div className={styles.infoItem}>
                             <Button
-                                onClick={handleToggleView}
+                                onClick={() => handleToggleView('details')}
+                                label='Back to Details'
+                            />
+                        </div>
+                    </>
+                )}
+
+                {view === 'external_transaction' && (
+                    <>
+                        <div className={styles.auditSection}>
+                            {externalTransactionAudit && externalTransactionAudit.length > 0 && externalTransactionAudit.map((externalTransaction: PayoutAudit, index: number) => (
+                                <>
+                                    <Collapsible
+                                        key={`internal-record${index}`}
+                                        header={(
+                                            <h3>Internal Record</h3>
+                                        )}
+                                        containerClass={styles.container}
+                                        contentClass={styles.content}
+                                    >
+                                        <div className={styles.auditItem}>
+                                            <div>
+                                                <p>
+                                                    <strong>Provider Used:</strong>
+                                                    {' '}
+                                                    {externalTransaction.paymentMethodUsed}
+                                                </p>
+                                                <p>
+                                                    <strong>Status:</strong>
+                                                    {' '}
+                                                    {externalTransaction.status}
+                                                </p>
+                                                <p>
+                                                    <strong>Processed At:</strong>
+                                                    {' '}
+                                                    {externalTransaction.createdAt}
+                                                </p>
+                                                <p>
+                                                    <strong>Totl Amount Processed:</strong>
+                                                    {' '}
+                                                    {externalTransaction.totalNetAmount}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </Collapsible>
+                                    <Collapsible
+                                        key={`external-record${index}`}
+                                        header={(
+                                            <h3>External Record</h3>
+                                        )}
+                                        containerClass={styles.container}
+                                        contentClass={styles.content}
+                                    >
+                                        <div className={styles.auditItem}>
+                                            <div>
+                                                <pre>{JSON.stringify(externalTransaction.externalTransactionDetails, undefined, 2)}</pre>
+                                            </div>
+                                        </div>
+                                    </Collapsible>
+                                </>
+                            ))}
+                            {(externalTransactionAudit === undefined)
+                                && (
+                                    <div className={styles.auditItem}>
+                                        <p>No external transaction data is available</p>
+                                    </div>
+                                )}
+                        </div>
+                        <div className={styles.infoItem}>
+                            <Button
+                                onClick={() => handleToggleView('details')}
                                 label='Back to Details'
                             />
                         </div>
                     </>
                 )}
+
             </div>
         </div>
     )

src/apps/wallet-admin/src/lib/models/PayoutAudit.ts

@@ -0,0 +1,9 @@
+export interface PayoutAudit {
+    externalTransactionId: string
+    status: string
+    totalNetAmount: number
+    createdAt: string
+    metadata: string
+    paymentMethodUsed: string
+    externalTransactionDetails: any
+}

src/apps/wallet-admin/src/lib/services/wallet.ts

@@ -9,6 +9,7 @@ import { TaxForm } from '../models/TaxForm'
 import { TransactionResponse } from '../models/TransactionId'
 import { PaginationInfo } from '../models/PaginationInfo'
 import { WinningsAudit } from '../models/WinningsAudit'
+import { PayoutAudit } from '../models/PayoutAudit'
 import ApiResponse from '../models/ApiResponse'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/payments`
@@ -54,6 +55,22 @@ export async function fetchAuditLogs(paymentId: string): Promise<WinningsAudit[]
 
 }
 
+export async function fetchPayoutAuditLogs(paymentId: string): Promise<PayoutAudit[]> {
+    // eslint-disable-next-line max-len
+    const response = await xhrGetAsync<ApiResponse<PayoutAudit[]>>(`${baseUrl}/admin/winnings/${paymentId}/audit-payout`)
+
+    if (response.status === 'error') {
+        throw new Error('Error fetching audit logs')
+    }
+
+    if (response.data.length === 0) {
+        throw new Error('No payout audit logs found')
+    }
+
+    return response.data
+
+}
+
 export async function editPayment(updates: {
     winningsId: string,
     paymentStatus?: 'ON_HOLD_ADMIN' | 'OWED' | 'CANCELLED',

src/libs/ui/lib/components/modals/base-modal/BaseModal.module.scss

@@ -82,4 +82,8 @@
         padding: 0;
         margin: 0;
     }
+
+    .modal-lg {
+        max-width: 800px;
+    }
 }

src/libs/ui/lib/components/modals/confirm/ConfirmModal.tsx

@@ -10,12 +10,14 @@ export interface ConfirmModalProps extends ModalProps {
     title: string
     canSave?: boolean
     showButtons?: boolean
+    maxWidth?: string
+    size?: 'sm' | 'md' | 'lg'
 }
 
 const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) => (
     <BaseModal
         {...props}
-        styles={{ modal: { maxWidth: '450px' } }}
+        styles={{ modal: { maxWidth: props.maxWidth ?? '450px' } }}
         buttons={(
             props.showButtons !== false && (
                 <>