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/components/tooltip/style.scss

@@ -3,6 +3,11 @@
 		// ensures that the element needed for position calculations isn't included in the DOM layout
 		display: contents;
 
+		// fixes a UI bug where the tooltip can shift neighboring elements when it appears
+		> div {
+			display: inline;
+		}
+
 		// Styles for buttonIcon
 		[role='button'] {
 			cursor: pointer;
@@ -12,6 +17,7 @@
 			transition: all 0.3s ease;
 			fill: currentColor;
 			margin: 0 0.4em;
+			vertical-align: text-bottom;
 
 			&:focus,
 			&:hover,

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-awaiting-response-details.tsx

@@ -23,6 +23,7 @@ import {
  * Internal dependencies
  */
 import type { Dispute } from 'wcpay/types/disputes';
+import type { ChargeBillingDetails } from 'wcpay/types/charges';
 import wcpayTracks from 'tracks';
 import { useDisputeAccept } from 'wcpay/data';
 import {
@@ -34,22 +35,29 @@ import { getAdminUrl } from 'wcpay/utils';
 import DisputeNotice from './dispute-notice';
 import IssuerEvidenceList from './evidence-list';
 import DisputeSummaryRow from './dispute-summary-row';
+import DisputeSteps from './dispute-steps';
 import InlineNotice from 'components/inline-notice';
 import './style.scss';
 
 interface Props {
 	dispute: Dispute;
+	customer: ChargeBillingDetails | null;
+	chargeCreated: number;
 }
 
-const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => {
+const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
+	dispute,
+	customer,
+	chargeCreated,
+} ) => {
 	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 showDisputeActions = ! isInquiry( dispute );
+	const showDisputeStepsAndActions = ! isInquiry( dispute );
 
 	const onModalClose = () => {
 		setModalOpen( false );
@@ -81,14 +89,22 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => {
 									dispute={ dispute }
 									daysRemaining={ countdownDays }
 								/>
+								{ showDisputeStepsAndActions && (
+									<DisputeSteps
+										dispute={ dispute }
+										customer={ customer }
+										chargeCreated={ chargeCreated }
+										daysRemaining={ countdownDays }
+									/>
+								) }
 								<IssuerEvidenceList
 									issuerEvidence={ dispute.issuer_evidence }
 								/>
 							</>
 						) }
 
 					{ /* Dispute Actions */ }
-					{ showDisputeActions && (
+					{ showDisputeStepsAndActions && (
 						<div className="transaction-details-dispute-details-body__actions">
 							<Link
 								href={

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

@@ -0,0 +1,202 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { ExternalLink } from '@wordpress/components';
+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';
+import { getDisputeFeeFormatted } from 'wcpay/disputes/utils';
+
+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 = sprintf(
+			// Translators: %1$s is the store name, %2$s is the charge date.
+			__(
+				`Problem with your purchase from %1$s on %2$s?`,
+				'woocommerce-payments'
+			),
+			wcpaySettings.storeName,
+			chargeDate
+		);
+		const customerName = customer?.name || '';
+		const emailBody = sprintf(
+			// Translators: %1$s is the customer name, %2$s is the dispute date, %3$s is the dispute amount with currency-code e.g. $15 USD, %4$s is the charge date.
+			__(
+				`Hello %1$s\n\n` +
+					`We noticed that on %2$s, you disputed a %3$s charge on %4$s. 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 can 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.`,
+				'woocommerce-payments'
+			),
+			customerName,
+			disputeDate,
+			formatExplicitCurrency( dispute.amount, dispute.currency ),
+			chargeDate
+		);
+		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:', 'woocommerce-payments' ) }
+			</div>
+			<ol className="dispute-steps__steps">
+				<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>
+					{ createInterpolateElement(
+						__(
+							'Provide <a>guidance on dispute withdrawal</a> if the customer agrees.',
+							'woocommerce-payments'
+						),
+						{
+							a: (
+								<ExternalLink href="https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#withdrawals" />
+							),
+						}
+					) }
+				</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'
+										),
+										getDisputeFeeFormatted(
+											dispute,
+											true
+										) || '-'
+									) }
+								/>
+							),
+							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/style.scss

@@ -17,7 +17,7 @@
 		}
 
 		.dispute-summary-row {
-			margin: 24px 0;
+			margin-top: 24px;
 
 			&__response-date {
 				display: flex;
@@ -39,6 +39,7 @@
 			display: flex;
 			justify-content: start;
 			gap: $grid-unit-10;
+			margin-top: 24px;
 
 			@media screen and ( max-width: $break-small ) {
 				flex-direction: column;
@@ -63,7 +64,45 @@
 		margin-bottom: 8px;
 	}
 }
+.dispute-steps {
+	margin-top: 24px;
 
+	&__header {
+		font-weight: 600;
+		font-size: 14px;
+	}
+	&__steps {
+		list-style-position: inside;
+		margin: 0;
+
+		> li {
+			margin: 0;
+			padding: 16px 10px 16px 4px;
+			border-bottom: 1px solid $wp-gray-5;
+		}
+
+		.wcpay-tooltip__content-wrapper > [role='button'] {
+			margin: 0;
+		}
+
+		&__response-date {
+			display: inline-flex;
+			align-items: center;
+			gap: var( --grid-unit-05, 4px );
+			flex-wrap: wrap;
+			font-weight: 600;
+
+			&--warning {
+				color: $wp-yellow-30;
+				font-weight: 700;
+			}
+			&--urgent {
+				color: $alert-red;
+				font-weight: 700;
+			}
+		}
+	}
+}
 .transaction-details-dispute-accept-modal {
 	max-width: 600px;
 

client/payment-details/summary/index.tsx

@@ -468,6 +468,8 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 					{ isAwaitingResponse( charge.dispute.status ) ? (
 						<DisputeAwaitingResponseDetails
 							dispute={ charge.dispute }
+							customer={ charge.billing_details }
+							chargeCreated={ charge.created }
 						/>
 					) : (
 						<DisputeResolutionFooter dispute={ charge.dispute } />