diff --git a/changelog/fix-6667-disputes-listing-add-respond-button b/changelog/fix-6667-disputes-listing-add-respond-button new file mode 100644 index 00000000000..3b949a6e401 --- /dev/null +++ b/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. + + diff --git a/client/disputes/index.tsx b/client/disputes/index.tsx index e86eb30fea1..b07f30c45fd 100644 --- a/client/disputes/index.tsx +++ b/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: ( + + ), + }, }; 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 ) => { diff --git a/client/disputes/style.scss b/client/disputes/style.scss index af413ccb28a..f32f2c1351d 100644 --- a/client/disputes/style.scss +++ b/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; diff --git a/client/disputes/test/__snapshots__/index.tsx.snap b/client/disputes/test/__snapshots__/index.tsx.snap index 6cce75c0489..f24e6de82b9 100644 --- a/client/disputes/test/__snapshots__/index.tsx.snap +++ b/client/disputes/test/__snapshots__/index.tsx.snap @@ -314,6 +314,22 @@ exports[`Disputes list renders correctly 1`] = ` Sort by Respond by in descending order + + + + Action + + + + + Respond + + + + + See details + + + + + Respond + + diff --git a/client/tracks/index.js b/client/tracks/index.js index ccec76f243d..1b72c25f090 100644 --- a/client/tracks/index.js +++ b/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: diff --git a/client/types/disputes.d.ts b/client/types/disputes.d.ts index 763fe0f2625..2a5c5e45a76 100644 --- a/client/types/disputes.d.ts +++ b/client/types/disputes.d.ts @@ -129,7 +129,8 @@ export interface DisputesTableHeader extends TableCardColumn { | 'customerEmail' | 'customerCountry' | 'created' - | 'dueBy'; + | 'dueBy' + | 'action'; cellClassName?: string; visible?: boolean; }