Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add correct inquiry docs link to active dispute/inquiry notice in transactions screen #7277

Merged
merged 10 commits into from
Sep 26, 2023
Merged

Add correct inquiry docs link to active dispute/inquiry notice in transactions screen #7277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8e28971
rename urgent => isUrgent for clarity + clarify comment
Sep 25, 2023
fd803e1
refactor so inquiry variations are easier to read +
Sep 25, 2023
9bc6046
update docs links to correct urls for disputes vs. inquiries
Sep 25, 2023
6de1f35
use ExternalLink to hint that docs links open in new window/tab
Sep 25, 2023
1d4af95
add changelog
Sep 26, 2023
2da525b
Merge branch 'develop' into fix/7241-update-live-dispute-docs-links-i…
haszari Sep 26, 2023
af3d03a
Remove unused import `isAwaitingResponse`
Jinksi Sep 26, 2023
bac3892
Merge branch 'develop' into fix/7241-update-live-dispute-docs-links-i…
haszari Sep 26, 2023
7dc77b0
fix changelog - changes are behind feature flag
Sep 26, 2023
5ca7e88
remove redundant props now supplied by ExternalLink
haszari Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/fix-7241-update-live-dispute-docs-links-in-transaction-detail
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Comment: Behind a feature flag: Update documentation links (new/changed docs content) when notifying merchant that a dispute needs response.
8 changes: 2 additions & 6 deletions client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,7 @@ import type { Dispute } from 'wcpay/types/disputes';
import type { ChargeBillingDetails } from 'wcpay/types/charges';
import wcpayTracks from 'tracks';
import { useDisputeAccept } from 'wcpay/data';
import {
getDisputeFeeFormatted,
isAwaitingResponse,
isInquiry,
} from 'wcpay/disputes/utils';
import { getDisputeFeeFormatted, isInquiry } from 'wcpay/disputes/utils';
import { getAdminUrl } from 'wcpay/utils';
import DisputeNotice from './dispute-notice';
import IssuerEvidenceList from './evidence-list';
Expand Down Expand Up @@ -70,7 +66,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
<CardBody className="transaction-details-dispute-details-body">
<DisputeNotice
dispute={ dispute }
urgent={ countdownDays <= 2 }
isUrgent={ countdownDays <= 2 }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've renamed this to isUrgent so it's super obvious it's a boolean. I'm not sure if we have a relevant guideline but this is common in WP code (is my understanding).

I saw isDismissible in block editor JS guidelines so this seems aligned with convention.

/>
{ hasStagedEvidence && (
<InlineNotice icon={ edit } isDismissible={ false }>
Expand Down
60 changes: 32 additions & 28 deletions client/payment-details/dispute-details/dispute-notice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/
import React from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { ExternalLink } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';

/**
Expand All @@ -18,52 +19,55 @@ import { isInquiry } from 'wcpay/disputes/utils';

interface DisputeNoticeProps {
dispute: Dispute;
urgent: boolean;
isUrgent: boolean;
}

const DisputeNotice: React.FC< DisputeNoticeProps > = ( {
dispute,
urgent,
isUrgent,
} ) => {
const clientClaim =
const shopperDisputeReason =
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed this, claim is less clear than dispute reason IMO. The claim is part of the reason, and we're displaying it in the UI as a reason as much as a "claim". We use reason more often so hopefully this is clearer.

reasons[ dispute.reason ]?.claim ??
__(
'The cardholder claims this is an unrecognized charge.',
'woocommerce-payments'
);

const noticeText = isInquiry( dispute )
? /* translators: <a> link to dispute documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
__(
// eslint-disable-next-line max-len
'<strong>%s</strong> You can challenge their claim if you believe it’s invalid. Not responding will result in an automatic loss. <a>Learn more</a>',
'woocommerce-payments'
)
: /* translators: <a> link to dispute documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
__(
// eslint-disable-next-line max-len
'<strong>%s</strong> Challenge the dispute if you believe the claim is invalid, or accept to forfeit the funds and pay the dispute fee. Non-response will result in an automatic loss. <a>Learn more about responding to disputes</a>',
'woocommerce-payments'
);
/* translators: <a> link to dispute documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
let noticeText = __(
'<strong>%s</strong> Challenge the dispute if you believe the claim is invalid, ' +
'or accept to forfeit the funds and pay the dispute fee. ' +
'Non-response will result in an automatic loss. <a>Learn more about responding to disputes</a>',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split these over multiple lines so we don't need to eslint-disable-next-line-max-len. Also for readability.

'woocommerce-payments'
);
let learnMoreDocsUrl =
'https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#responding';

if ( isInquiry( dispute ) ) {
/* translators: <a> link to dispute inquiry documentation. %s is the clients claim for the dispute, eg "The cardholder claims this is an unrecognized charge." */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block overrides the string + url for inquiries. Hopefully makes this easier to read/understand – default is dispute, details are overridden for inquiries.

noticeText = __(
'<strong>%s</strong> You can challenge their claim if you believe it’s invalid. ' +
'Not responding will result in an automatic loss. <a>Learn more about payment inquiries</a>',
'woocommerce-payments'
);
learnMoreDocsUrl =
'https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#inquiries';
}

return (
<InlineNotice
icon
status={ urgent ? 'error' : 'warning' }
status={ isUrgent ? 'error' : 'warning' }
className="dispute-notice"
isDismissible={ false }
>
{ createInterpolateElement( sprintf( noticeText, clientClaim ), {
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
target="_blank"
rel="noopener noreferrer"
href="https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#section-3"
/>
),
strong: <strong />,
} ) }
{ createInterpolateElement(
sprintf( noticeText, shopperDisputeReason ),
{
a: <ExternalLink href={ learnMoreDocsUrl } />,
strong: <strong />,
}
) }
</InlineNotice>
);
};
Expand Down
Loading