Refactored ConfirmModal usage to useConfirmModal #79616

abbasifaizan70 · 2026-01-14T22:52:45Z

Explanation of Change

This PR refactored ConfirmModal usage to useConfirmModal in the following files:

PopoverReportActionContextMenu.tsx
TravelTerms.tsx
RoomMemberDetailsPage.tsx
ReportParticipantDetailsPage.tsx
EditReportFieldPage.tsx

Fixed Issues

$ #76695
PROPOSAL: #76695 (comment)

Tests

Verify that no errors appear in the JS console

PopoverReportActionContextMenu - Delete Comment

Right-click any message → Select "Delete"
Modal appears with "Delete comment" title and red Delete button
Click "Delete" → Message deleted
Click "Cancel" → Modal closes, message stays
Test: ESC closes, Enter deletes

TravelTerms - Verify Company Modal

Settings → Travel → Accept terms
If verification error occurs → Modal appears
Modal shows rocket image, "Verify your company" title
Click confirm → Creates concierge message
Note: Hard to trigger, backend-dependent

RoomMemberDetailsPage - Remove Room Member

Open workspace room → Members → Click member name
Click "Remove from room" button
Modal: "Remove from room" with member name
Click "Remove" → Member removed
Click "Cancel" → Modal closes
Test: Button disabled for yourself/owner/admin

ReportParticipantDetailsPage - Remove Group Member

Open group chat (3+ people) → Members → Click member
Click "Remove from group" (admin only)
Modal: "Remove from group" with member name
Click "Remove" → Member removed
Click "Cancel" → Modal closes
Test: Button disabled for yourself, hidden for non-admins

EditReportFieldPage - Delete Report Field

Open expense report → Report Details
Scroll to "Report fields" → Click custom field (e.g., "13" or "Project")
Click three-dot menu (⋮) → Select "Delete"
Modal: "Delete" with confirmation prompt
Click "Delete" → Field deleted after 200ms, navigates back
Click "Cancel" → Modal closes
Note: Three-dot menu only shows for deletable fields (not Title)

Offline tests

same as tests.

QA Steps

same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

PopoverReportActionContextMenu.tsx

Screen.Recording.2026-01-16.at.1.32.58.AM.mov

RoomMemberDetailsPage.tsx

Screen.Recording.2026-01-16.at.1.38.17.AM.mov

ReportParticipantDetailsPage.tsx

Screen.Recording.2026-01-16.at.1.42.38.AM.mov

Android: mWeb Chrome

PopoverReportActionContextMenu.tsx

Screen.Recording.2026-01-16.at.1.48.28.AM.mov

RoomMemberDetailsPage.tsx

Screen.Recording.2026-01-16.at.1.49.34.AM.mov

ReportParticipantDetailsPage.tsx

Screen.Recording.2026-01-16.at.1.50.01.AM.mov

iOS: Native

PopoverReportActionContextMenu.tsx

Screen.Recording.2026-01-16.at.2.00.23.AM.mov

RoomMemberDetailsPage.tsx

Screen.Recording.2026-01-16.at.2.00.42.AM.mov

ReportParticipantDetailsPage.tsx

Screen.Recording.2026-01-16.at.2.01.07.AM.mov

iOS: mWeb Safari

PopoverReportActionContextMenu.tsx

Screen.Recording.2026-01-16.at.2.19.45.AM.mov

RoomMemberDetailsPage.tsx

Screen.Recording.2026-01-16.at.2.20.55.AM.mov

ReportParticipantDetailsPage.tsx

Screen.Recording.2026-01-16.at.2.21.29.AM.mov

MacOS: Chrome / Safari

PopoverReportActionContextMenu.tsx

Screen.Recording.2026-01-16.at.12.48.05.AM.mov

TravelTerms.tsx

Screen.Recording.2026-01-16.at.5.49.27.PM.mov

RoomMemberDetailsPage.tsx

Screen.Recording.2026-01-16.at.12.57.48.AM.mov

ReportParticipantDetailsPage.tsx

Screen.Recording.2026-01-16.at.12.58.30.AM.mov

EditReportFieldPage.tsx

codecov · 2026-01-14T23:01:35Z

Codecov Report

❌ Patch coverage is 0% with 34 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/pages/Travel/TravelTerms.tsx	0.00%	29 Missing ⚠️
src/pages/EditReportFieldPage.tsx	0.00%	5 Missing ⚠️

Files with missing lines	Coverage Δ
src/pages/EditReportFieldPage.tsx	`0.00% <0.00%> (ø)`
src/pages/Travel/TravelTerms.tsx	`0.00% <0.00%> (ø)`

... and 8 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

… pattern

…ix useCallback dependencies

melvin-bot · 2026-01-15T21:35:54Z

@ZhenjaHorbach Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

melvin-bot · 2026-01-15T21:35:59Z

@roryabraham Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

abbasifaizan70 · 2026-01-15T21:36:24Z

@ZhenjaHorbach The PR is ready for review for the remaining modals.

src/pages/EditReportFieldPage.tsx

src/pages/ReportParticipantDetailsPage.tsx

src/pages/RoomMemberDetailsPage.tsx

src/pages/Travel/TravelTerms.tsx

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

src/pages/ReportParticipantDetailsPage.tsx

src/pages/RoomMemberDetailsPage.tsx

src/pages/Travel/TravelTerms.tsx

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

Resolved conflict in src/pages/inbox/report/ContextMenu/PopoverReportActionContextMenu.tsx: - Kept main's refactored ConfirmModal flow (confirmDeleteAndHideModal, showDeleteModal, ConfirmModal component) - Fixed ActionSheetAwareScrollView import to use ActionSheetAwareScrollViewContext path

abbasifaizan70 · 2026-01-28T14:17:00Z

@ZhenjaHorbach I just solved the conflicts and made video by changing response of AcceptSpotnanaTerms response for testing using Chrome Dev Tools

{
    "code": 666,
    "jsonCode": 666,
    "type": "Expensify\\Error\\SpotnanaError",
    "UUID": "F2DA6AD0-0A44-4EAF-9C76-6C2E61625C8F",
    "message": "Please contact your Account manager or sales@expensify.com to get a demo of travel and have it enabled for your company.",
    "title": "",
    "data": {
        "onyxData": [
            {
                "onyxMethod": "merge",
                "key": "travelProvisioning",
                "value": {
                    "error": "additionalVerificationRequired"
                }
            }
        ]
    },
    "htmlMessage": "",
    "onyxData": [
        {
            "onyxMethod": "merge",
            "key": "travelProvisioning",
            "value": {
                "error": "additionalVerificationRequired"
            }
        }
    ],
    "requestID": "9c476148db114c6b-SJC"
}

Screen.Recording.2026-01-28.at.1.28.27.AM.mov

ZhenjaHorbach · 2026-01-28T14:40:43Z

@ZhenjaHorbach I just solved the conflicts and made video by changing response of AcceptSpotnanaTerms response for testing using Chrome Dev Tools

Did you mock responses like this?
https://developer.chrome.com/blog/devtools-tips-34
https://blog.logrocket.com/chrome-devtools-api-mocking/

And we have lint issues

ZhenjaHorbach · 2026-01-28T15:48:25Z

@ZhenjaHorbach I just solved the conflicts and made video by changing response of AcceptSpotnanaTerms response for testing using Chrome Dev Tools

Sorry for confusing
Everything is working!
But could you fix lint issues, and I will approve?

src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx

src/pages/inbox/report/ContextMenu/PopoverReportActionContextMenu.tsx

This reverts commit d91c7aa.

This reverts commit f544df1.

roryabraham · 2026-01-30T02:23:03Z

conflicts

abbasifaizan70 · 2026-02-01T19:42:14Z

@roryabraham please have a look.

OSBotify · 2026-02-03T02:14:14Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.11-19 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	cancelled 🔪
🍎 iOS 🍎	cancelled 🔪

jponikarchuk · 2026-02-03T08:50:03Z

@abbasifaizan70 @ZhenjaHorbach Could you please provide more steps on how to trigger the modal for these tests?

TravelTerms - Verify Company Modal
EditReportFieldPage - Delete Report Field

abbasifaizan70 · 2026-02-03T09:30:28Z

@abbasifaizan70 @ZhenjaHorbach Could you please provide more steps on how to trigger the modal for these tests?

TravelTerms - Verify Company Modal

EditReportFieldPage - Delete Report Field

@jponikarchuk You can modify the AcceptSpotnanaTerms response for testing using Chrome Dev Tools to test TravelTerms.
https://blog.logrocket.com/chrome-devtools-api-mocking/

{
    "code": 666,
    "jsonCode": 666,
    "type": "Expensify\\Error\\SpotnanaError",
    "UUID": "F2DA6AD0-0A44-4EAF-9C76-6C2E61625C8F",
    "message": "Please contact your Account manager or sales@expensify.com to get a demo of travel and have it enabled for your company.",
    "title": "",
    "data": {
        "onyxData": [
            {
                "onyxMethod": "merge",
                "key": "travelProvisioning",
                "value": {
                    "error": "additionalVerificationRequired"
                }
            }
        ]
    },
    "htmlMessage": "",
    "onyxData": [
        {
            "onyxMethod": "merge",
            "key": "travelProvisioning",
            "value": {
                "error": "additionalVerificationRequired"
            }
        }
    ],
    "requestID": "9c476148db114c6b-SJC"
}

For EditReportFieldPage i did a manual change locally to test this modal.

@ZhenjaHorbach, if you have more ways to test, then let her know. Thanks.

jponikarchuk · 2026-02-03T18:55:32Z

Thanks @abbasifaizan70, Verify Company Modal works fine
@ZhenjaHorbach We still need your help, how can we get Delete Field modal for EditReportFieldPage - Delete Report Field test? Could you please provide more steps in precondition, we are not able to find it

bandicam.2026-02-03.20-56-24-314.mp4

ZhenjaHorbach · 2026-02-03T19:13:21Z

Thanks @abbasifaizan70, Verify Company Modal works fine @ZhenjaHorbach We still need your help, how can we get Delete Field modal for EditReportFieldPage - Delete Report Field test? Could you please provide more steps in precondition, we are not able to find it

bandicam.2026-02-03.20-56-24-314.mp4

Unfortunately, I also used mocks

Refactored ConfirmModal usage to useConfirmModal

eefc5ab

melvin-bot bot assigned abbasifaizan70 Jan 14, 2026

abbasifaizan70 added 5 commits January 15, 2026 19:19

Merge main into refactor-confirm-modal branch - resolved conflicts

d8f3323

Fix lint and prettier issues after merge

fec86e2

Fix ESLint errors: remove unused useState import and use early return…

b5392eb

… pattern

Fix ESLint errors: remove unused variable, fix circular dependency, f…

841337c

…ix useCallback dependencies

fixed EsLint issues

4f87a8a

abbasifaizan70 marked this pull request as ready for review January 15, 2026 21:35

abbasifaizan70 requested review from a team as code owners January 15, 2026 21:35

melvin-bot bot requested review from a team, ZhenjaHorbach and trjExpensify and removed request for a team January 15, 2026 21:35

melvin-bot bot requested review from roryabraham and removed request for a team January 15, 2026 21:35