From 8cfa081f573b1d95339aaf2ddb2aab8a17f18b38 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 24 Apr 2026 15:18:21 +0300
Subject: [PATCH] PM-4830 - payment details modal for tasks

---
 .../payment-view/PaymentView.spec.tsx         | 41 +++++++++++
 .../components/payment-view/PaymentView.tsx   | 73 ++++++++++++++++++-
 .../payment-view/payment-view.utils.ts        | 13 ++++
 .../src/lib/models/WinningDetail.ts           |  7 ++
 4 files changed, 130 insertions(+), 4 deletions(-)

diff --git a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
index bf3806abf..20053762a 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
+++ b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
@@ -182,4 +182,45 @@ describe('PaymentView', () => {
         expect(workLogRemarksLink.getAttribute('target'))
             .toBe('_blank')
     })
+
+    it('renders task details section for task payments', async () => {
+        const taskPayment: Winning = {
+            ...payment,
+            description: 'Build a cool widget for the dashboard',
+            externalId: 'challenge-uuid-1',
+            type: 'task payment',
+        }
+
+        mockedFetchWinningPaymentDetails.mockResolvedValue({
+            paymentCreatorHandle: 'task-creator',
+            taskDetails: {
+                paymentApproverHandle: 'approver-handle',
+                projectId: '42',
+                projectName: 'My Awesome Project',
+            },
+        })
+
+        render(<PaymentView payment={taskPayment} />)
+
+        await waitFor(() => {
+            expect(mockedFetchWinningPaymentDetails)
+                .toHaveBeenCalledWith(taskPayment)
+        })
+
+        expect(await screen.findByRole('heading', { name: 'Task Details' }))
+            .toBeTruthy()
+
+        expect(await screen.findByRole('heading', { name: 'Task Details' }))
+            .toBeTruthy()
+        expect(await screen.findByText('task-creator'))
+            .toBeTruthy()
+        expect(await screen.findByText('approver-handle'))
+            .toBeTruthy()
+
+        const projectLink = await screen.findByRole('link', { name: 'My Awesome Project' })
+        expect(projectLink.getAttribute('href'))
+            .toBe('https://challenges.example.com/projects/42/challenges/challenge-uuid-1/view')
+        expect(projectLink.getAttribute('target'))
+            .toBe('_blank')
+    })
 })
diff --git a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx
index 02db5e10c..6556425cb 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx
+++ b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.tsx
@@ -19,6 +19,7 @@ import {
     getMemberHandle,
 } from '../../services/wallet'
 import {
+    buildWorkAppChallengeUrl,
     buildWorkManagerAssignmentUrl,
     buildWorkManagerProjectUrl,
     formatOptionalDate,
@@ -42,6 +43,7 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
     const [paymentDetailsError, setPaymentDetailsError] = React.useState<string>()
 
     const isEngagementPayment = props.payment.type.toLowerCase() === 'engagement payment'
+    const isTaskPayment = props.payment.type.toLowerCase() === 'task payment'
     const hasEngagementDetails = Boolean(paymentDetails?.engagementDetails)
 
     const handleToggleView = (newView: 'audit' | 'details' | 'external_transaction'): void => {
@@ -49,7 +51,7 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
     }
 
     React.useEffect(() => {
-        if (!isEngagementPayment) {
+        if (!isEngagementPayment && !isTaskPayment) {
             setPaymentDetails(undefined)
             setIsPaymentDetailsLoading(false)
             setPaymentDetailsError(undefined)
@@ -70,7 +72,7 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
             .catch(() => {
                 if (!ignore) {
                     setPaymentDetails(undefined)
-                    setPaymentDetailsError('Unable to load engagement details.')
+                    setPaymentDetailsError(isTaskPayment ? 'Unable to load task details.' : 'Unable to load engagement details.')
                 }
             })
             .finally(() => {
@@ -82,7 +84,7 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
         return () => {
             ignore = true
         }
-    }, [isEngagementPayment, props.payment])
+    }, [isEngagementPayment, isTaskPayment, props.payment])
 
     React.useEffect(() => {
         if (view === 'audit') {
@@ -138,7 +140,9 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
 
     const descriptionLink = isEngagementPayment
         ? buildWorkManagerAssignmentUrl(paymentDetails?.engagementDetails)
-        : `${TOPCODER_URL}/challenges/${props.payment.externalId}`
+        : isTaskPayment
+            ? buildWorkAppChallengeUrl(paymentDetails?.taskDetails?.projectId, props.payment.externalId)
+            : `${TOPCODER_URL}/challenges/${props.payment.externalId}`
     const projectLink = buildWorkManagerProjectUrl(paymentDetails?.engagementDetails)
 
     return (
@@ -306,6 +310,67 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                             </div>
                         )}
 
+                        {isTaskPayment && (
+                            <div className={styles.section}>
+                                <h3 className={styles.sectionTitle}>Task Details</h3>
+                                {isPaymentDetailsLoading
+                                    ? <p className={styles.helperText}>Loading task details...</p>
+                                    : undefined}
+                                {!isPaymentDetailsLoading && paymentDetailsError
+                                    ? <p className={styles.helperText}>{paymentDetailsError}</p>
+                                    : undefined}
+                                {!isPaymentDetailsLoading && !paymentDetailsError && (
+                                    <div className={styles.sectionGrid}>
+                                        <div className={styles.infoItem}>
+                                            <span className={styles.label}>Task Creator</span>
+                                            <p className={styles.value}>
+                                                {formatOptionalText(paymentDetails?.paymentCreatorHandle)}
+                                            </p>
+                                        </div>
+                                        <div className={styles.infoItem}>
+                                            <span className={styles.label}>Task Description</span>
+                                            <p className={styles.remarksValue}>
+                                                {props.payment.description
+                                                    ? props.payment.description.substring(0, 500)
+                                                    : '-'}
+                                            </p>
+                                        </div>
+                                        <div className={styles.infoItem}>
+                                            <span className={styles.label}>Project Name</span>
+                                            {buildWorkAppChallengeUrl(
+                                                paymentDetails?.taskDetails?.projectId,
+                                                props.payment.externalId,
+                                            ) && paymentDetails?.taskDetails?.projectName
+                                                ? (
+                                                    <a
+                                                        className={styles.value}
+                                                        href={buildWorkAppChallengeUrl(
+                                                            paymentDetails.taskDetails.projectId,
+                                                            props.payment.externalId,
+                                                        )}
+                                                        target='_blank'
+                                                        rel='noreferrer'
+                                                    >
+                                                        {paymentDetails.taskDetails.projectName}
+                                                    </a>
+                                                )
+                                                : (
+                                                    <p className={styles.value}>
+                                                        {formatOptionalText(paymentDetails?.taskDetails?.projectName)}
+                                                    </p>
+                                                )}
+                                        </div>
+                                        <div className={styles.infoItem}>
+                                            <span className={styles.label}>Payment Approver</span>
+                                            <p className={styles.value}>
+                                                {formatOptionalText(paymentDetails?.taskDetails?.paymentApproverHandle)}
+                                            </p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
                         <div className={styles.infoItem}>
                             <Button onClick={() => handleToggleView('audit')} label='View Audit' />
                             {props.payment.status.toUpperCase() === 'PAID' && (
diff --git a/src/apps/wallet-admin/src/lib/components/payment-view/payment-view.utils.ts b/src/apps/wallet-admin/src/lib/components/payment-view/payment-view.utils.ts
index 53e693238..8c5b25425 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-view/payment-view.utils.ts
+++ b/src/apps/wallet-admin/src/lib/components/payment-view/payment-view.utils.ts
@@ -125,6 +125,19 @@ export function renderOptionalLinkedText(
     return nodes
 }
 
+export function buildWorkAppChallengeUrl(
+    projectId?: string,
+    challengeId?: string,
+): string | undefined {
+    if (!projectId || !challengeId) {
+        return undefined
+    }
+
+    const baseUrl = EnvironmentConfig.ADMIN.WORK_MANAGER_URL.replace(/\/$/, '')
+
+    return `${baseUrl}/projects/${projectId}/challenges/${challengeId}/view`
+}
+
 export function formatOptionalDate(
     value?: string | null,
 ): string {
diff --git a/src/apps/wallet-admin/src/lib/models/WinningDetail.ts b/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
index f396b6971..98a14b3d4 100644
--- a/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
+++ b/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
@@ -37,10 +37,17 @@ export interface PaymentWorkLog {
     remarks?: string
 }
 
+export interface PaymentTaskDetails {
+    projectId?: string
+    projectName?: string
+    paymentApproverHandle?: string
+}
+
 export interface WinningPaymentDetails {
     engagementDetails?: PaymentEngagementDetails
     paymentCreatorHandle?: string
     workLog?: PaymentWorkLog
+    taskDetails?: PaymentTaskDetails
 }
 
 export interface Winning {