Add action column with respond button to dispute list view (#6695)

Co-authored-by: Shendy <73803630+shendy-a8c@users.noreply.github.com>
Co-authored-by: Shendy Kurnia <shendy.kurnia@a8c.com>
Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>

changelog/fix-6667-disputes-listing-add-respond-button

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Add respond button on dispute list view. Part of a larger set of changes for disputes.
+
+

client/disputes/index.tsx

@@ -8,8 +8,9 @@ import wcpayTracks from 'tracks';
 import { dateI18n } from '@wordpress/date';
 import { _n, __, sprintf } from '@wordpress/i18n';
 import moment from 'moment';
+import { Button } from '@wordpress/components';
 import { TableCard, Link } from '@woocommerce/components';
-import { onQueryChange, getQuery } from '@woocommerce/navigation';
+import { onQueryChange, getQuery, getHistory } from '@woocommerce/navigation';
 import {
 	downloadCSVFile,
 	generateCSVDataFromTable,
@@ -33,6 +34,7 @@ import { reasons } from './strings';
 import { formatStringValue } from 'utils';
 import { formatExplicitCurrency } from 'utils/currency';
 import DisputesFilters from './filters';
+import { disputeAwaitingResponseStatuses } from './filters/config';
 import DownloadButton from 'components/download-button';
 import disputeStatusMapping from 'components/dispute-status-chip/mappings';
 import { DisputesTableHeader } from 'wcpay/types/disputes';
@@ -130,6 +132,15 @@ const getHeaders = ( sortColumn?: string ): DisputesTableHeader[] => [
 		isLeftAligned: true,
 		isSortable: true,
 	},
+	{
+		key: 'action',
+		label: __( 'Action', 'woocommerce-payments' ),
+		screenReaderLabel: __( 'Action', 'woocommerce-payments' ),
+		isLeftAligned: false,
+		isNumeric: true,
+		required: true,
+		visible: true,
+	},
 ];
 
 export const DisputesList = (): JSX.Element => {
@@ -161,7 +172,9 @@ export const DisputesList = (): JSX.Element => {
 		const reasonDisplay = reasonMapping
 			? reasonMapping.display
 			: formatStringValue( dispute.reason );
-
+		const needsResponse = disputeAwaitingResponseStatuses.includes(
+			dispute.status
+		);
 		const data: {
 			[ key: string ]: {
 				value: number | string;
@@ -240,6 +253,32 @@ export const DisputesList = (): JSX.Element => {
 				display: clickable( dispute.customer_country ),
 			},
 			details: { value: dispute.dispute_id, display: detailsLink },
+			action: {
+				value: '',
+				display: (
+					<Button
+						variant={ needsResponse ? 'secondary' : 'tertiary' }
+						href={ getDetailsURL( dispute.dispute_id, 'disputes' ) }
+						onClick={ (
+							e: React.MouseEvent< HTMLAnchorElement >
+						) => {
+							// Use client-side routing to avoid page refresh.
+							e.preventDefault();
+							wcpayTracks.recordEvent(
+								wcpayTracks.events.DISPUTES_ROW_ACTION_CLICK
+							);
+							const history = getHistory();
+							history.push(
+								getDetailsURL( dispute.dispute_id, 'disputes' )
+							);
+						} }
+					>
+						{ needsResponse
+							? __( 'Respond', 'woocommerce-payments' )
+							: __( 'See details', 'woocommerce-payments' ) }
+					</Button>
+				),
+			},
 		};
 		return headers.map(
 			( { key } ) => data[ key ] || { value: undefined, display: null }
@@ -333,7 +372,7 @@ export const DisputesList = (): JSX.Element => {
 					...headers[ 0 ],
 					label: __( 'Dispute Id', 'woocommerce-payments' ),
 				},
-				...headers.slice( 1 ),
+				...headers.slice( 1, -1 ), // Remove details (position 0)  and action (last position) column headers.
 			];
 
 			const csvRows = rows.map( ( row ) => {

client/disputes/style.scss

@@ -2,6 +2,9 @@
 	.woocommerce-table__header.is-center-aligned {
 		text-align: center;
 	}
+	.woocommerce-table__item a.components-button {
+		display: inline-flex;
+	}
 
 	.woocommerce-pagination {
 		align-items: flex-end;

client/disputes/test/__snapshots__/index.tsx.snap

@@ -314,6 +314,22 @@ exports[`Disputes list renders correctly 1`] = `
                       Sort by Respond by in descending order
                     </span>
                   </th>
+                  <th
+                    class="woocommerce-table__header is-numeric"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <span
+                      aria-hidden="true"
+                    >
+                      Action
+                    </span>
+                    <span
+                      class="screen-reader-text"
+                    >
+                      Action
+                    </span>
+                  </th>
                 </tr>
                 <tr>
                   <th
@@ -425,6 +441,16 @@ exports[`Disputes list renders correctly 1`] = `
                       Nov 7, 2019 / 9:46PM
                     </a>
                   </td>
+                  <td
+                    class="woocommerce-table__item is-numeric"
+                  >
+                    <a
+                      class="components-button is-secondary"
+                      href="admin.php?page=wc-admin&path=%2Fpayments%2Fdisputes%2Fdetails&id=dp_asdfghjkl"
+                    >
+                      Respond
+                    </a>
+                  </td>
                 </tr>
                 <tr>
                   <th
@@ -533,6 +559,16 @@ exports[`Disputes list renders correctly 1`] = `
                       Nov 6, 2019 / 6:00PM
                     </a>
                   </td>
+                  <td
+                    class="woocommerce-table__item is-numeric"
+                  >
+                    <a
+                      class="components-button is-tertiary"
+                      href="admin.php?page=wc-admin&path=%2Fpayments%2Fdisputes%2Fdetails&id=dp_zxcvbnm"
+                    >
+                      See details
+                    </a>
+                  </td>
                 </tr>
                 <tr>
                   <th
@@ -646,6 +682,16 @@ exports[`Disputes list renders correctly 1`] = `
                       Nov 7, 2019 / 9:46PM
                     </a>
                   </td>
+                  <td
+                    class="woocommerce-table__item is-numeric"
+                  >
+                    <a
+                      class="components-button is-secondary"
+                      href="admin.php?page=wc-admin&path=%2Fpayments%2Fdisputes%2Fdetails&id=dp_rstyuoi"
+                    >
+                      Respond
+                    </a>
+                  </td>
                 </tr>
               </tbody>
             </table>

client/tracks/index.js

@@ -62,6 +62,7 @@ const events = {
 	CONNECT_ACCOUNT_KYC_MODAL_OPENED: 'wcpay_connect_account_kyc_modal_opened',
 	DEPOSITS_ROW_CLICK: 'wcpay_deposits_row_click',
 	DEPOSITS_DOWNLOAD_CSV_CLICK: 'wcpay_deposits_download',
+	DISPUTES_ROW_ACTION_CLICK: 'wcpay_disputes_row_action_click',
 	OVERVIEW_BALANCES_CURRENCY_CLICK:
 		'wcpay_overview_balances_currency_tab_click',
 	OVERVIEW_DEPOSITS_VIEW_HISTORY_CLICK:

client/types/disputes.d.ts

@@ -129,7 +129,8 @@ export interface DisputesTableHeader extends TableCardColumn {
 		| 'customerEmail'
 		| 'customerCountry'
 		| 'created'
-		| 'dueBy';
+		| 'dueBy'
+		| 'action';
 	cellClassName?: string;
 	visible?: boolean;
 }