WC Home active disputes task: improve wording and reduce due_by thr…

…eshold to align with Payments Overview task (#6548)

Co-authored-by: Eric Jinks <[email protected]>
Co-authored-by: bruce aldridge <[email protected]>

changelog/update-6505-dispute-task-wc-home

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Improve the wording of the "Active Disputes" task list item on the WooCommerce → Home screen to better communicate the urgency of resolving these disputes.

client/overview/task-list/dispute-tasks.ts

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n } from '@wordpress/date';
 import moment from 'moment';
 import { getHistory } from '@woocommerce/navigation';
 
@@ -28,12 +29,10 @@ const isDueWithin = ( dispute: CachedDispute, days: number ) => {
 	if ( dispute.due_by === '' ) {
 		return false;
 	}
-	const now = moment();
-	const dueBy = moment( dispute.due_by );
-	return (
-		dueBy.diff( now, 'hours' ) > 0 &&
-		dueBy.diff( now, 'hours' ) <= 24 * days
-	);
+	// Get current time in UTC.
+	const now = moment().utc();
+	const dueBy = moment.utc( dispute.due_by );
+	return dueBy.diff( now, 'hours' ) > 0 && dueBy.diff( now, 'days' ) <= days;
 };
 
 /**
@@ -153,15 +152,22 @@ export const getDisputeResolutionTask = (
 			numDisputesDueWithin24h >= 1
 				? sprintf(
 						__( 'Respond today by %s', 'woocommerce-payments' ),
-						// Show due_by time in local time.
-						moment( dispute.due_by ).format( 'h:mm A' ) // E.g. "11:59 PM".
+						// Show due_by time in local timezone: e.g. "11:59 PM".
+						dateI18n(
+							'g:i A',
+							moment.utc( dispute.due_by ).local().toISOString()
+						)
 				  )
 				: sprintf(
 						__(
 							'By %s – %s left to respond',
 							'woocommerce-payments'
 						),
-						moment( dispute.due_by ).format( 'MMM D, YYYY' ), // E.g. "Jan 1, 2021".
+						// Show due_by date in local timezone: e.g. "Jan 1, 2021".
+						dateI18n(
+							'M j, Y',
+							moment.utc( dispute.due_by ).local().toISOString()
+						),
 						moment( dispute.due_by ).fromNow( true ) // E.g. "2 days".
 				  );
 
@@ -204,18 +210,18 @@ export const getDisputeResolutionTask = (
 		disputeTotalAmounts
 	);
 	disputeTask.content =
-		// Final day / Last week to respond for N of the disputes
+		// Final day / Last week to respond to N of the disputes
 		numDisputesDueWithin24h >= 1
 			? sprintf(
 					__(
-						'Final day to respond for %d of the disputes',
+						'Final day to respond to %d of the disputes',
 						'woocommerce-payments'
 					),
 					numDisputesDueWithin24h
 			  )
 			: sprintf(
 					__(
-						'Last week to respond for %d of the disputes',
+						'Last week to respond to %d of the disputes',
 						'woocommerce-payments'
 					),
 					numDisputesDueWithin7Days

client/overview/task-list/test/tasks.js

@@ -1,5 +1,11 @@
 /** @format */
 
+/**
+ * External dependencies
+ */
+
+import moment from 'moment';
+
 /**
  * Internal dependencies
  */
@@ -97,7 +103,13 @@ const mockActiveDisputes = [
 ];
 
 describe( 'getTasks()', () => {
+	// Get current timezone
+	const currentTimezone = moment.tz.guess();
+
 	beforeEach( () => {
+		// set local timezone to EST (not daylight savings time)
+		// Note Etc/GMT+5 === UTC-5
+		moment.tz.setDefault( 'Etc/GMT+5' );
 		// mock Date.now that moment library uses to get current date for testing purposes
 		Date.now = jest.fn( () => new Date( '2023-02-01T08:00:00.000Z' ) );
 
@@ -122,6 +134,7 @@ describe( 'getTasks()', () => {
 	afterEach( () => {
 		// roll it back
 		Date.now = () => new Date();
+		moment.tz.setDefault( currentTimezone );
 	} );
 	it( 'should include business details when flag is set', () => {
 		const actual = getTasks( {
@@ -316,7 +329,7 @@ describe( 'getTasks()', () => {
 
 	it( 'should not include the dispute resolution task if dispute due_by > 7 days', () => {
 		// Set Date.now to - 7 days to reduce urgency of disputes.
-		Date.now = jest.fn( () => new Date( '2023-01-25T08:00:00.000Z' ) );
+		Date.now = jest.fn( () => new Date( '2023-01-24T08:00:00.000Z' ) );
 		const actual = getTasks( {
 			accountStatus: {
 				status: 'restricted_soon',
@@ -354,7 +367,7 @@ describe( 'getTasks()', () => {
 					completed: false,
 					level: 1,
 					title: 'Respond to a dispute for $10.00 – Last day',
-					content: 'Respond today by 11:59 PM',
+					content: 'Respond today by 6:59 PM', // shown in local timezone.
 					actionLabel: 'Respond now',
 				} ),
 			] )
@@ -413,7 +426,7 @@ describe( 'getTasks()', () => {
 					level: 1,
 					title:
 						'Respond to 3 active disputes for a total of $20.00, €10.00',
-					content: 'Final day to respond for 1 of the disputes',
+					content: 'Final day to respond to 1 of the disputes',
 					actionLabel: 'See disputes',
 				} ),
 			] )
@@ -444,7 +457,7 @@ describe( 'getTasks()', () => {
 					level: 1,
 					title:
 						'Respond to 3 active disputes for a total of $20.00, €10.00',
-					content: 'Last week to respond for 1 of the disputes',
+					content: 'Last week to respond to 2 of the disputes',
 					actionLabel: 'See disputes',
 				} ),
 			] )