From 998a997ea14cd8a9fee05a21784d5a3ba5b8e7e0 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Fri, 10 Apr 2026 14:02:59 +1000
Subject: [PATCH] PM-4819: Move wallet-admin payment creator into work log
 section

What was broken
Wallet-admin engagement payment details showed the Payment Creator field in the top summary block below the handle.
QA expected that field inside the Work Log / Manager Inputs section of the Payment Details modal.

Root cause (if identifiable)
The earlier fix added the new field to the summary section instead of the work-log section, and the wallet-admin test only checked that the creator handle rendered somewhere.

What was changed
Moved the wallet-admin Payment Creator field into the Work Log / Manager Inputs section.
Updated the wallet-admin payment-view test so it asserts the field is rendered inside that section and only appears once.

Any added/updated tests
Updated src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx to verify Payment Creator renders inside Work Log / Manager Inputs.
---
 .../payment-view/PaymentView.spec.tsx         | 21 +++++++++++++++++--
 .../components/payment-view/PaymentView.tsx   | 17 ++++++---------
 2 files changed, 25 insertions(+), 13 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 79e317371..bf3806abf 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
@@ -4,6 +4,7 @@ import {
     render,
     screen,
     waitFor,
+    within,
 } from '@testing-library/react'
 
 import { Winning } from '../../models/WinningDetail'
@@ -122,8 +123,6 @@ describe('PaymentView', () => {
 
         expect(await screen.findByRole('heading', { name: 'Engagement Details' }))
             .toBeTruthy()
-        expect(await screen.findByText('copilot-manager'))
-            .toBeTruthy()
         await waitFor(() => {
             expect(screen.getAllByText('43.75'))
                 .toHaveLength(2)
@@ -131,6 +130,24 @@ describe('PaymentView', () => {
         expect(await screen.findByText(/Completed sprint support and bug triage\./))
             .toBeTruthy()
 
+        const workLogHeading = await screen.findByRole('heading', {
+            name: 'Work Log / Manager Inputs',
+        })
+        const workLogSection = workLogHeading.parentElement
+
+        if (!workLogSection) {
+            throw new Error('Expected work log section to be rendered.')
+        }
+
+        expect(screen.getAllByText('Payment Creator'))
+            .toHaveLength(1)
+        expect(within(workLogSection)
+            .getByText('Payment Creator'))
+            .toBeTruthy()
+        expect(within(workLogSection)
+            .getByText('copilot-manager'))
+            .toBeTruthy()
+
         const descriptionLink = await screen.findByRole('link', {
             name: 'Wipro - US Foods - Week Ending: Mar 21, 2026',
         })
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 795a124a8..02db5e10c 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
@@ -164,17 +164,6 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                             <span className={styles.label}>Handle</span>
                             <p className={styles.value}>{props.payment.handle}</p>
                         </div>
-                        {isEngagementPayment && (
-                            <div className={styles.infoItem}>
-                                <span className={styles.label}>Payment Creator</span>
-                                <p className={styles.value}>
-                                    {isPaymentDetailsLoading
-                                        ? 'Loading...'
-                                        : formatOptionalText(paymentDetails?.paymentCreatorHandle)}
-                                </p>
-                            </div>
-                        )}
-
                         <div className={styles.infoItem}>
                             <span className={styles.label}>Type</span>
                             <p className={styles.value}>{props.payment.type}</p>
@@ -306,6 +295,12 @@ const PaymentView: React.FC<PaymentViewProps> = (props: PaymentViewProps) => {
                                                     {renderOptionalLinkedText(paymentDetails?.workLog?.remarks)}
                                                 </p>
                                             </div>
+                                            <div className={styles.infoItem}>
+                                                <span className={styles.label}>Payment Creator</span>
+                                                <p className={styles.value}>
+                                                    {formatOptionalText(paymentDetails?.paymentCreatorHandle)}
+                                                </p>
+                                            </div>
                                         </div>
                                     )}
                             </div>