Update Dispute copy

changelog/update-disputes-copy

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update copy for disputes

client/components/dispute-status-chip/mappings.ts

@@ -14,7 +14,7 @@ const status: {
 } = {
 	warning_needs_response: {
 		type: 'warning',
-		message: __( 'Inquiry: Needs response', 'woocommerce-payments' ),
+		message: __( 'Inquiry: Response needed', 'woocommerce-payments' ),
 	},
 	warning_under_review: {
 		type: 'primary',
@@ -26,7 +26,7 @@ const status: {
 	},
 	needs_response: {
 		type: 'warning',
-		message: __( 'Needs response', 'woocommerce-payments' ),
+		message: __( 'Response needed', 'woocommerce-payments' ),
 	},
 	under_review: {
 		type: 'primary',

client/components/dispute-status-chip/test/__snapshots__/index.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`DisputeStatusChip renders needs_response status 1`] = `
   <span
     class="chip chip-alert"
   >
-    Needs response
+    Response needed
   </span>
 </div>
 `;
@@ -65,7 +65,7 @@ exports[`DisputeStatusChip renders warning_needs_response status 1`] = `
   <span
     class="chip chip-alert"
   >
-    Inquiry: Needs response
+    Inquiry: Response needed
   </span>
 </div>
 `;

client/components/payment-status-chip/__tests__/__snapshots__/index.js.snap

@@ -45,7 +45,7 @@ exports[`PaymentStatusChip renders disputed_needs_response status 1`] = `
   <span
     class="chip chip-warning"
   >
-    Disputed: Needs response
+    Disputed: Response needed
   </span>
 </div>
 `;
@@ -75,7 +75,7 @@ exports[`PaymentStatusChip renders disputed_warning_needs_response status 1`] =
   <span
     class="chip chip-warning"
   >
-    Inquiry: Needs response
+    Inquiry: Response needed
   </span>
 </div>
 `;

client/disputes/filters/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,7 @@ HTMLOptionsCollection [
   <option
     value="warning_needs_response"
   >
-    Inquiry: Needs response
+    Inquiry: Response needed
   </option>,
   <option
     value="warning_under_review"
@@ -20,7 +20,7 @@ HTMLOptionsCollection [
   <option
     value="needs_response"
   >
-    Needs response
+    Response needed
   </option>,
   <option
     value="under_review"

client/disputes/new-evidence/index.tsx

@@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
 
 /**
  * Internal dependencies.
@@ -754,7 +755,7 @@ export default ( { query }: { query: { id: string } } ) => {
 				content: dispute.created
 					? formatDateTimeFromTimestamp( dispute.created, {
 							separator: ', ',
-							includeTime: true,
+							includeTime: false,
 					  } )
 					: '–',
 			},
@@ -765,6 +766,7 @@ export default ( { query }: { query: { id: string } } ) => {
 						{ reasons[ disputeReason ]?.display || disputeReason }
 						{ disputeReasonSummary.length > 0 && (
 							<ClickTooltip
+								buttonIcon={ <HelpOutlineIcon /> }
 								buttonLabel={ __(
 									'Learn more',
 									'woocommerce-payments'
@@ -972,6 +974,10 @@ export default ( { query }: { query: { id: string } } ) => {
 					<RecommendedDocuments
 						fields={ recommendedShippingDocumentsFields }
 						readOnly={ readOnly }
+						customSubheading={ __(
+							'We recommend adding the following document(s) to support your case.',
+							'woocommerce-payments'
+						) }
 					/>
 					{ inlineNotice( bankName ) }
 				</>

client/disputes/new-evidence/recommended-document-fields.ts

@@ -373,7 +373,7 @@ const getRecommendedShippingDocumentFields = (): Array<
 			key: DOCUMENT_FIELD_KEYS.SHIPPING_DOCUMENTATION,
 			label: __( 'Proof of shipping', 'woocommerce-payments' ),
 			description: __(
-				'A copy of the shipment receipt or label.',
+				'A receipt from the shipping carrier or a tracking number, for example.',
 				'woocommerce-payments'
 			),
 			order: 0,

client/disputes/new-evidence/recommended-documents.tsx

@@ -13,17 +13,21 @@ import { DocumentField, RecommendedDocumentsProps } from './types';
 const RecommendedDocuments: React.FC< RecommendedDocumentsProps > = ( {
 	fields,
 	readOnly = false,
+	customHeading,
+	customSubheading,
 } ) => {
 	return (
 		<section className="wcpay-dispute-evidence-recommended-documents">
 			<h3 className="wcpay-dispute-evidence-recommended-documents__heading">
-				{ __( 'Recommended documents', 'woocommerce-payments' ) }
+				{ customHeading ||
+					__( 'Recommended documents', 'woocommerce-payments' ) }
 			</h3>
 			<div className="wcpay-dispute-evidence-recommended-documents__subheading">
-				{ __(
-					'While optional, we strongly recommend providing as many of these documents as possible. The following file types are supported: PDF, JPEG, and PNG.',
-					'woocommerce-payments'
-				) }
+				{ customSubheading ||
+					__(
+						'While optional, we strongly recommend providing as many of these documents as possible. The following file types are supported: PDF, JPEG, and PNG.',
+						'woocommerce-payments'
+					) }
 			</div>
 			<ul className="wcpay-dispute-evidence-recommended-documents__list">
 				{ fields.map( ( field: DocumentField ) => (

client/disputes/new-evidence/types.ts

@@ -93,4 +93,6 @@ export interface FileUploadControlProps {
 export interface RecommendedDocumentsProps {
 	fields: DocumentField[];
 	readOnly?: boolean;
+	customHeading?: string;
+	customSubheading?: string;
 }

client/disputes/strings.ts

@@ -216,7 +216,7 @@ export const reasons: Record<
 			),
 		],
 		claim: __(
-			'The cardholder claims the product was not received.',
+			'The cardholder claims they did not receive the product.',
 			'woocommerce-payments'
 		),
 	},
@@ -354,12 +354,12 @@ export const reasons: Record<
 // Mapping of disputes status to display string.
 export const displayStatus = {
 	warning_needs_response: __(
-		'Inquiry: Needs response',
+		'Inquiry: Response needed',
 		'woocommerce-payments'
 	),
 	warning_under_review: __( 'Inquiry: Under review', 'woocommerce-payments' ),
 	warning_closed: __( 'Inquiry: Closed', 'woocommerce-payments' ),
-	needs_response: __( 'Needs response', 'woocommerce-payments' ),
+	needs_response: __( 'Response needed', 'woocommerce-payments' ),
 	under_review: __( 'Under review', 'woocommerce-payments' ),
 	charge_refunded: __( 'Charge refunded', 'woocommerce-payments' ),
 	won: __( 'Won', 'woocommerce-payments' ),

client/disputes/test/__snapshots__/index.tsx.snap

@@ -539,7 +539,7 @@ exports[`Disputes list renders correctly 1`] = `
                       <span
                         class="chip chip-alert"
                       >
-                        Needs response
+                        Response needed
                       </span>
                     </a>
                   </td>
@@ -793,7 +793,7 @@ exports[`Disputes list renders correctly 1`] = `
                       <span
                         class="chip chip-alert"
                       >
-                        Needs response
+                        Response needed
                       </span>
                     </a>
                   </td>

client/payment-details/dispute-details/dispute-due-by-date.tsx

@@ -15,8 +15,7 @@ const DisputeDueByDate: React.FC< {
 		moment.unix( dueBy ).utc().diff( moment().utc(), 'days', true )
 	);
 	const respondByDate = formatDateTimeFromTimestamp( dueBy, {
-		separator: ', ',
-		includeTime: true,
+		customFormat: 'F j, Y g:i A',
 	} );
 	return (
 		<span className="dispute-steps__steps__response-date">
@@ -32,18 +31,18 @@ const DisputeDueByDate: React.FC< {
 						sprintf(
 							// Translators: %d is the number of days left to respond to the dispute.
 							_n(
-								'(%d day left to respond)',
-								'(%d days left to respond)',
+								' (%d day left to respond)',
+								' (%d days left to respond)',
 								daysRemaining,
 								'woocommerce-payments'
 							),
 							daysRemaining
 						) }
 
 					{ daysRemaining === 0 &&
-						__( '(Last day today)', 'woocommerce-payments' ) }
+						__( ' (Last day today)', 'woocommerce-payments' ) }
 					{ daysRemaining < 0 &&
-						__( '(Past due)', 'woocommerce-payments' ) }
+						__( ' (Past due)', 'woocommerce-payments' ) }
 				</span>
 			) }
 		</span>

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

@@ -41,8 +41,7 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( {
 	const dueByDate = formatDateTimeFromTimestamp(
 		dispute.evidence_details?.due_by ?? 0,
 		{
-			separator: ' ',
-			includeTime: true,
+			customFormat: 'g:i A \\o\\n F j, Y',
 		}
 	);
 
@@ -62,16 +61,16 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( {
 		noticeText = bankName
 			? sprintf(
 					__(
-						'<strong>%1$s</strong> Submit the evidence to <strong>%2$s</strong> by <strong>%3$s</strong> if you believe the claim to be invalid, or issue a refund.',
+						"<strong>%1$s</strong> If you believe this is incorrect, you have until <strong>%2$s to submit evidence to your customer's bank, %3$s.</strong> Alternatively, you can issue a refund.",
 						'woocommerce-payments'
 					),
 					shopperDisputeReason,
-					bankName,
-					dueByDate
+					dueByDate,
+					bankName
 			  )
 			: sprintf(
 					__(
-						"<strong>%1$s</strong> Submit the evidence to <strong>Cardholder's bank</strong> by <strong>%2$s</strong> if you believe the claim to be invalid, or issue a refund.",
+						"<strong>%1$s</strong> If you believe this is incorrect, you have until <strong>%2$s to submit evidence to your customer's bank.</strong> Alternatively, you can issue a refund.",
 						'woocommerce-payments'
 					),
 					shopperDisputeReason,
@@ -84,16 +83,16 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( {
 		noticeText = bankName
 			? sprintf(
 					__(
-						'<strong>%1$s</strong> Challenge the dispute with <strong>%2$s</strong> by <strong>%3$s</strong> if you believe the claim to be invalid, or accept to forfeit the funds and pay the dispute fee.',
+						"<strong>%1$s</strong> If you believe this is incorrect, you have until <strong>%2$s to challenge the dispute with your customer's bank, %3$s.</strong> If you accept the dispute, you will forfeit the funds and pay the dispute fee.",
 						'woocommerce-payments'
 					),
 					shopperDisputeReason,
-					bankName,
-					dueByDate
+					dueByDate,
+					bankName
 			  )
 			: sprintf(
 					__(
-						"<strong>%1$s</strong> Challenge the dispute with <strong>Cardholder's bank</strong> by <strong>%2$s</strong> if you believe the claim to be invalid, or accept to forfeit the funds and pay the dispute fee.",
+						"<strong>%1$s</strong> If you believe this is incorrect, you have until <strong>%2$s to challenge the dispute with your customer's bank.</strong> If you accept the dispute, you will forfeit the funds and pay the dispute fee.",
 						'woocommerce-payments'
 					),
 					shopperDisputeReason,

client/payment-details/dispute-details/dispute-resolution-footer.tsx

@@ -41,16 +41,16 @@ const DisputeUnderReviewFooter: React.FC< {
 							? sprintf(
 									/* Translators: %1$s - bank name, %2$s - formatted date, <a> - link to documentation page */
 									__(
-										'You submitted evidence for this dispute on %1$s. <strong>%2$s</strong> is reviewing the case, which can take 60 days or more. You will be alerted when they make their final decision. <a>Learn more about the dispute process</a>.',
+										"<strong>The customer's bank, %1$s, is currently reviewing the evidence you submitted on %2$s.</strong> This process can sometimes take more than 60 days — we'll let you know once a decision has been made. <a>Learn more about the dispute process.</a>",
 										'woocommerce-payments'
 									),
-									submissionDateFormatted,
-									bankName
+									bankName,
+									submissionDateFormatted
 							  )
 							: sprintf(
 									/* Translators: %s - formatted date, <a> - link to documentation page */
 									__(
-										'You submitted evidence for this dispute on %s. The <strong>cardholder’s bank</strong> is reviewing the case, which can take 60 days or more. You will be alerted when they make their final decision. <a>Learn more about the dispute process</a>.',
+										"<strong>The customer's bank is currently reviewing the evidence you submitted on %1$s.</strong> This process can sometimes take more than 60 days — we'll let you know once a decision has been made. <a>Learn more about the dispute process.</a>",
 										'woocommerce-payments'
 									),
 									submissionDateFormatted
@@ -119,7 +119,7 @@ const DisputeWonFooter: React.FC< {
 							? sprintf(
 									/* Translators: %1$s - bank name, %2$s - formatted date, <a> - link to documentation page */
 									__(
-										'Good news! <strong>%1$s</strong> decided that you won the dispute on %2$s. The disputed amount and the dispute fee have been credited back to your account. <a>Learn more about preventing disputes</a>.',
+										"<strong>Good news — you've won this dispute! The customer's bank, %1$s, reached this decision on %2$s.</strong> Your account has been credited with the disputed amount and fee. <a>Learn more about preventing disputes.</a>",
 										'woocommerce-payments'
 									),
 									bankName,
@@ -128,7 +128,7 @@ const DisputeWonFooter: React.FC< {
 							: sprintf(
 									/* Translators: %s - formatted date, <a> - link to documentation page */
 									__(
-										'Good news! The <strong>cardholder’s bank</strong> decided that you won the dispute on %s. The disputed amount and the dispute fee have been credited back to your account. <a>Learn more about preventing disputes</a>.',
+										"<strong>Good news — you've won this dispute! The customer's bank reached this decision on %1$s.</strong> Your account has been credited with the disputed amount and fee. <a>Learn more about preventing disputes.</a>",
 										'woocommerce-payments'
 									),
 									closedDateFormatted
@@ -208,7 +208,7 @@ const DisputeLostFooter: React.FC< {
 		messagePrefix = sprintf(
 			/* Translators: %1$s - formatted date */
 			__(
-				'This dispute was accepted and lost on %1$s.',
+				'<strong>You accepted this dispute on %1$s.</strong>',
 				'woocommerce-payments'
 			),
 			closedDateFormatted
@@ -228,7 +228,7 @@ const DisputeLostFooter: React.FC< {
 			messagePrefix = sprintf(
 				/* Translators: %1$s - bank name, %2$s - formatted date */
 				__(
-					'<strong>%1$s</strong> decided that you lost the dispute on %2$s.',
+					"<strong>Unfortunately, you've lost this dispute. The customer's bank, %1$s, reached this decision on %2$s.</strong>",
 					'woocommerce-payments'
 				),
 				bankName,
@@ -238,7 +238,7 @@ const DisputeLostFooter: React.FC< {
 			messagePrefix = sprintf(
 				/* Translators: %s - formatted date */
 				__(
-					'The <strong>cardholder’s bank</strong> decided that you lost the dispute on %s',
+					"<strong>Unfortunately, you've lost this dispute. The customer's bank reached this decision on %1$s.</strong>",
 					'woocommerce-payments'
 				),
 				closedDateFormatted
@@ -257,7 +257,7 @@ const DisputeLostFooter: React.FC< {
 						sprintf(
 							/* Translators: %1$s – the formatted dispute fee amount, <a> - link to documentation page */
 							__(
-								'The %1$s fee has been deducted from your account, and the disputed amount returned to the cardholder. <a>Learn more about preventing disputes</a>.',
+								'The %1$s fee has been deducted from your account, and the disputed amount has been returned to your customer. <a>Learn more about preventing disputes</a>.',
 								'woocommerce-payments'
 							),
 							disputeFeeFormatted