fix: update dispute table in payment details page

[prajwalnl]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

Aligns the Disputes table on the payment details page with the existing Payment Attempts and Refunds tables, and fixes a date-rendering bug in expandable detail panels.

• Consistent layout – The Disputes section now renders as a bold "Disputes" heading followed by the expandable table (matching Attempts/Refunds), instead of being wrapped in a collapsible RenderAccordion. The per-row expand (showing full dispute details) is unchanged.
• Better column balance – Added Amount and Challenge Required By columns to the payment-page disputes view (columnsInPaymentPage). With more columns the table fills the available width evenly instead of leaving a large gap after the Dispute ID column.
• Corrected column header & key – The ChallengeRequiredBy column heading now reads "Challenge Required By" (was "Connector Required By") and its key is challenge_required_by, matching the underlying data field.
• Fixed garbled dates in detail panels – Removed customDateStyle="!font-fira-code" from the shared OrderUtils.Details component. That prop is consumed by DateCell as a date format string (not a CSS class), so the class was being interpreted as format tokens and corrupting any Date field (e.g. the dispute Created date displayed as !font-firpm-co2e IST). Dates now render with the standard format.

Made layout similar to Attempts and Refunds and added new columns
Before

After

Fix date component
Before

After

Motivation and Context

On the payment details page, the Disputes table looked and behaved inconsistently with the Payment Attempts and Refunds tables — it was tucked inside an accordion, had no section heading, and showed only a few columns, which left an awkwardly large gap between "Dispute ID" and the next column. While bringing it in line, expanding a dispute row also exposed a latent bug where the Created (and any date) field rendered as a corrupted string, because a CSS class was mistakenly passed into a date-format prop on the shared details component. This change makes the three tables visually consistent and ensures dispute dates display correctly.

How did you test it?

Where to test it?

• INTEG
• SANDBOX
• PROD

Backend Dependency

• Yes
• No

Backend PR URL:

Feature Flag

• New feature flag added
• Existing feature flag updated
• No feature flag changes

Feature flag name(s):

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
playwright-tests/e2e/3-operations/disputeOperations.spec.ts	0% smaller
src/components/OrderUtils.res	Unsupported file format
src/screens/Transaction/Disputes/DisputesEntity.res	Unsupported file format
src/screens/Transaction/Order/ShowOrder.res	Unsupported file format

[XyneSpaces]

Automated Review Summary

PR: fix: update dispute table in payment details page
Reviewer: XyneSpaces Automation

Findings

✅ No blocking issues found. This is a well-scoped UI consistency fix that aligns the Disputes table with existing Payment Attempts and Refunds patterns.

---

Verified Changes

1. Layout Consistency (ShowOrder.res)

• Correctly replaces RenderAccordion wrapper with the same pattern used for Attempts/Refunds sections
• Adds explicit "Disputes" heading with proper Typography styling
• Structure now matches: <div className="flex flex-col gap-4"> + <p> heading + <CustomExpandableTable>

2. Column Definitions (DisputesEntity.res)

• ✅ Correctly adds Amount and ChallengeRequiredBy to columnsInPaymentPage
• ✅ Fixes column key from connector_required_by → challenge_required_by (matches data field)
• ✅ Updates title from "Connector Required By" → "Challenge Required By" (clearer semantics)

3. Date Rendering Fix (OrderUtils.res)

• ✅ Removes customDateStyle="!font-fira-code" which was being incorrectly interpreted as a date format string
• This fixes the garbled date display issue described in the PR

---

Code Quality Notes

Positive:

• Uses Typography module correctly (body.lg.bold with open Typography at file top)
• Minimal, focused changes - only what's needed for the fix
• No unnecessary complexity introduced

Pre-existing Pattern Note:
The !font-fira-code style removal is correct. The prop customDateStyle in DisplayKeyValueParams is passed to Table.TableCell which expects a date format string, not CSS classes. The previous value was causing dates to render incorrectly (e.g., "!font-firpm-co2e IST").

---

Suggestion (Non-blocking)

Consider verifying that the text-nd_gray-900 color class in the new heading matches the color used in sibling Attempts/Refunds headings for perfect visual consistency:

// Current
<p className={`${body.lg.bold} text-nd_gray-900`}>

// Verify this matches Payment Attempts/Refunds heading colors

---

Verdict: Approved for merge pending standard CI checks.