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,58 @@ export function* acceptDispute( id ) {
 		yield controls.dispatch( 'core/notices', 'createErrorNotice', message );
 	}
 }
+
+// This function handles the dispute acceptance flow from the Transaction Details screen.
+// It will become the default acceptDispute function once the feature flag
+// '_wcpay_feature_dispute_on_transaction_page' is enabled by default.
+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

@@ -43,6 +43,27 @@ export const useDispute = (
 	return { dispute, isLoading, doAccept };
 };
 
+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/disputes/utils.ts

@@ -13,6 +13,7 @@ import type {
 	DisputeStatus,
 	EvidenceDetails,
 } from 'wcpay/types/disputes';
+import type { BalanceTransaction } from 'wcpay/types/balance-transactions';
 import { disputeAwaitingResponseStatuses } from 'wcpay/disputes/filters/config';
 
 interface IsDueWithinProps {
@@ -62,3 +63,15 @@ export const isInquiry = ( dispute: Dispute | CachedDispute ): boolean => {
 	// Inquiry dispute statuses are one of `warning_needs_response`, `warning_under_review` or `warning_closed`.
 	return dispute.status.startsWith( 'warning' );
 };
+
+/**
+ * Returns the dispute fee balance transaction for a dispute if it exists.
+ */
+export const getDisputeFee = (
+	dispute: Dispute
+): BalanceTransaction | undefined => {
+	const disputeFee = dispute.balance_transactions.find(
+		( transaction ) => transaction.reporting_category === 'dispute'
+	);
+	return disputeFee;
+};

client/payment-details/dispute-details/dispute-actions.tsx

@@ -0,0 +1,152 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { backup, lock } from '@wordpress/icons';
+import { createInterpolateElement } from '@wordpress/element';
+import { Button, Flex, FlexItem, Icon, Modal } from '@wordpress/components';
+import { getHistory } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import type { Dispute } from 'wcpay/types/disputes';
+import { getAdminUrl } from 'wcpay/utils';
+import { useDisputeAccept } from 'wcpay/data';
+import { getDisputeFee } from 'wcpay/disputes/utils';
+import { formatCurrency } from 'wcpay/utils/currency';
+
+interface Props {
+	dispute: Dispute;
+}
+const DisputeActions: React.FC< Props > = ( { dispute } ) => {
+	const { doAccept, isLoading } = useDisputeAccept( dispute );
+	const [ isModalOpen, setModalOpen ] = useState( false );
+
+	const hasStagedEvidence = dispute.evidence_details?.has_evidence;
+	const disputeFee = getDisputeFee( dispute );
+
+	const onClose = () => {
+		setModalOpen( false );
+	};
+
+	const onSubmit = () => {
+		// TODO: Tracks event
+		// wcpayTracks.recordEvent(
+		// 	'wcpay_dispute_challenge_clicked',
+		// 	{}
+		// );
+		setModalOpen( false );
+		doAccept();
+	};
+
+	return (
+		<Flex justify="start">
+			<Button
+				variant="primary"
+				disabled={ isLoading }
+				onClick={ () => {
+					// TODO: Tracks event
+					// wcpayTracks.recordEvent(
+					// 	'wcpay_dispute_challenge_clicked',
+					// 	{}
+					// );
+					const challengeUrl = getAdminUrl( {
+						page: 'wc-admin',
+						path: '/payments/disputes/challenge',
+						id: dispute.id,
+					} );
+					getHistory().push( challengeUrl );
+				} }
+			>
+				{ hasStagedEvidence
+					? __( 'Continue with challenge', 'woocommerce-payments' )
+					: __( 'Challenge dispute', 'woocommerce-payments' ) }
+			</Button>
+
+			<Button
+				variant="tertiary"
+				disabled={ isLoading }
+				onClick={ () => {
+					// TODO: Tracks event
+					// wcpayTracks.recordEvent(
+					// 	'wcpay_dispute_challenge_clicked',
+					// 	{}
+					// );
+					setModalOpen( true );
+				} }
+			>
+				{ __( 'Accept dispute', 'woocommerce-payments' ) }
+			</Button>
+
+			{ isModalOpen && (
+				<Modal
+					title="Accept the dispute?"
+					onRequestClose={ onClose }
+					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={ onClose }>
+							{ __( 'Cancel', 'woocommerce-payments' ) }
+						</Button>
+						<Button variant="primary" onClick={ onSubmit }>
+							{ __( 'Accept dispute', 'woocommerce-payments' ) }
+						</Button>
+					</Flex>
+				</Modal>
+			) }
+		</Flex>
+	);
+};
+
+export default DisputeActions;

client/payment-details/dispute-details/index.tsx

@@ -12,6 +12,7 @@ import type { Dispute } from 'wcpay/types/disputes';
 import { Card, CardBody } from '@wordpress/components';
 import './style.scss';
 import DisputeNotice from './dispute-notice';
+import DisputeActions from './dispute-actions';
 import { isAwaitingResponse } from 'wcpay/disputes/utils';
 
 interface DisputeDetailsProps {
@@ -23,21 +24,25 @@ const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute } ) => {
 	const dueBy = moment.unix( dispute.evidence_details?.due_by ?? 0 );
 	const countdownDays = Math.floor( dueBy.diff( now, 'days', true ) );
 
-	return (
-		<div className="transaction-details-dispute-details-wrapper">
-			<Card>
-				<CardBody className="transaction-details-dispute-details-body">
-					{ isAwaitingResponse( dispute.status ) &&
-						countdownDays >= 0 && (
+	if ( isAwaitingResponse( dispute.status ) ) {
+		return (
+			<div className="transaction-details-dispute-details-wrapper">
+				<Card>
+					<CardBody className="transaction-details-dispute-details-body">
+						{ countdownDays >= 0 && (
 							<DisputeNotice
 								dispute={ dispute }
 								urgent={ countdownDays <= 2 }
 							/>
 						) }
-				</CardBody>
-			</Card>
-		</div>
-	);
+						<DisputeActions dispute={ dispute } />
+					</CardBody>
+				</Card>
+			</div>
+		);
+	}
+
+	return null;
 };
 
 export default DisputeDetails;

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

@@ -9,3 +9,21 @@
 		padding: $grid-unit-20;
 	}
 }
+
+.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;
+	}
+}