Add dispute details screen

[dechov]

Fixes #350

Changes proposed in this Pull Request

Add a "Dispute Details" screen with a Challenge button linking to the evidence form:

…linked via a new info button in Disputes list rows:

The copy for the details page is derived from a google doc shared by @LevinMedia.

Also:

• removes small placeholder on info button in Transactions and Disputes lists
• removes link from "Needs Response" status chip to evidence form (just added in Improve appearance and string handling of categorical values and table titles #410)

Treating container width and outsize vertical padding (being discussed in #414) as out of scope.

The dispute info section near the top is tracked in #379.

The "Accept Dispute" button can also be a different PR in my view (not currently tracked in its own issue but blocking #376 and #377).

Question: should the info button only appear if the dispute needs a response? Or for all rows, as now, except we'll need to disable things / make it clear it's not actionable? (cc @LevinMedia; related: #379 (comment))

Testing instructions

• Open the Disputes list view, and click on the info button to the left
• Verify that appropriate text shows up for disputes with the different statuses

---

• Tested on mobile (or does not apply)

[vbelolapotkov]

@dechov great progress on that! 👍

I've tested with fraudulent and product not received disputes and confirm different content is shown for each of them. However, I tried to check if messaging matches the gdoc but not sure what's the correct version so leaving this check to the @LevinMedia . I've noticed headings in the message are a bit bigger than card title, not sure that's correct. @LevinMedia will

Some general notes:

1. Noticed that one test snapshot is out of date, see npm test output for details.
2. Phpunit tests are failing as well but the reason seems to be unrelated to the current changes.

See other notes and comments below.

[dechov]

@vbelolapotkov Should have mentioned, the copy is from p1581023557475400-slack-wcpay (thread).

Rebased on #414 branch to pick up the good work there, and tweaked a number of things in the details and challenge screens to have them match the designs better.

[vbelolapotkov]

@dechov it looks good to me! 🎉
I'd only ask you to add a comment/todo to the disputes styling.

[vbelolapotkov]

This feels a bit weird to me having special padding for disputes/evidence screens. IMO it either should be the same for deposits and transactions as well or should be achieved with some utility classes.

Anyway, I don't feel it's a good enough reason to hold the PR from being merged so I suggest adding a comment or TODO to address this in the future.

[dechov]

👍 Done in e5953e2

[LevinMedia]

@dechov thanks for the keen eye on the type styles. If you could, please align them to the type scale described in the Figma file.

The card headers use Title S with $studio-gray-80 color

The card bodies use Body with $studio-gray-60 as the color

The bold text that separates paragraphs in the second card are also body but bold, and using $studio-gray-80 as the color

per our slack chat - hopefully type scale linked above will soon be included with gutenberg, until that time we can hard code it.

If too much time passes though, we'll probably want to include the type scale as part of @woocommerce/components - as we're using it elsewhere in new designs across WooCommerce such as onboarding and other new screens in wc-admin.

[dechov]

@LevinMedia With your blessing, I've opened #427 to track the type style update.