From 0f6c3d71e91a4f404fc21c85e60ba0be5c65e48e Mon Sep 17 00:00:00 2001 From: Bruce Aldridge Date: Wed, 27 Sep 2023 13:35:54 +1300 Subject: [PATCH 1/8] Add CTA actions for Inquiries --- changelog/add-7193-dispute-cta-for-inquries | 5 + .../dispute-awaiting-response-details.tsx | 145 +++++++++++++----- client/payment-details/summary/index.tsx | 1 + 3 files changed, 113 insertions(+), 38 deletions(-) create mode 100644 changelog/add-7193-dispute-cta-for-inquries diff --git a/changelog/add-7193-dispute-cta-for-inquries b/changelog/add-7193-dispute-cta-for-inquries new file mode 100644 index 00000000000..3650c8263aa --- /dev/null +++ b/changelog/add-7193-dispute-cta-for-inquries @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Add CTA for Inquiries, behind a feature flag. + + 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 94716e59881..bae597fd777 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -6,7 +6,8 @@ import React, { useState } from 'react'; import moment from 'moment'; import { __, sprintf } from '@wordpress/i18n'; -import { backup, edit, lock } from '@wordpress/icons'; +import { backup, edit, lock, chevronRightSmall } from '@wordpress/icons'; +import { useDispatch } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; import { @@ -39,9 +40,13 @@ import './style.scss'; interface Props { dispute: Dispute; + orderDetails: OrderDetails | null; } -const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { +const DisputeAwaitingResponseDetails: React.FC< Props > = ( { + dispute, + orderDetails, +} ) => { const { doAccept, isLoading } = useDisputeAccept( dispute ); const [ isModalOpen, setModalOpen ] = useState( false ); @@ -49,12 +54,30 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { const dueBy = moment.unix( dispute.evidence_details?.due_by ?? 0 ); const countdownDays = Math.floor( dueBy.diff( now, 'days', true ) ); const hasStagedEvidence = dispute.evidence_details?.has_evidence; - const showDisputeActions = ! isInquiry( dispute ); + const { createErrorNotice } = useDispatch( 'core/notices' ); const onModalClose = () => { setModalOpen( false ); }; + const viewOrder = () => { + if ( orderDetails?.url ) { + window.location.href = orderDetails?.url; + return; + } + + createErrorNotice( + __( + 'Unable to view order. Order not found.', + 'woocommerce-payments' + ) + ); + }; + + const challengeButtonDefaultText = ! isInquiry( dispute ) + ? __( 'Challenge dispute', 'woocommerce-payments' ) + : __( 'Submit Evidence', 'woocommerce-payments' ); + return (
@@ -88,7 +111,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { ) } { /* Dispute Actions */ } - { showDisputeActions && ( + {
= ( { dispute } ) => { 'Continue with challenge', 'woocommerce-payments' ) - : __( - 'Challenge dispute', - 'woocommerce-payments' - ) } + : challengeButtonDefaultText } @@ -142,15 +162,25 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { setModalOpen( true ); } } > - { __( - 'Accept dispute', - 'woocommerce-payments' - ) } + { isInquiry( dispute ) + ? __( + 'Issue refund', + 'woocommerce-payments' + ) + : __( + 'Accept dispute', + 'woocommerce-payments' + ) } + { /** Accept dispute modal */ } { isModalOpen && ( @@ -167,22 +197,27 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { - { createInterpolateElement( - sprintf( - /* translators: %s: dispute fee, : emphasis HTML element. */ - __( - 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', + { isInquiry( dispute ) + ? __( + 'Issuing a refund will close the inquiry, returning the amount in question back to the cardholder. No additional fees apply.', 'woocommerce-payments' - ), - getDisputeFeeFormatted( - dispute, - true - ) ?? '-' - ), - { - em: , - } - ) } + ) + : createInterpolateElement( + sprintf( + /* translators: %s: dispute fee, : emphasis HTML element. */ + __( + 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', + 'woocommerce-payments' + ), + getDisputeFeeFormatted( + dispute, + true + ) ?? '-' + ), + { + em: , + } + ) } @@ -190,12 +225,33 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute } ) => { - { __( - 'Accepting the dispute is final and cannot be undone.', - 'woocommerce-payments' - ) } + { isInquiry( dispute ) + ? __( + 'This action is final and cannot be undone.', + 'woocommerce-payments' + ) + : __( + 'Accepting the dispute is final and cannot be undone.', + 'woocommerce-payments' + ) } + { isInquiry( dispute ) && ( + + + + + + { __( + 'You will be taken to the order, where you must complete the refund process manually.', + 'woocommerce-payments' + ) } + + + ) } = ( { dispute } ) => { } ); setModalOpen( false ); - doAccept(); + /** + * Handle the primary modal action. + * If it's an inquiry, redirect to the order page; otherwise, continue with the default dispute acceptance. + */ + if ( isInquiry( dispute ) ) { + viewOrder(); + } else { + doAccept(); + } } } > - { __( - 'Accept dispute', - 'woocommerce-payments' - ) } + { isInquiry( dispute ) + ? __( + 'View Order to Issue Refund', + 'woocommerce-payments' + ) + : __( + 'Accept dispute', + 'woocommerce-payments' + ) } ) }
- ) } + }
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index fb21a1d2223..648cc2e0ffb 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -468,6 +468,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( { { isAwaitingResponse( charge.dispute.status ) ? ( ) : ( From 7f24785e243672d8cdbcd423cff8f2dcf62121a8 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 28 Sep 2023 09:01:54 +1000 Subject: [PATCH 2/8] Fix whitespace character JS linter error --- .../dispute-details/dispute-awaiting-response-details.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8d44397e1ae..012aa4baca2 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -47,7 +47,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute, customer, chargeCreated, - orderDetails, + orderDetails, } ) => { const { doAccept, isLoading } = useDisputeAccept( dispute ); const [ isModalOpen, setModalOpen ] = useState( false ); From 8a6166c91b3edb2060a24965f9357656f4754565 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 28 Sep 2023 11:34:25 +1000 Subject: [PATCH 3/8] Mock @wordpress/data to fix broken tests --- .../payment-details/summary/test/index.test.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/client/payment-details/summary/test/index.test.tsx b/client/payment-details/summary/test/index.test.tsx index 8f3647c643f..0088cfee3e7 100755 --- a/client/payment-details/summary/test/index.test.tsx +++ b/client/payment-details/summary/test/index.test.tsx @@ -50,6 +50,22 @@ jest.mock( 'wcpay/data', () => ( { } ) ), } ) ); +jest.mock( '@wordpress/data', () => ( { + createRegistryControl: jest.fn(), + dispatch: jest.fn( () => ( { + setIsMatching: jest.fn(), + onLoad: jest.fn(), + } ) ), + registerStore: jest.fn(), + select: jest.fn(), + useDispatch: jest.fn( () => ( { + createErrorNotice: jest.fn(), + } ) ), + useSelect: jest.fn( () => ( { getNotices: jest.fn() } ) ), + withDispatch: jest.fn( () => jest.fn() ), + withSelect: jest.fn( () => jest.fn() ), +} ) ); + const mockUseAuthorization = useAuthorization as jest.MockedFunction< typeof useAuthorization >; From 24d86f5af7174dced7ee82c4d2759b129a565486 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 28 Sep 2023 11:47:31 +1000 Subject: [PATCH 4/8] Add test for rendering inquiries awaiting response --- .../summary/test/index.test.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/client/payment-details/summary/test/index.test.tsx b/client/payment-details/summary/test/index.test.tsx index 0088cfee3e7..399f73ee1d8 100755 --- a/client/payment-details/summary/test/index.test.tsx +++ b/client/payment-details/summary/test/index.test.tsx @@ -808,6 +808,29 @@ describe( 'PaymentDetailsSummary', () => { ).toBeNull(); } ); + test( 'correctly renders dispute details for "warning_needs_response" inquiry disputes', () => { + const charge = getBaseCharge(); + charge.disputed = true; + charge.dispute = getBaseDispute(); + charge.dispute.status = 'warning_needs_response'; + + renderCharge( charge ); + + // Dispute Notice + screen.getByText( + /The cardholder claims this is an unauthorized transaction/, + { ignore: '.a11y-speak-region' } + ); + + // Actions + screen.getByRole( 'button', { + name: /Submit evidence/i, + } ); + screen.getByRole( 'button', { + name: /Issue refund/i, + } ); + } ); + test( 'correctly renders dispute details for "warning_under_review" inquiry disputes', () => { const charge = getBaseCharge(); charge.disputed = true; From a6ae0f32f59ea2447fed72aa1cec20872b9e5798 Mon Sep 17 00:00:00 2001 From: Bruce Aldridge Date: Fri, 29 Sep 2023 17:26:02 +1300 Subject: [PATCH 5/8] Applying PR feedback, attempting to make code more readable --- .../dispute-awaiting-response-details.tsx | 238 +++++++++++------- client/payment-details/summary/index.tsx | 2 +- client/tracks/index.js | 2 + 3 files changed, 147 insertions(+), 95 deletions(-) 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 012aa4baca2..9ce11d02edd 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -6,7 +6,13 @@ import React, { useState } from 'react'; import moment from 'moment'; import { __, sprintf } from '@wordpress/i18n'; -import { backup, edit, lock, chevronRightSmall } from '@wordpress/icons'; +import { + backup, + edit, + lock, + chevronRightSmall, + arrowRight, +} from '@wordpress/icons'; import { useDispatch } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; @@ -40,14 +46,123 @@ interface Props { dispute: Dispute; customer: ChargeBillingDetails | null; chargeCreated: number; - orderDetails: OrderDetails | null; + orderUrl: string | undefined; +} + +/** + * The lines of text to display in the modal to confirm acceptance / refunding of the dispute / inquiry. + */ +interface ModalLineItem { + icon: JSX.Element; + description: string | JSX.Element; +} + +interface AcceptDisputeProps { + /** + * The label for the button that opens the modal. + */ + acceptButtonLabel: string; + /** + * The event to track when the button that opens the modal is clicked. + */ + acceptButtonTracksEvent: string; + /** + * The title of the modal. + */ + modalTitle: string; + /** + * The lines of text to display in the modal. + */ + modalLines: ModalLineItem[]; + /** + * The label for the primary button in the modal to Accept / Refund the dispute / inquiry. + */ + modalButtonLabel: string; + /** + * The event to track when the primary button in the modal is clicked. + */ + modalButtonTracksEvent: string; +} + +/** + * Disputes and Inquiries have different text for buttons and the modal. + * They also have different icons and tracks events. This function returns the correct props. + * + * @param dispute + */ +function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps { + const isDispute = ! isInquiry( dispute ); + + if ( isDispute ) { + return { + acceptButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), + acceptButtonTracksEvent: + wcpayTracks.events.DISPUTE_ACCEPT_MODAL_VIEW, + modalTitle: __( 'Accept the dispute?', 'woocommerce-payments' ), + modalLines: [ + { + icon: , + description: createInterpolateElement( + sprintf( + /* translators: %s: dispute fee, : emphasis HTML element. */ + __( + 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', + 'woocommerce-payments' + ), + getDisputeFeeFormatted( dispute, true ) ?? '-' + ), + { + em: , + } + ), + }, + { + icon: , + description: __( + 'This action is final and cannot be undone.', + 'woocommerce-payments' + ), + }, + ], + modalButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), + modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK, + }; + } + + return { + acceptButtonLabel: __( 'Issue refund', 'woocommerce-payments' ), + acceptButtonTracksEvent: + wcpayTracks.events.DISPUTE_INQUIRY_REFUND_MODAL_VIEW, + modalTitle: __( 'Issue a refund?', 'woocommerce-payments' ), + modalLines: [ + { + icon: , + description: __( + 'Issuing a refund will close the inquiry, returning the amount in question back to the cardholder. No additional fees apply.', + 'woocommerce-payments' + ), + }, + { + icon: , + description: __( + 'You will be taken to the order, where you must complete the refund process manually.', + 'woocommerce-payments' + ), + }, + ], + modalButtonLabel: __( + 'View order to issue refund', + 'woocommerce-payments' + ), + modalButtonTracksEvent: wcpayTracks.events.DISPUTE_INQUIRY_REFUND_CLICK, + }; } const DisputeAwaitingResponseDetails: React.FC< Props > = ( { dispute, customer, chargeCreated, - orderDetails, + orderUrl, } ) => { const { doAccept, isLoading } = useDisputeAccept( dispute ); const [ isModalOpen, setModalOpen ] = useState( false ); @@ -65,8 +180,8 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { }; const viewOrder = () => { - if ( orderDetails?.url ) { - window.location.href = orderDetails?.url; + if ( orderUrl ) { + window.location.href = orderUrl; return; } @@ -78,9 +193,11 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { ); }; - const challengeButtonDefaultText = ! isInquiry( dispute ) - ? __( 'Challenge dispute', 'woocommerce-payments' ) - : __( 'Submit Evidence', 'woocommerce-payments' ); + const disputeAcceptAction = getAcceptDisputeProps( dispute ); + + const challengeButtonDefaultText = isInquiry( dispute ) + ? __( 'Submit evidence', 'woocommerce-payments' ) + : __( 'Challenge dispute', 'woocommerce-payments' ); return (
@@ -157,8 +274,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { disabled={ isLoading } onClick={ () => { wcpayTracks.recordEvent( - wcpayTracks.events - .DISPUTE_ACCEPT_MODAL_VIEW, + disputeAcceptAction.acceptButtonTracksEvent, { dispute_status: dispute.status, } @@ -166,25 +282,13 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { setModalOpen( true ); } } > - { isInquiry( dispute ) - ? __( - 'Issue refund', - 'woocommerce-payments' - ) - : __( - 'Accept dispute', - 'woocommerce-payments' - ) } + { disputeAcceptAction.acceptButtonLabel } { /** Accept dispute modal */ } { isModalOpen && ( @@ -196,65 +300,18 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { ) }

- - - - - - { isInquiry( dispute ) - ? __( - 'Issuing a refund will close the inquiry, returning the amount in question back to the cardholder. No additional fees apply.', - 'woocommerce-payments' - ) - : createInterpolateElement( - sprintf( - /* translators: %s: dispute fee, : emphasis HTML element. */ - __( - 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', - 'woocommerce-payments' - ), - getDisputeFeeFormatted( - dispute, - true - ) ?? '-' - ), - { - em: , - } - ) } - - - - - - - - { isInquiry( dispute ) - ? __( - 'This action is final and cannot be undone.', - 'woocommerce-payments' - ) - : __( - 'Accepting the dispute is final and cannot be undone.', - 'woocommerce-payments' - ) } - - - { isInquiry( dispute ) && ( - - - - - - { __( - 'You will be taken to the order, where you must complete the refund process manually.', - 'woocommerce-payments' - ) } - - + + { disputeAcceptAction.modalLines.map( + ( line, key ) => ( + + + { line.icon } + + + { line.description } + + + ) ) } = ( { variant="primary" onClick={ () => { wcpayTracks.recordEvent( - wcpayTracks.events - .DISPUTE_ACCEPT_CLICK, + disputeAcceptAction.modalButtonTracksEvent, { dispute_status: dispute.status, @@ -293,15 +349,9 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( { } } } > - { isInquiry( dispute ) - ? __( - 'View Order to Issue Refund', - 'woocommerce-payments' - ) - : __( - 'Accept dispute', - 'woocommerce-payments' - ) } + { + disputeAcceptAction.modalButtonLabel + } diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index f23e165ef27..2cf9d668b75 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -470,7 +470,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( { dispute={ charge.dispute } customer={ charge.billing_details } chargeCreated={ charge.created } - orderDetails={ charge.order } + orderUrl={ charge.order?.url } /> ) : ( diff --git a/client/tracks/index.js b/client/tracks/index.js index 4006c197e6e..4a109a71562 100644 --- a/client/tracks/index.js +++ b/client/tracks/index.js @@ -71,6 +71,8 @@ const events = { DISPUTE_CHALLENGE_CLICK: 'wcpay_dispute_challenge_click', DISPUTE_ACCEPT_CLICK: 'wcpay_dispute_accept_click', DISPUTE_ACCEPT_MODAL_VIEW: 'wcpay_dispute_accept_modal_view', + DISPUTE_INQUIRY_REFUND_MODAL_VIEW: 'wcpay_dispute_modal_refund_click', + DISPUTE_INQUIRY_REFUND_CLICK: 'wcpay_dispute_modal_refund_click', ORDER_DISPUTE_NOTICE_BUTTON_CLICK: 'wcpay_order_dispute_notice_action_click', OVERVIEW_BALANCES_CURRENCY_CLICK: From 45569512206d0709860cbe9b3b6c53e816b1c544 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Tue, 3 Oct 2023 10:12:18 +1000 Subject: [PATCH 6/8] Remove unused icon import --- .../dispute-details/dispute-awaiting-response-details.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) 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 9ce11d02edd..b38f43ec524 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -6,13 +6,7 @@ import React, { useState } from 'react'; import moment from 'moment'; import { __, sprintf } from '@wordpress/i18n'; -import { - backup, - edit, - lock, - chevronRightSmall, - arrowRight, -} from '@wordpress/icons'; +import { backup, edit, lock, arrowRight } from '@wordpress/icons'; import { useDispatch } from '@wordpress/data'; import { createInterpolateElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; From b3c605ce71bc91327da74fd5f96b02006b1f9671 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Tue, 3 Oct 2023 10:21:08 +1000 Subject: [PATCH 7/8] Reorder inqury/dispute return to improve readability --- .../dispute-awaiting-response-details.tsx | 70 +++++++++---------- 1 file changed, 34 insertions(+), 36 deletions(-) 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 b38f43ec524..394d014df33 100644 --- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx +++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx @@ -85,70 +85,68 @@ interface AcceptDisputeProps { * @param dispute */ function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps { - const isDispute = ! isInquiry( dispute ); - - if ( isDispute ) { + if ( isInquiry( dispute ) ) { return { - acceptButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), + acceptButtonLabel: __( 'Issue refund', 'woocommerce-payments' ), acceptButtonTracksEvent: - wcpayTracks.events.DISPUTE_ACCEPT_MODAL_VIEW, - modalTitle: __( 'Accept the dispute?', 'woocommerce-payments' ), + wcpayTracks.events.DISPUTE_INQUIRY_REFUND_MODAL_VIEW, + modalTitle: __( 'Issue a refund?', 'woocommerce-payments' ), modalLines: [ { icon: , - description: createInterpolateElement( - sprintf( - /* translators: %s: dispute fee, : emphasis HTML element. */ - __( - 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', - 'woocommerce-payments' - ), - getDisputeFeeFormatted( dispute, true ) ?? '-' - ), - { - em: , - } + description: __( + 'Issuing a refund will close the inquiry, returning the amount in question back to the cardholder. No additional fees apply.', + 'woocommerce-payments' ), }, { - icon: , + icon: , description: __( - 'This action is final and cannot be undone.', + 'You will be taken to the order, where you must complete the refund process manually.', 'woocommerce-payments' ), }, ], - modalButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), - modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK, + modalButtonLabel: __( + 'View order to issue refund', + 'woocommerce-payments' + ), + modalButtonTracksEvent: + wcpayTracks.events.DISPUTE_INQUIRY_REFUND_CLICK, }; } return { - acceptButtonLabel: __( 'Issue refund', 'woocommerce-payments' ), - acceptButtonTracksEvent: - wcpayTracks.events.DISPUTE_INQUIRY_REFUND_MODAL_VIEW, - modalTitle: __( 'Issue a refund?', 'woocommerce-payments' ), + acceptButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), + acceptButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_MODAL_VIEW, + modalTitle: __( 'Accept the dispute?', 'woocommerce-payments' ), modalLines: [ { icon: , - description: __( - 'Issuing a refund will close the inquiry, returning the amount in question back to the cardholder. No additional fees apply.', - 'woocommerce-payments' + description: createInterpolateElement( + sprintf( + /* translators: %s: dispute fee, : emphasis HTML element. */ + __( + 'Accepting the dispute marks it as Lost. The disputed amount will be returned to the cardholder, with a %s dispute fee deducted from your account.', + 'woocommerce-payments' + ), + getDisputeFeeFormatted( dispute, true ) ?? '-' + ), + { + em: , + } ), }, { - icon: , + icon: , description: __( - 'You will be taken to the order, where you must complete the refund process manually.', + 'This action is final and cannot be undone.', 'woocommerce-payments' ), }, ], - modalButtonLabel: __( - 'View order to issue refund', - 'woocommerce-payments' - ), - modalButtonTracksEvent: wcpayTracks.events.DISPUTE_INQUIRY_REFUND_CLICK, + modalButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ), + modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK, }; } From 5cb34476a04869f5bb086ba3de422abba3940e4d Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Tue, 3 Oct 2023 12:25:04 +1000 Subject: [PATCH 8/8] Update values of event names DISPUTE_INQUIRY_REFUND_* --- client/tracks/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/tracks/index.js b/client/tracks/index.js index 4a109a71562..4b065bceefd 100644 --- a/client/tracks/index.js +++ b/client/tracks/index.js @@ -71,8 +71,9 @@ const events = { DISPUTE_CHALLENGE_CLICK: 'wcpay_dispute_challenge_click', DISPUTE_ACCEPT_CLICK: 'wcpay_dispute_accept_click', DISPUTE_ACCEPT_MODAL_VIEW: 'wcpay_dispute_accept_modal_view', - DISPUTE_INQUIRY_REFUND_MODAL_VIEW: 'wcpay_dispute_modal_refund_click', - DISPUTE_INQUIRY_REFUND_CLICK: 'wcpay_dispute_modal_refund_click', + DISPUTE_INQUIRY_REFUND_CLICK: 'wcpay_dispute_inquiry_refund_click', + DISPUTE_INQUIRY_REFUND_MODAL_VIEW: + 'wcpay_dispute_inquiry_refund_modal_view', ORDER_DISPUTE_NOTICE_BUTTON_CLICK: 'wcpay_order_dispute_notice_action_click', OVERVIEW_BALANCES_CURRENCY_CLICK: