Skip to content

Commit

Permalink
Create shared DisputeDueByDate component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jinksi
Jinksi committed Oct 3, 2023
1 parent 748f5c7 commit 5c8a008
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 92 deletions.
6 changes: 1 addition & 5 deletions client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
57 changes: 57 additions & 0 deletions client/payment-details/dispute-details/dispute-due-by-date.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
52 changes: 4 additions & 48 deletions client/payment-details/dispute-details/dispute-steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ) {
Expand Down Expand Up @@ -191,9 +153,8 @@ const DisputeSteps: React.FC< Props > = ( {
/>
),
dueByDate: (
<DueByDate
<DisputeDueByDate
dueBy={ dispute.evidence_details.due_by }
daysRemaining={ daysRemaining }
/>
),
}
Expand All @@ -208,7 +169,6 @@ const InquirySteps: React.FC< Props > = ( {
dispute,
customer,
chargeCreated,
daysRemaining,
} ) => {
let emailLink;
if ( customer?.email ) {
Expand Down Expand Up @@ -305,9 +265,8 @@ const InquirySteps: React.FC< Props > = ( {
/>
),
dueByDate: (
<DueByDate
<DisputeDueByDate
dueBy={ dispute.evidence_details.due_by }
daysRemaining={ daysRemaining }
/>
),
}
Expand All @@ -322,15 +281,13 @@ const DisputeStepsWrapper: React.FC< Props > = ( {
dispute,
customer,
chargeCreated,
daysRemaining,
} ) => {
if ( isInquiry( dispute ) ) {
return (
<InquirySteps
dispute={ dispute }
customer={ customer }
chargeCreated={ chargeCreated }
daysRemaining={ daysRemaining }
/>
);
}
Expand All @@ -340,7 +297,6 @@ const DisputeStepsWrapper: React.FC< Props > = ( {
dispute={ dispute }
customer={ customer }
chargeCreated={ chargeCreated }
daysRemaining={ daysRemaining }
/>
);
};
Expand Down
43 changes: 4 additions & 39 deletions client/payment-details/dispute-details/dispute-summary-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
);
Expand Down Expand Up @@ -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 } />
),
},
];
Expand Down

0 comments on commit 5c8a008

Please sign in to comment.