Add Dispute Challenge and Accept buttons to Transaction Details

changelog/fix-6926-transaction-dispute-details-actions

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Behind a feature flag: add challenge and accept action buttons to Transaction Details screen
+
+

client/data/disputes/actions.js

@@ -14,6 +14,7 @@ import { NAMESPACE, STORE_NAME } from '../constants';
 import TYPES from './action-types';
 import wcpayTracks from 'tracks';
 import { getAdminUrl } from 'wcpay/utils';
+import { getPaymentIntent } from '../payment-intents/resolvers';
 
 export function updateDispute( data ) {
 	return {
@@ -88,3 +89,63 @@ export function* acceptDispute( id ) {
 		yield controls.dispatch( 'core/notices', 'createErrorNotice', message );
 	}
 }
+
+// This function handles the dispute acceptance flow from the Transaction Details screen.
+// It differs from the `acceptDispute` function above in that it also fetches and updates
+// the payment intent associated with the dispute to reflect changes to the dispute
+// on the Transaction Details screen.
+//
+// Once the '_wcpay_feature_dispute_on_transaction_page' is enabled by default,
+// the `acceptDispute` function above can be removed and this function can be renamed
+// to `acceptDispute`.
+export function* acceptTransactionDetailsDispute( dispute ) {
+	const { id, payment_intent: paymentIntent } = dispute;
+
+	try {
+		yield controls.dispatch( STORE_NAME, 'startResolution', 'getDispute', [
+			id,
+		] );
+
+		const updatedDispute = yield apiFetch( {
+			path: `${ NAMESPACE }/disputes/${ id }/close`,
+			method: 'post',
+		} );
+
+		yield updateDispute( updatedDispute );
+
+		// Fetch and update the payment intent associated with the dispute
+		// to reflect changes to the dispute on the Transaction Details screen.
+		yield getPaymentIntent( paymentIntent );
+
+		yield controls.dispatch( STORE_NAME, 'finishResolution', 'getDispute', [
+			id,
+		] );
+
+		wcpayTracks.recordEvent( 'wcpay_dispute_accept_success' );
+		const message = updatedDispute.order
+			? sprintf(
+					/* translators: #%s is an order number, e.g. 15 */
+					__(
+						'You have accepted the dispute for order #%s.',
+						'woocommerce-payments'
+					),
+					updatedDispute.order.number
+			  )
+			: __( 'You have accepted the dispute.', 'woocommerce-payments' );
+		yield controls.dispatch(
+			'core/notices',
+			'createSuccessNotice',
+			message
+		);
+	} catch ( e ) {
+		const message = __(
+			'There has been an error accepting the dispute. Please try again later.',
+			'woocommerce-payments'
+		);
+		wcpayTracks.recordEvent( 'wcpay_dispute_accept_failed' );
+		yield controls.dispatch( 'core/notices', 'createErrorNotice', message );
+		yield controls.dispatch( STORE_NAME, 'finishResolution', 'getDispute', [
+			id,
+		] );
+	}
+}

client/data/disputes/hooks.ts

@@ -18,6 +18,10 @@ import type {
 import { STORE_NAME } from '../constants';
 import { disputeAwaitingResponseStatuses } from 'wcpay/disputes/filters/config';
 
+/**
+ * Returns the dispute object, loading state, and accept function.
+ * Fetches the dispute object if it is not already cached.
+ */
 export const useDispute = (
 	id: string
 ): {
@@ -43,6 +47,31 @@ export const useDispute = (
 	return { dispute, isLoading, doAccept };
 };
 
+/**
+ * Returns the dispute accept function and loading state.
+ * Does not return or fetch the dispute object.
+ */
+export const useDisputeAccept = (
+	dispute: Dispute
+): {
+	doAccept: () => void;
+	isLoading: boolean;
+} => {
+	const { isLoading } = useSelect(
+		( select ) => {
+			const { isResolving } = select( STORE_NAME );
+
+			return {
+				isLoading: isResolving( 'getDispute', [ dispute.id ] ),
+			};
+		},
+		[ dispute.id ]
+	);
+	const { acceptTransactionDetailsDispute } = useDispatch( STORE_NAME );
+	const doAccept = () => acceptTransactionDetailsDispute( dispute );
+	return { doAccept, isLoading };
+};
+
 export const useDisputeEvidence = (): {
 	updateDispute: ( data: Dispute ) => void;
 } => {

client/payment-details/dispute-details/dispute-awaiting-response-details.tsx

@@ -3,17 +3,35 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
-import { __ } from '@wordpress/i18n';
-import { Card, CardBody } from '@wordpress/components';
-import { edit } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { backup, edit, lock } from '@wordpress/icons';
+import { createInterpolateElement } from '@wordpress/element';
+import { Link } from '@woocommerce/components';
+import {
+	Button,
+	Card,
+	CardBody,
+	Flex,
+	FlexItem,
+	Icon,
+	Modal,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { Dispute } from 'wcpay/types/disputes';
-import { isAwaitingResponse } from 'wcpay/disputes/utils';
+import wcpayTracks from 'tracks';
+import { useDisputeAccept } from 'wcpay/data';
+import {
+	getDisputeFee,
+	isAwaitingResponse,
+	isInquiry,
+} from 'wcpay/disputes/utils';
+import { getAdminUrl } from 'wcpay/utils';
+import { formatCurrency } from 'wcpay/utils/currency';
 import DisputeNotice from './dispute-notice';
 import IssuerEvidenceList from './evidence-list';
 import DisputeSummaryRow from './dispute-summary-row';
@@ -25,10 +43,19 @@ interface Props {
 }
 
 const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => {
+	const { doAccept, isLoading } = useDisputeAccept( dispute );
+	const [ isModalOpen, setModalOpen ] = useState( false );
+
 	const now = moment();
 	const dueBy = moment.unix( dispute.evidence_details?.due_by ?? 0 );
 	const countdownDays = Math.floor( dueBy.diff( now, 'days', true ) );
 	const hasStagedEvidence = dispute.evidence_details?.has_evidence;
+	const disputeFee = getDisputeFee( dispute );
+	const showDisputeActions = ! isInquiry( dispute );
+
+	const onModalClose = () => {
+		setModalOpen( false );
+	};
 
 	return (
 		<div className="transaction-details-dispute-details-wrapper">
@@ -61,6 +88,147 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => {
 								/>
 							</>
 						) }
+
+					{ /* Dispute Actions */ }
+					{ showDisputeActions && (
+						<div className="transaction-details-dispute-details-body__actions">
+							<Link
+								href={ getAdminUrl( {
+									page: 'wc-admin',
+									path: '/payments/disputes/challenge',
+									id: dispute.id,
+								} ) }
+								onClick={ () => {
+									wcpayTracks.recordEvent(
+										wcpayTracks.events
+											.DISPUTE_CHALLENGE_CLICK,
+										{
+											dispute_status: dispute.status,
+										}
+									);
+								} }
+							>
+								<span className="components-button is-primary">
+									{ hasStagedEvidence
+										? __(
+												'Continue with challenge',
+												'woocommerce-payments'
+										  )
+										: __(
+												'Challenge dispute',
+												'woocommerce-payments'
+										  ) }
+								</span>
+							</Link>
+
+							<Button
+								variant="tertiary"
+								disabled={ isLoading }
+								onClick={ () => {
+									wcpayTracks.recordEvent(
+										wcpayTracks.events
+											.DISPUTE_ACCEPT_MODAL_VIEW,
+										{
+											dispute_status: dispute.status,
+										}
+									);
+									setModalOpen( true );
+								} }
+							>
+								{ __(
+									'Accept dispute',
+									'woocommerce-payments'
+								) }
+							</Button>
+
+							{ isModalOpen && (
+								<Modal
+									title="Accept the dispute?"
+									onRequestClose={ onModalClose }
+									className="transaction-details-dispute-accept-modal"
+								>
+									<p>
+										<strong>
+											{ __(
+												'Before proceeding, please take note of the following:',
+												'woocommerce-payments'
+											) }
+										</strong>
+									</p>
+									<Flex justify="start">
+										<FlexItem className="transaction-details-dispute-accept-modal__icon">
+											<Icon icon={ backup } size={ 24 } />
+										</FlexItem>
+										<FlexItem>
+											{ createInterpolateElement(
+												sprintf(
+													/* translators: %s: dispute fee, <em>: emphasis HTML element. */
+													__(
+														'Accepting the dispute marks it as <em>Lost</em>. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.',
+														'woocommerce-payments'
+													),
+													disputeFee &&
+														formatCurrency(
+															disputeFee.fee,
+															disputeFee.currency
+														)
+												),
+												{
+													em: <em />,
+												}
+											) }
+										</FlexItem>
+									</Flex>
+									<Flex justify="start">
+										<FlexItem className="transaction-details-dispute-accept-modal__icon">
+											<Icon icon={ lock } size={ 24 } />
+										</FlexItem>
+										<FlexItem>
+											{ __(
+												'Accepting the dispute is final and cannot be undone.',
+												'woocommerce-payments'
+											) }
+										</FlexItem>
+									</Flex>
+
+									<Flex
+										className="transaction-details-dispute-accept-modal__actions"
+										justify="end"
+									>
+										<Button
+											variant="tertiary"
+											onClick={ onModalClose }
+										>
+											{ __(
+												'Cancel',
+												'woocommerce-payments'
+											) }
+										</Button>
+										<Button
+											variant="primary"
+											onClick={ () => {
+												wcpayTracks.recordEvent(
+													wcpayTracks.events
+														.DISPUTE_ACCEPT_CLICK,
+													{
+														dispute_status:
+															dispute.status,
+													}
+												);
+												setModalOpen( false );
+												doAccept();
+											} }
+										>
+											{ __(
+												'Accept dispute',
+												'woocommerce-payments'
+											) }
+										</Button>
+									</Flex>
+								</Modal>
+							) }
+						</div>
+					) }
 				</CardBody>
 			</Card>
 		</div>

client/payment-details/dispute-details/style.scss

@@ -34,6 +34,21 @@
 				}
 			}
 		}
+
+		&__actions {
+			display: flex;
+			justify-content: start;
+			gap: $grid-unit-10;
+
+			@media screen and ( max-width: $break-small ) {
+				flex-direction: column;
+
+				.components-button {
+					width: 100%;
+					justify-content: center;
+				}
+			}
+		}
 	}
 }
 .dispute-reason-tooltip {
@@ -49,6 +64,24 @@
 	}
 }
 
+.transaction-details-dispute-accept-modal {
+	max-width: 600px;
+
+	.components-modal__content {
+		padding-top: $grid-unit-30;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		padding: 6px;
+		margin-right: $grid-unit-10;
+	}
+
+	&__actions {
+		margin-top: $grid-unit-30;
+	}
+}
+
 .transaction-details-dispute-footer {
 	background-color: #f2f4f5;