From 5c8a008675889a1c6bd52d0b9db8687bc2724604 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:36:27 +1000
Subject: [PATCH] Create shared `DisputeDueByDate` component

---
 .../dispute-awaiting-response-details.tsx     |  6 +-
 .../dispute-details/dispute-due-by-date.tsx   | 57 +++++++++++++++++++
 .../dispute-details/dispute-steps.tsx         | 52 ++---------------
 .../dispute-details/dispute-summary-row.tsx   | 43 ++------------
 4 files changed, 66 insertions(+), 92 deletions(-)
 create mode 100644 client/payment-details/dispute-details/dispute-due-by-date.tsx

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index d8a909cc998..4a99e1273e5 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -76,15 +76,11 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							) }
 						</InlineNotice>
 					) }
-					<DisputeSummaryRow
-						dispute={ dispute }
-						daysRemaining={ countdownDays }
-					/>
+					<DisputeSummaryRow dispute={ dispute } />
 					<DisputeSteps
 						dispute={ dispute }
 						customer={ customer }
 						chargeCreated={ chargeCreated }
-						daysRemaining={ countdownDays }
 					/>
 					<IssuerEvidenceList
 						issuerEvidence={ dispute.issuer_evidence }
diff --git a/client/payment-details/dispute-details/dispute-due-by-date.tsx b/client/payment-details/dispute-details/dispute-due-by-date.tsx
new file mode 100644
index 00000000000..e971e4b138f
--- /dev/null
+++ b/client/payment-details/dispute-details/dispute-due-by-date.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { dateI18n } from '@wordpress/date';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import classNames from 'classnames';
+import moment from 'moment';
+
+/**
+ * Internal dependencies
+ */
+import type { EvidenceDetails } from 'wcpay/types/disputes';
+
+const DisputeDueByDate: React.FC< {
+	dueBy: EvidenceDetails[ 'due_by' ];
+} > = ( { dueBy } ) => {
+	const daysRemaining = Math.floor(
+		moment.unix( dueBy ).diff( moment(), 'days', true )
+	);
+	const respondByDate = dateI18n(
+		'M j, Y, g:ia',
+		moment( dueBy * 1000 ).toISOString()
+	);
+	return (
+		<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 &&
+					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
+					) }
+
+				{ daysRemaining === 0 &&
+					__( '(Last day today)', 'woocommerce-payments' ) }
+				{ daysRemaining < 0 &&
+					__( '(Past due)', 'woocommerce-payments' ) }
+			</span>
+		</span>
+	);
+};
+
+export default DisputeDueByDate;
diff --git a/client/payment-details/dispute-details/dispute-steps.tsx b/client/payment-details/dispute-details/dispute-steps.tsx
index fe51a14ebb2..8139fa4726a 100644
--- a/client/payment-details/dispute-details/dispute-steps.tsx
+++ b/client/payment-details/dispute-details/dispute-steps.tsx
@@ -4,13 +4,12 @@
  * External dependencies
  */
 import React from 'react';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, 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
@@ -20,55 +19,18 @@ import { ChargeBillingDetails } from 'wcpay/types/charges';
 import { formatExplicitCurrency } from 'utils/currency';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import { getDisputeFeeFormatted, isInquiry } from 'wcpay/disputes/utils';
+import DisputeDueByDate from './dispute-due-by-date';
 
 interface Props {
 	dispute: Dispute;
 	customer: ChargeBillingDetails | null;
 	chargeCreated: number;
-	daysRemaining: number;
 }
 
-const DueByDate: React.FC< {
-	dueBy: number;
-	daysRemaining: number;
-} > = ( { dueBy, daysRemaining } ) => {
-	const respondByDate = dateI18n(
-		'M j, Y, g:ia',
-		moment( dueBy * 1000 ).toISOString()
-	);
-	return (
-		<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>
-	);
-};
-
 const DisputeSteps: React.FC< Props > = ( {
 	dispute,
 	customer,
 	chargeCreated,
-	daysRemaining,
 } ) => {
 	let emailLink;
 	if ( customer?.email ) {
@@ -191,9 +153,8 @@ const DisputeSteps: React.FC< Props > = ( {
 								/>
 							),
 							dueByDate: (
-								<DueByDate
+								<DisputeDueByDate
 									dueBy={ dispute.evidence_details.due_by }
-									daysRemaining={ daysRemaining }
 								/>
 							),
 						}
@@ -208,7 +169,6 @@ const InquirySteps: React.FC< Props > = ( {
 	dispute,
 	customer,
 	chargeCreated,
-	daysRemaining,
 } ) => {
 	let emailLink;
 	if ( customer?.email ) {
@@ -305,9 +265,8 @@ const InquirySteps: React.FC< Props > = ( {
 								/>
 							),
 							dueByDate: (
-								<DueByDate
+								<DisputeDueByDate
 									dueBy={ dispute.evidence_details.due_by }
-									daysRemaining={ daysRemaining }
 								/>
 							),
 						}
@@ -322,7 +281,6 @@ const DisputeStepsWrapper: React.FC< Props > = ( {
 	dispute,
 	customer,
 	chargeCreated,
-	daysRemaining,
 } ) => {
 	if ( isInquiry( dispute ) ) {
 		return (
@@ -330,7 +288,6 @@ const DisputeStepsWrapper: React.FC< Props > = ( {
 				dispute={ dispute }
 				customer={ customer }
 				chargeCreated={ chargeCreated }
-				daysRemaining={ daysRemaining }
 			/>
 		);
 	}
@@ -340,7 +297,6 @@ const DisputeStepsWrapper: React.FC< Props > = ( {
 			dispute={ dispute }
 			customer={ customer }
 			chargeCreated={ chargeCreated }
-			daysRemaining={ daysRemaining }
 		/>
 	);
 };
diff --git a/client/payment-details/dispute-details/dispute-summary-row.tsx b/client/payment-details/dispute-details/dispute-summary-row.tsx
index d288c863c86..dcd2bca4235 100644
--- a/client/payment-details/dispute-details/dispute-summary-row.tsx
+++ b/client/payment-details/dispute-details/dispute-summary-row.tsx
@@ -6,9 +6,8 @@
 import React from 'react';
 import moment from 'moment';
 import HelpOutlineIcon from 'gridicons/dist/help-outline';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { dateI18n } from '@wordpress/date';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -21,20 +20,13 @@ import { formatStringValue } from 'wcpay/utils';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import Paragraphs from 'wcpay/components/paragraphs';
 import { getDisputeDeductedBalanceTransaction } from 'wcpay/disputes/utils';
+import DisputeDueByDate from './dispute-due-by-date';
 
 interface Props {
 	dispute: Dispute;
-	daysRemaining: number;
 }
 
-const DisputeSummaryRow: React.FC< Props > = ( { dispute, daysRemaining } ) => {
-	const respondByDate = dispute.evidence_details?.due_by
-		? dateI18n(
-				'M j, Y, g:ia',
-				moment( dispute.evidence_details?.due_by * 1000 ).toISOString()
-		  )
-		: '–';
-
+const DisputeSummaryRow: React.FC< Props > = ( { dispute } ) => {
 	const disputeReason = formatStringValue(
 		reasons[ dispute.reason ]?.display || dispute.reason
 	);
@@ -105,34 +97,7 @@ const DisputeSummaryRow: React.FC< Props > = ( { dispute, daysRemaining } ) => {
 		{
 			title: __( 'Respond By', 'woocommerce-payments' ),
 			content: (
-				<span className="dispute-summary-row__response-date">
-					{ respondByDate }
-					<span
-						className={ classNames( {
-							'dispute-summary-row__response-date--urgent':
-								daysRemaining < 3,
-							'dispute-summary-row__response-date--warning':
-								daysRemaining < 7 && daysRemaining > 2,
-						} ) }
-					>
-						{ daysRemaining > 0 &&
-							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
-							) }
-
-						{ daysRemaining === 0 &&
-							__( '(Last day today)', 'woocommerce-payments' ) }
-						{ daysRemaining < 0 &&
-							__( '(Past due)', 'woocommerce-payments' ) }
-					</span>
-				</span>
+				<DisputeDueByDate dueBy={ dispute.evidence_details.due_by } />
 			),
 		},
 	];