Add dispute steps to resolve to the transaction details page.

changelog/add-6925-steps-to-resolve

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: This work is part of a UI improvements to increase disputes response that is behind a feature flag. A changelog entry will be added to represent the work as a whole.
+
+

client/globals.d.ts

@@ -113,6 +113,7 @@ declare global {
 		isWooPayStoreCountryAvailable: boolean;
 		isSubscriptionsPluginActive: boolean;
 		isStripeBillingEligible: boolean;
+		storeName: string;
 	};
 
 	const wcTracks: any;

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

@@ -0,0 +1,189 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { dateI18n } from '@wordpress/date';
+import moment from 'moment';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { Dispute } from 'wcpay/types/disputes';
+import { ChargeBillingDetails } from 'wcpay/types/charges';
+import { formatExplicitCurrency } from 'utils/currency';
+import { ClickTooltip } from 'wcpay/components/tooltip';
+
+interface Props {
+	dispute: Dispute;
+	customer: ChargeBillingDetails | null;
+	chargeCreated: number;
+	daysRemaining: number;
+}
+
+const DisputeSteps: React.FC< Props > = ( {
+	dispute,
+	customer,
+	chargeCreated,
+	daysRemaining,
+} ) => {
+	let emailLink;
+	if ( customer?.email ) {
+		const chargeDate = dateI18n(
+			'Y-m-d',
+			moment( chargeCreated * 1000 ).toISOString()
+		);
+		const disputeDate = dateI18n(
+			'Y-m-d',
+			moment( dispute.created * 1000 ).toISOString()
+		);
+		const emailSubject = `Problem with your purchase from ${ wcpaySettings.storeName } on ${ chargeDate }?`;
+		const emailBody =
+			`Hello ${ customer?.name }\n\n` +
+			`We noticed that on ${ disputeDate }, you disputed a ${ formatExplicitCurrency(
+				dispute.amount,
+				dispute.currency
+			) } from ${ chargeDate }. We wanted to contact you to make sure everything was all right with your purchase and see if there's anything else we can do to resolve any problems you might have had.\n\n` +
+			`Alternatively, if the dispute was a mistake, you could easily withdraw it by calling the number on the back of your card. Thank you so much - we appreciate your business and look forward to working with you.`;
+
+		emailLink = `mailto:${ customer.email }?subject=${ encodeURIComponent(
+			emailSubject
+		) }&body=${ encodeURIComponent( emailBody ) }`;
+	}
+
+	const respondByDate = dispute.evidence_details?.due_by
+		? dateI18n(
+				'M j, Y, g:ia',
+				moment( dispute.evidence_details?.due_by * 1000 ).toISOString()
+		  )
+		: '–';
+
+	return (
+		<div className="dispute-steps">
+			<div className="dispute-steps__header">
+				{ __( 'Steps to resolve:', 'woocommercts' ) }
+			</div>
+			<ol className="dispute-steps__steps">
+				<li>
+					{
+						// TODO: add link to the issuer evidence files link. See https://github.com/Automattic/woocommerce-payments/pull/7192.
+						__(
+							"Review the claim issued by the cardholder's bank.",
+							'woocommerce-payments'
+						)
+					}
+				</li>
+				<li>
+					{ customer?.email
+						? createInterpolateElement(
+								__(
+									'<a>Email the customer</a> to address their concerns.',
+									'woocommerce-payments'
+								),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											target="_blank"
+											rel="noopener noreferrer"
+											href={ emailLink }
+										/>
+									),
+								}
+						  )
+						: __(
+								'Email the customer to address their concerns.',
+								'woocommerce-payments'
+						  ) }
+				</li>
+				<li>
+					{
+						// TODO: link 'guidance on dispute withdrawal' to the docs when it's ready.
+						__(
+							'Provide guidance on dispute withdrawal if the customer agrees.',
+							'woocommerce-payments'
+						)
+					}
+				</li>
+				<li>
+					{ createInterpolateElement(
+						__(
+							'Challenge <challengeicon/> or accept <accepticon/> the dispute by <disputeduedate/>.',
+							'woocommerce-payments'
+						),
+						{
+							challengeicon: (
+								<ClickTooltip
+									buttonIcon={ <HelpOutlineIcon /> }
+									buttonLabel={ __(
+										'Challenge the dispute',
+										'woocommerce-payments'
+									) }
+									content={ __(
+										"Challenge the dispute if you consider the claim invalid. You'll need to provide evidence to back your claim. Keep in mind that challenging doesn't ensure a resolution in your favor.",
+										'woocommerce-payments'
+									) }
+								/>
+							),
+							accepticon: (
+								<ClickTooltip
+									buttonIcon={ <HelpOutlineIcon /> }
+									buttonLabel={ __(
+										'Accept the dispute',
+										'woocommerce-payments'
+									) }
+									content={ sprintf(
+										// Translators: %s is a formatted currency amount, eg $10.00.
+										__(
+											`Accepting this dispute will automatically close it. Your account will be charged a %s fee, and the disputed amount will be refunded to the cardholder.`,
+											'woocommerce-payments'
+										),
+										// TODO: use getDisputeFee() from https://github.com/Automattic/woocommerce-payments/pull/7118.
+										''
+									) }
+								/>
+							),
+							disputeduedate: (
+								<span className="dispute-steps__steps__response-date">
+									{ respondByDate }
+									<span
+										className={ classNames( {
+											'dispute-steps__steps__response-date--urgent':
+												daysRemaining < 3,
+											'dispute-steps__steps__response-date--warning':
+												daysRemaining < 7 &&
+												daysRemaining > 2,
+										} ) }
+									>
+										{ daysRemaining === 0
+											? __(
+													'(Last day today)',
+													'woocommerce-payments'
+											  )
+											: sprintf(
+													// Translators: %s is the number of days left to respond to the dispute.
+													_n(
+														'(%s day left to respond)',
+														'(%s days left to respond)',
+														daysRemaining,
+														'woocommerce-payments'
+													),
+													daysRemaining
+											  ) }
+									</span>
+								</span>
+							),
+						}
+					) }
+				</li>
+			</ol>
+		</div>
+	);
+};
+
+export default DisputeSteps;

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

@@ -16,14 +16,22 @@ import type { Dispute } from 'wcpay/types/disputes';
 import { isAwaitingResponse } from 'wcpay/disputes/utils';
 import DisputeNotice from './dispute-notice';
 import DisputeSummaryRow from './dispute-summary-row';
+import DisputeSteps from './dispute-steps';
 import InlineNotice from 'components/inline-notice';
 import './style.scss';
+import { ChargeBillingDetails } from 'wcpay/types/charges';
 
 interface DisputeDetailsProps {
 	dispute: Dispute;
+	customer: ChargeBillingDetails | null;
+	chargeCreated: number;
 }
 
-const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute } ) => {
+const DisputeDetails: React.FC< DisputeDetailsProps > = ( {
+	dispute,
+	customer,
+	chargeCreated,
+} ) => {
 	const now = moment();
 	const dueBy = moment.unix( dispute.evidence_details?.due_by ?? 0 );
 	const countdownDays = Math.floor( dueBy.diff( now, 'days', true ) );
@@ -55,6 +63,12 @@ const DisputeDetails: React.FC< DisputeDetailsProps > = ( { dispute } ) => {
 									dispute={ dispute }
 									daysRemaining={ countdownDays }
 								/>
+								<DisputeSteps
+									dispute={ dispute }
+									customer={ customer }
+									chargeCreated={ chargeCreated }
+									daysRemaining={ countdownDays }
+								/>
 							</>
 						) }
 				</CardBody>

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

@@ -48,3 +48,41 @@
 		margin-bottom: 8px;
 	}
 }
+.dispute-steps {
+	&__header {
+		font-weight: 600;
+	}
+	&__steps {
+		list-style-position: inside;
+		margin-left: 0;
+
+		.wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper
+			> .wcpay-tooltip__content-wrapper
+			> [role='button'] {
+			margin-left: 0;
+			margin-right: 0;
+			vertical-align: text-bottom;
+		}
+
+		.wcpay-tooltip__content-wrapper.wcpay-tooltip--click__content-wrapper
+			> .wcpay-tooltip__content-wrapper
+			+ div {
+			display: inline;
+		}
+
+		&__response-date {
+			display: inline-flex;
+			align-items: center;
+			gap: var( --grid-unit-05, 4px );
+			flex-wrap: wrap;
+			&--warning {
+				color: $wp-yellow-30;
+				font-weight: 700;
+			}
+			&--urgent {
+				font-weight: 700;
+				color: $alert-red;
+			}
+		}
+	}
+}

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

@@ -142,7 +142,13 @@ describe( 'DisputeDetails', () => {
 	} );
 	test( 'correctly renders dispute details', () => {
 		const charge = getBaseCharge();
-		render( <DisputeDetails dispute={ charge.dispute } /> );
+		render(
+			<DisputeDetails
+				dispute={ charge.dispute }
+				customer={ charge.billing_details }
+				chargeCreated={ charge.created }
+			/>
+		);
 
 		// Expect this warning to be logged to the console
 		expect( console ).toHaveWarnedWith(
@@ -187,7 +193,13 @@ describe( 'DisputeDetails', () => {
 			submission_count: 0,
 		};
 
-		render( <DisputeDetails dispute={ charge.dispute } /> );
+		render(
+			<DisputeDetails
+				dispute={ charge.dispute }
+				customer={ charge.billing_details }
+				chargeCreated={ charge.created }
+			/>
+		);
 
 		screen.getByText(
 			/The cardholder claims this is an unauthorized transaction/,

client/payment-details/summary/index.tsx

@@ -376,7 +376,11 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 				</LoadableBlock>
 			</CardBody>
 			{ isDisputeOnTransactionPageEnabled && charge.dispute && (
-				<DisputeDetails dispute={ charge.dispute } />
+				<DisputeDetails
+					dispute={ charge.dispute }
+					customer={ charge.billing_details }
+					chargeCreated={ charge.created }
+				/>
 			) }
 			{ isAuthAndCaptureEnabled &&
 				authorization &&

includes/admin/class-wc-payments-admin.php

@@ -846,6 +846,7 @@ private function get_js_settings(): array {
 			'isWooPayStoreCountryAvailable' => WooPay_Utilities::is_store_country_available(),
 			'isStripeBillingEnabled'        => WC_Payments_Features::is_stripe_billing_enabled(),
 			'isStripeBillingEligible'       => WC_Payments_Features::is_stripe_billing_eligible(),
+			'storeName'                     => get_bloginfo( 'name' ),
 		];
 
 		return apply_filters( 'wcpay_js_settings', $this->wcpay_js_settings );