Skip to content

Commit

Permalink
Enable transaction dispute details feature for all merchants (remove …
Browse files Browse the repository at this point in the history 
…feature flag) (#7365)
  • Loading branch information
@Jinksi
Jinksi authored Oct 5, 2023
1 parent 471f56f commit 6a5f1fb
Show file tree
Hide file tree
Showing 9 changed files with 467 additions and 770 deletions.
4 changes: 4 additions & 0 deletions changelog/add-7289-remove-transaction-dispute-details-feature-flag
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: major
Type: add

Display dispute information, recommended resolution steps, and actions directly on the transaction details screen to help merchants with dispute resolution.
1 change: 0 additions & 1 deletion client/globals.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ declare global {
customSearch: boolean;
isAuthAndCaptureEnabled: boolean;
paymentTimeline: boolean;
isDisputeOnTransactionPageEnabled: boolean;
};
fraudServices: unknown[];
testMode: boolean;
Expand Down
13 changes: 2 additions & 11 deletions client/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import DepositDetailsPage from 'deposits/details';
import TransactionsPage from 'transactions';
import PaymentDetailsPage from 'payment-details';
import DisputesPage from 'disputes';
import LegacyDisputeDetailsPage from 'disputes/details';
import RedirectToTransactionDetails from 'disputes/redirect-to-transaction-details';
import DisputeEvidencePage from 'disputes/evidence';
import AdditionalMethodsPage from 'wcpay/additional-methods-setup';
Expand Down Expand Up @@ -152,14 +151,8 @@ addFilter(
capability: 'manage_woocommerce',
} );

// If disputes on transaction page feature is enabled, set up a soft
// redirect component; otherwise register the (legacy) dispute details page.
const isDisputeOnTransactionPageEnabled =
window.wcpaySettings.featureFlags.isDisputeOnTransactionPageEnabled;
pages.push( {
container: isDisputeOnTransactionPageEnabled
? RedirectToTransactionDetails
: LegacyDisputeDetailsPage,
container: RedirectToTransactionDetails,
path: '/payments/disputes/details',
wpOpenMenu: menuID,
breadcrumbs: [
Expand All @@ -171,9 +164,7 @@ addFilter(
__( 'Dispute details', 'woocommerce-payments' ),
],
navArgs: {
id: isDisputeOnTransactionPageEnabled
? 'wc-payments-disputes-details-legacy-redirect'
: 'wc-payments-disputes-details',
id: 'wc-payments-disputes-details-legacy-redirect',
parentPath: '/payments/disputes',
},
capability: 'manage_woocommerce',
Expand Down
7 changes: 2 additions & 5 deletions client/payment-details/summary/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,10 +167,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
charge.currency && balance.currency !== charge.currency;

const {
featureFlags: {
isAuthAndCaptureEnabled,
isDisputeOnTransactionPageEnabled,
},
featureFlags: { isAuthAndCaptureEnabled },
} = useContext( WCPaySettingsContext );

// We should only fetch the authorization data if the payment is marked for manual capture and it is not already captured.
Expand Down Expand Up @@ -463,7 +460,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
</LoadableBlock>
</CardBody>

{ isDisputeOnTransactionPageEnabled && charge.dispute && (
{ charge.dispute && (
<>
{ isAwaitingResponse( charge.dispute.status ) ? (
<DisputeAwaitingResponseDetails
Expand Down
305 changes: 29 additions & 276 deletions client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2418,297 +2418,50 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
</li>
</ul>
</div>
</div>
<div
aria-hidden="true"
class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
<div
aria-hidden="true"
class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
</div>
</div>
`;

exports[`PaymentDetailsSummary renders the information of a disputed charge 1`] = `
<div>
<div
class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
data-wp-c16t="true"
data-wp-component="Card"
>
<div
class="css-mgwsf4-View-Content em57xhy0"
>
<div
class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
class="components-flex components-card__footer components-card-footer transaction-details-dispute-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
data-wp-component="CardFooter"
>
<div
class="payment-details-summary"
class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
data-wp-c16t="true"
data-wp-component="Flex"
>
<div
class="payment-details-summary__section"
class="components-flex-item css-mw3lhz-View-Item-sx-Base em57xhy0"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<p
class="payment-details-summary__amount"
>
$20.00
<span
class="payment-details-summary__amount-currency"
>
usd
</span>
<span
class="chip chip-primary"
>
Disputed: Under review
</span>
</p>
<div
class="payment-details-summary__breakdown"
Good news! You won this dispute on -. The disputed amount and the dispute fee have been credited back to your account.
<a
href="https://woocommerce.com/document/woopayments/fraud-and-disputes/"
rel="noopener noreferrer"
target="_blank"
>
<p>
Deducted:
$-20.00
</p>
<p>
Fees:
$-15.70
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
aria-label="Fee breakdown"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</p>
<p>
Net:
$-15.70
</p>
</div>
Learn more about preventing disputes
</a>
.
</div>
<div
class="payment-details-summary__section"
class="components-flex-item transaction-details-dispute-footer__actions css-mw3lhz-View-Item-sx-Base em57xhy0"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<div
class="payment-details-summary__id"
<a
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fdisputes%2Fchallenge&id=dp_1"
>
Payment ID:
ch_38jdHA39KKA
</div>
<button
class="components-button is-secondary"
type="button"
>
View dispute details
</button>
</a>
</div>
</div>
</div>
<hr
aria-orientation="horizontal"
class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
data-wp-c16t="true"
data-wp-component="CardDivider"
role="separator"
/>
<div
class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
<ul
class="woocommerce-list woocommerce-list--horizontal"
role="menu"
>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Date
</span>
<span
class="woocommerce-list__item-content"
>
Sep 19, 2019, 5:24pm
</span>
</div>
</div>
</li>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Channel
</span>
<span
class="woocommerce-list__item-content"
>
<span>
Online
</span>
</span>
</div>
</div>
</li>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Customer
</span>
<span
class="woocommerce-list__item-content"
>
<a
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Ftransactions&search%5B0%5D=Customer%20name%20(mock%40example.com)"
>
Customer name
</a>
</span>
</div>
</div>
</li>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Order
</span>
<span
class="woocommerce-list__item-content"
>
<a
data-link-type="external"
href="https://somerandomorderurl.com/?edit_order=45981"
>
45981
</a>
</span>
</div>
</div>
</li>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Payment method
</span>
<span
class="woocommerce-list__item-content"
>
<span
class="payment-method-details"
>
<button
class="wcpay-tooltip__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<span
aria-label="Visa"
class="payment-method__brand payment-method__brand--visa"
/>
</div>
</button>
 •••• 
4242
</span>
</span>
</div>
</div>
</li>
<li
class="woocommerce-list__item"
>
<div
class="woocommerce-list__item-inner"
>
<div
class="woocommerce-list__item-text"
>
<span
class="woocommerce-list__item-title"
>
Risk evaluation
</span>
<span
class="woocommerce-list__item-content"
>
Normal
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div
aria-hidden="true"
Expand Down
Loading

0 comments on commit 6a5f1fb

Please sign in to comment.